docs: Integrate renderContext documentation and toggling (#549)

* Setup shared state to track selected `renderContext` to use for all examples.  Add `meta.supportedContexts` to page load() to display options and document per component / example

* Add `supportedContexts` for all primatives and use `Layer` for examples with shared state

* Add `supportedContexts` for all common components (Axis, Grid, etc) and use `Layer` for examples with shared state

* Add `supportedContexts` for all simplified charts (AreaChart, BarChart, etc) and use `Layer` for examples with shared state

* breaking(Spline): Rename `splineRef` to `pathRef`

* fix(Calendar|MonthPath): Support canvas by using `Spline` instead of `path`

* Add `supportedContexts` for all data marks (Area, Bars, etc) and use `Layer` for examples with shared state

* Add `supportedContexts` for all annotations and use `Layer` for examples with shared state

* Add `supportedContexts` for all interactions and use `Layer` for examples with shared state

* Add `supportedContexts` for all layout components and use `Layer` for examples with shared state

* Add `supportedContexts` for all clip path and other components and use `Layer` for examples with shared state

* Fix types.  Add changeset

* Add `supportedContexts` for force examples and a few others

* fix(GeoPath): Do not register with hit canavs unless pointer events (onclick, onpointermove, etc) or tooltipContext are defined

* Add `supportedContexts` for GeoPath example

* Add `supportedContexts` for GeoPoint example

* Fix Layer onpointermove type

* Add `supportedContexts` for more geo examples

* Add `supportedContexts` for zoomable map example

* Add `supportedContexts` for zoomable tile map example

* Add `supportedContexts` for timezomes example

* breaking(Blur): Remove children snippet props (not needed and easier to support canvas in the future)

* Add `supportedContexts` for remaining geo examples

* Cleanup

* Add `supportedContexts` for remaining examples

* fix(Layer): Pass `onpointermove` via `restProps`

* Update remaining usage of Svg/Canvas to Layer

Author: techniq

.changeset/bumpy-breads-rhyme.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(GeoPath): Do not register with hit canavs unless pointer events (onclick, onpointermove, etc) or tooltipContext are defined

.changeset/huge-boats-fix.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+docs: Document each component's context support (svg, canvas, html) with interactive toggle

.changeset/ninety-ghosts-taste.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Blur): Remove children snippet props (not needed and easier to support canvas in the future)

.changeset/pink-flies-worry.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Calendar|MonthPath): Support canvas by using `Spline` instead of `path`

.changeset/tangy-lies-strive.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Spline): Rename `splineRef` to `pathRef`

packages/layerchart/src/app.d.ts

@@ -19,6 +19,7 @@ declare namespace App {
       hideUsage?: boolean;
       hideTableOfContents?: boolean;
       status?: string;
+      supportedContexts?: Array<'svg' | 'canvas' | 'html'>;
     };
   }
 

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

@@ -401,13 +401,13 @@
   <Spline
     pathData={trackArc()}
     stroke="none"
-    bind:splineRef={trackRef}
+    bind:pathRef={trackRef}
     {...extractLayerProps(track, 'arc-track')}
   />
 {/if}
 
 <Spline
-  bind:splineRef={ref}
+  bind:pathRef={ref}
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}

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

@@ -14,9 +14,9 @@
 
     /**
      * The default children snippet which provides
-     * the id and url for the filter.
+     * the id for the filter.
      */
-    children?: Snippet<[{ id: string; url: string }]>;
+    children?: Snippet;
   };
 </script>
 
@@ -42,7 +42,9 @@
 
   {#if children}
     <g filter="url(#{id})" class={layerClass('blur-g')}>
-      {@render children({ id, url: `url(#${id})` })}
+      {@render children()}
     </g>
   {/if}
+{:else if children}
+  {@render children()}
 {/if}

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

@@ -82,7 +82,7 @@
     type = 'rounded',
     radius = 20,
     curve = curveLinear,
-    splineRef = $bindable(),
+    pathRef = $bindable(),
     pathData: pathDataProp,
     marker,
     markerStart,
@@ -137,7 +137,7 @@
 
 <Spline
   pathData={motionPath.current}
-  bind:splineRef
+  bind:pathRef
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}

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

@@ -157,10 +157,11 @@
       name: 'GeoPath',
       render,
       events: {
-        click: _onClick,
-        pointerenter: _onPointerEnter,
-        pointermove: _onPointerMove,
-        pointerleave: _onPointerLeave,
+        // Only register events if they are defined (so they are not registered with hit canvas unnecessarily)
+        click: onclick ? _onClick : undefined,
+        pointerenter: restProps.onpointerenter || tooltipContext ? _onPointerEnter : undefined,
+        pointermove: restProps.onpointermove || tooltipContext ? _onPointerMove : undefined,
+        pointerleave: restProps.onpointerleave || tooltipContext ? _onPointerLeave : undefined,
         pointerdown: restProps.onpointerdown,
         touchmove: restProps.ontouchmove,
       },