layerchart 0.81.2 → 0.90.0

package/dist/components/charts/LineChart.svelte

@@ -32,6 +32,7 @@
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
     brush?: typeof brush;
+    debug?: typeof debug;
     grid?: typeof grid;
     labels?: typeof labels;
     legend?: typeof legend;
@@ -41,8 +42,8 @@
     rule?: typeof rule;
     series?: typeof series;
     renderContext?: typeof renderContext;
-    onPointClick?: typeof onPointClick;
-    onTooltipClick?: typeof onTooltipClick;
+    onpointclick?: typeof onpointclick;
+    ontooltipclick?: typeof ontooltipclick;
   }
 
   export let data: $$Props['data'] = [];
@@ -75,13 +76,16 @@
   export let rule: ComponentProps<Rule> | boolean = true;
 
   /** Event dispatched with current tooltip data */
-  export let onTooltipClick: (e: { data: any }) => void = () => {};
+  export let ontooltipclick: (e: MouseEvent, details: { data: any }) => void = () => {};
 
   /** Event dispatched when Highlight point is clicked (useful with multiple series) */
-  export let onPointClick: (e: {
-    data: HighlightPointData;
-    series: (typeof series)[number];
-  }) => void = () => {};
+  export let onpointclick: (
+    e: MouseEvent,
+    details: {
+      data: HighlightPointData;
+      series: (typeof series)[number];
+    }
+  ) => void = () => {};
 
   export let props: {
     brush?: Partial<ComponentProps<Brush>>;
@@ -109,6 +113,9 @@
   /** Log initial render performance using `console.time` */
   export let profile = false;
 
+  /** Enable debug mode */
+  export let debug = false;
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -208,7 +215,8 @@
     ? false
     : {
         mode: 'bisect-x',
-        onClick: onTooltipClick,
+        onclick: ontooltipclick,
+        debug,
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
@@ -241,7 +249,7 @@
     getSplineProps,
   }}
   <slot {...slotProps}>
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -313,9 +321,9 @@
               ),
             }}
             lines={i === 0}
-            onPointClick={(e) => onPointClick({ ...e, series: s })}
-            onPointEnter={() => (highlightSeriesKey = s.key)}
-            onPointLeave={() => (highlightSeriesKey = null)}
+            onpointclick={(e, detail) => onpointclick(e, { ...detail, series: s })}
+            onpointenter={() => (highlightSeriesKey = s.key)}
+            onpointleave={() => (highlightSeriesKey = null)}
             {...props.highlight}
           />
         {/each}
@@ -350,9 +358,9 @@
           tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
