Replace mouse/touch with pointer events handlers

packages/layerchart/src/lib/components/Arc.svelte

@@ -181,8 +181,8 @@
   transform="translate({xOffset}, {yOffset})"
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

packages/layerchart/src/lib/components/Area.svelte

@@ -72,6 +72,6 @@
   {...$$restProps}
   class={cls('path-area', $$props.class)}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />

packages/layerchart/src/lib/components/Calendar.svelte

@@ -62,8 +62,8 @@
       width={cellWidth}
       height={cellHeight}
       fill={cell.color}
-      on:mousemove={(e) => tooltip?.show(e, cell.data)}
-      on:mouseleave={(e) => tooltip?.hide()}
+      on:pointermove={(e) => tooltip?.show(e, cell.data)}
+      on:pointerleave={(e) => tooltip?.hide()}
       class="stroke-surface-content/5"
       {...$$restProps}
     />

packages/layerchart/src/lib/components/Circle.svelte

@@ -35,6 +35,6 @@
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />

packages/layerchart/src/lib/components/ClipPath.svelte

@@ -25,7 +25,7 @@
   {#if disabled}
     <slot />
   {:else}
-    <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+    <g style:clip-path="url(#{id})" on:click on:pointermove on:pointerleave on:keydown>
       <slot {id} url="url(#{id})" {useId} />
     </g>
   {/if}

packages/layerchart/src/lib/components/GeoCircle.svelte

@@ -15,4 +15,4 @@
   $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
-<GeoPath {geojson} {...$$restProps} on:mousemove on:mouseleave on:click />
+<GeoPath {geojson} {...$$restProps} on:pointermove on:pointerleave on:click />

packages/layerchart/src/lib/components/GeoPath.svelte

@@ -90,10 +90,12 @@
       d={geoPath(geojson)}
       {fill}
       {stroke}
-      on:mousemove={(e) => tooltip?.show(e, geojson)}
-      on:mousemove
-      on:mouseleave={(e) => tooltip?.hide()}
-      on:mouseleave
+      on:pointerenter={(e) => tooltip?.show(e, geojson)}
+      on:pointerenter
+      on:pointermove={(e) => tooltip?.show(e, geojson)}
+      on:pointermove
+      on:pointerleave={(e) => tooltip?.hide()}
+      on:pointerleave
       on:click={(event) => dispatch('click', { geoPath, event })}
       on:click
       class={cls($$props.fill == null && 'fill-transparent', $$props.class)}

packages/layerchart/src/lib/components/Group.svelte

@@ -40,6 +40,6 @@
   }
 </script>
 
-<g {transform} {...$$restProps} on:click on:mousemove on:mouseleave>
+<g {transform} {...$$restProps} on:click on:pointermove on:pointerleave>
   <slot />
 </g>

packages/layerchart/src/lib/components/Hull.svelte

@@ -25,8 +25,8 @@
 
   const dispatch = createEventDispatcher<{
     click: { points: [number, number][]; polygon: Delaunay.Polygon };
-    mousemove: {
-      event: MouseEvent;
+    pointermove: {
+      event: PointerEvent;
       points: [number, number][];
       polygon: Delaunay.Polygon;
     };
@@ -52,8 +52,8 @@
       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}
@@ -65,8 +65,8 @@
       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}

packages/layerchart/src/lib/components/Line.svelte

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

packages/layerchart/src/lib/components/Link.svelte

@@ -53,9 +53,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}
 />

packages/layerchart/src/lib/components/Pie.svelte

@@ -109,8 +109,8 @@
         {cornerRadius}
         {offset}
         fill={$config.r ? $rGet(arc.data) : null}
-        on:mousemove={(e) => tooltip?.show(e, arc.data)}
-        on:mouseleave={(e) => tooltip?.hide()}
+        on:pointermove={(e) => tooltip?.show(e, arc.data)}
+        on:pointerleave={(e) => tooltip?.hide()}
       />
     {/each}
   </slot>

packages/layerchart/src/lib/components/Rect.svelte

@@ -46,8 +46,8 @@
   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
 />

packages/layerchart/src/lib/components/Spline.svelte

@@ -129,8 +129,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}
   />
 

packages/layerchart/src/lib/components/TooltipContext.svelte

