layerchart 2.0.0-next.44 → 2.0.0-next.46

package/dist/components/Text.svelte

@@ -180,10 +180,10 @@
 
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
+  import { merge } from '@layerstack/utils';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  import { getLayerContext } from '../contexts/layer.js';
+  import { registerCanvasComponent } from './layers/Canvas.svelte';
   import { getStringWidth, truncateText, type TruncateTextOptions } from '../utils/string.js';
   import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
 
@@ -227,7 +227,7 @@
     ...restProps
   }: TextProps = $props();
 
-  const renderCtx = getRenderContext();
+  const layerCtx = getLayerContext();
 
   let ref = $state<SVGTextElement>();
   let svgRef = $state<SVGElement>();
@@ -446,7 +446,7 @@
   const fillKey = createKey(() => fill);
   const strokeKey = createKey(() => stroke);
 
-  if (renderCtx === 'canvas') {
+  if (layerCtx === 'canvas') {
     registerCanvasComponent({
       name: 'Text',
       render,
@@ -469,7 +469,7 @@
   }
 </script>
 
-{#if renderCtx === 'svg'}
+{#if layerCtx === 'svg'}
   <!-- `overflow: visible` allow contents to be shown outside element -->
   <!-- `paint-order: stroke` supports stroke outlining text  -->
   <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]} bind:this={svgRef}>
@@ -529,7 +529,7 @@
       </text>
     {/if}
   </svg>
-{:else if renderCtx === 'html'}
+{:else if layerCtx === 'html'}
   {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
   {@const translateY =
     verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
@@ -547,6 +547,8 @@
         ? 'bottom'
         : 'top'}
     {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
+    style:white-space="pre-wrap"
+    style:line-height={lineHeight}
     class={['lc-text', className]}
   >
     {textValue}

package/dist/components/Threshold.svelte

@@ -40,11 +40,11 @@
       - https://github.com/airbnb/visx/issues/245
   */
 
-  import { min } from 'd3-array';
+  import { min, max } from 'd3-array';
 
   import Area from './Area.svelte';
   import ClipPath from './ClipPath.svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   const ctx = getChartContext();
 
@@ -55,7 +55,7 @@
 {#key curve}
   <ClipPath>
     {#snippet clip()}
-      <Area y0={(d) => ctx.y(d)[0]} y1={(d) => min(ctx.yDomain)} {curve} {defined} />
+      <Area y0={(d) => ctx.y(d)[1]} y1={(d) => max(ctx.yDomain)} {curve} {defined} />
     {/snippet}
     {@render above?.({ curve, defined })}
   </ClipPath>

package/dist/components/TransformContext.svelte

@@ -1,145 +1,12 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
-
-  const DEFAULT_TRANSLATE = { x: 0, y: 0 };
-  const DEFAULT_SCALE = 1;
-
-  type TransformMode = 'canvas' | 'manual' | 'none';
-  type TransformScrollMode = 'scale' | 'translate' | 'none';
-
-  export type TransformContextValue = {
-    /**
-     * The current transform mode.
-     *
-     * - `canvas`: The transform is applied to the canvas element.
-     * - `manual`: The transform is applied manually.
-     * - `none`: No transform is applied.
-     */
-    mode: TransformMode;
-
-    /**
-     * The current scale of the transform.
-     */
-    scale: number;
-
-    /**
-     * Set the scale of the transform
-     * @param value - the scale value to set
-     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
-     */
-    setScale(value: number, options?: MotionProp): void;
-
-    /**
-     * The current translate of the transform.
-     */
-    translate: { x: number; y: number };
-
-    /**
-     * Set the translate of the transform
-     * @param point - the point to translate to
-     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
-     */
-    setTranslate(point: { x: number; y: number }, options?: MotionProp): void;
-
-    /**
-     * Whether the transform is currently being moved
-     */
-    moving: boolean;
-
-    /**
-     * Whether the transform is currently being dragged
-     */
-    dragging: boolean;
-
-    /**
-     * The scroll mode of the transform.
-     *
-     * - `scale`: Scrolling will zoom in/out the canvas.
-     * - `translate`: Scrolling will pan the canvas.
-     * - `none`: No scroll mode is applied.
-     */
-    scrollMode: TransformScrollMode;
-
-    /**
-     * Set the scroll mode of the transform
-     *
-     * @param mode - the scroll mode to set
-     */
-    setScrollMode(mode: TransformScrollMode): void;
-
-    /**
-     * Reset the transform to its initial state
-     */
-    reset(): void;
-
-    /**
-     * Zoom in the transform
-     */
-    zoomIn(): void;
-
-    /**
-     * Zoom out the transform
-     *
-     */
-    zoomOut(): void;
-
-    /**
-     * Translate the transform to the center of the canvas
-     */
-    translateCenter(): void;
-
-    /**
-     * Zoom to a specific point in the canvas
-     *
-     * @param center - The point (in chart coordinates) that should become the new
-     * center of the view after zooming.
-     *
-     * @param rect - A rectangular region (in chart coordinates) that the view should scale to fit.
-     * If omitted, the scale defaults to 1 (no zoom).
-     */
-    zoomTo(center: { x: number; y: number }, rect?: { width: number; height: number }): void;
-  };
-
-  const _TransformContext = new Context<TransformContextValue>('TransformContext');
-
-  function createDefaultTransformContext() {
-    let defaultTranslate = $state(DEFAULT_TRANSLATE);
-    let defaultScale = $state(DEFAULT_SCALE);
-
-    const defaultContext: TransformContextValue = {
-      mode: 'none',
-      get scale() {
-        return defaultScale;
-      },
-      setScale: (value: number) => {
-        defaultScale = value;
-      },
-      get translate() {
-        return defaultTranslate;
-      },
-      setTranslate: (value: { x: 0; y: 0 }) => {
-        defaultTranslate = value;
-      },
-      moving: false,
-      dragging: false,
-      scrollMode: 'none',
-      setScrollMode: () => {},
-      reset: () => {},
-      zoomIn: () => {},
-      zoomOut: () => {},
-      translateCenter: () => {},
-      zoomTo: () => {},
-    };
-    return defaultContext;
-  }
-
-  export function getTransformContext() {
-    return _TransformContext.getOr(createDefaultTransformContext());
-  }
-
-  export function setTransformContext(transform: TransformContextValue) {
-    return _TransformContext.set(transform);
-  }
+  import { setTransformContext, type TransformContextValue } from '../contexts/transform.js';
+  import {
+    DEFAULT_SCALE,
+    DEFAULT_TRANSLATE,
+    type TransformMode,
+    type TransformScrollMode,
+  } from '../states/transform.svelte.js';
 
   type TransformContextPropsWithoutHTML = {
     mode?: TransformMode;
@@ -211,11 +78,11 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { localPoint } from '@layerstack/utils';
-  import { Context, watch } from 'runed';
+  import { watch } from 'runed';
   import type { Without } from '../utils/types.js';
-  import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import {
     createControlledMotion,
     createMotionTracker,

package/dist/components/TransformControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
   import type { Placement } from './types.js';
 
   type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
@@ -42,9 +43,8 @@
   import LucideZoomIn from '~icons/lucide/zoom-in';
   import LucideZoomOut from '~icons/lucide/zoom-out';
 
-  import { getTransformContext } from './TransformContext.svelte';
+  import { getTransformContext } from '../contexts/transform.js';
   import type { Without } from '../utils/types.js';
-  import type { HTMLAttributes } from 'svelte/elements';
 
   let {
     placement = 'top-right',

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Placement } from './types.js';
 type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
 export type TransformControlsPropsWithoutHTML = {
@@ -22,7 +23,6 @@ export type TransformControlsProps = TransformControlsPropsWithoutHTML & Without
 import { type ComponentProps } from 'svelte';
 import { Button } from 'svelte-ux';
 import type { Without } from '../utils/types.js';
-import type { HTMLAttributes } from 'svelte/elements';
 declare const TransformControls: import("svelte").Component<TransformControlsProps, {}, "">;
 type TransformControls = ReturnType<typeof TransformControls>;
 export default TransformControls;

package/dist/components/Tree.svelte

@@ -1,5 +1,8 @@
 <script lang="ts" module>
   export type TreeProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
      * If unset, layout size is used instead.  When a node size is specified, the root node is always
@@ -14,8 +17,6 @@
      */
     separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
 
-    hierarchy?: HierarchyNode<T>;
-
     /**
      * Orientation of the tree layout.
      *
@@ -35,7 +36,7 @@
     type HierarchyNode,
   } from 'd3-hierarchy';
   import type { Snippet } from 'svelte';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   let {
     nodeSize,

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

@@ -1,4 +1,6 @@
 export type TreeProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
      * If unset, layout size is used instead.  When a node size is specified, the root node is always
@@ -11,7 +13,6 @@ export type TreeProps<T> = {
      * see: https://github.com/d3/d3-hierarchy#tree_separation
      */
     separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
-    hierarchy?: HierarchyNode<T>;
     /**
      * Orientation of the tree layout.
      *

package/dist/components/Treemap.svelte

@@ -1,5 +1,8 @@
 <script lang="ts" module>
   export type TreemapProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
+
     /**
      * The tile function to use for the treemap layout.
      *
@@ -66,8 +69,6 @@
      */
     maintainAspectRatio?: boolean;
 
-    hierarchy?: HierarchyNode<T>;
-
     children?: Snippet<[{ nodes: HierarchyRectangularNode<T>[] }]>;
   };
 </script>
@@ -86,7 +87,7 @@
   } from 'd3-hierarchy';
 
   import { aspectTile } from '../utils/treemap.js';
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
   import type { Snippet } from 'svelte';
 
   let {

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

@@ -1,4 +1,6 @@
 export type TreemapProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * The tile function to use for the treemap layout.
      *
@@ -51,7 +53,6 @@ export type TreemapProps<T> = {
      * @default false
      */
     maintainAspectRatio?: boolean;
-    hierarchy?: HierarchyNode<T>;
     children?: Snippet<[{
         nodes: HierarchyRectangularNode<T>[];
     }]>;

package/dist/components/Voronoi.svelte

@@ -66,9 +66,9 @@
 
   import GeoPath from './GeoPath.svelte';
   import Group, { type GroupProps } from './Group.svelte';
-  import Spline from './Spline.svelte';
-  import { getChartContext } from './Chart.svelte';
-  import { getGeoContext } from './GeoContext.svelte';
+  import Path from './Path.svelte';
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
   import CircleClipPath from './CircleClipPath.svelte';
 
   let {
@@ -147,10 +147,10 @@
     {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
     {#each points as point, i}
       {@const pathData = voronoi.renderCell(i)}
-      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
+      <!-- Wait to render Path until pathData is available to fix path artifacts from injected tweened points in Path  -->
       {#if pathData}
         <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
-          <Spline
+          <Path
             {pathData}
             class={['lc-voronoi-path', classes.path]}
             onclick={(e) => onclick?.(e, { data: point.data, point })}

package/dist/components/charts/ArcChart.svelte

@@ -25,12 +25,14 @@
     | 'marks'
     | 'onTooltipClick'
     | 'profile'
-    | 'renderContext'
+    | 'layer'
     | 'series'
     | 'tooltip'
     | 'cRange'
     | 'padding'
     | 'context'
+    | 'width'
+    | 'height'
   > &
     Pick<
       ArcPropsWithoutHTML,
@@ -128,7 +130,7 @@
   import Arc, { type ArcPropsWithoutHTML } from '../Arc.svelte';
   import Chart from '../Chart.svelte';
   import Group from '../Group.svelte';
-  import Layer from '../layout/Layer.svelte';
+  import Layer from '../layers/Layer.svelte';
   import Legend from '../Legend.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
@@ -150,6 +152,9 @@
   import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import { getColorIfDefined } from '../../utils/color.js';
+  import { getSettings } from '../../contexts/settings.js';
+
+  const settings = getSettings();
 
   let {
     data = [],
@@ -172,9 +177,9 @@
     /** Event dispatched with current tooltip data */
     onTooltipClick = () => {},
     props = {},
-    renderContext = 'svg',
+    layer: layerProp,
     profile = false,
-    debug = false,
+    debug: debugProp,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -193,6 +198,9 @@
     ...restProps
   }: ArcChartProps<TData> = $props();
 
+  const layer = $derived(layerProp ?? settings.layer);
+  const debug = $derived(debugProp ?? settings.debug);
+
   const center = $derived(centerProp ?? placement === 'center');
 
   const c = $derived(cProp ?? key);
@@ -380,8 +388,8 @@
       {@render belowContext?.(snippetProps)}
 
       <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+        type={layer}
+        {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
         {center}
         {debug}
       >

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

@@ -7,7 +7,7 @@ export type ArcChartExtraSnippetProps<TData> = {
     getArcProps: (s: SeriesData<TData, typeof Arc>, i: number) => ComponentProps<typeof Arc>;
 };
 export type ArcChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'pie' | 'group' | 'arc' | 'legend' | 'canvas' | 'svg' | 'tooltip'>;
-export type ArcChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc, ArcChartExtraSnippetProps<TData>>, 'aboveContext' | 'aboveMarks' | 'belowContext' | 'belowMarks' | 'children' | 'data' | 'debug' | 'legend' | 'marks' | 'onTooltipClick' | 'profile' | 'renderContext' | 'series' | 'tooltip' | 'cRange' | 'padding' | 'context'> & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
+export type ArcChartProps<TData> = Pick<SimplifiedChartProps<TData, typeof Arc, ArcChartExtraSnippetProps<TData>>, 'aboveContext' | 'aboveMarks' | 'belowContext' | 'belowMarks' | 'children' | 'data' | 'debug' | 'legend' | 'marks' | 'onTooltipClick' | 'profile' | 'layer' | 'series' | 'tooltip' | 'cRange' | 'padding' | 'context' | 'width' | 'height'> & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
     /**
      * Key accessor
      *

package/dist/components/charts/AreaChart.svelte

@@ -77,7 +77,7 @@
   import Grid from '../Grid.svelte';
   import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
-  import Layer from '../layout/Layer.svelte';
+  import Layer from '../layers/Layer.svelte';
   import Legend from '../Legend.svelte';
   import Points from '../Points.svelte';
   import Rule from '../Rule.svelte';
@@ -97,6 +97,9 @@
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
+  import { getSettings } from '../../contexts/settings.js';
+
+  const settings = getSettings();
 
   let {
     data = [],
@@ -119,9 +122,9 @@
     onTooltipClick = () => {},
     onPointClick,
     props = {},
-    renderContext = 'svg',
+    layer: layerProp,
     profile = false,
-    debug = false,
+    debug: debugProp,
     children: childrenProp,
     aboveContext,
     belowContext,
@@ -132,6 +135,9 @@
     ...restProps
   }: AreaChartProps<TData> = $props();
 
+  const layer = $derived(layerProp ?? settings.layer);
+  const debug = $derived(debugProp ?? settings.debug);
+
   const series = $derived(
     seriesProp === undefined
       ? [
@@ -408,7 +414,7 @@
   yBaseline={0}
   yNice
   {radial}
-  padding={radial ? undefined : defaultChartPadding(axis, legend)}
+  padding={radial ? undefined : defaultChartPadding({ axis, legend })}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -454,8 +460,8 @@
     {:else}
       {@render belowContext?.(snippetProps)}
       <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+        type={layer}
+        {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
         center={radial}
         {debug}
       >

package/dist/components/charts/BarChart.svelte

@@ -95,7 +95,7 @@
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
-  import Layer from '../layout/Layer.svelte';
+  import Layer from '../layers/Layer.svelte';
   import Legend from '../Legend.svelte';
   import Rule from '../Rule.svelte';
 
@@ -114,6 +114,9 @@
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
+  import { getSettings } from '../../contexts/settings.js';
+
+  const settings = getSettings();
 
   let {
     data = [],
@@ -134,9 +137,9 @@
     onTooltipClick = () => {},
     onBarClick = () => {},
     props = {},
-    renderContext = 'svg',
+    layer: layerProp,
     profile = false,
-    debug = false,
+    debug: debugProp,
     xScale: xScaleProp,
     yScale: yScaleProp,
     bandPadding = radial ? 0 : 0.4,
@@ -157,6 +160,9 @@
     ...restProps
   }: BarChartProps<TData> = $props();
 
+  const layer = $derived(layerProp ?? settings.layer);
+  const debug = $derived(debugProp ?? settings.debug);
+
   const series = $derived(
     seriesProp === undefined
       ? [
@@ -443,7 +449,7 @@
   c={isVertical ? yProp : xProp}
   cRange={['var(--color-primary, currentColor)']}
   {radial}
-  padding={radial ? undefined : defaultChartPadding(axis, legend)}
+  padding={radial ? undefined : defaultChartPadding({ axis, legend })}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -489,8 +495,8 @@
       {@render belowContext?.(snippetProps)}
 
       <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+        type={layer}
+        {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
         center={radial}
         {debug}
       >

package/dist/components/charts/DefaultTooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   // Shared tooltip logic across simplified chart components
   import { sum } from 'd3-array';
-  import { getChartContext } from '../Chart.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
   import * as Tooltip from '../tooltip/index.js';
   import type { SimplifiedChartPropsObject } from './types.js';
   import type { SeriesState } from '../../states/series.svelte.js';

package/dist/components/charts/LineChart.svelte

@@ -84,7 +84,7 @@
   import Grid from '../Grid.svelte';
   import Highlight, { type HighlightPointData } from '../Highlight.svelte';
   import Labels from '../Labels.svelte';
-  import Layer from '../layout/Layer.svelte';
+  import Layer from '../layers/Layer.svelte';
   import Legend from '../Legend.svelte';
   import Points from '../Points.svelte';
   import Rule from '../Rule.svelte';
@@ -104,6 +104,9 @@
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
   import { isScaleTime } from '../../utils/scales.svelte.js';
+  import { getSettings } from '../../contexts/settings.js';
+
+  const settings = getSettings();
 
   let {
     data = [],
@@ -126,9 +129,9 @@
     onTooltipClick = () => {},
     onPointClick,
     props = {},
-    renderContext = 'svg',
+    layer: layerProp,
     profile = false,
-    debug = false,
+    debug: debugProp,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -143,6 +146,9 @@
     ...restProps
   }: LineChartProps<TData> = $props();
 
+  const layer = $derived(layerProp ?? settings.layer);
+  const debug = $derived(debugProp ?? settings.debug);
+
   const isVertical = $derived(orientation === 'vertical');
 
   const series = $derived(
@@ -327,7 +333,7 @@
   yBaseline={isVertical || (yScale && isScaleTime(yScale)) ? undefined : 0}
   yNice={orientation === 'horizontal'}
   {radial}
-  padding={radial ? undefined : defaultChartPadding(axis, legend)}
+  padding={radial ? undefined : defaultChartPadding({ axis, legend })}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -373,8 +379,8 @@
       {@render belowContext?.(snippetProps)}
 
       <Layer
-        type={renderContext}
-        {...asAny(renderContext === 'canvas' ? props.canvas : props.svg)}
+        type={layer}
+        {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
         center={radial}
         {debug}
       >