layerchart 0.60.2 → 0.70.0

package/dist/components/Arc.svelte

@@ -17,7 +17,7 @@
   // https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
   // https://codepen.io/simeydotme/pen/rrOEmO/
 
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { arc as d3arc } from 'd3-shape';
@@ -28,6 +28,8 @@
   import { motionStore } from '../stores/motionStore.js';
   import { degreesToRadians } from '../utils/math.js';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderPathData } from '../utils/canvas.js';
 
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
@@ -80,6 +82,11 @@
   export let padAngle = 0;
   // export let padRadius = 0;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   export let track: boolean | SVGAttributes<SVGPathElement> = false;
 
   const { yRange } = chartContext();
@@ -183,36 +190,85 @@
    * Data to set when showing tooltip
    */
   export let data: any = undefined;
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    ctx.translate(xOffset, yOffset);
+
+    // Track
+    const trackProps = { ...(typeof track === 'object' ? track : null) };
+    renderPathData(ctx, trackArc(), {
+      styles: {
+        fill: trackProps['fill'] ?? undefined,
+        fillOpacity: trackProps['fill-opacity'] ?? undefined,
+        stroke: trackProps['stroke'] ?? undefined,
+        strokeWidth: trackProps['stroke-width'] ?? undefined,
+        opacity: trackProps['opacity'] ?? undefined,
+      },
+      classes: trackProps.class ?? undefined,
+    });
+
+    // Arc
+    renderPathData(ctx, arc(), {
+      styles: { fill, fillOpacity, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Arc', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    arc && trackArc;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-{#if track}
+{#if renderContext === 'svg'}
+  {#if track}
+    <path
+      d={trackArc()}
+      class="track"
+      bind:this={trackArcEl}
+      {...typeof track === 'object' ? track : null}
+    />
+  {/if}
+
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <path
-    d={trackArc()}
-    class="track"
-    bind:this={trackArcEl}
-    {...typeof track === 'object' ? track : null}
+    d={arc()}
+    transform="translate({xOffset}, {yOffset})"
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    on:pointerenter={(e) => tooltip?.show(e, data)}
+    on:pointermove={(e) => tooltip?.show(e, data)}
+    on:pointerleave={(e) => tooltip?.hide()}
+    on:touchmove={(e) => {
+      if (tooltip) {
+        // Prevent touch to not interfer with pointer when using tooltip
+        e.preventDefault();
+      }
+    }}
+    on:click
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove
   />
 {/if}
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<path
-  d={arc()}
-  transform="translate({xOffset}, {yOffset})"
-  {...$$restProps}
-  on:pointerenter={(e) => tooltip?.show(e, data)}
-  on:pointermove={(e) => tooltip?.show(e, data)}
-  on:pointerleave={(e) => tooltip?.hide()}
-  on:touchmove={(e) => {
-    if (tooltip) {
-      // Prevent touch to not interfer with pointer when using tooltip
-      e.preventDefault();
-    }
-  }}
-  on:click
-  on:pointerenter
-  on:pointermove
-  on:pointerleave
-  on:touchmove
-/>
-
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

package/dist/components/Area.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
+  import { onDestroy, type ComponentProps } from 'svelte';
   import type { tweened as tweenedStore } from 'svelte/motion';
   import { type Area, area as d3Area, areaRadial } from 'd3-shape';
   import type { CurveFactory } from 'd3-shape';
@@ -14,6 +14,8 @@
   import Spline from './Spline.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
+  import { renderPathData } from '../utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const {
     data: contextData,
@@ -23,8 +25,8 @@
     y,
     yDomain,
     yRange,
-    config,
     radial,
+    config,
   } = chartContext();
 
   /** Override data instead of using context */
@@ -52,6 +54,11 @@
   /** Enable showing line */
   export let line: boolean | Partial<ComponentProps<Spline>> = false;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   const xAccessor = x ? accessor(x) : $contextX;
   const y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
   const y1Accessor = y1 ? accessor(y1) : $y;
@@ -125,8 +132,34 @@
     const d = pathData ?? path(data ?? $contextData);
     tweened_d.set(d ?? '');
   }
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    renderPathData(ctx, $tweened_d, {
+      styles: { fill, fillOpacity, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Area', render });
+
+    tweened_d.subscribe(() => {
+      canvasContext.invalidate();
+    });
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
+<!-- TODO: Find way to not clear <Canvas> when rendering Spline (remove Area rendering).  Idea: https://github.com/techniq/layerchart/issues/158#issuecomment-2543416108 -->
 {#if line}
   <Spline
     {data}
@@ -139,13 +172,19 @@
   />
 {/if}
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<path
-  d={$tweened_d}
-  clip-path={clipPath}
-  {...$$restProps}
-  class={cls('path-area', $$props.class)}
-  on:click
-  on:pointermove
-  on:pointerleave
-/>
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <path
+    d={$tweened_d}
+    clip-path={clipPath}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    class={cls('path-area', $$props.class)}
+    on:click
+    on:pointermove
+    on:pointerleave
+  />
+{/if}

package/dist/components/Bar.svelte

@@ -9,6 +9,7 @@
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { greatestAbs } from '@layerstack/utils';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const { x: xContext, y: yContext, xScale } = chartContext();
 
@@ -106,9 +107,12 @@
       z`
     .split('\n')
     .join('');
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 </script>
 
-{#if _rounded === 'all' || radius === 0}
+{#if (_rounded === 'all' || radius === 0) && renderContext === 'svg'}
   <Rect
     {fill}
     {spring}

package/dist/components/Circle.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
 
   import { motionStore } from '../stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { circlePath } from '../utils/path.js';
+  import { renderPathData } from '../utils/canvas.js';
 
   export let cx: number = 0;
   export let initialCx = cx;
@@ -17,6 +20,11 @@
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   let tweened_cx = motionStore(initialCx, { spring, tweened });
   let tweened_cy = motionStore(initialCy, { spring, tweened });
   let tweened_r = motionStore(initialR, { spring, tweened });
@@ -26,16 +34,50 @@
     tweened_cy.set(cy);
     tweened_r.set(r);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    const pathData = circlePath({ cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r });
+    renderPathData(ctx, pathData, {
+      styles: { fill, fillOpacity, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Circle', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    $tweened_cx && $tweened_cy && $tweened_r;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<circle
-  cx={$tweened_cx}
-  cy={$tweened_cy}
-  r={$tweened_r}
-  class={cls($$props.fill == null && 'fill-surface-content')}
-  {...$$restProps}
-  on:click
-  on:pointermove
-  on:pointerleave
-/>
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <circle
+    cx={$tweened_cx}
+    cy={$tweened_cy}
+    r={$tweened_r}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    class={cls($$props.fill == null && 'fill-surface-content')}
+    {...$$restProps}
+    on:click
+    on:pointermove
+    on:pointerleave
+  />
+{/if}

package/dist/components/ComputedStyles.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { computedStyles } from '@layerstack/svelte-actions';
+  import { cls } from '@layerstack/tailwind';
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
+  let styles: CSSStyleDeclaration;
+</script>
+
+<div
+  class={cls('ComputedStyles hidden', className)}
+  use:computedStyles={(_styles) => (styles = _styles)}
+></div>
+
+<slot {styles} />

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            styles: CSSStyleDeclaration;
+        };
+    };
+};
+export type ComputedStylesProps = typeof __propDef.props;
+export type ComputedStylesEvents = typeof __propDef.events;
+export type ComputedStylesSlots = typeof __propDef.slots;
+export default class ComputedStyles extends SvelteComponentTyped<ComputedStylesProps, ComputedStylesEvents, ComputedStylesSlots> {
+}
+export {};

package/dist/components/GeoPath.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, getContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import {
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
@@ -10,11 +9,12 @@
   } from 'd3-geo';
   import { cls } from '@layerstack/tailwind';
 
-  import { chartContext } from './ChartContext.svelte';
   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 { getCanvasContext } from './layout/Canvas.svelte';
 
   export let geojson: GeoPermissibleObjects | null | undefined = undefined;
 
@@ -22,13 +22,13 @@
   export let render:
     | ((
         ctx: CanvasRenderingContext2D,
-        options: { geoPath: ReturnType<typeof geoCurvePath> }
+        options: { newGeoPath: () => ReturnType<typeof geoCurvePath> }
       ) => any)
     | undefined = undefined;
 
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
 
   /**
    * Tooltip context to setup mouse events to show tooltip for related data
@@ -53,8 +53,6 @@
     click: { geoPath: ReturnType<typeof geoCurvePath>; event: MouseEvent };
   }>();
 
-  const { containerWidth, containerHeight, padding } = chartContext();
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
   const geo = geoContext();
 
   /**
@@ -68,51 +66,45 @@
   $: _projection = geoTransform ? d3geoTransform(geoTransform($geo)) : $geo;
 
   $: geoPath = geoCurvePath(_projection, curve);
+  $: {
+    // Recreate `geoPath()` if `geojson` data changes (fixes ghosting issue when rendering to canvas)
+    geojson;
+    geoPath = geoCurvePath(_projection, curve);
+  }
 
-  const DEFAULT_FILL = 'rgb(0, 0, 0)';
-
-  $: renderContext = canvas ? 'canvas' : 'svg';
-
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx) {
-    let computedStyles: Partial<CSSStyleDeclaration> = {};
-
-    // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
-    if (className) {
-      $ctx.canvas.classList.add(...className.split(' '));
-      computedStyles = window.getComputedStyle($ctx.canvas);
-    }
-
-    // console.count('render');
-
-    // Clear with negative offset due to Canvas `context.translate(...)`
-    $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
+  function _render(ctx: CanvasRenderingContext2D) {
     if (render) {
-      geoPath = geoCurvePath(_projection, curve, $ctx);
-      render($ctx, { geoPath });
+      render(ctx, { newGeoPath: () => geoCurvePath(_projection, curve) });
     } else {
-      $ctx.beginPath();
-      // Set the context here since setting it in `$: geoPath` is a circular reference
-      geoPath = geoCurvePath(_projection, curve, $ctx);
       if (geojson) {
-        geoPath(geojson);
+        const pathData = geoPath(geojson);
+        renderPathData(ctx, pathData, {
+          styles: { fill, stroke, strokeWidth },
+          classes: className,
+        });
       }
-
-      $ctx.fillStyle =
-        fill ??
-        (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
-        'transparent';
-      $ctx.fill();
-
-      $ctx.lineWidth = Number(strokeWidth ?? 0);
-      $ctx.strokeStyle =
-        (stroke ?? computedStyles.stroke === 'none')
-          ? 'transparent'
-          : (computedStyles.stroke ?? '');
-      $ctx.stroke();
     }
   }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'GeoPath', render: _render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when geojson, projection, or class change
+    geojson && _projection && className && fill && stroke && strokeWidth;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

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

@@ -8,11 +8,11 @@ declare const __propDef: {
         [x: string]: any;
         geojson?: GeoPermissibleObjects | null | undefined;
         render?: ((ctx: CanvasRenderingContext2D, options: {
-            geoPath: ReturnType<typeof geoCurvePath>;
+            newGeoPath: () => ReturnType<typeof geoCurvePath>;
         }) => any) | undefined | undefined;
         fill?: string | undefined | undefined;
         stroke?: string | undefined | undefined;
-        strokeWidth?: number | string | undefined | undefined;
+        strokeWidth?: number | undefined | undefined;
         tooltip?: TooltipContextValue | undefined;
         curve?: (CurveFactory | CurveFactoryLineOnly) | undefined;
         class?: string | undefined | undefined;

package/dist/components/GeoPoint.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { onDestroy } from 'svelte';
 
   import { geoContext } from './GeoContext.svelte';
   import Circle from './Circle.svelte';
   import Group from './Group.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   /** Latitude */
   export let lat: number;
@@ -17,24 +17,27 @@
     coords: { x: number; y: number }
   ) => any = () => {};
 
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
   const geo = geoContext();
 
   $: [x, y] = $geo([long, lat]) ?? [0, 0];
 
-  $: renderContext = canvas ? 'canvas' : 'svg';
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx) {
-    // $ctx.clearRect(0, 0, $width, $height);
-
-    // Transfer classes defined on <GeoPoint> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
-    if ($$props.class) {
-      $ctx.canvas.classList.add(...$$props.class.split(' '));
-    }
+  function _render(ctx: CanvasRenderingContext2D) {
+    render(ctx, { x, y });
+  }
 
-    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'}
@@ -46,3 +49,14 @@
     <Circle cx={x} cy={y} {...$$restProps} />
   {/if}
 {/if}
+
+{#if renderContext === 'canvas'}
+  {#if $$slots.default}
+    <!-- TODO: Handle Canvas translation.  Conslidate with svg use case above (if `render` is not defined) -->
+    <!-- <Group {x} {y} {...$$restProps}> -->
+    <slot />
+    <!-- </Group> -->
+  {:else}
+    <Circle cx={x} cy={y} {...$$restProps} />
+  {/if}
+{/if}

package/dist/components/GeoTile.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { onDestroy } from 'svelte';
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
@@ -8,6 +7,7 @@
   import { geoContext } from './GeoContext.svelte';
   import Group from './Group.svelte';
   import TileImage from './TileImage.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let url: (x: number, y: number, z: number) => string;
   export let zoomDelta = 0;
@@ -16,7 +16,6 @@
   export let debug = false;
 
   const { containerWidth, containerHeight, padding } = chartContext();
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
   const geo = geoContext();
 
   $: center = $geo([0, 0]) ?? [0, 0];
@@ -34,18 +33,34 @@
     scale,
   } = tiles);
 
-  $: renderContext = canvas ? 'canvas' : 'svg';
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx && url) {
+  function render(ctx: CanvasRenderingContext2D) {
     tiles.forEach(([x, y, z]: number[]) => {
       const image = new Image();
       image.onload = () => {
-        $ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
+        ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
       };
       image.src = url(x, y, z);
     });
   }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'GeoTile', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    tile;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 {#if renderContext === 'svg' && url}