layerchart 0.36.5 → 0.37.0

package/dist/components/Group.svelte

@@ -15,6 +15,10 @@ export let initialY = y;
  * Center within chart
  */
 export let center = false;
+/**
+ * Prevent `touchmove` default, which can interfer with `pointermove` when used with `Tooltip`, for example
+ */
+export let preventTouchMove = false;
 export let spring = undefined;
 export let tweened = undefined;
 let tweened_x = motionStore(initialX, { spring, tweened });
@@ -29,6 +33,19 @@ $: if (center || x != null || y != null) {
 }
 </script>
 
-<g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>
+<g
+  {transform}
+  {...$$restProps}
+  on:click
+  on:pointerenter
+  on:pointermove
+  on:pointerleave
+  on:touchmove={(e) => {
+    if (preventTouchMove) {
+      // Prevent touch to not interfer with pointer
+      e.preventDefault();
+    }
+  }}
+>
   <slot />
 </g>

package/dist/components/Group.svelte.d.ts

@@ -8,13 +8,15 @@ declare const __propDef: {
         y?: number | undefined;
         initialY?: number | undefined;
         center?: boolean | "x" | "y" | undefined;
+        preventTouchMove?: boolean | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointerenter: PointerEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/HitCanvas.svelte

@@ -0,0 +1,86 @@
+<script>import { beforeUpdate, createEventDispatcher, getContext, onMount, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { scaleCanvas } from 'layercake';
+import { cls } from 'svelte-ux';
+import Canvas from './layout/Canvas.svelte';
+const { width, height } = getContext('LayerCake');
+export let context = undefined;
+/** Show canvas for debugging */
+export let debug = false;
+const dispatch = createEventDispatcher();
+const cntxt = {
+    ctx: writable({}),
+};
+onMount(() => {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently
+    scaleCanvas(context, $width, $height);
+});
+$: cntxt.ctx.set(context);
+setContext('canvas', cntxt);
+function* rgbColorGenerator(step = 500) {
+    let nextColor = 1;
+    while (nextColor < 16777216) {
+        const rgb = [
+            nextColor & 0xff, // red
+            (nextColor & 0xff00) >> 8, // green
+            (nextColor & 0xff0000) >> 16, // blue
+        ];
+        nextColor += step;
+        yield `rgb(${rgb.join(',')})`;
+    }
+}
+$: colorGenerator = rgbColorGenerator();
+// Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)
+beforeUpdate(() => {
+    colorGenerator = rgbColorGenerator();
+});
+const dataByColor = new Map();
+function setColorData(color, data) {
+    dataByColor.set(color, data);
+}
+let activePointer = false;
+function getPointerData(e) {
+    const { offsetX, offsetY } = e;
+    const dpr = window.devicePixelRatio ?? 1;
+    const imageData = context.getImageData(offsetX * dpr, offsetY * dpr, 1, 1);
+    const [r, g, b, a] = imageData.data;
+    const colorKey = `rgb(${r},${g},${b})`;
+    const data = dataByColor.get(colorKey);
+    return data;
+}
+function dispatchPointerMove(e) {
+    const data = getPointerData(e);
+    if (data) {
+        activePointer = true;
+    }
+    // Still dispatch with `undefined data` to hide tooltip, etc
+    dispatch('pointermove', { event: e, data });
+}
+</script>
+
+<Canvas
+  bind:context
+  willReadFrequently
+  class={cls(
+    'HitCanvas absolute w-full h-full border border-danger',
+    // '[image-rendering:pixelated]', // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+    !debug && 'opacity-0'
+  )}
+  on:pointerenter={dispatchPointerMove}
+  on:pointermove={dispatchPointerMove}
+  on:pointerleave={() => (activePointer = false)}
+  on:pointerleave
+  on:touchmove={(e) => {
+    // Prevent touch to not interfer with pointer if over data
+    if (activePointer) {
+      e.preventDefault();
+    }
+  }}
+  on:click={(e) => {
+    const data = getPointerData(e);
+    if (data) {
+      dispatch('click', { event: e, data });
+    }
+  }}
+/>
+<slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>

package/dist/components/HitCanvas.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: CanvasRenderingContext2D | undefined;
+        /** Show canvas for debugging */ debug?: boolean | undefined;
+    };
+    events: {
+        pointerleave: PointerEvent;
+        pointermove: CustomEvent<{
+            event: PointerEvent;
+            data: any;
+        }>;
+        click: CustomEvent<{
+            event: MouseEvent;
+            data: any;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nextColor: () => string | void;
+            setColorData: (color: string, data: any) => void;
+        };
+    };
+};
+export type HitCanvasProps = typeof __propDef.props;
+export type HitCanvasEvents = typeof __propDef.events;
+export type HitCanvasSlots = typeof __propDef.slots;
+export default class HitCanvas extends SvelteComponentTyped<HitCanvasProps, HitCanvasEvents, HitCanvasSlots> {
+}
+export {};