-          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
-          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
-          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          onclick={(e, item) => $selectedSeries.toggleSelected(item.value)}
+          onpointerenter={(e, item) => (highlightSeriesKey = item.value)}
+          onpointerleave={(e) => (highlightSeriesKey = null)}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
           classes={{

package/dist/components/charts/PieChart.svelte

@@ -16,9 +16,7 @@
 
   import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
 
-  type ChartProps = ComponentProps<Chart<TData>>;
-
-  interface $$Props extends ChartProps {
+  interface $$Props extends ComponentProps<Chart<TData>> {
     cornerRadius?: typeof cornerRadius;
     innerRadius?: typeof innerRadius;
     key?: typeof key;
@@ -30,16 +28,17 @@
     center?: typeof center;
     placement?: typeof placement;
     profile?: typeof profile;
+    debug?: typeof debug;
     props?: typeof props;
     range?: typeof range;
     series?: typeof series;
     value?: typeof value;
     renderContext?: typeof renderContext;
-    onArcClick?: typeof onArcClick;
-    onTooltipClick?: typeof onTooltipClick;
+    onarcclick?: typeof onarcclick;
+    ontooltipclick?: typeof ontooltipclick;
   }
 
-  export let data: ChartProps['data'] = [];
+  export let data: $$Props['data'] = [];
 
   /** Key accessor */
   export let key: Accessor<TData> = 'key';
@@ -98,12 +97,15 @@
   /** Center chart.  Override and use `props.group` for more control */
   export let center = placement === 'center';
 
-  // TODO: Not usable with manual tooltip / arc path.  Use `onArcClick`?
+  // TODO: Not usable with manual tooltip / arc path.  Use `onarcclick`?
   /** Event dispatched with current tooltip data */
-  export let onTooltipClick: (e: { data: any }) => void = () => {};
+  export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
   /** Event dispatched when individual Arc is clicked  (useful with multiple series) */
-  export let onArcClick: (e: { data: any; series: (typeof series)[number] }) => void = () => {};
+  export let onarcclick: (
+    e: MouseEvent,
+    detail: { data: any; series: (typeof series)[number] }
+  ) => void = () => {};
 
   export let props: {
     pie?: Partial<ComponentProps<Pie>>;
@@ -125,6 +127,9 @@
   /** Log initial render performance using `console.time` */
   export let profile = false;
 
+  /** Enable debug mode */
+  export let debug = false;
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData>;
@@ -201,7 +206,7 @@
     visibleData,
   }}
   <slot {...slotProps}>
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {center}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {center} {debug}>
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
@@ -230,10 +235,10 @@
                 track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
                 {tooltip}
                 data={d}
-                on:click={() => {
-                  onArcClick({ data: d, series: s });
+                onclick={(e) => {
+                  onarcclick(e, { data: d, series: s });
                   // Workaround for `tooltip={{ mode: 'manual' }}
-                  onTooltipClick({ data: d });
+                  ontooltipclick(e, { data: d });
                 }}
                 {...props.arc}
                 {...s.props}
@@ -266,10 +271,10 @@
                     fill={cScale?.(c(arc.data))}
                     data={arc.data}
                     {tooltip}
-                    on:click={() => {
-                      onArcClick({ data: arc.data, series: s });
+                    onclick={(e) => {
+                      onarcclick(e, { data: arc.data, series: s });
                       // Workaround for `tooltip={{ mode: 'manual' }}
-                      onTooltipClick({ data: arc.data });
+                      ontooltipclick(e, { data: arc.data });
                     }}
                     class={cls(
                       'transition-opacity',
@@ -297,9 +302,9 @@
           }}
           placement="bottom"
           variant="swatches"
-          onClick={(item) => $selectedKeys.toggleSelected(item.value)}
-          onPointerEnter={(item) => (highlightKey = item.value)}
-          onPointerLeave={(item) => (highlightKey = null)}
+          onclick={(e, item) => $selectedKeys.toggleSelected(item.value)}
+          onpointerenter={(e, item) => (highlightKey = item.value)}
+          onpointerleave={(e) => (highlightKey = null)}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
           classes={{

package/dist/components/charts/PieChart.svelte.d.ts

@@ -121,13 +121,13 @@ declare class __sveltets_Render<TData> {
             geo?: import("svelte/store").Writable<import("d3-geo").GeoProjection>;
         }> | undefined;
         tooltip?: boolean | Partial<{
-            mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
+            mode?: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             findTooltipData?: "closest" | "left" | "right";
             raiseTarget?: boolean;
             locked?: boolean;
             radius?: number;
             debug?: boolean;
-            onClick?: ({ data }: {
+            onclick?: ({ data }: {
                 data: any;
             }) => any;
             tooltip?: import("svelte/store").Writable<{
@@ -136,6 +136,7 @@ declare class __sveltets_Render<TData> {
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
+                mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
             }>;
         }> | undefined;
         transform?: Partial<{
@@ -150,6 +151,15 @@ declare class __sveltets_Render<TData> {
             disablePointer?: boolean;
             initialScrollMode?: "none" | "scale" | "translate";
             clickDistance?: number;
+            ondragstart?: (() => void) | undefined;
+            ondragend?: (() => void) | undefined;
+            ontransform?: ((e: {
+                scale: number;
+                translate: {
+                    x: number;
+                    y: number;
+                };
+            }) => void) | undefined;
             initialTranslate?: {
                 x: number;
                 y: number;
@@ -192,7 +202,18 @@ declare class __sveltets_Render<TData> {
             data: any;
             show: (e: PointerEvent, tooltipData?: any) => void;
             hide: () => void;
+            mode: "manual" | "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree";
         }> | undefined;
+        onresize?: ((e: import("../ChartContext.svelte").ChartResizeDetail) => void) | undefined;
+        ondragstart?: (() => void) | undefined;
+        ondragend?: (() => void) | undefined;
+        ontransform?: ((e: {
+            scale: number;
+            translate: {
+                x: number;
+                y: number;
+            };
+        }) => void) | undefined;
     } & {
         cornerRadius?: number;
         innerRadius?: number | undefined;
@@ -211,9 +232,9 @@ declare class __sveltets_Render<TData> {
             tickLength?: number | undefined;
             placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
             orientation?: "horizontal" | "vertical" | undefined;
-            onClick?: ((item: any) => any) | undefined | undefined;
-            onPointerEnter?: ((item: any) => any) | undefined | undefined;
-            onPointerLeave?: ((item: any) => any) | undefined | undefined;
+            onclick?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
+            onpointerenter?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
+            onpointerleave?: ((e: MouseEvent, detail: any) => any) | undefined | undefined;
             variant?: "ramp" | "swatches" | undefined;
             classes?: {
                 root?: string;
@@ -231,6 +252,7 @@ declare class __sveltets_Render<TData> {
         center?: boolean;
         placement?: "center" | "left" | "right";
         profile?: boolean;
+        debug?: boolean;
         props?: {
             pie?: Partial<ComponentProps<Pie>>;
             group?: Partial<ComponentProps<Group>>;
@@ -259,7 +281,7 @@ declare class __sveltets_Render<TData> {
         }[] | undefined;
         value?: Accessor<TData>;
         renderContext?: "canvas" | "svg";
-        onArcClick?: ((e: {
+        onarcclick?: ((e: MouseEvent, detail: {
             data: any;
             series: {
                 key: string | number;
@@ -273,7 +295,7 @@ declare class __sveltets_Render<TData> {
                 props?: Partial<ComponentProps<Arc>>;
             };
         }) => void) | undefined;
-        onTooltipClick?: ((e: {
+        ontooltipclick?: ((e: MouseEvent, detail: {
             data: any;
         }) => void) | undefined;
     };

package/dist/components/charts/ScatterChart.svelte

@@ -36,7 +36,7 @@
     props?: typeof props;
     series?: typeof series;
     renderContext?: typeof renderContext;
-    onTooltipClick?: typeof onTooltipClick;
+    ontooltipclick?: typeof ontooltipclick;
   }
 
   export let data: $$Props['data'] = [];
@@ -65,15 +65,17 @@
   export let rule: ComponentProps<Rule> | boolean = true;
 
   /** Event dispatched with current tooltip data */
-  export let onTooltipClick: (e: { data: any }) => void = () => {};
+  export let ontooltipclick: (e: MouseEvent, detail: { data: any }) => void = () => {};
 
   export let props: {
     brush?: Partial<ComponentProps<Brush>>;
+    debug?: typeof debug;
     grid?: Partial<ComponentProps<Grid>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
     legend?: Partial<ComponentProps<Legend>>;
     points?: Partial<ComponentProps<Points>>;
+    profile?: typeof profile;
     rule?: Partial<ComponentProps<Rule>>;
     tooltip?: {
       context?: Partial<ComponentProps<Tooltip.Context>>;
@@ -92,6 +94,9 @@
   /** Log initial render performance using `console.time` */
   export let profile = false;
 
+  /** Enable debug mode */
+  export let debug = false;
+
   // Default xScale based on first data's `x` value
   $: xScale =
     $$props.xScale ??
@@ -175,7 +180,8 @@
     ? false
     : {
         mode: 'voronoi',
-        onClick: onTooltipClick,
+        onclick: ontooltipclick,
+        debug,
         ...props.tooltip?.context,
         ...$$props.tooltip,
       }}
@@ -213,7 +219,7 @@
     : null}
 
   <slot {...slotProps}>
-    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {debug}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -300,9 +306,9 @@
           tickFormat={(key) => series.find((s) => s.key === key)?.label ?? key}
           placement="bottom"
           variant="swatches"
-          onClick={(item) => $selectedSeries.toggleSelected(item.value)}
-          onPointerEnter={(item) => (highlightSeriesKey = item.value)}
-          onPointerLeave={(item) => (highlightSeriesKey = null)}
+          onclick={(e, item) => $selectedSeries.toggleSelected(item.value)}
+          onpointerenter={(e, item) => (highlightSeriesKey = item.value)}
+          onpointerleave={(e) => (highlightSeriesKey = null)}
           {...props.legend}
           {...typeof legend === 'object' ? legend : null}
           classes={{

package/dist/components/index.d.ts

@@ -31,7 +31,6 @@ export { default as Graticule } from './Graticule.svelte';
 export { default as Grid } from './Grid.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
-export { default as HitCanvas } from './HitCanvas.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';

package/dist/components/index.js

@@ -32,7 +32,6 @@ export { default as Graticule } from './Graticule.svelte';
 export { default as Grid } from './Grid.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
-export { default as HitCanvas } from './HitCanvas.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';

package/dist/components/layout/Canvas.svelte

@@ -3,8 +3,19 @@
 
   type ComponentRender = {
     name: string;
-    render: (ctx: CanvasRenderingContext2D) => any;
+    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
     retainState?: boolean;
+    events?: {
+      click?: (e: MouseEvent) => void;
+      dblclick?: (e: MouseEvent) => void;
+      pointerenter?: (e: PointerEvent) => void;
+      pointerover?: (e: PointerEvent) => void;
+      pointermove?: (e: PointerEvent) => void;
+      pointerleave?: (e: PointerEvent) => void;
+      pointerout?: (e: PointerEvent) => void;
+      pointerdown?: (e: PointerEvent) => void;
+      touchmove?: (e: TouchEvent) => void;
+    };
   };
 
   export type CanvasContext = {
@@ -30,7 +41,10 @@
 
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
-  import { scaleCanvas } from '../../utils/canvas.js';
+  import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
+  import { localPoint } from '../../utils/event.js';
+  import { tooltipContext } from '../tooltip/TooltipContext.svelte';
 
   const { width, height, containerWidth, containerHeight, padding } = chartContext();
 
@@ -68,14 +82,78 @@
    */
   export let center: boolean | 'x' | 'y' = false;
 
+  /** Show hit canvas for debugging */
+  export let debug = false;
+
   let components = new Map<Symbol, ComponentRender>();
   let pendingInvalidation = false;
   let frameId: number | undefined;
 
-  const { mode, scale, translate } = transformContext();
+  const { mode, scale, translate, dragging, moving } = transformContext();
+  const tooltip = tooltipContext();
+
+  /**
+   * HitCanvas
+   */
+  let hitCanvasElement: HTMLCanvasElement | undefined = undefined;
+  let hitCanvasContext: CanvasRenderingContext2D | undefined = undefined;
+  let colorGenerator = rgbColorGenerator();
+  let activeCanvas = false;
+  let lastActiveComponent: ComponentRender | undefined | null;
+  const componentByColor = new Map<string, ComponentRender>();
+
+  function getPointerComponent(e: PointerEvent | MouseEvent | TouchEvent) {
+    const { x, y } = localPoint(e.target as HTMLCanvasElement, e) ?? { x: 0, y: 0 };
+    const color = getPixelColor(hitCanvasContext!, x, y);
+    const colorKey = getColorStr(color);
+    return componentByColor.get(colorKey);
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    activeCanvas = true;
+    const component = getPointerComponent(e);
+
+    if (lastActiveComponent == null) {
+      // TODO: Should these be handled differently
+      component?.events?.pointerenter?.(e);
+      component?.events?.pointerover?.(e);
+    } else if (lastActiveComponent != component) {
+      // TODO: Should these be handled differently
+      lastActiveComponent?.events?.pointerleave?.(e);
+      lastActiveComponent?.events?.pointerout?.(e);
+
+      component?.events?.pointermove?.(e);
+    } else {
+      component?.events?.pointermove?.(e);
+    }
+
+    if (e.buttons === 1) {
+      component?.events?.pointerdown?.(e);
+    }
+
+    lastActiveComponent = component;
+  }
+
+  function onPointerLeave(e: PointerEvent) {
+    // Pointer outside of canvas
+
+    // Call last active component `pointerleave` event in case it was not triggered by hit canvas (quickly exiting canvas element before `pointermove` is triggered)
+    lastActiveComponent?.events?.pointerleave?.(e);
+    lastActiveComponent?.events?.pointerout?.(e);
+
+    lastActiveComponent = null;
+    activeCanvas = false;
+  }
+  /**
+   * end HitCanvas
+   */
 
   onMount(() => {
     context = element?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
+
+    hitCanvasContext = hitCanvasElement?.getContext('2d', {
+      willReadFrequently: true,
+    }) as CanvasRenderingContext2D;
   });
 
   onDestroy(() => {
@@ -110,6 +188,16 @@
       context.scale($scale, $scale);
     }
 
+    // Sync hit canvas transform with main canvas
+    if (hitCanvasContext) {
+      scaleCanvas(hitCanvasContext, $containerWidth, $containerHeight);
+      hitCanvasContext.clearRect(0, 0, $containerWidth, $containerHeight);
+      hitCanvasContext.setTransform(context.getTransform());
+
+      // Reset color generator whenever updated so always reusing same colors (and not exhausting)
+      colorGenerator = rgbColorGenerator();
+    }
+
     components.forEach((c) => {
       if (c.retainState) {
         // Do not call save/restore canvas draw state (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save) (ex. Group ctx.translate() affecting children)
@@ -119,6 +207,27 @@
         c.render(context);
         context.restore();
       }
+
+      // Delayed rendering using `activeCanvas` can cause a delay for tooltip interactivity for complex canvases (ex. country choropleth) so only ignore while moving/animating programmatically (ex. clicking on countries on Animated Globe)
+      const inactiveMoving = !activeCanvas && $moving;
+
+      const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
+
+      if (hitCanvasContext && componentHasEvents && !inactiveMoving && !$dragging) {
+        const color = getColorStr(colorGenerator.next().value);
+        // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
+        const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
+
+        if (c.retainState) {
+          c.render(hitCanvasContext, styleOverrides);
+        } else {
+          hitCanvasContext.save();
+          c.render(hitCanvasContext, styleOverrides);
+          hitCanvasContext.restore();
+        }
+
+        componentByColor.set(color, c);
+      }
     });
 
     pendingInvalidation = false;
@@ -144,8 +253,8 @@
   };
 
   $: {
-    // Redraw when resized
-    $containerWidth, $containerHeight;
+    // Redraw when resized or transform dragging changes.  Note: adding `activeCanvas` (pointer enters/exits canvas) causes initial interactivity issues while canvas is rendering and is not needed
+    $containerWidth, $containerHeight && $dragging;
     canvasContext.invalidate();
   }
 
@@ -164,16 +273,48 @@
   aria-label={label}
   aria-labelledby={labelledBy}
   aria-describedby={describedBy}
+  on:click={(e) => {
+    const component = getPointerComponent(e);
+    component?.events?.click?.(e);
+  }}
+  on:click
+  on:dblclick={(e) => {
+    const component = getPointerComponent(e);
+    component?.events?.dblclick?.(e);
+  }}
+  on:pointerenter={onPointerMove}
   on:pointerenter
+  on:pointermove={onPointerMove}
   on:pointermove
+  on:pointerleave={onPointerLeave}
   on:pointerleave
-  on:pointerleave
+  on:touchmove={(e) => {
+    // Prevent touch from interfering with pointer if over data
+    if (lastActiveComponent) {
+      e.preventDefault();
+    }
+
+    const component = getPointerComponent(e);
+    component?.events?.touchmove?.(e);
+  }}
   on:touchmove
-  on:click
 >
   <slot name="fallback">
     {fallback || ''}
   </slot>
 </canvas>
 
+<!-- Hit canvas used for hidden context -->
+<canvas
+  bind:this={hitCanvasElement}
+  class={cls(
+    'layerchart-hitcanvas',
+    'absolute top-0 left-0 w-full h-full',
+    'pointer-events-none', // events all handled by main canvas
+    // '[image-rendering:pixelated]', // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+    'border border-danger',
+    !debug && 'opacity-0'
+  )}
+></canvas>
+
 <slot {element} {context}></slot>

package/dist/components/layout/Canvas.svelte.d.ts

@@ -1,8 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
 type ComponentRender = {
     name: string;
-    render: (ctx: CanvasRenderingContext2D) => any;
+    render: (ctx: CanvasRenderingContext2D, styleOverrides?: ComputedStylesOptions) => any;
     retainState?: boolean;
+    events?: {
+        click?: (e: MouseEvent) => void;
+        dblclick?: (e: MouseEvent) => void;
+        pointerenter?: (e: PointerEvent) => void;
+        pointerover?: (e: PointerEvent) => void;
+        pointermove?: (e: PointerEvent) => void;
+        pointerleave?: (e: PointerEvent) => void;
+        pointerout?: (e: PointerEvent) => void;
+        pointerdown?: (e: PointerEvent) => void;
+        touchmove?: (e: TouchEvent) => void;
+    };
 };
 export type CanvasContext = {
     /** Register component to render.  Returns method to unregister on component destory */
@@ -11,6 +22,7 @@ export type CanvasContext = {
 };
 export declare const canvasContextKey: unique symbol;
 export declare function getCanvasContext(): CanvasContext;
+import { type ComputedStylesOptions } from '../../utils/canvas.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -24,13 +36,14 @@ declare const __propDef: {
         labelledBy?: string | undefined | undefined;
         describedBy?: string | undefined | undefined;
         center?: boolean | "x" | "y" | undefined;
+        debug?: boolean | undefined;
     };
     events: {
+        click: MouseEvent;
         pointerenter: PointerEvent;
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
         touchmove: TouchEvent;
-        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };