fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 22:38: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/panels/LayerTree.vue
+17 -16
View File
@@ -4,7 +4,7 @@
<WidgetLayout :layout="layerTreeOptionsLayout" />
</LayoutRow>
<LayoutRow class="layer-tree-rows" :scrollableY="true">
<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e: DragEvent) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
<LayoutCol class="list" ref="list" @click="() => deselectAllLayers()" @dragover="(e: DragEvent) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
<LayoutRow
class="layer-row"
v-for="(listing, index) in layers"
@@ -13,7 +13,7 @@
>
<LayoutRow class="visibility">
<IconButton
:action="(e: MouseEvent) => (toggleLayerVisibility(listing.entry.path), e?.stopPropagation())"
:action="(e?: MouseEvent) => (toggleLayerVisibility(listing.entry.path), e?.stopPropagation())"
:size="24"
:icon="listing.entry.visible ? 'EyeVisible' : 'EyeHidden'"
:title="listing.entry.visible ? 'Visible' : 'Hidden'"
@@ -56,8 +56,8 @@
:disabled="!listing.editingName"
@blur="() => onEditLayerNameDeselect(listing)"
@keydown.esc="onEditLayerNameDeselect(listing)"
@keydown.enter="(e) => onEditLayerNameChange(listing, e.target || undefined)"
@change="(e) => onEditLayerNameChange(listing, e.target || undefined)"
@keydown.enter="(e) => onEditLayerNameChange(listing, e)"
@change="(e) => onEditLayerNameChange(listing, e)"
/>
</LayoutRow>
<div class="thumbnail" v-html="listing.entry.thumbnail"></div>
@@ -326,23 +326,24 @@ export default defineComponent({
async onEditLayerName(listing: LayerListingInfo) {
if (listing.editingName) return;
listing.editingName = true;
this.draggable = false;
listing.editingName = true;
const tree: HTMLElement = (this.$refs.layerTreeList as typeof LayoutCol).$el;
await nextTick();
(tree.querySelector("[data-text-input]:not([disabled])") as HTMLInputElement).select();
const tree: HTMLDivElement | undefined = (this.$refs.list as typeof LayoutCol | undefined)?.$el;
const textInput: HTMLInputElement | undefined = tree?.querySelector("[data-text-input]:not([disabled])") || undefined;
textInput?.select();
},
onEditLayerNameChange(listing: LayerListingInfo, inputElement: EventTarget | undefined) {
onEditLayerNameChange(listing: LayerListingInfo, e: Event) {
// Eliminate duplicate events
if (!listing.editingName) return;
this.draggable = true;
const name = (inputElement as HTMLInputElement).value;
const name = (e.target as HTMLInputElement | undefined)?.value;
listing.editingName = false;
this.editor.instance.setLayerName(listing.entry.path, name);
if (name) this.editor.instance.setLayerName(listing.entry.path, name);
},
async onEditLayerNameDeselect(listing: LayerListingInfo) {
this.draggable = true;
@@ -368,7 +369,7 @@ export default defineComponent({
async deselectAllLayers() {
this.editor.instance.deselectAllLayers();
},
calculateDragIndex(tree: HTMLElement, clientY: number): DraggingData {
calculateDragIndex(tree: HTMLDivElement, clientY: number): DraggingData {
const treeChildren = tree.children;
const treeOffset = tree.getBoundingClientRect().top;
@@ -438,16 +439,16 @@ export default defineComponent({
event.dataTransfer.dropEffect = "move";
event.dataTransfer.effectAllowed = "move";
}
const tree = (this.$refs.layerTreeList as typeof LayoutCol).$el;
this.draggingData = this.calculateDragIndex(tree, event.clientY);
const tree: HTMLDivElement | undefined = (this.$refs.list as typeof LayoutCol | undefined)?.$el;
if (tree) this.draggingData = this.calculateDragIndex(tree, event.clientY);
},
updateInsertLine(event: DragEvent) {
// Stop the drag from being shown as cancelled
event.preventDefault();
const tree: HTMLElement = (this.$refs.layerTreeList as typeof LayoutCol).$el;
this.draggingData = this.calculateDragIndex(tree, event.clientY);
const tree: HTMLDivElement | undefined = (this.$refs.list as typeof LayoutCol | undefined)?.$el;
if (tree) this.draggingData = this.calculateDragIndex(tree, event.clientY);
},
async drop() {
if (this.draggingData) {