fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-20 11:28:30 +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

15
frontend/src/components/window/workspace/Panel.vue
View File

@@ -1,6 +1,6 @@
<template>
<LayoutCol class="panel">
<LayoutRow class="tab-bar" data-tab-bar :class="{ 'min-widths': tabMinWidths }">
<LayoutRow class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
<LayoutRow class="tab-group" :scrollableX="true">
<LayoutRow
v-for="(tabLabel, tabIndex) in tabLabels"
@@ -13,7 +13,7 @@
data-tab
>
<span>{{ tabLabel.name }}</span>
<IconButton :action="(e: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
<IconButton :action="(e?: MouseEvent) => (e?.stopPropagation(), closeAction?.(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
</LayoutRow>
</LayoutRow>
<PopoverButton :icon="'VerticalEllipsis'">
@@ -210,7 +210,7 @@
</style>
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import { defineComponent, nextTick, type PropType } from "vue";
import { platformIsMac } from "@/utility-functions/platform";
@@ -268,6 +268,15 @@ export default defineComponent({
if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
return reservedKey ? [CONTROL, ALT] : [CONTROL];
},
async scrollTabIntoView(newIndex: number) {
await nextTick();
const panel: HTMLDivElement | undefined = this.$el;
if (!panel) return;
const newActiveTab = panel.querySelectorAll("[data-tab]")[newIndex] as HTMLDivElement | undefined;
newActiveTab?.scrollIntoView();
},
},
components: {
IconLabel,

28
frontend/src/components/window/workspace/Workspace.vue
View File

@@ -7,11 +7,11 @@
:panelType="portfolio.state.documents.length > 0 ? 'Document' : undefined"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="portfolio.state.documents.map((doc) => ({ name: doc.displayName, tooltip: doc.id }))"
:tabLabels="documentTabLabels"
:clickAction="(tabIndex: number) => editor.instance.selectDocument(portfolio.state.documents[tabIndex].id)"
:closeAction="(tabIndex: number) => editor.instance.closeDocumentWithConfirmation(portfolio.state.documents[tabIndex].id)"
:tabActiveIndex="portfolio.state.activeDocumentIndex"
ref="documentsPanel"
ref="documentPanel"
/>
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="(e: PointerEvent) => resizePanel(e)" v-if="nodeGraphVisible"></LayoutRow>
@@ -64,7 +64,7 @@
</style>
<script lang="ts">
import { defineComponent, nextTick } from "vue";
import { defineComponent } from "vue";
import DialogModal from "@/components/floating-menus/DialogModal.vue";
import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -82,12 +82,22 @@ export default defineComponent({
nodeGraphVisible() {
return this.workspace.state.nodeGraphVisible;
},
documentTabLabels() {
return this.portfolio.state.documents.map((doc) => {
const name = doc.displayName;
if (!this.editor.instance.inDevelopmentMode()) return { name };
const tooltip = `Document ID ${doc.id}`;
return { name, tooltip };
});
},
},
methods: {
resizePanel(event: PointerEvent) {
const gutter = event.target as HTMLElement;
const nextSibling = gutter.nextElementSibling as HTMLElement;
const previousSibling = gutter.previousElementSibling as HTMLElement;
const gutter = event.target as HTMLDivElement;
const nextSibling = gutter.nextElementSibling as HTMLDivElement;
const previousSibling = gutter.previousElementSibling as HTMLDivElement;
// Are we resizing horizontally?
const horizontal = gutter.classList.contains("layout-col");
@@ -129,11 +139,7 @@ export default defineComponent({
},
watch: {
async activeDocumentIndex(newIndex: number) {
await nextTick();
const documentsPanel = this.$refs.documentsPanel as typeof Panel;
const newActiveTab = documentsPanel.$el.querySelectorAll("[data-tab-bar] [data-tab]")[newIndex];
newActiveTab.scrollIntoView();
(this.$refs.documentPanel as typeof Panel | undefined)?.scrollTabIntoView(newIndex);
},
},
components: {