Fix Eyedropper tool and make Svelte's bind:this more robust

This commit is contained in:
Keavon Chambers
2023-03-11 12:32:01 -08:00
parent 919779130f
commit 29af355f20
23 changed files with 177 additions and 142 deletions
@@ -15,7 +15,7 @@
export let mediumDivisions = 5;
export let minorDivisions = 2;
let canvasRuler: HTMLDivElement;
let canvasRuler: HTMLDivElement | undefined;
let rulerLength = 0;
let svgBounds = { width: "0px", height: "0px" };
@@ -76,6 +76,8 @@
}
export function resize() {
if (!canvasRuler) return;
const isVertical = direction === "Vertical";
const newLength = isVertical ? canvasRuler.clientHeight : canvasRuler.clientWidth;
@@ -21,7 +21,7 @@
export let handlePosition = 0.5;
export let handleLength = 0.5;
let scrollTrack: HTMLDivElement;
let scrollTrack: HTMLDivElement | undefined;
let dragging = false;
let pointerPos = 0;
let thumbTop: string | undefined = undefined;
@@ -34,10 +34,12 @@
$: [thumbTop, thumbBottom, thumbLeft, thumbRight] = direction === "Vertical" ? [`${start * 100}%`, `${end * 100}%`, "0%", "0%"] : ["0%", "0%", `${start * 100}%`, `${end * 100}%`];
function trackLength(): number | undefined {
if (scrollTrack === undefined) return undefined;
return direction === "Vertical" ? scrollTrack.clientHeight - handleLength : scrollTrack.clientWidth;
}
function trackOffset(): number | undefined {
if (scrollTrack === undefined) return undefined;
return direction === "Vertical" ? scrollTrack.getBoundingClientRect().top : scrollTrack.getBoundingClientRect().left;
}