layerchart 0.81.3 → 0.90.0

package/dist/components/Circle.svelte

@@ -3,11 +3,12 @@
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
   import { objectId } from '@layerstack/utils/object';
+  import { merge } from 'lodash-es';
 
   import { motionStore } from '../stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { circlePath } from '../utils/path.js';
-  import { renderPathData } from '../utils/canvas.js';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
 
   export let cx: number = 0;
   export let initialCx = cx;
@@ -29,6 +30,11 @@
   let className: string | undefined = undefined;
   export { className as class };
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+
   let tweened_cx = motionStore(initialCx, { spring, tweened });
   let tweened_cy = motionStore(initialCy, { spring, tweened });
   let tweened_r = motionStore(initialR, { spring, tweened });
@@ -42,12 +48,21 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function render(ctx: CanvasRenderingContext2D) {
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
     const pathData = circlePath({ cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r });
-    renderPathData(ctx, pathData, {
-      styles: { fill, fillOpacity, stroke, strokeWidth },
-      classes: $$props.class,
-    });
+    renderPathData(
+      ctx,
+      pathData,
+      styleOverrides
+        ? merge({ styles: { strokeWidth } }, styleOverrides)
+        : {
+            styles: { fill, fillOpacity, stroke, strokeWidth },
+            classes: className,
+          }
+    );
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
@@ -69,7 +84,16 @@
 
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Circle', render });
+    canvasUnregister = canvasContext.register({
+      name: 'Circle',
+      render,
+      events: {
+        click: onclick,
+        pointerenter: onpointerenter,
+        pointermove: onpointermove,
+        pointerleave: onpointerleave,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -91,9 +115,9 @@
     stroke-width={strokeWidth}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
-    on:click
-    on:pointermove
-    on:pointerenter
-    on:pointerleave
+    on:click={onclick}
+    on:pointerenter={onpointerenter}
+    on:pointermove={onpointermove}
+    on:pointerleave={onpointerleave}
   />
 {/if}

package/dist/components/ClipPath.svelte

@@ -26,7 +26,7 @@
     <slot />
   {:else}
     <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <g style:clip-path="url(#{id})" on:click on:pointermove on:pointerleave on:keydown>
+    <g style:clip-path="url(#{id})">
       <slot {id} url="url(#{id})" {useId} />
     </g>
   {/if}

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

@@ -7,11 +7,6 @@ declare const __propDef: {
         disabled?: boolean | undefined;
     };
     events: {
-        click: MouseEvent;
-        pointermove: PointerEvent;
-        pointerleave: PointerEvent;
-        keydown: KeyboardEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/ForceSimulation.svelte

@@ -1,18 +1,9 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
   import { forceSimulation, type Force } from 'd3-force';
   import { chartContext } from './ChartContext.svelte';
 
   const { data } = chartContext();
 
-  const dispatch = createEventDispatcher<{
-    start: null;
-    tick: { alpha: number; alphaTarget: number };
-    change: null;
-    end: null;
-  }>();
-
   // MARK: Public Props
 
   type Forces = Record<string, Force<any, any>>;
@@ -35,6 +26,11 @@
   /** Clone data since simulation mutates original */
   export const cloneData: boolean = false;
 
+  export let onstart: (() => void) | undefined = undefined;
+  export let ontick: ((e: { alpha: number; alphaTarget: number }) => void) | undefined = undefined;
+  // export let onchange: | (() => void) | undefined = undefined;
+  export let onend: (() => void) | undefined = undefined;
+
   // MARK: Private Props
 
   let nodes: any[] = [];
@@ -248,14 +244,14 @@
     }
 
     paused = false;
-    dispatch('start');
+    onstart?.();
   }
 
   function onTick() {
     pullNodesFromSimulation();
     pullAlphaFromSimulation();
 
-    dispatch('tick', {
+    ontick?.({
       alpha,
       alphaTarget,
     });
@@ -268,7 +264,7 @@
     }
 
     paused = true;
-    dispatch('end');
+    onend?.();
   }
 </script>
 

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

@@ -11,16 +11,14 @@ declare const __propDef: {
         /** Stop simulation */ stopped?: boolean;
         /** If true, will only update nodes after simulation has completed */ static?: boolean;
         /** Clone data since simulation mutates original */ cloneData?: boolean;
-    };
-    events: {
-        start: CustomEvent<null>;
-        tick: CustomEvent<{
+        onstart?: (() => void) | undefined;
+        ontick?: ((e: {
             alpha: number;
             alphaTarget: number;
-        }>;
-        change: CustomEvent<null>;
-        end: CustomEvent<null>;
-    } & {
+        }) => void) | undefined;
+        onend?: (() => void) | undefined;
+    };
+    events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/Frame.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { chartContext } from './ChartContext.svelte';
+  import Rect from './Rect.svelte';
 
   const { width, height, padding } = chartContext();
 
@@ -7,18 +8,14 @@
   export let full = false;
 
   /** Access underlying `<rect>` element */
-  export let rectEl: SVGRectElement | undefined = undefined;
+  export let element: SVGRectElement | undefined = undefined;
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<rect
+<Rect
   x={full && $padding?.left ? -$padding.left : 0}
   y={full && $padding?.top ? -$padding.top : 0}
   width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
   height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
-  on:click
-  on:pointerdown
-  on:dblclick
-  bind:this={rectEl}
+  bind:element
   {...$$restProps}
 />

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

@@ -3,13 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         full?: boolean | undefined;
-        rectEl?: SVGRectElement | undefined;
+        element?: SVGRectElement | undefined;
     };
     events: {
-        click: MouseEvent;
-        pointerdown: PointerEvent;
-        dblclick: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/GeoCircle.svelte

@@ -2,6 +2,7 @@
   import { geoCircle } from 'd3-geo';
 
   import GeoPath from './GeoPath.svelte';
+  import type { ComponentProps } from 'svelte';
 
   /** Radius in degrees.  Default: 90 */
   export let radius = 90;
@@ -12,7 +13,12 @@
   /** sets the circle precision to the specified angle in degrees */
   export let precision = 6;
 
+  export let onclick: ComponentProps<typeof GeoPath>['onclick'] = undefined;
+  export let onpointerenter: ComponentProps<typeof GeoPath>['onpointerenter'] = undefined;
+  export let onpointermove: ComponentProps<typeof GeoPath>['onpointermove'] = undefined;
+  export let onpointerleave: ComponentProps<typeof GeoPath>['onpointerleave'] = undefined;
+
   $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
-<GeoPath {geojson} {...$$restProps} on:pointermove on:pointerleave on:click />
+<GeoPath {geojson} {onclick} {onpointerenter} {onpointermove} {onpointerleave} {...$$restProps} />

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

@@ -1,19 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
+import GeoPath from './GeoPath.svelte';
+import type { ComponentProps } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         radius?: number | undefined;
         center?: [number, number] | undefined;
         precision?: number | undefined;
+        onclick?: ComponentProps<typeof GeoPath>["onclick"] | undefined;
+        onpointerenter?: ComponentProps<typeof GeoPath>["onpointerenter"] | undefined;
+        onpointermove?: ComponentProps<typeof GeoPath>["onpointermove"] | undefined;
+        onpointerleave?: ComponentProps<typeof GeoPath>["onpointerleave"] | undefined;
     };
     events: {
-        pointermove: PointerEvent;
-        pointerleave: PointerEvent;
-        click: CustomEvent<{
-            geoPath: ReturnType<typeof import("..").geoCurvePath>;
-            event: MouseEvent;
-        }>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/GeoPath.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { onDestroy } from 'svelte';
   import {
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
@@ -8,34 +8,36 @@
     type GeoTransformPrototype,
   } from 'd3-geo';
   import { cls } from '@layerstack/tailwind';
+  import { merge } from 'lodash-es';
 
   import { geoContext } from './GeoContext.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import { geoCurvePath } from '../utils/geo.js';
-  import { renderPathData } from '../utils/canvas.js';
+  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
   import { objectId } from '@layerstack/utils/object';
 
   export let geojson: GeoPermissibleObjects | null | undefined = undefined;
 
-  /** Render to canvas */
-  export let render:
-    | ((
-        ctx: CanvasRenderingContext2D,
-        options: { newGeoPath: () => ReturnType<typeof geoCurvePath> }
-      ) => any)
-    | undefined = undefined;
-
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
 
   /**
-   * Tooltip context to setup mouse events to show tooltip for related data
+   * Tooltip context to setup pointer events to show tooltip for related data
    */
   export let tooltip: TooltipContextValue | undefined = undefined;
 
+  export let onclick:
+    | ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath>) => void)
+    | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerdown: ((e: PointerEvent) => void) | undefined = undefined;
+  export let ontouchmove: ((e: TouchEvent) => void) | undefined = undefined;
+
   /**
    * Curve of path drawn. Imported via d3-shape.
    *
@@ -50,10 +52,6 @@
   let className: string | undefined = undefined;
   export { className as class };
 
-  const dispatch = createEventDispatcher<{
-    click: { geoPath: ReturnType<typeof geoCurvePath>; event: MouseEvent };
-  }>();
-
   const geo = geoContext();
 
   /**
@@ -76,17 +74,22 @@
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  function _render(ctx: CanvasRenderingContext2D) {
-    if (render) {
-      render(ctx, { newGeoPath: () => geoCurvePath(_projection, curve) });
-    } else {
-      if (geojson) {
-        const pathData = geoPath(geojson);
-        renderPathData(ctx, pathData, {
-          styles: { fill, stroke, strokeWidth },
-          classes: className,
-        });
-      }
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    if (geojson) {
+      const pathData = geoPath(geojson);
+      renderPathData(
+        ctx,
+        pathData,
+        styleOverrides
+          ? merge({ styles: { strokeWidth } }, styleOverrides)
+          : {
+              styles: { fill, stroke, strokeWidth },
+              classes: className,
+            }
+      );
     }
   }
 
@@ -100,9 +103,37 @@
     canvasContext.invalidate();
   }
 
+  // Hide `geoPath` and `tooltip` reactivity
+  function _onClick(e: MouseEvent) {
+    onclick?.(e, geoPath);
+  }
+  function _onPointerEnter(e: PointerEvent) {
+    onpointerenter?.(e);
+    tooltip?.show(e, geojson);
+  }
+  function _onPointerMove(e: PointerEvent) {
+    onpointermove?.(e);
+    tooltip?.show(e, geojson);
+  }
+  function _onPointerLeave(e: PointerEvent) {
+    onpointerleave?.(e);
+    tooltip?.hide();
+  }
+
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'GeoPath', render: _render });
+    canvasUnregister = canvasContext.register({
+      name: 'GeoPath',
+      render,
+      events: {
+        click: _onClick,
+        pointerenter: _onPointerEnter,
+        pointermove: _onPointerMove,
+        pointerleave: _onPointerLeave,
+        pointerdown: onpointerdown,
+        touchmove: ontouchmove,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -113,23 +144,21 @@
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-{#if renderContext === 'svg'}
-  <slot {geoPath}>
+<slot {geoPath}>
+  {#if renderContext === 'svg'}
     <path
       {...$$restProps}
       d={geojson ? geoPath(geojson) : ''}
       {fill}
       {stroke}
       stroke-width={strokeWidth}
-      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:pointerdown
-      on:click={(event) => dispatch('click', { geoPath, event })}
+      on:click={_onClick}
+      on:pointerenter={_onPointerEnter}
+      on:pointermove={_onPointerMove}
+      on:pointerleave={_onPointerLeave}
+      on:pointerdown={onpointerdown}
+      on:touchmove={ontouchmove}
       class={cls(fill == null && 'fill-transparent', className)}
     />
-  </slot>
-{/if}
+  {/if}
+</slot>

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

@@ -7,27 +7,21 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         geojson?: GeoPermissibleObjects | null | undefined;
-        render?: ((ctx: CanvasRenderingContext2D, options: {
-            newGeoPath: () => ReturnType<typeof geoCurvePath>;
-        }) => any) | undefined | undefined;
         fill?: string | undefined | undefined;
         stroke?: string | undefined | undefined;
         strokeWidth?: number | undefined | undefined;
         tooltip?: TooltipContextValue | undefined;
+        onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath>) => void) | undefined | undefined;
+        onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
+        onpointermove?: ((e: PointerEvent) => void) | undefined | undefined;
+        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
+        onpointerdown?: ((e: PointerEvent) => void) | undefined | undefined;
+        ontouchmove?: ((e: TouchEvent) => void) | undefined | undefined;
         curve?: (CurveFactory | CurveFactoryLineOnly) | undefined;
         class?: string | undefined | undefined;
         geoTransform?: ((projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype) | undefined | undefined;
     };
     events: {
-        pointerenter: PointerEvent;
-        pointermove: PointerEvent;
-        pointerleave: PointerEvent;
-        pointerdown: PointerEvent;
-        click: CustomEvent<{
-            geoPath: ReturnType<typeof geoCurvePath>;
-            event: MouseEvent;
-        }>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/GeoPoint.svelte

@@ -11,39 +11,18 @@
   /** Longitude */
   export let long: number;
 
-  /** Render to canvas */
-  export let render: (
-    ctx: CanvasRenderingContext2D,
-    coords: { x: number; y: number }
-  ) => any = () => {};
-
   const geo = geoContext();
 
   $: [x, y] = $geo([long, lat]) ?? [0, 0];
 
   const canvasContext = getCanvasContext();
   const renderContext = canvasContext ? 'canvas' : 'svg';
-
-  function _render(ctx: CanvasRenderingContext2D) {
-    render(ctx, { x, y });
-  }
-
-  let canvasUnregister: ReturnType<typeof canvasContext.register>;
-  $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'GeoPoint', render: _render });
-  }
-
-  onDestroy(() => {
-    if (renderContext === 'canvas') {
-      canvasUnregister();
-    }
-  });
 </script>
 
 {#if renderContext === 'svg'}
   {#if $$slots.default}
     <Group {x} {y} {...$$restProps}>
-      <slot />
+      <slot {x} {y} />
     </Group>
   {:else}
     <Circle cx={x} cy={y} {...$$restProps} />
@@ -52,9 +31,9 @@
 
 {#if renderContext === 'canvas'}
   {#if $$slots.default}
-    <!-- TODO: Handle Canvas translation.  Conslidate with svg use case above (if `render` is not defined) -->
+    <!-- TODO: Handle Canvas translation.  Conslidate with svg use case above -->
     <!-- <Group {x} {y} {...$$restProps}> -->
-    <slot />
+    <slot {x} {y} />
     <!-- </Group> -->
   {:else}
     <Circle cx={x} cy={y} {...$$restProps} />

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

@@ -4,16 +4,15 @@ declare const __propDef: {
         [x: string]: any;
         lat: number;
         long: number;
-        render?: ((ctx: CanvasRenderingContext2D, coords: {
-            x: number;
-            y: number;
-        }) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            x: any;
+            y: any;
+        };
     };
 };
 export type GeoPointProps = typeof __propDef.props;

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

@@ -5,13 +5,16 @@ declare const __propDef: {
         lines?: boolean | Partial<{
             [x: string]: any;
             geojson?: import("d3-geo").GeoPermissibleObjects | null | undefined;
-            render?: ((ctx: CanvasRenderingContext2D, options: {
-                newGeoPath: () => ReturnType<typeof import("..").geoCurvePath>;
-            }) => any) | undefined | undefined;
             fill?: string | undefined | undefined;
             stroke?: string | undefined | undefined;
             strokeWidth?: number | undefined | undefined;
             tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
+            onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof import("..").geoCurvePath>) => void) | undefined | undefined;
+            onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
+            onpointermove?: ((e: PointerEvent) => void) | undefined | undefined;
+            onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
+            onpointerdown?: ((e: PointerEvent) => void) | undefined | undefined;
+            ontouchmove?: ((e: TouchEvent) => void) | undefined | undefined;
             curve?: (import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly) | undefined;
             class?: string | undefined | undefined;
             geoTransform?: ((projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform) => import("d3-geo").GeoTransformPrototype) | undefined | undefined;
@@ -19,13 +22,16 @@ declare const __propDef: {
         outline?: boolean | Partial<{
             [x: string]: any;
             geojson?: import("d3-geo").GeoPermissibleObjects | null | undefined;
-            render?: ((ctx: CanvasRenderingContext2D, options: {
-                newGeoPath: () => ReturnType<typeof import("..").geoCurvePath>;
-            }) => any) | undefined | undefined;
             fill?: string | undefined | undefined;
             stroke?: string | undefined | undefined;
             strokeWidth?: number | undefined | undefined;
             tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
+            onclick?: ((e: MouseEvent, geoPath: ReturnType<typeof import("..").geoCurvePath>) => void) | undefined | undefined;
+            onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
+            onpointermove?: ((e: PointerEvent) => void) | undefined | undefined;
+            onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
+            onpointerdown?: ((e: PointerEvent) => void) | undefined | undefined;
+            ontouchmove?: ((e: TouchEvent) => void) | undefined | undefined;
             curve?: (import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly) | undefined;
             class?: string | undefined | undefined;
             geoTransform?: ((projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform) => import("d3-geo").GeoTransformPrototype) | undefined | undefined;

package/dist/components/Group.svelte

@@ -30,6 +30,13 @@
    */
   export let preventTouchMove = false;
 
+  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let ondblclick: ((e: MouseEvent) => void) | undefined = undefined;
+  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
+  export let onpointerdown: ((e: PointerEvent) => void) | undefined = undefined;
+
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
 
@@ -60,7 +67,19 @@
 
   let canvasUnregister: ReturnType<typeof canvasContext.register>;
   $: if (renderContext === 'canvas') {
-    canvasUnregister = canvasContext.register({ name: 'Group', render, retainState: true });
+    canvasUnregister = canvasContext.register({
+      name: 'Group',
+      render,
+      retainState: true,
+      events: {
+        click: onclick,
+        dblclick: ondblclick,
+        pointerenter: onpointerenter,
+        pointermove: onpointermove,
+        pointerleave: onpointerleave,
+        pointerdown: onpointerdown,
+      },
+    });
   }
 
   onDestroy(() => {
@@ -77,11 +96,12 @@
   <g
     {transform}
     {...$$restProps}
-    on:click
-    on:pointerdown
-    on:pointerenter
-    on:pointermove
-    on:pointerleave
+    on:click={onclick}
+    on:dblclick={ondblclick}
+    on:pointerenter={onpointerenter}
+    on:pointermove={onpointermove}
+    on:pointerleave={onpointerleave}
+    on:pointerdown={onpointerdown}
     on:touchmove={(e) => {
       if (preventTouchMove) {
         // Prevent touch to not interfer with pointer