diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte index b1e61335..ec00eb49 100644 --- a/src/components/ColorScatterPlot.svelte +++ b/src/components/ColorScatterPlot.svelte @@ -82,10 +82,7 @@ // bound box for selected colors $: pos = makePosAndSizes(pickedColors); - let dragging: false | { x: number; y: number } = false; - let originalColors = [] as Color[]; - $: luminance = bg.luminance(); $: axisColor = luminance > 0.4 ? "#00000022" : "#ffffff55"; $: textColor = luminance > 0.4 ? "#00000066" : "#ffffffaa"; @@ -152,7 +149,7 @@ originalColors = [...colors]; } - const dragUpdate = (isZ: boolean) => (e: any) => { + let dragUpdate = (isZ: boolean) => (e: any) => { // console.log("drag update"); const dragToColor = isZ ? dragEventToColorZ : dragEventToColorXY; const newColors = colors.map((color, idx) => { @@ -172,17 +169,20 @@ onColorsChange(newColors); }; - function dragEnd(e: any) { + const dragEnd = (isZ: boolean) => (e: any) => { + if (isZ) { + dragUpdate(isZ)(e); + } interactionMode = "idle"; stopDragging(); // console.log("drag end"); - } + }; let selectionMouseStart = { x: 0, y: 0 }; let selectionMouseCurrent = { x: 0, y: 0 }; let windowPos = { x: 0, y: 0 }; let selectionIsZ = false; - const selectionStart = (isZ: boolean) => (e: any) => { + let selectionStart = (isZ: boolean) => (e: any) => { selectionIsZ = isZ; interactionMode = "select"; // console.log("selection start"); @@ -191,12 +191,12 @@ selectionMouseCurrent = { x, y }; windowPos = e.target.getBoundingClientRect(); }; - const selectionUpdate = (isZ: boolean) => (e: any) => { + let selectionUpdate = (isZ: boolean) => (e: any) => { // console.log("selection update"); const { x, y } = toXY(e); selectionMouseCurrent = { x, y }; }; - const selectionEnd = (isZ: boolean) => (e: any) => { + let selectionEnd = (isZ: boolean) => (e: any) => { interactionMode = "idle"; const miniConfig = { isPolar: config.isPolar, plotHeight, plotWidth }; const resp = isZ ? selectColorsFromDragZ : selectColorsFromDrag; @@ -210,7 +210,11 @@ onFocusedColorsChange(newFocus); }; - const pointMouseUp = (i: number) => (e: any) => { + let pointMouseDown = (e: any) => { + dragStart(e); + interactionMode = "point-touch"; + }; + let pointMouseUp = (i: number) => (e: any) => { // console.log("point mouse up"); interactionMode = "idle"; const isMeta = e.metaKey || e.shiftKey; @@ -219,7 +223,7 @@ onFocusedColorsChange(newElements); }; - const switchToDragPoint = (i: number) => (e: any) => { + let switchToDragPoint = (i: number) => (e: any) => { if (interactionMode !== "point-touch") return; startDragging(); // console.log("switch to drag point"); @@ -237,7 +241,6 @@ }; const fillParamsZ = { x: margin.left, - // y: margin.top, y: 0, width: 80, height, @@ -275,8 +278,14 @@ { + on:touchstart|preventDefault={(e) => { + onFocusedColorsChange([i]); dragStart(e); - interactionMode = "point-touch"; }} + on:touchmove|preventDefault={dragUpdate(false)} + on:touchend|preventDefault={dragEnd(false)} + on:mousedown|preventDefault={pointMouseDown} on:mouseup|preventDefault={pointMouseUp(i)} on:mouseleave|preventDefault={switchToDragPoint(i)} /> @@ -327,10 +339,12 @@ stroke={blindColor.toDisplay()} fill={"none"} stroke-width="4" - on:mousedown|preventDefault={(e) => { + on:touchstart|preventDefault={(e) => { + onFocusedColorsChange([i]); dragStart(e); - interactionMode = "point-touch"; }} + on:touchend|preventDefault={pointMouseUp(i)} + on:mousedown|preventDefault={pointMouseDown} on:mouseup|preventDefault={pointMouseUp(i)} on:mouseleave|preventDefault={switchToDragPoint(i)} /> @@ -355,6 +369,8 @@ height={pos.selectionHeight + 10} {...outerDottedBoxStyle} on:touchstart|preventDefault={(e) => dragStart(e)} + on:touchmove|preventDefault={(e) => dragUpdate(false)(e)} + on:touchend|preventDefault={dragEnd(false)} on:mousedown|preventDefault={(e) => dragStart(e)} /> {/if} @@ -369,8 +385,8 @@ {/if} @@ -378,10 +394,10 @@ dragEnd(e)} - on:mouseup|preventDefault={(e) => dragEnd(e)} + on:mouseup|preventDefault={dragEnd(false)} + on:touchmove|preventDefault={dragUpdate(false)} + on:touchend|preventDefault={dragEnd(false)} /> {/if} @@ -398,18 +414,28 @@ + {#each colors as color, i} { - dragStart(e); - interactionMode = "point-touch"; - }} + on:mousedown|preventDefault={pointMouseDown} on:mouseup|preventDefault={pointMouseUp(i)} on:mouseleave|preventDefault={switchToDragPoint(i)} + on:touchstart|preventDefault={(e) => { + onFocusedColorsChange([i]); + dragStart(e); + }} + on:touchmove|preventDefault={dragUpdate(true)} + on:touchend|preventDefault={pointMouseUp(i)} /> {/each} {#each blindColors as color, i} @@ -417,11 +443,14 @@ {...RectProps(color, i)} stroke={color.toDisplay()} fill={"none"} - on:mousedown|preventDefault={(e) => { + on:mousedown|preventDefault={pointMouseDown} + on:mouseup|preventDefault={pointMouseUp(i)} + on:touchstart|preventDefault={(e) => { + onFocusedColorsChange([i]); dragStart(e); - interactionMode = "point-touch"; }} - on:mouseup|preventDefault={pointMouseUp(i)} + on:touchend|preventDefault={pointMouseUp(i)} + on:touchmove|preventDefault={dragUpdate(true)} on:mouseleave|preventDefault={switchToDragPoint(i)} /> {/each} @@ -434,6 +463,8 @@ height={pos.selectionDepth + 15} {...outerDottedBoxStyle} on:touchstart|preventDefault={(e) => dragStart(e)} + on:touchmove|preventDefault={(e) => dragUpdate(true)(e)} + on:touchend|preventDefault={dragEnd(true)} on:mousedown|preventDefault={(e) => dragStart(e)} /> {/if} @@ -450,10 +481,10 @@ {/if} {#if interactionMode === "drag"} @@ -462,8 +493,8 @@ {...fillParamsZ} on:touchmove|preventDefault={dragUpdate(true)} on:mousemove|preventDefault={dragUpdate(true)} - on:touchend|preventDefault={(e) => dragEnd(e)} - on:mouseup|preventDefault={(e) => dragEnd(e)} + on:touchend|preventDefault={dragEnd(true)} + on:mouseup|preventDefault={dragEnd(true)} /> {/if} diff --git a/src/components/Tooltip.svelte b/src/components/Tooltip.svelte index 05853971..f4097ba0 100644 --- a/src/components/Tooltip.svelte +++ b/src/components/Tooltip.svelte @@ -12,13 +12,16 @@ let tooltipOpen: boolean = initiallyOpen; const query = "main *"; - function onClick() { + function onClick(e) { + e.preventDefault(); + e.stopPropagation(); + tooltipOpen = false; onClose(); document.querySelectorAll(query).forEach((x) => { x.removeEventListener("click", onClick); // remove select-none class - const newClass = x.getAttribute("class").replace("select-none", ""); + const newClass = x?.getAttribute("class")?.replace("select-none", ""); x.setAttribute("class", newClass); }); } @@ -35,7 +38,7 @@ $: tooltipOpen === true && attachListeners(); async function attachListeners() { - await new Promise((resolve) => setTimeout(resolve, 10)); + await new Promise((resolve) => setTimeout(resolve, 100)); document.querySelectorAll(query).forEach((x) => { x.addEventListener("click", onClick);