layerchart 0.60.2 → 0.70.0

package/dist/components/RadialGradient.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('radialGradient-');
 
@@ -25,33 +31,85 @@
 
   /** 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: Set correct values: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient.  See also: LinearGradient
+    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
+
+    // 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 && cx && cy && fx && fy && $width && $height;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<defs>
-  <radialGradient
-    {id}
-    {cx}
-    {cy}
-    {fx}
-    {fy}
-    {r}
-    {spreadMethod}
-    gradientTransform={transform}
-    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>
-  </radialGradient>
-</defs>
-
-<slot {id} url="url(#{id})" />
+{#if renderContext === 'canvas'}
+  <slot {id} gradient={canvasGradient} />
+{:else if renderContext === 'svg'}
+  <defs>
+    <radialGradient
+      {id}
+      {cx}
+      {cy}
+      {fx}
+      {fy}
+      {r}
+      {spreadMethod}
+      gradientTransform={transform}
+      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>
+    </radialGradient>
+  </defs>
+
+  <slot {id} gradient="url(#{id})" />
+{/if}

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

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

package/dist/components/Rect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import { cls } from '@layerstack/tailwind';
 
   import {
@@ -8,6 +8,8 @@
     type SpringOptions,
     type TweenedOptions,
   } from '../stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderRect } from '../index.js/utils/canvas.js';
 
   export let x = 0;
   export let initialX = x;
@@ -21,6 +23,11 @@
   export let height: number;
   export let initialHeight = height;
 
+  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 spring: boolean | SpringOptions | { [prop: string]: SpringOptions } = undefined;
   export let tweened: boolean | TweenedOptions | { [prop: string]: TweenedOptions } = undefined;
 
@@ -35,22 +42,59 @@
     tweened_width.set(width);
     tweened_height.set(height);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    renderRect(
+      ctx,
+      { x: $tweened_x, y: $tweened_y, width: $tweened_width, height: $tweened_height },
+      {
+        styles: { fill, fillOpacity, stroke, strokeWidth },
+        classes: $$props.class,
+      }
+    );
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Rect', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    $tweened_x && $tweened_y && $tweened_width && $tweened_height;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<rect
-  x={$tweened_x}
-  y={$tweened_y}
-  width={$tweened_width}
-  height={$tweened_height}
-  class={cls($$props.fill == null && 'fill-surface-content')}
-  {...$$restProps}
-  on:click
-  on:pointerenter
-  on:pointerover
-  on:pointermove
-  on:pointerout
-  on:pointerleave
-  on:dblclick
-/>
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <rect
+    x={$tweened_x}
+    y={$tweened_y}
+    width={$tweened_width}
+    height={$tweened_height}
+    class={cls($$props.fill == null && 'fill-surface-content')}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    on:click
+    on:pointerenter
+    on:pointerover
+    on:pointermove
+    on:pointerout
+    on:pointerleave
+    on:dblclick
+  />
+{/if}

package/dist/components/Rule.svelte

@@ -67,7 +67,7 @@
         {x2}
         {y2}
         {...$$restProps}
-        class={cls('test grid stroke-surface-content/10', $$props.class)}
+        class={cls('stroke-surface-content/10', $$props.class)}
       />
     {:else}
       <Line

package/dist/components/Spline.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick, type ComponentProps } from 'svelte';
+  import { onDestroy, tick, type ComponentProps } from 'svelte';
   import { writable } from 'svelte/store';
   import { tweened as tweenedStore } from 'svelte/motion';
   import { draw as _drawTransition } from 'svelte/transition';
@@ -21,6 +21,8 @@
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
   import { flattenPathData } from '../utils/path.js';
+  import { renderPathData } from '../utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const {
     data: contextData,
@@ -61,6 +63,11 @@
   export let curve: CurveFactory | CurveFactoryLineOnly | undefined = undefined;
   export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
 
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
+
   /** Marker to attach to start, mid, and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -153,6 +160,31 @@
     key = Symbol();
   }
 
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    renderPathData(ctx, $tweened_d, {
+      styles: { stroke, fill, strokeWidth, opacity },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Spline', render });
+
+    tweened_d.subscribe(() => {
+      canvasContext.invalidate();
+    });
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
+
   let pathEl: SVGPathElement | undefined = undefined;
   const startPoint = writable<DOMPoint | undefined>(undefined);
   $: endPoint = motionStore<DOMPoint | undefined>(undefined, {
@@ -187,63 +219,69 @@
   }
 </script>
 
-{#key key}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <path
-    d={$tweened_d}
-    {...$$restProps}
-    class={cls(
-      'path-line',
-      !$$props.fill && 'fill-none',
-      !$$props.stroke && 'stroke-surface-content',
-      $$props.class
-    )}
-    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-    marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-    in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-    on:click
-    on:pointerenter
-    on:pointermove
-    on:pointerleave
-    bind:this={pathEl}
-  />
-
-  <slot name="markerStart" id={markerStartId}>
-    {#if markerStart}
+{#if renderContext === 'svg'}
+  {#key key}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <path
+      d={$tweened_d}
+      {...$$restProps}
+      class={cls(
+        'path-line',
+        !$$props.fill && 'fill-none',
+        !$$props.stroke && 'stroke-surface-content',
+        $$props.class
+      )}
+      {fill}
+      {stroke}
+      stroke-width={strokeWidth}
+      {opacity}
+      marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+      marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+      marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+      in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
+      on:click
+      on:pointerenter
+      on:pointermove
+      on:pointerleave
+      bind:this={pathEl}
+    />
+
+    <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="markerMid" id={markerMidId}>
       <Marker
-        id={markerStartId}
-        type={typeof markerStart === 'string' ? markerStart : undefined}
-        {...typeof markerStart === 'object' ? markerStart : null}
+        id={markerMidId}
+        type={typeof markerMid === 'string' ? markerMid : undefined}
+        {...typeof markerMid === 'object' ? markerMid : null}
       />
-    {/if}
-  </slot>
+    </slot>
 
-  <slot name="markerMid" id={markerMidId}>
-    <Marker
-      id={markerMidId}
-      type={typeof markerMid === 'string' ? markerMid : undefined}
-      {...typeof markerMid === 'object' ? markerMid : null}
-    />
-  </slot>
+    <slot name="markerEnd" id={markerEndId}>
+      <Marker
+        id={markerEndId}
+        type={typeof markerEnd === 'string' ? markerEnd : undefined}
+        {...typeof markerEnd === 'object' ? markerEnd : null}
+      />
+    </slot>
 
-  <slot name="markerEnd" id={markerEndId}>
-    <Marker
-      id={markerEndId}
-      type={typeof markerEnd === 'string' ? markerEnd : undefined}
-      {...typeof markerEnd === 'object' ? markerEnd : null}
-    />
-  </slot>
-
-  {#if $$slots.start && $startPoint}
-    <Group x={$startPoint.x} y={$startPoint.y}>
-      <slot name="start" point={$startPoint} />
-    </Group>
-  {/if}
-
-  {#if $$slots.end && $endPoint}
-    <Group x={$endPoint.x} y={$endPoint.y}>
-      <slot name="end" point={$endPoint} />
-    </Group>
-  {/if}
-{/key}
+    {#if $$slots.start && $startPoint}
+      <Group x={$startPoint.x} y={$startPoint.y}>
+        <slot name="start" point={$startPoint} />
+      </Group>
+    {/if}
+
+    {#if $$slots.end && $endPoint}
+      <Group x={$endPoint.x} y={$endPoint.y}>
+        <slot name="end" point={$endPoint} />
+      </Group>
+    {/if}
+  {/key}
+{/if}

package/dist/components/Text.svelte

@@ -1,10 +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 { getStringWidth } from '../utils/string.js';
   import { motionStore } from '../stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderText } from '../index.js/utils/canvas.js';
 
   /*
     TODO:
@@ -58,6 +60,11 @@
   /** Rotational angle of the text */
   export let rotate: number | undefined = 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 wordsByLines: { words: string[]; width?: number }[] = [];
   let wordsWithWidth: { word: string; width: number }[] = [];
   let spaceWidth: number = 0;
