layerchart 0.60.3 → 0.70.0

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

@@ -6,11 +6,11 @@ declare const __propDef: {
             [x: string]: any;
             geojson?: import("d3-geo").GeoPermissibleObjects | null | undefined;
             render?: ((ctx: CanvasRenderingContext2D, options: {
-                geoPath: ReturnType<typeof import("..").geoCurvePath>;
+                newGeoPath: () => ReturnType<typeof import("..").geoCurvePath>;
             }) => any) | undefined | undefined;
             fill?: string | undefined | undefined;
             stroke?: string | undefined | undefined;
-            strokeWidth?: number | string | undefined | undefined;
+            strokeWidth?: number | undefined | undefined;
             tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
             curve?: (import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly) | undefined;
             class?: string | undefined | undefined;
@@ -20,11 +20,11 @@ declare const __propDef: {
             [x: string]: any;
             geojson?: import("d3-geo").GeoPermissibleObjects | null | undefined;
             render?: ((ctx: CanvasRenderingContext2D, options: {
-                geoPath: ReturnType<typeof import("..").geoCurvePath>;
+                newGeoPath: () => ReturnType<typeof import("..").geoCurvePath>;
             }) => any) | undefined | undefined;
             fill?: string | undefined | undefined;
             stroke?: string | undefined | undefined;
-            strokeWidth?: number | string | undefined | undefined;
+            strokeWidth?: number | undefined | undefined;
             tooltip?: import("./tooltip/TooltipContext.svelte").TooltipContextValue | undefined;
             curve?: (import("d3-shape").CurveFactory | import("d3-shape").CurveFactoryLineOnly) | undefined;
             class?: string | undefined | undefined;

package/dist/components/Group.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '../stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const { width, height } = chartContext();
 
@@ -44,23 +45,50 @@
   $: if (center || x != null || y != null) {
     transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
   }
-</script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<g
-  {transform}
-  {...$$restProps}
-  on:click
-  on:pointerdown
-  on:pointerenter
-  on:pointermove
-  on:pointerleave
-  on:touchmove={(e) => {
-    if (preventTouchMove) {
-      // Prevent touch to not interfer with pointer
-      e.preventDefault();
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Group', render, retainState: true });
+  }
+
+  $: if (renderContext === 'canvas') {
+    $tweened_x && $tweened_y;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
     }
-  }}
->
+  });
+</script>
+
+{#if renderContext === 'canvas'}
   <slot />
-</g>
+{:else if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <g
+    {transform}
+    {...$$restProps}
+    on:click
+    on:pointerdown
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove={(e) => {
+      if (preventTouchMove) {
+        // Prevent touch to not interfer with pointer
+        e.preventDefault();
+      }
+    }}
+  >
+    <slot />
+  </g>
+{/if}

package/dist/components/HitCanvas.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { scaleCanvas } from 'layercake';
+  import { createEventDispatcher } from 'svelte';
   import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
@@ -27,18 +25,6 @@
     };
   }>();
 
-  const cntxt = {
-    ctx: writable({}),
-  };
-
-  onMount(() => {
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently
-    scaleCanvas(context, $width, $height);
-  });
-
-  $: cntxt.ctx.set(context);
-  setContext('canvas', cntxt);
-
   function* rgbColorGenerator(step = 500) {
     let nextColor = 1;
 
@@ -124,9 +110,9 @@
       dispatch('click', { event: e, data });
     }
   }}
