fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 21:38:11 +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/metrics/CanvasRuler.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<div class="canvas-ruler" :class="direction.toLowerCase()" ref="rulerRef">
<div class="canvas-ruler" :class="direction.toLowerCase()" ref="canvasRuler">
<svg :style="svgBounds">
<path :d="svgPath" />
<text v-for="(svgText, index) in svgTexts" :key="index" :transform="svgText.transform">{{ svgText.text }}</text>
@@ -122,12 +122,12 @@ export default defineComponent({
},
methods: {
resize() {
if (!this.$refs.rulerRef) return;
const canvasRuler = this.$refs.canvasRuler as HTMLDivElement | undefined;
if (!canvasRuler) return;
const rulerElement = this.$refs.rulerRef as HTMLElement;
const isVertical = this.direction === "Vertical";
const newLength = isVertical ? rulerElement.clientHeight : rulerElement.clientWidth;
const newLength = isVertical ? canvasRuler.clientHeight : canvasRuler.clientWidth;
const roundedUp = (Math.floor(newLength / this.majorMarkSpacing) + 1) * this.majorMarkSpacing;
if (roundedUp !== this.rulerLength) {
frontend/src/components/widgets/metrics/PersistentScrollbar.vue
+25 -10
View File
@@ -2,7 +2,7 @@
<div class="persistent-scrollbar" :class="direction.toLowerCase()">
<button class="arrow decrease" @pointerdown="() => changePosition(-50)"></button>
<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" :style="[thumbStart, thumbEnd, sides]"></div>
</div>
<button class="arrow increase" @click="() => changePosition(50)"></button>
</div>
@@ -160,21 +160,29 @@ export default defineComponent({
window.removeEventListener("pointermove", this.pointerMove);
},
methods: {
trackLength(): number {
const track = this.$refs.scrollTrack as HTMLElement;
return this.direction === "Vertical" ? track.clientHeight - this.handleLength : track.clientWidth;
trackLength(): number | undefined {
const track = this.$refs.scrollTrack as HTMLDivElement | undefined;
if (track) return this.direction === "Vertical" ? track.clientHeight - this.handleLength : track.clientWidth;
return undefined;
},
trackOffset(): number {
const track = this.$refs.scrollTrack as HTMLElement;
return this.direction === "Vertical" ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
trackOffset(): number | undefined {
const track = this.$refs.scrollTrack as HTMLDivElement | undefined;
if (track) return this.direction === "Vertical" ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
return undefined;
},
clampHandlePosition(newPos: number) {
const clampedPosition = Math.min(Math.max(newPos, 0), 1);
this.$emit("update:handlePosition", clampedPosition);
},
updateHandlePosition(e: PointerEvent) {
const trackLength = this.trackLength();
if (trackLength === undefined) return;
const position = pointerPosition(this.direction, e);
this.clampHandlePosition(this.handlePosition + (position - this.pointerPos) / (this.trackLength() * (1 - this.handleLength)));
this.clampHandlePosition(this.handlePosition + (position - this.pointerPos) / (trackLength * (1 - this.handleLength)));
this.pointerPos = position;
},
grabHandle(e: PointerEvent) {
@@ -185,8 +193,12 @@ export default defineComponent({
},
grabArea(e: PointerEvent) {
if (!this.dragging) {
const trackLength = this.trackLength();
const trackOffset = this.trackOffset();
if (trackLength === undefined || trackOffset === undefined) return;
const oldPointer = handleToTrack(this.handleLength, this.handlePosition) * trackLength + trackOffset;
const pointerPos = pointerPosition(this.direction, e);
const oldPointer = handleToTrack(this.handleLength, this.handlePosition) * this.trackLength() + this.trackOffset();
this.$emit("pressTrack", pointerPos - oldPointer);
}
},
@@ -197,7 +209,10 @@ export default defineComponent({
if (this.dragging) this.updateHandlePosition(e);
},
changePosition(difference: number) {
this.clampHandlePosition(this.handlePosition + difference / this.trackLength());
const trackLength = this.trackLength();
if (trackLength === undefined) return;
this.clampHandlePosition(this.handlePosition + difference / trackLength);
},
},
});