fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 02:18: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/floating-menus/ColorPicker.vue
+1 -1
View File
@@ -135,7 +135,7 @@ export default defineComponent({
const hsva = this.color.toHSVA();
return {
draggingPickerTrack: undefined as HTMLElement | undefined,
draggingPickerTrack: undefined as HTMLDivElement | undefined,
hue: hsva.h,
saturation: hsva.s,
value: hsva.v,
frontend/src/components/floating-menus/DialogModal.vue
+2 -2
View File
@@ -84,8 +84,8 @@ export default defineComponent({
},
mounted() {
// Focus the first button in the popup
const element = this.$el as Element | undefined;
const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") || element?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
const dialogModal: HTMLDivElement | undefined = this.$el;
const emphasizedOrFirstButton = (dialogModal?.querySelector("[data-emphasized]") || dialogModal?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
emphasizedOrFirstButton?.focus();
},
components: {
frontend/src/components/floating-menus/EyedropperPreview.vue
+3 -1
View File
@@ -113,7 +113,9 @@ export default defineComponent({
},
methods: {
displayImageDataPreview(imageData: ImageData | undefined) {
const canvas = this.$refs.zoomPreviewCanvas as HTMLCanvasElement;
const canvas = this.$refs.zoomPreviewCanvas as HTMLCanvasElement | undefined;
if (!canvas) return;
canvas.width = ZOOM_WINDOW_DIMENSIONS;
canvas.height = ZOOM_WINDOW_DIMENSIONS;
const context = canvas.getContext("2d");
frontend/src/components/floating-menus/MenuList.vue
+7 -6
View File
@@ -46,7 +46,7 @@
:direction="'TopRight'"
:entries="entry.children"
v-bind="{ minWidth, drawIcon, scrollableY }"
:ref="(ref: MenuListInstance) => ref && (entry.ref = ref)"
:ref="(ref: MenuListInstance): void => (ref && (entry.ref = ref), undefined)"
/>
</LayoutRow>
</template>
@@ -204,15 +204,17 @@ const MenuList = defineComponent({
this.$emit("update:open", newIsOpen);
},
entries() {
const floatingMenu = this.$refs.floatingMenu as typeof FloatingMenu;
floatingMenu.measureAndEmitNaturalWidth();
(this.$refs.floatingMenu as typeof FloatingMenu | undefined)?.measureAndEmitNaturalWidth();
},
drawIcon() {
const floatingMenu = this.$refs.floatingMenu as typeof FloatingMenu;
floatingMenu.measureAndEmitNaturalWidth();
(this.$refs.floatingMenu as typeof FloatingMenu | undefined)?.measureAndEmitNaturalWidth();
},
},
methods: {
scrollViewTo(distanceDown: number): void {
const scroller: HTMLDivElement | undefined = (this.$refs.scroller as typeof LayoutCol | undefined)?.$el;
scroller?.scrollTo(0, distanceDown);
},
onEntryClick(menuListEntry: MenuListEntry): void {
// Call the action if available
if (menuListEntry.action) menuListEntry.action();
@@ -242,7 +244,6 @@ const MenuList = defineComponent({
return this.open;
},
/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
keydown(e: KeyboardEvent, submenu: boolean): boolean {
// Interactive menus should keep the active entry the same as the highlighted one