fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 16:28:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up Vue component refs (#813)

Browse Source 
* Clean up Vue component refs

* Second pass of code improvements
This commit is contained in:
Keavon Chambers
2022-10-24 20:02:49 -07:00
parent cee1add3a4
commit d2e23d6b15
21 changed files with 253 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/FontInput.vue
+13 -18
View File
@@ -5,7 +5,6 @@
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</LayoutRow>
<MenuList
ref="menulist"
v-model:activeEntry="activeEntry"
v-model:open="open"
:entries="[entries]"
@@ -13,6 +12,7 @@
:virtualScrollingEntryHeight="isStyle ? 0 : 20"
:scrollableY="true"
@naturalWidth="(newNaturalWidth: number) => (isStyle && (minWidth = newNaturalWidth))"
ref="menuList"
></MenuList>
</LayoutRow>
</template>
@@ -74,8 +74,6 @@ import { defineComponent, nextTick, type PropType } from "vue";
import { type MenuListEntry } from "@/wasm-communication/messages";
import MenuList from "@/components/floating-menus/MenuList.vue";
import type FloatingMenu from "@/components/layout/FloatingMenu.vue";
import type LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -105,29 +103,26 @@ export default defineComponent({
this.highlighted = this.activeEntry;
},
methods: {
floatingMenu() {
return this.$refs.floatingMenu as typeof FloatingMenu;
},
scroller() {
return ((this.$refs.menulist as typeof MenuList).$refs.scroller as typeof LayoutCol)?.$el as HTMLElement;
},
async setOpen() {
async setOpen(): Promise<void> {
this.open = true;
// Scroll to the active entry (the scroller div does not yet exist so we must wait for vue to render)
// Scroll to the active entry (the scroller div does not yet exist so we must wait for Vue to render)
await nextTick();
if (this.activeEntry) {
const index = this.entries.indexOf(this.activeEntry);
this.scroller()?.scrollTo(0, Math.max(0, index * 20 - 190));
(this.$refs.menuList as typeof MenuList | undefined)?.scrollViewTo(0, Math.max(0, index * 20 - 190));
}
},
toggleOpen() {
if (this.disabled) return;
this.open = !this.open;
if (this.open) this.setOpen();
toggleOpen(): void {
if (!this.disabled) {
this.open = !this.open;
if (this.open) this.setOpen();
}
},
keydown(e: KeyboardEvent) {
(this.$refs.menulist as typeof MenuList).keydown(e, false);
keydown(e: KeyboardEvent): void {
(this.$refs.menuList as typeof MenuList | undefined)?.keydown(e, false);
},
async selectFont(newName: string): Promise<void> {
let fontFamily;