@@ -97,8 +104,13 @@
   /**
    * Convert css value to pixel value (ex. 0.71em => 11.36)
    */
-  function getPixelValue(cssValue: string) {
+  function getPixelValue(cssValue: number | string) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
+
+    if (typeof cssValue === 'number') {
+      return cssValue;
+    }
+
     // @ts-expect-error
     const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
     const number = Number(value);
@@ -162,25 +174,71 @@
     tweened_x.set(x);
     tweened_y.set(y);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    wordsByLines.forEach((line, index) => {
+      renderText(
+        ctx,
+        line.words.join(' '),
+        {
+          x: getPixelValue($tweened_x) + getPixelValue(dx),
+          y:
+            getPixelValue($tweened_y) +
+            getPixelValue(dy) +
+            (index === 0 ? startDy : getPixelValue(lineHeight)),
+        },
+        {
+          styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
+          classes: cls(fill === undefined && 'fill-surface-content', $$props.class),
+        }
+      );
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Text', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    value && $tweened_x && $tweened_y;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- `overflow: visible` allow contents to be shown outside element -->
-<!-- `paint-order: stroke` supports stroke outlining text  -->
-<svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
-  {#if isValidXOrY(x) && isValidXOrY(y)}
-    <text
-      x={$tweened_x}
-      y={$tweened_y}
-      {transform}
-      text-anchor={textAnchor}
-      {...$$restProps}
-      class={cls($$props.fill === undefined && 'fill-surface-content', $$props.class)}
-    >
-      {#each wordsByLines as line, index}
-        <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>
-          {line.words.join(' ')}
-        </tspan>
-      {/each}
-    </text>
-  {/if}
-</svg>
+{#if renderContext === 'svg'}
+  <!-- `overflow: visible` allow contents to be shown outside element -->
+  <!-- `paint-order: stroke` supports stroke outlining text  -->
+  <svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
+    {#if isValidXOrY(x) && isValidXOrY(y)}
+      <text
+        x={$tweened_x}
+        y={$tweened_y}
+        {transform}
+        text-anchor={textAnchor}
+        {...$$restProps}
+        {fill}
+        fill-opacity={fillOpacity}
+        {stroke}
+        stroke-width={strokeWidth}
+        class={cls(fill === undefined && 'fill-surface-content', $$props.class)}
+      >
+        {#each wordsByLines as line, index}
+          <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>
+            {line.words.join(' ')}
+          </tspan>
+        {/each}
+      </text>
+    {/if}
+  </svg>
+{/if}

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        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;
         size?: import("svelte-ux").ButtonSize | undefined;
         show?: ("reset" | "scrollMode" | "zoomIn" | "zoomOut" | "center")[] | undefined;

package/dist/components/charts/AreaChart.svelte

@@ -7,6 +7,7 @@
 
   import Area from '../Area.svelte';
   import Axis from '../Axis.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -18,7 +19,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -30,6 +36,7 @@
     rule?: typeof rule;
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -74,6 +81,8 @@
     labels?: Partial<ComponentProps<Labels>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -126,7 +135,7 @@
           ? s.value[1]
           : (s.value ?? s.key),
       fill: s.color,
-      'fill-opacity': 0.3,
+      fillOpacity: 0.3,
       ...props.area,
       ...s.props,
       line: {
@@ -151,12 +160,7 @@
   yBaseline={0}
   yNice
   {radial}
-  padding={radial || axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={radial ? undefined : defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'bisect-x' }}
   {...$$restProps}
   let:x
@@ -186,7 +190,7 @@
   }}
 
   <slot {...slotProps}>
-    <Svg center={radial}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -261,7 +265,7 @@
       {#if labels}
         <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
       {/if}
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}