layerchart 2.0.0-next.54 → 2.0.0-next.56

package/dist/components/Pattern.svelte

@@ -95,7 +95,9 @@
     background?: string;
 
     /**
-     * Render as a child of the pattern
+     * Render as a child of the pattern.
+     *
+     * Note: only supported on the `<Svg>` layer.
      */
     patternContent?: Snippet;
 
@@ -250,10 +252,102 @@
   }
 
   if (layerCtx === 'canvas') {
-    chartCtx.registerComponent({ name: 'Pattern', kind: 'mark', canvasRender: {
-      render,
-      deps: () => [width, height, shapes, background],
-    } });
+    chartCtx.registerComponent({
+      name: 'Pattern',
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [width, height, shapes, background],
+      },
+    });
+  }
+
+  function withOpacity(color: string, opacity: number) {
+    return opacity === 1 ? color : `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`;
+  }
+
+  // Build a CSS `background` value from lines/circles/background.
+  // Uses repeating-linear-gradient for lines and radial-gradient for circles
+  // so CSS variables/classes resolve natively in the HTML layer.
+  function createCSSPattern(): string {
+    const layers: string[] = [];
+
+    if (linesProp) {
+      const lineDefs = Array.isArray(linesProp)
+        ? linesProp
+        : linesProp === true
+          ? [{}]
+          : [linesProp];
+      for (const line of lineDefs) {
+        const color = withOpacity(
+          line.color ?? 'var(--color-surface-content, currentColor)',
+          line.opacity ?? 1
+        );
+        const sw = line.width ?? 1;
+
+        let rotate = Math.round(line.rotate ?? 0) % 360;
+        if (rotate > 180) rotate = rotate - 360;
+        else if (rotate > 90) rotate = rotate - 180;
+        else if (rotate < -180) rotate = rotate + 360;
+        else if (rotate < -90) rotate = rotate + 180;
+
+        let angle: number;
+        let period: number;
+        if (rotate === 0) {
+          angle = 0;
+          period = height;
+        } else if (rotate === 90) {
+          angle = 90;
+          period = width;
+        } else if (rotate > 0) {
+          angle = 45;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        } else {
+          angle = 135;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        }
+
+        layers.push(
+          `repeating-linear-gradient(${angle}deg, ${color} 0 ${sw}px, transparent ${sw}px ${period}px)`
+        );
+      }
+    }
+
+    if (circlesProp) {
+      const circleDefs = Array.isArray(circlesProp)
+        ? circlesProp
+        : circlesProp === true
+          ? [{}]
+          : [circlesProp];
+      for (const circle of circleDefs) {
+        const color = withOpacity(
+          circle.color ?? 'var(--color-surface-content, currentColor)',
+          circle.opacity ?? 1
+        );
+        const r = circle.radius ?? 1;
+
+        if (circle.stagger) {
+          layers.push(
+            `radial-gradient(circle at 25% 25%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`,
+            `radial-gradient(circle at 75% 75%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        } else {
+          layers.push(
+            `radial-gradient(circle at center, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        }
+      }
+    }
+
+    // `background` may be either a plain color or an image value (e.g. `linear-gradient(...)`
+    // when used as `<Pattern background={gradient}>`). Images go in the image-layer list
+    // tiled at the pattern size (after shape layers so they paint underneath);
+    // colors go in the background-color slot.
+    const isImage = background != null && /gradient\(|url\(/i.test(background);
+    if (isImage) layers.push(`${background} 0 0 / ${width}px ${height}px`);
+
+    if (layers.length === 0) return background ?? 'transparent';
+    return !isImage && background ? `${layers.join(', ')}, ${background}` : layers.join(', ');
   }
 </script>
 
@@ -299,4 +393,6 @@
   </defs>
 
   {@render children?.({ id, pattern: `url(#${id})` })}
+{:else if layerCtx === 'html'}
+  {@render children?.({ id, pattern: createCSSPattern() })}
 {/if}

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

@@ -75,7 +75,9 @@ export type PatternPropsWithoutHTML = {
      */
     background?: string;
     /**
-     * Render as a child of the pattern
+     * Render as a child of the pattern.
+     *
+     * Note: only supported on the `<Svg>` layer.
      */
     patternContent?: Snippet;
     children?: Snippet<[{

package/dist/components/Pie.svelte

@@ -109,9 +109,7 @@
 
   const endAngle = $derived(
     endAngleProp ??
-      degreesToRadians(
-        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
-      )
+      degreesToRadians((ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!)
   );
 
   const motionEndAngle = createMotion(0, () => endAngle, motion);
@@ -120,9 +118,7 @@
     let _pie = d3pie<any>()
       .startAngle(
         startAngleProp ??
-          degreesToRadians(
-            (ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!
-          )
+          degreesToRadians((ctx.config.xRange ? min(ctx.config.xRange as number[]) : min(range))!)
       )
       .endAngle(motionEndAngle.current)
       .padAngle(padAngle)

package/dist/components/RadialGradient.svelte

@@ -144,10 +144,14 @@
   }
 
   if (layerCtx === 'canvas') {
-    ctx.registerComponent({ name: 'Gradient', kind: 'group', canvasRender: {
-      render,
-      deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
-    } });
+    ctx.registerComponent({
+      name: 'Gradient',
+      kind: 'group',
+      canvasRender: {
+        render,
+        deps: () => [stops, cx, cy, fx, fy, ctx.width, ctx.height],
+      },
+    });
   }
 </script>
 

package/dist/components/Rect.svelte

@@ -5,7 +5,13 @@
   import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
   import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-  import type { Insets } from '../utils/rect.svelte.js';
+  import {
+    resolveCorners,
+    cornersUniform,
+    type Corners,
+    type Insets,
+  } from '../utils/rect.svelte.js';
+  import { roundedRectPath, parseDashArray } from '../utils/path.js';
 
   export type RectPropsWithoutHTML = {
     /**
@@ -119,6 +125,20 @@
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
+
+    /**
+     * Per-corner radii. Accepts a number (all corners equal — same as `rx`),
+     * a `[tl, tr, br, bl]` tuple, or `{ topLeft, topRight, bottomRight, bottomLeft }`.
+     * Takes precedence over `rx`/`ry` when corners differ.
+     */
+    corners?: Corners;
+
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
   } & DataDrivenStyleProps;
@@ -175,6 +195,8 @@
     key: keyFn = (_: any, i: number) => i,
     ref: refProp = $bindable(),
     motion,
+    corners,
+    dashArray,
     class: className,
     onclick,
     ondblclick,
@@ -279,10 +301,24 @@
     });
   });
 
+  // Fold a uniform `corners` value into rx/ry so SVG `<rect>` renders rounded
+  // corners without needing a `<path>`. When corners are per-corner different,
+  // `pixelPathData` kicks in below and SVG emits a `<path>` instead.
+  const dashArrayResolved = $derived(parseDashArray(dashArray));
+  const dashArrayAttr = $derived(dashArrayResolved ? dashArrayResolved.join(' ') : undefined);
+
+  const cornersUniformValue = $derived.by(() => {
+    if (corners === undefined) return undefined;
+    if (typeof corners === 'number') return corners;
+    const resolved = resolveCorners(corners, Infinity, Infinity);
+    return cornersUniform(resolved) ? resolved[0] : undefined;
+  });
+  const cornersNonUniform = $derived(corners !== undefined && cornersUniformValue === undefined);
+
   // Normalize rx/ry - if only one is provided, use it for both (SVG behavior)
   // Coerce to number for canvas rendering (SVG allows string like "50%")
-  const rx = $derived(Number(rxProp ?? ryProp) || 0);
-  const ry = $derived(Number(ryProp ?? rxProp) || 0);
+  const rx = $derived(Number(rxProp ?? ryProp ?? cornersUniformValue) || 0);
+  const ry = $derived(Number(ryProp ?? rxProp ?? cornersUniformValue) || 0);
 
   // --- Pixel mode ---
   let ref = $state<SVGRectElement>();
@@ -330,11 +366,38 @@
   const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
   const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
   const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
   const staticBorderWidth = $derived(
-    typeof strokeWidth === 'number' ? `${strokeWidth}px` : undefined
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
   );
   const htmlRestProps = $derived(restProps as unknown as HTMLAttributes<HTMLDivElement>);
 
+  // Resolved per-corner radii for the static (pixel-mode) rect, clamped to bounds.
+  const resolvedCorners = $derived(
+    corners !== undefined
+      ? resolveCorners(corners, motionWidth.current, motionHeight.current)
+      : undefined
+  );
+  const borderRadiusStyle = $derived(
+    resolvedCorners ? resolvedCorners.map((c) => `${c}px`).join(' ') : undefined
+  );
+  const pixelPathData = $derived(
+    resolvedCorners && cornersNonUniform
+      ? roundedRectPath(
+          motionX.current,
+          motionY.current,
+          motionWidth.current,
+          motionHeight.current,
+          resolvedCorners
+        )
+      : undefined
+  );
+
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
     itemFill?: string | undefined,
@@ -371,7 +434,13 @@
             'lc-rect',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: restProps.style as string | undefined,
+          style:
+            [
+              restProps.style as string | undefined,
+              dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
         };
   }
 
@@ -422,6 +491,7 @@
           height: motionHeight.current,
           rx,
           ry,
+          corners: resolvedCorners,
         },
         styleOpts
       );
@@ -475,6 +545,8 @@
               restProps.style,
               rx,
               ry,
+              resolvedCorners,
+              dashArrayAttr,
             ],
           }
         : undefined,