-/>
-
-<!-- Do not render while dragging to improve interaction performance -->
-{#if !$dragging}
-  <slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
-{/if}
+>
+  <!-- Do not render while dragging to improve interaction performance -->
+  {#if !$dragging}
+    <slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
+  {/if}
+</Canvas>

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

@@ -12,7 +12,7 @@ declare const __propDef: {
         tickValues?: any[] | undefined | undefined;
         tickFontSize?: number | undefined;
         tickLength?: number | undefined;
-        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         onClick?: ((tick: any) => any) | undefined | undefined;
         variant?: "ramp" | "swatches" | undefined;

package/dist/components/Line.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick, type ComponentProps } from 'svelte';
+  import { onDestroy, tick, type ComponentProps } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
 
@@ -7,6 +7,8 @@
   import { uniqueId } from '@layerstack/utils';
 
   import Marker from './Marker.svelte';
+  import { renderPathData } from '../utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let x1: number;
   export let initialX1 = x1;
@@ -20,6 +22,10 @@
   export let y2: number;
   export let initialY2 = y2;
 
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   /** Marker to attach to start and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -47,37 +53,70 @@
     tweened_x2.set(x2);
     tweened_y2.set(y2);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    const pathData = `M ${$tweened_x1},${$tweened_y1} L ${$tweened_x2},${$tweened_y2}`;
+    renderPathData(ctx, pathData, {
+      styles: { fill, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Line', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    $tweened_x1 && $tweened_y1 && $tweened_x2 && $tweened_y2;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<line
-  x1={$tweened_x1}
-  y1={$tweened_y1}
-  x2={$tweened_x2}
-  y2={$tweened_y2}
-  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  class={cls($$props.stroke === undefined && 'stroke-surface-content')}
-  {...$$restProps}
-  on:click
-  on:pointermove
-  on:pointerleave
-/>
-
-<slot name="markerStart" id={markerStartId}>
-  {#if markerStart}
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <line
+    x1={$tweened_x1}
+    y1={$tweened_y1}
+    x2={$tweened_x2}
+    y2={$tweened_y2}
+    {fill}
+    {stroke}
+    stroke-width={strokeWidth}
+    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+    class={cls($$props.stroke === undefined && 'stroke-surface-content')}
+    {...$$restProps}
+    on:click
+    on:pointermove
+    on:pointerleave
+  />
+
+  <slot name="markerStart" id={markerStartId}>
+    {#if markerStart}
+      <Marker
+        id={markerStartId}
+        type={typeof markerStart === 'string' ? markerStart : undefined}
+        {...typeof markerStart === 'object' ? markerStart : null}
+      />
+    {/if}
+  </slot>
+
+  <slot name="markerEnd" id={markerEndId}>
     <Marker
-      id={markerStartId}
-      type={typeof markerStart === 'string' ? markerStart : undefined}
-      {...typeof markerStart === 'object' ? markerStart : null}
+      id={markerEndId}
+      type={typeof markerEnd === 'string' ? markerEnd : undefined}
+      {...typeof markerEnd === 'object' ? markerEnd : null}
     />
-  {/if}
-</slot>
-
-<slot name="markerEnd" id={markerEndId}>
-  <Marker
-    id={markerEndId}
-    type={typeof markerEnd === 'string' ? markerEnd : undefined}
-    {...typeof markerEnd === 'object' ? markerEnd : null}
-  />
-</slot>
+  </slot>
+{/if}

package/dist/components/LinearGradient.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import { uniqueId } from '@layerstack/utils';
 
+  import { chartContext } from './ChartContext.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { getComputedStyles } from '../utils/canvas.js';
+  import { parsePercent } from '../utils/math.js';
+
   /** Unique id for linearGradient */
   export let id: string = uniqueId('linearGradient-');
 
@@ -21,31 +27,88 @@
 
   /** Define the coordinate system for attributes (i.e. gradientUnits) */
   export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
+
+  const { width, height, padding } = chartContext();
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  let canvasGradient: CanvasGradient;
+
+  function render(ctx: CanvasRenderingContext2D) {
+    // TODO: Use x1/y1/x2/y2 values (convert from pecentage strings)
+    const gradient = ctx.createLinearGradient(
+      $padding.left,
+      $padding.top,
+      vertical ? $padding.left : $width - $padding.right,
+      vertical ? $height + $padding.bottom : $padding.top
+    );
+
+    // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
+    stops.forEach((stop, i) => {
+      if (Array.isArray(stop)) {
+        const { fill } = getComputedStyles(ctx.canvas, {
+          styles: { fill: stop[1] },
+          classes: $$props.class,
+        });
+        gradient.addColorStop(parsePercent(stop[0]), fill);
+      } else {
+        const { fill } = getComputedStyles(ctx.canvas, {
+          styles: { fill: stop },
+          classes: $$props.class,
+        });
+        gradient.addColorStop(i / (stops.length - 1), fill);
+      }
+    });
+
+    canvasGradient = gradient;
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    stops && x1 && y1 && x2 && y2 && $width && $height;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<defs>
-  <linearGradient
-    {id}
-    {x1}
-    {y1}
-    {x2}
-    {y2}
-    gradientTransform={rotate ? `rotate(${rotate})` : ''}
-    gradientUnits={units}
-    {...$$restProps}
-  >
-    <slot name="stops">
-      {#if stops}
-        {#each stops as stop, i}
-          {#if Array.isArray(stop)}
-            <stop offset={stop[0]} stop-color={stop[1]} />
-          {:else}
-            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
-          {/if}
-        {/each}
-      {/if}
-    </slot>
-  </linearGradient>
-</defs>
-
-<slot {id} url="url(#{id})" />
+{#if renderContext === 'canvas'}
+  <slot {id} gradient={canvasGradient} />
+{:else if renderContext === 'svg'}
+  <defs>
+    <linearGradient
+      {id}
+      {x1}
+      {y1}
+      {x2}
+      {y2}
+      gradientTransform={rotate ? `rotate(${rotate})` : ''}
+      gradientUnits={units}
+      {...$$restProps}
+    >
+      <slot name="stops">
+        {#if stops}
+          {#each stops as stop, i}
+            {#if Array.isArray(stop)}
+              <stop offset={stop[0]} stop-color={stop[1]} />
+            {:else}
+              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+            {/if}
+          {/each}
+        {/if}
+      </slot>
+    </linearGradient>
+  </defs>
+
+  <slot {id} gradient="url(#{id})" />
+{/if}

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

@@ -16,11 +16,11 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        stops: {};
         default: {
             id: string;
-            url: string;
+            gradient: string;
         };
+        stops: {};
     };
 };
 export type LinearGradientProps = typeof __propDef.props;

package/dist/components/Points.svelte

@@ -3,8 +3,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, type ComponentProps } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { onDestroy, type ComponentProps } from 'svelte';
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
   import { notNull } from '@layerstack/utils';
@@ -13,6 +12,7 @@
   import Circle from './Circle.svelte';
   import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const context = chartContext() as any;
   const {
@@ -25,9 +25,6 @@
     yGet,
     cGet,
     rGet,
-    padding,
-    containerWidth,
-    containerHeight,
     config,
     radial,
   } = context;
@@ -45,8 +42,9 @@
   export let links: boolean | Partial<ComponentProps<Link>> = false;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
 
   /** Render to canvas */
   export let render: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined =
@@ -55,9 +53,6 @@
   let className: string | undefined = undefined;
   export { className as class };
 
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
-  const DEFAULT_FILL = 'rgb(0, 0, 0)';
-
   function getOffset(value: any, offset: Offset, scale: AnyScale) {
     if (typeof offset === 'function') {
       return offset(value, context);
@@ -165,46 +160,31 @@
     }
   });
 
-  $: 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);
-    }
-
-    // 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) {
-      render($ctx, points);
+      render(ctx, points);
     } else {
-      points.forEach((point) => {
-        $ctx.beginPath();
-        $ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false);
-
-        $ctx.lineWidth = Number(strokeWidth ?? 0);
-        $ctx.strokeStyle =
-          (stroke ?? computedStyles.stroke === 'none')
-            ? 'transparent'
-            : (computedStyles.stroke ?? '');
-        $ctx.stroke();
-
-        $ctx.fillStyle =
-          fill ??
-          (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
-          'transparent';
-        $ctx.fill();
-      });
+      // Rendered below
     }
   }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Points', render: _render });
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 <slot {points}>
-  {#if renderContext === 'svg'}
+  {#if renderContext === 'svg' || (renderContext === 'canvas' && !render)}
     {#if links}
       <g class="link-group">
         {#each _links as link}
@@ -225,7 +205,9 @@
           cy={$radial ? radialPoint[1] : point.y}
           r={point.r}
           fill={fill ?? ($config.c ? $cGet(point.data) : null)}
+          {fillOpacity}
           {stroke}
+          {strokeWidth}
           class={className}
           {...$$restProps}
         />

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

@@ -18,8 +18,9 @@ declare const __propDef: {
         offsetY?: number | ((value: number, context: any) => number) | undefined;
         links?: (boolean | Partial<ComponentProps<Link>>) | undefined;
         fill?: string | undefined | undefined;
+        fillOpacity?: number | undefined | undefined;
         stroke?: string | undefined | undefined;
-        strokeWidth?: number | string | undefined | undefined;
+        strokeWidth?: number | undefined | undefined;
         render?: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined | undefined;
         class?: string | undefined | undefined;
     };