@@ -8,8 +8,8 @@
     x: number;
     y: number;
     data: any;
-    show(event: MouseEvent | TouchEvent, tooltipData?: any): any;
-    hide(event?: MouseEvent | TouchEvent);
+    show(e: PointerEvent, tooltipData?: any): void;
+    hide(e?: PointerEvent): void;
   };
 
   export type TooltipContext = Readable<TooltipContextValue>;
@@ -76,7 +76,7 @@
    */
   export let findTooltipData: 'closest' | 'left' | 'right' = '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
@@ -140,12 +140,12 @@
     }
   }
 
-  function showTooltip(event: MouseEvent | TouchEvent, tooltipData?: any) {
+  function showTooltip(e: PointerEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
     clearTimeout(hideTimeoutId);
 
-    const referenceNode = (event.target as Element).closest('.layercake-container');
-    const point = localPoint(referenceNode, event);
+    const referenceNode = (e.target as Element).closest('.layercake-container');
+    const point = localPoint(referenceNode, e);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
 
@@ -159,7 +159,7 @@
         }
 
         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);
 
@@ -184,7 +184,7 @@
         }
 
         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);
@@ -195,7 +195,7 @@
         }
 
         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);
@@ -209,7 +209,7 @@
 
     if (tooltipData) {
       if (raiseTarget) {
-        raise(event.target);
+        raise(e.target);
       }
 
       $tooltip = {
@@ -313,7 +313,6 @@
         }
       })
       .sort(sortFunc('x'));
-    // console.log({ rects });
   }
 </script>
 
@@ -324,11 +323,13 @@
     <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 });
       }}
@@ -337,8 +338,9 @@
 {: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 });
       }}
@@ -355,8 +357,9 @@
           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 });
           }}

packages/layerchart/src/lib/components/Transform.svelte

@@ -68,28 +68,26 @@
     }
   }
 
-  function onMouseDown(e: MouseEvent & { currentTarget: SVGElement }) {
+  function onPointerDown(e: PointerEvent & { currentTarget: SVGElement }) {
     if (disablePointer) return;
 
     e.preventDefault();
 
     dragging = true;
     moved = false;
-    svgEl = e.currentTarget.ownerSVGElement; // capture for reference in mousemove event
+    svgEl = e.currentTarget.ownerSVGElement; // capture for reference in pointermove event
     startPoint = localPoint(svgEl, e);
     startTranslate = $translate;
 
-    window.addEventListener('mousemove', onMouseMove, { capture: true });
-    window.addEventListener('mouseup', onMouseUp);
-
     dispatch('dragstart');
   }
 
-  function onMouseMove(e: MouseEvent) {
+  function onPointerMove(e: PointerEvent) {
     if (!dragging) return;
 
     e.preventDefault(); // Stop text selection
     e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
+    e.currentTarget.setPointerCapture(e.pointerId);
 
     const endPoint = localPoint(svgEl, e);
     const deltaX = endPoint.x - startPoint.x;
@@ -109,11 +107,8 @@
     }
   }
 
-  function onMouseUp(e: MouseEvent) {
+  function onPointerUp(e: PointerEvent) {
     dragging = false;
-
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
     dispatch('dragend');
   }
 
@@ -188,7 +183,7 @@
     }
   }
 
-  function localPoint(svgEl: SVGSVGElement | null, e: MouseEvent) {
+  function localPoint(svgEl: SVGSVGElement | null, e: PointerEvent) {
     if (svgEl) {
       const screenCTM = svgEl.getScreenCTM();
 
@@ -230,13 +225,22 @@
 
 <g
   on:mousewheel={onWheel}
-  on:mousedown={onMouseDown}
+  on:pointerdown={onPointerDown}
+  on:pointermove={onPointerMove}
+  on:touchmove={(e) => {
+    // Touch events cause pointer events to be interrupted.
+    // Typically `touch-action: none` works, but doesn't appear to with SVG, but `preventDefault()` works here
+    // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#touch-action_css_property
+    e.preventDefault();
+  }}
+  on:pointerup={onPointerUp}
   on:dblclick={onDoubleClick}
   on:click|capture={onClick}
   on:click
   on:keydown
   on:keyup
   on:keypress
+  class="touch-none"
 >
   <rect
     x={-$padding.left}