@@ -504,6 +576,7 @@
         opacity={resolvedOpacity}
         {rx}
         {ry}
+        stroke-dasharray={dashArrayAttr}
         class={cls('lc-rect', resolvedClass)}
         {...restProps}
         {onclick}
@@ -515,6 +588,28 @@
         {onpointerout}
       />
     {/each}
+  {:else if pixelPathData}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <path
+      d={pixelPathData}
+      fill={staticFill}
+      fill-opacity={staticFillOpacity}
+      stroke={staticStroke}
+      stroke-opacity={staticStrokeOpacity}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
+      stroke-dasharray={dashArrayAttr}
+      class={cls('lc-rect', staticClassName)}
+      {...restProps as unknown as SVGAttributes<SVGPathElement>}
+      {onclick}
+      {ondblclick}
+      {onpointerenter}
+      {onpointermove}
+      {onpointerleave}
+      {onpointerover}
+      {onpointerout}
+    />
   {:else}
     <rect
       x={motionX.current}
@@ -529,6 +624,7 @@
       opacity={staticOpacity}
       {rx}
       {ry}
+      stroke-dasharray={dashArrayAttr}
       class={cls('lc-rect', staticClassName)}
       {...restProps}
       {onclick}
@@ -550,6 +646,12 @@
       {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
       {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
@@ -559,9 +661,10 @@
         style:width="{item.width}px"
         style:height="{item.height}px"
         style:background={resolvedFill}
+        style:background-origin="border-box"
         style:opacity={resolvedOpacity}
-        style:border-width="{resolvedStrokeWidth}px"
-        style:border-style="solid"
+        style:border-width={resolvedBorderWidth}
+        style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
         style:border-color={resolvedStroke}
         style:border-radius="{rx}px"
         class={cls('lc-rect', resolvedClass)}
@@ -585,11 +688,12 @@
       style:width="{motionWidth.current}px"
       style:height="{motionHeight.current}px"
       style:background={staticFill}
+      style:background-origin="border-box"
       style:opacity={staticOpacity}
       style:border-width={staticBorderWidth}
-      style:border-style="solid"
+      style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
       style:border-color={staticStroke}
-      style:border-radius="{rx}px"
+      style:border-radius={borderRadiusStyle ?? `${rx}px`}
       class={cls('lc-rect', staticClassName)}
       {...htmlRestProps}
       {onclick}
@@ -621,6 +725,10 @@
     }
 
     /* Html layers */
+    :global(:where(.lc-layout-html .lc-rect)) {
+      /* Match SVG sizing/positioning (visual extent equals `width`×`height`, border on outer edge) */
+      box-sizing: border-box;
+    }
     :global(:where(.lc-layout-html .lc-rect):not([background])) {
       background: var(--fill-color);
     }

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

@@ -3,7 +3,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { CommonEvents, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-import type { Insets } from '../utils/rect.svelte.js';
+import { type Corners, type Insets } from '../utils/rect.svelte.js';
 export type RectPropsWithoutHTML = {
     /**
      * The x position of the rectangle.
@@ -101,6 +101,18 @@ export type RectPropsWithoutHTML = {
     ref?: SVGRectElement;
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
+    /**
+     * Per-corner radii. Accepts a number (all corners equal — same as `rx`),
+     * a `[tl, tr, br, bl]` tuple, or `{ topLeft, topRight, bottomRight, bottomLeft }`.
+     * Takes precedence over `rx`/`ry` when corners differ.
+     */
+    corners?: Corners;
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
 } & DataDrivenStyleProps;

package/dist/components/RectClipPath.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
+  import { type RectPropsWithoutHTML } from './Rect.svelte';
   import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
@@ -45,6 +45,13 @@
      */
     disabled?: boolean;
 
+    /**
+     * Invert the clip — content renders *outside* the rect.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
     /**
      * The default children snippet which provides
      * the id and url for the clipPath.
@@ -65,7 +72,6 @@
 <script lang="ts">
   import ClipPath from './ClipPath.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
   import type { MotionProp } from '../utils/motion.svelte.js';
 
   const uid = $props.id();
@@ -77,24 +83,14 @@
     width,
     height,
     disabled = false,
+    invert = false,
     children: childrenProp,
-    ...restProps
   }: RectClipPathProps = $props();
 
-  function canvasClip(ctx: CanvasRenderingContext2D) {
-    ctx.beginPath();
-    ctx.rect(x, y, width, height);
-  }
-
-  function canvasClipDeps() {
-    return [x, y, width, height];
-  }
+  const path = $derived(`M${x},${y} h${width} v${height} h${-width} Z`);
 </script>
 
-<ClipPath {id} {disabled} {canvasClip} {canvasClipDeps}>
-  {#snippet clip()}
-    <Rect {x} {y} {width} {height} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
-  {/snippet}
+<ClipPath {id} {disabled} {invert} {path}>
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}
   {/snippet}

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

@@ -37,6 +37,12 @@ export type BaseRectClipPathPropsWithoutHTML = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the rect.
+     *
+     * @default false
+     */
+    invert?: boolean;
     /**
      * The default children snippet which provides
      * the id and url for the clipPath.

package/dist/components/Spline.svelte

@@ -95,12 +95,30 @@
   const ctx = getChartContext();
   const geo = getGeoContext();
 
-  let { data, x, y, seriesKey, defined, curve, stroke, fill, opacity, motion, ...restProps }: SplineProps = $props();
+  let {
+    data,
+    x,
+    y,
+    seriesKey,
+    defined,
+    curve,
+    stroke,
+    fill,
+    opacity,
+    motion,
+    ...restProps
+  }: SplineProps = $props();
 
   ctx.registerComponent({
     name: 'Spline',
     kind: 'mark',
-    markInfo: () => ({ data, x, y, seriesKey, color: typeof stroke === 'string' ? stroke : undefined }),
+    markInfo: () => ({
+      data,
+      x,
+      y,
+      seriesKey,
+      color: typeof stroke === 'string' ? stroke : undefined,
+    }),
   });
 
   function getScaleValue(
@@ -267,8 +285,8 @@
 
   const seriesOpacity = $derived(
     series?.key == null ||
-    ctx.series.visibleSeries.length <= 1 ||
-    ctx.series.isHighlighted(series.key, true)
+      ctx.series.visibleSeries.length <= 1 ||
+      ctx.series.isHighlighted(series.key, true)
       ? 1
       : 0.1
   );

package/dist/components/Text.svelte

@@ -686,7 +686,14 @@
       if (segments) {
         let xOffset = baseX;
         for (const segment of segments) {
-          const segStyles = getTextStyles(undefined, undefined, undefined, undefined, undefined, segment.class);
+          const segStyles = getTextStyles(
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            segment.class
+          );
           const text = String(segment.value);
           // Set font before rendering and measuring so width is accurate
           const segComputedStyles = getComputedStyles(ctx.canvas, segStyles);
@@ -838,10 +845,7 @@
         >
           {#if segments}
             {#each segments as segment, index (index)}
-              <tspan
-                dy={index === 0 ? startDy : 0}
-                class={['lc-text-tspan', segment.class]}
-              >
+              <tspan dy={index === 0 ? startDy : 0} class={['lc-text-tspan', segment.class]}>
                 {segment.value}
               </tspan>
             {/each}
@@ -864,6 +868,9 @@
   {#if dataMode}
     {#each resolvedItems as item (item.key)}
       {@const text = resolveTextValue(item.d)}
+      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
+      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
+      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
       {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
       {@const translateY =
@@ -881,6 +888,8 @@
         {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
         style:white-space="pre-wrap"
         style:line-height={lineHeight}
+        style:color={resolvedFill}
+        style:opacity={resolvedOpacity ?? resolvedFillOpacity}
         class={['lc-text', resolvedClass]}
       >
         {text}
@@ -903,6 +912,8 @@
       {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
       style:white-space="pre-wrap"
       style:line-height={lineHeight}
+      style:color={staticFill}
+      style:opacity={staticOpacity ?? staticFillOpacity}
       class={['lc-text', staticClassName]}
     >
       {#if segments}

package/dist/components/Trail.svelte

@@ -180,9 +180,15 @@
       .map((d: any) => ({
         x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
         y: getScaleValue(d, ctx.yScale, yAccessor) + yOffset,
-        r: resolvedR != null
-          ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
-          : 4,
+        r:
+          resolvedR != null
+            ? resolveDataProp(
+                resolvedR,
+                d,
+                ctx.rScale,
+                typeof resolvedR === 'number' ? resolvedR : 4
+              )
+            : 4,
       }));
 
     return computeTrailPath(points, { curve, cap, tension, resolution });
@@ -206,9 +212,15 @@
         .map((d: any) => ({
           x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
           y: baseline,
-          r: resolvedR != null
-            ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
-            : 4,
+          r:
+            resolvedR != null
+              ? resolveDataProp(
+                  resolvedR,
+                  d,
+                  ctx.rScale,
+                  typeof resolvedR === 'number' ? resolvedR : 4
+                )
+              : 4,
         }));
 
       return computeTrailPath(points, { curve, cap, tension, resolution });
@@ -236,7 +248,7 @@
 <Path
   pathData={isTweened ? tweenState.current : trailPath}
   {fill}
-  fillOpacity={fillOpacity}
+  {fillOpacity}
   {opacity}
   stroke="none"
   class={cls('lc-trail', className)}

package/dist/components/Tree.svelte

@@ -49,9 +49,13 @@
   const ctx = getChartContext();
 
   const treeData = $derived.by(() => {
-    const _tree = d3Tree<T>().size(
-      orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
-    );
+    const _tree = ctx.radial
+      ? d3Tree<T>()
+          .size([2 * Math.PI, Math.min(ctx.width, ctx.height) / 2])
+          .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)
+      : d3Tree<T>().size(
+          orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
+        );
 
     if (nodeSize) {
       _tree.nodeSize(nodeSize);