package/dist/components/Hull.svelte

@@ -32,8 +32,8 @@ $: points = (data ?? $flatData).map((d) => {
       geojson={polygon}
       {curve}
       class={cls('fill-transparent', classes.path)}
-      on:mousemove={(e) => dispatch('mousemove', { event: e, points, polygon })}
-      on:mouseleave
+      on:pointermove={(e) => dispatch('pointermove', { event: e, points, polygon })}
+      on:pointerleave
       on:click={(e) => dispatch('click', { points, polygon })}
     />
   {:else}
@@ -45,8 +45,8 @@ $: points = (data ?? $flatData).map((d) => {
       y={(d) => d[1]}
       {curve}
       class={cls('fill-transparent', classes.path)}
-      on:mousemove={(e) => dispatch('mousemove', { event: e, points, polygon })}
-      on:mouseleave
+      on:pointermove={(e) => dispatch('pointermove', { event: e, points, polygon })}
+      on:pointerleave
       on:click={(e) => dispatch('click', { points, polygon })}
     />
   {/if}

package/dist/components/Hull.svelte.d.ts

@@ -13,13 +13,13 @@ declare const __propDef: {
         } | undefined;
     };
     events: {
-        mouseleave: MouseEvent;
+        pointerleave: PointerEvent;
         click: CustomEvent<{
             points: [number, number][];
             polygon: Delaunay.Polygon;
         }>;
-        mousemove: CustomEvent<{
-            event: MouseEvent;
+        pointermove: CustomEvent<{
+            event: PointerEvent;
             points: [number, number][];
             polygon: Delaunay.Polygon;
         }>;

package/dist/components/Line.svelte

@@ -31,6 +31,6 @@ $: tick().then(() => {
   class={cls($$props.stroke === undefined && 'stroke-surface-content')}
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />

package/dist/components/Line.svelte.d.ts

@@ -16,8 +16,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Link.svelte

@@ -31,9 +31,9 @@ $: {
   d={$tweened_d}
   fill="none"
   on:click
-  on:mouseover
-  on:mousemove
-  on:mouseout
-  on:mouseleave
+  on:pointerover
+  on:pointermove
+  on:pointerout
+  on:pointerleave
   {...$$restProps}
 />

package/dist/components/Link.svelte.d.ts

@@ -15,10 +15,10 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mouseover: MouseEvent;
-        mousemove: MouseEvent;
-        mouseout: MouseEvent;
-        mouseleave: MouseEvent;
+        pointerover: PointerEvent;
+        pointermove: PointerEvent;
+        pointerout: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Pie.svelte

@@ -87,8 +87,15 @@ $: coords = {
         {cornerRadius}
         {offset}
         fill={$config.r ? $rGet(arc.data) : null}
-        on:mousemove={(e) => tooltip?.show(e, arc.data)}
-        on:mouseleave={(e) => tooltip?.hide()}
+        on:pointerenter={(e) => tooltip?.show(e, arc.data)}
+        on:pointermove={(e) => tooltip?.show(e, arc.data)}
+        on:pointerleave={(e) => tooltip?.hide()}
+        on:touchmove={(e) => {
+          if (tooltip) {
+            // Prevent touch to not interfer with pointer when using tooltip
+            e.preventDefault();
+          }
+        }}
       />
     {/each}
   </slot>

package/dist/components/Rect.svelte

@@ -32,8 +32,8 @@ $: tick().then(() => {
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
-  on:mouseover
-  on:mousemove
-  on:mouseout
-  on:mouseleave
+  on:pointerover
+  on:pointermove
+  on:pointerout
+  on:pointerleave
 />

package/dist/components/Rect.svelte.d.ts

@@ -20,10 +20,10 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mouseover: MouseEvent;
-        mousemove: MouseEvent;
-        mouseout: MouseEvent;
-        mouseleave: MouseEvent;
+        pointerover: PointerEvent;
+        pointermove: PointerEvent;
+        pointerout: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Spline.svelte

@@ -109,8 +109,8 @@ $: {
     class={cls('path-line fill-none', !$$props.stroke && 'stroke-surface-content', $$props.class)}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
-    on:mousemove
-    on:mouseleave
+    on:pointermove
+    on:pointerleave
     bind:this={pathEl}
   />
 

package/dist/components/Spline.svelte.d.ts

@@ -17,8 +17,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/TooltipContext.svelte

@@ -45,7 +45,7 @@ export let mode = 'manual';
  * @type {'closest' | 'left' | 'right'}
  */
 export let findTooltipData = 'closest';
-/** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */
+/** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */
 export let raiseTarget = false;
 /** quadtree search radius
  * @type {number}
@@ -105,11 +105,11 @@ function findData(previousValue, currentValue, valueAtPoint, accessor) {
             return currentValue;
     }
 }
-function showTooltip(event, tooltipData) {
+function showTooltip(e, tooltipData) {
     // Cancel hiding tooltip if from previous event loop
     clearTimeout(hideTimeoutId);
-    const referenceNode = event.target.closest('.layercake-container');
-    const point = localPoint(referenceNode, event);
+    const referenceNode = e.target.closest('.layercake-container');
+    const point = localPoint(referenceNode, e);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
     // If tooltipData not provided already (voronoi, etc), attempt to find it
@@ -121,7 +121,7 @@ function showTooltip(event, tooltipData) {
                 break;
             }
             case 'bisect-band': {
-                // `x` and `y` values at mouse/touch coordinate
+                // `x` and `y` values at pointer coordinate
                 const xValueAtPoint = scaleInvert($xScale, localX);
                 const yValueAtPoint = scaleInvert($yScale, localY);
                 if (isScaleBand($xScale)) {
@@ -146,7 +146,7 @@ function showTooltip(event, tooltipData) {
                 break;
             }
             case 'bisect-x': {
-                // `x` value at mouse/touch coordinate
+                // `x` value at pointer coordinate
                 const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
                 const index = bisectX($flatData, xValueAtPoint, 1);
                 const previousValue = $flatData[index - 1];
@@ -155,7 +155,7 @@ function showTooltip(event, tooltipData) {
                 break;
             }
             case 'bisect-y': {
-                // `y` value at mouse/touch coordinate
+                // `y` value at pointer coordinate
                 const yValueAtPoint = scaleInvert($yScale, localY - $padding.top);
                 const index = bisectY($flatData, yValueAtPoint, 1);
                 const previousValue = $flatData[index - 1];
@@ -167,7 +167,7 @@ function showTooltip(event, tooltipData) {
     }
     if (tooltipData) {
         if (raiseTarget) {
-            raise(event.target);
+            raise(e.target);
         }
         $tooltip = {
             ...$tooltip,
@@ -264,7 +264,6 @@ $: if (mode === 'bounds' || mode === 'band') {
         }
     })
         .sort(sortFunc('x'));
-    // console.log({ rects });
 }
 </script>
 
@@ -275,11 +274,13 @@ $: if (mode === 'bounds' || mode === 'band') {
     <div
       style:width="{$width}px"
       style:height="{$height}px"
-      class={cls('tooltip-trigger absolute', debug && 'bg-danger/10 outline outline-danger')}
-      on:touchstart={showTooltip}
-      on:touchmove={showTooltip}
-      on:mousemove={showTooltip}
-      on:mouseleave={hideTooltip}
+      class={cls(
+        'tooltip-trigger absolute touch-none',
+        debug && 'bg-danger/10 outline outline-danger'
+      )}
+      on:pointerenter={showTooltip}
+      on:pointermove={showTooltip}
+      on:pointerleave={hideTooltip}
       on:click={(e) => {
         onClick({ data: $tooltip?.data });
       }}
@@ -288,8 +289,9 @@ $: if (mode === 'bounds' || mode === 'band') {
 {:else if mode === 'voronoi'}
   <Svg>
     <Voronoi
-      on:mousemove={(e) => showTooltip(e.detail.event, e.detail.data)}
-      on:mouseleave={hideTooltip}
+      on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
+      on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
+      on:pointerleave={hideTooltip}
       on:click={(e) => {
         onClick({ data: e.detail.data });
       }}
@@ -306,8 +308,9 @@ $: if (mode === 'bounds' || mode === 'band') {
           width={rect.width}
           height={rect.height}
           class={cls(debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent')}
-          on:mousemove={(e) => showTooltip(e, rect.data)}
-          on:mouseleave={hideTooltip}
+          on:pointerenter={(e) => showTooltip(e, rect.data)}
+          on:pointermove={(e) => showTooltip(e, rect.data)}
+          on:pointerleave={hideTooltip}
           on:click={(e) => {
             onClick({ data: rect.data });
           }}

package/dist/components/TooltipContext.svelte.d.ts

@@ -5,8 +5,8 @@ export type TooltipContextValue = {
     x: number;
     y: number;
     data: any;
-    show(event: MouseEvent | TouchEvent, tooltipData?: any): any;
-    hide(event?: MouseEvent | TouchEvent): any;
+    show(e: PointerEvent, tooltipData?: any): void;
+    hide(e?: PointerEvent): void;
 };
 export type TooltipContext = Readable<TooltipContextValue>;
 export declare function tooltipContext(): TooltipContext;
@@ -18,7 +18,7 @@ declare const __propDef: {
         /**
            * @type {'closest' | 'left' | 'right'}
            */ findTooltipData?: "left" | "right" | "closest" | undefined;
-        /** Similar to d3-selection's raise, re-insert the event.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean | undefined;
+        /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean | undefined;
         /** quadtree search radius
            * @type {number}
            */ radius?: number | undefined;
@@ -36,7 +36,7 @@ declare const __propDef: {
                 y: number;
                 x: number;
                 data: null;
-                show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
+                show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };
         };