layerchart 2.0.0-next.16 → 2.0.0-next.17

package/dist/components/Treemap.svelte

@@ -18,53 +18,53 @@
      *
      * @default 0
      */
-    padding?: number;
+    padding?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The inner padding between nodes.
      *
      * @default 0
      */
-    paddingInner?: number;
+    paddingInner?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The outer padding between nodes.
      *
      * @default 0
      */
-    paddingOuter?: number;
+    paddingOuter?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The top padding between nodes.
      *
      * @default 0
      */
-    paddingTop?: number;
+    paddingTop?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The bottom padding between nodes.
      *
      * @default 0
      */
-    paddingBottom?: number;
+    paddingBottom?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The left padding between nodes.
      *
      */
-    paddingLeft?: number;
+    paddingLeft?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
      * The right padding between nodes.
      *
      */
-    paddingRight?: number;
+    paddingRight?: number | ((node: HierarchyRectangularNode<T>) => number);
 
     /**
-     * The selected node.
+     * Modify tiling function for approapriate aspect ratio when treemap is zoomed in
      *
-     * @default null
+     * @default false
      */
-    selected?: HierarchyRectangularNode<T> | null;
+    maintainAspectRatio?: boolean;
 
     hierarchy?: HierarchyNode<T>;
 
@@ -99,7 +99,7 @@
     paddingBottom = 0,
     paddingLeft,
     paddingRight,
-    selected = $bindable(null),
+    maintainAspectRatio = false,
     children,
   }: TreemapProps<T> = $props();
 
@@ -121,45 +121,82 @@
                 : tile
   );
 
-  const treemap = $derived.by(() => {
+  const treemapData = $derived.by(() => {
     const _treemap = d3treemap<T>()
       .size([ctx.width, ctx.height])
-      .tile(aspectTile(tileFunc, ctx.width, ctx.height));
+      .tile(maintainAspectRatio ? aspectTile(tileFunc, ctx.width, ctx.height) : tileFunc);
 
     if (padding) {
-      _treemap.padding(padding);
+      // Make Typescript happy to pick the correct overload
+      // TODO: Better way to do this?
+      if (typeof padding === 'number') {
+        _treemap.padding(padding);
+      } else {
+        _treemap.padding(padding);
+      }
     }
 
     if (paddingInner) {
-      _treemap.paddingInner(paddingInner);
+      if (typeof paddingInner === 'number') {
+        _treemap.paddingInner(typeof paddingInner === 'number' ? paddingInner : paddingInner);
+      } else {
+        _treemap.paddingInner(paddingInner);
+      }
     }
 
     if (paddingOuter) {
-      _treemap.paddingOuter(paddingOuter);
+      if (typeof paddingOuter === 'number') {
+        _treemap.paddingOuter(paddingOuter);
+      } else {
+        _treemap.paddingOuter(paddingOuter);
+      }
     }
 
     if (paddingTop) {
-      _treemap.paddingTop(paddingTop);
+      if (typeof paddingTop === 'number') {
+        _treemap.paddingTop(paddingTop);
+      } else {
+        _treemap.paddingTop(paddingTop);
+      }
     }
 
     if (paddingBottom) {
-      _treemap.paddingBottom(paddingBottom);
+      if (typeof paddingBottom === 'number') {
+        _treemap.paddingBottom(paddingBottom);
+      } else {
+        _treemap.paddingBottom(paddingBottom);
+      }
     }
 
     if (paddingLeft) {
-      _treemap.paddingLeft(paddingLeft);
+      if (typeof paddingLeft === 'number') {
+        _treemap.paddingLeft(paddingLeft);
+      } else {
+        _treemap.paddingLeft(paddingLeft);
+      }
     }
     if (paddingRight) {
-      _treemap.paddingRight(paddingRight);
+      if (typeof paddingRight === 'number') {
+        _treemap.paddingRight(paddingRight);
+      } else {
+        _treemap.paddingRight(paddingRight);
+      }
     }
-    return _treemap;
-  });
 
-  const treemapData = $derived(hierarchy ? treemap(hierarchy) : null);
+    if (hierarchy) {
+      const h = hierarchy.copy();
+      const treemapData = _treemap(h);
+      return {
+        links: treemapData.links(),
+        nodes: treemapData.descendants(),
+      };
+    }
 
-  $effect.pre(() => {
-    selected = treemapData;
+    return {
+      links: [],
+      nodes: [],
+    };
   });
 </script>
 
-{@render children?.({ nodes: treemapData ? treemapData.descendants() : [] })}
+{@render children?.({ nodes: treemapData.nodes })}

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

@@ -10,47 +10,47 @@ export type TreemapProps<T> = {
      *
      * @default 0
      */
-    padding?: number;
+    padding?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The inner padding between nodes.
      *
      * @default 0
      */
-    paddingInner?: number;
+    paddingInner?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The outer padding between nodes.
      *
      * @default 0
      */
-    paddingOuter?: number;
+    paddingOuter?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The top padding between nodes.
      *
      * @default 0
      */
-    paddingTop?: number;
+    paddingTop?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The bottom padding between nodes.
      *
      * @default 0
      */
-    paddingBottom?: number;
+    paddingBottom?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The left padding between nodes.
      *
      */
-    paddingLeft?: number;
+    paddingLeft?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
      * The right padding between nodes.
      *
      */
-    paddingRight?: number;
+    paddingRight?: number | ((node: HierarchyRectangularNode<T>) => number);
     /**
-     * The selected node.
+     * Modify tiling function for approapriate aspect ratio when treemap is zoomed in
      *
-     * @default null
+     * @default false
      */
-    selected?: HierarchyRectangularNode<T> | null;
+    maintainAspectRatio?: boolean;
     hierarchy?: HierarchyNode<T>;
     children?: Snippet<[{
         nodes: HierarchyRectangularNode<T>[];
@@ -62,7 +62,7 @@ declare class __sveltets_Render<T> {
     props(): TreemapProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "selected";
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/index.d.ts

@@ -42,6 +42,8 @@ export { default as Connector } from './Connector.svelte';
 export * from './Connector.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.svelte';
 export { default as Frame } from './Frame.svelte';
 export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
@@ -102,6 +104,8 @@ export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export * from './Points.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';

package/dist/components/index.js

@@ -42,6 +42,8 @@ export { default as Connector } from './Connector.svelte';
 export * from './Connector.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.svelte';
 export { default as Frame } from './Frame.svelte';
 export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
@@ -102,6 +104,8 @@ export { default as Point } from './Point.svelte';
 export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export * from './Points.svelte';
+export { default as Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';

package/dist/components/layout/Layer.svelte

@@ -3,17 +3,19 @@
 
   export type CanvasLayerProps = {
     type: 'canvas';
-  } & Omit<ComponentProps<typeof Canvas>, 'type'>;
+  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
 
   export type HtmlLayerProps = {
     type: 'html';
-  } & Omit<ComponentProps<typeof Html>, 'type'>;
+  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
 
   export type SvgLayerProps = {
     type: 'svg';
-  } & Omit<ComponentProps<typeof Svg>, 'type'>;
+  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
 
-  export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+  export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+  };
 </script>
 
 <script lang="ts">

package/dist/components/layout/Layer.svelte.d.ts

@@ -1,14 +1,16 @@
 import type { ComponentProps } from 'svelte';
 export type CanvasLayerProps = {
     type: 'canvas';
-} & Omit<ComponentProps<typeof Canvas>, 'type'>;
+} & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
 export type HtmlLayerProps = {
     type: 'html';
-} & Omit<ComponentProps<typeof Html>, 'type'>;
+} & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
 export type SvgLayerProps = {
     type: 'svg';
-} & Omit<ComponentProps<typeof Svg>, 'type'>;
-export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+} & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
+export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+};
 import Canvas from './Canvas.svelte';
 import Html from './Html.svelte';
 import Svg from './Svg.svelte';

package/dist/components/tooltip/TooltipList.svelte

@@ -23,7 +23,7 @@
   bind:this={ref}
   class={cls(
     layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
+    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-start',
     className
   )}
   {...restProps}

package/dist/utils/canvas.js

@@ -24,6 +24,8 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
         if (styles) {
             Object.assign(svg.style, styles);
         }
+        // Make sure `<svg>` is not visible
+        svg.style.display = 'none';
         if (classes) {
             svg.setAttribute('class', cls(classes)
                 .split(' ')
@@ -145,6 +147,19 @@ export function renderCircle(ctx, coords, styleOptions = {}) {
     }, styleOptions);
     ctx.closePath();
 }
+export function renderEllipse(ctx, coords, styleOptions = {}) {
+    ctx.beginPath();
+    ctx.ellipse(coords.cx, coords.cy, coords.rx, coords.ry, 0, 0, 2 * Math.PI);
+    render(ctx, {
+        fill: (ctx) => {
+            ctx.fill();
+        },
+        stroke: (ctx) => {
+            ctx.stroke();
+        },
+    }, styleOptions);
+    ctx.closePath();
+}
 /** Clear canvas accounting for Canvas `context.translate(...)` */
 export function clearCanvasContext(ctx, options) {
     // Clear with negative offset due to Canvas `context.translate(...)`

package/dist/utils/path.d.ts

@@ -17,5 +17,15 @@ export declare function spikePath({ x, y, width, height, }: {
     width: number;
     height: number;
 }): string;
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export declare function roundedPolygonPath(coords: {
+    x: number;
+    y: number;
+}[], radius: number): string;
 /** Flatten all `y` coordinates to `0` */
 export declare function flattenPathData(pathData: string, yOverride?: number): string;

package/dist/utils/path.js

@@ -36,6 +36,36 @@ export function spikePath({ x, y, width, height, }) {
   `;
     return pathData;
 }
+/** Create rounded polygon path
+ *
+ * @param coords - Array of points (x, y)
+ * @param radius - Radius of the curve
+ * @returns String of path data
+ */
+export function roundedPolygonPath(coords, radius) {
+    if (radius === 0) {
+        // Simple polygon with straight lines
+        return `M${coords[0].x},${coords[0].y}${coords
+            .slice(1)
+            .map((p) => `L${p.x},${p.y}`)
+            .join('')}Z`;
+    }
+    let path = '';
+    const length = coords.length + 1;
+    for (let i = 0; i < length; i++) {
+        const a = coords[i % coords.length];
+        const b = coords[(i + 1) % coords.length];
+        const t = Math.min(radius / Math.hypot(b.x - a.x, b.y - a.y), 0.5);
+        if (i == 0)
+            path += `M${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+        if (i > 0)
+            path += `Q${a.x},${a.y} ${a.x * (1 - t) + b.x * t},${a.y * (1 - t) + b.y * t}`;
+        if (i < length - 1)
+            path += `L${a.x * t + b.x * (1 - t)},${a.y * t + b.y * (1 - t)}`;
+    }
+    path += 'Z';
+    return path;
+}
 /** Flatten all `y` coordinates to `0` */
 export function flattenPathData(pathData, yOverride = 0) {
     let result = pathData;

package/dist/utils/shape.d.ts

@@ -0,0 +1,43 @@
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export declare function polygonPoints(count: number, radius: number, rotate?: number): {
+    angle: number;
+    radius: number;
+}[];
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export declare function polygon(options: {
+    cx: number;
+    cy: number;
+    count: number;
+    radius: number;
+    rotate?: number;
+    inset?: number;
+    scaleX?: number;
+    scaleY?: number;
+    skewX?: number;
+    skewY?: number;
+    tiltX?: number;
+    tiltY?: number;
+}): {
+    x: number;
+    y: number;
+}[];

package/dist/utils/shape.js

@@ -0,0 +1,59 @@
+import { range } from 'd3-array';
+import { degreesToRadians } from './math.js';
+/** Get points to create a polygon with given number of points and radius
+ *
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @returns Array of points (angle, radius)
+ */
+export function polygonPoints(count, radius, rotate = 0) {
+    const angle = 360 / count;
+    return range(count).map((index) => {
+        return {
+            angle: degreesToRadians(angle * index) + degreesToRadians(rotate),
+            radius,
+        };
+    });
+}
+/** Create polygon
+ *
+ * @param cx - Center x coordinate
+ * @param cy - Center y coordinate
+ * @param count - Number of points
+ * @param radius - Radius of the polygon
+ * @param rotate - Rotation of the polygon (degrees)
+ * @param inset - Percent to inset odd points (<1 inset, >1 outset)
+ * @param scaleX - Horizontal stretch factor
+ * @param scaleY - Vertical stretch factor
+ * @param skewX - Skew angle in degrees along the X axis
+ * @param skewY - Skew angle in degrees along the Y axis
+ * @param tiltX - Tilt factor for x-coordinates (0 = no tilt, positive moves points top => down, negative moves points bottom => up)
+ * @param tiltY - Tilt factor for y-coordinates (0 = no tilt, positive moves points left => right, negative moves points right => left)
+ * @returns Array of points (x, y)
+ */
+export function polygon(options) {
+    const { cx, cy, count, radius, rotate = 0, inset = 1, scaleX = 1, scaleY = 1, skewX = 0, skewY = 0, tiltX = 0, tiltY = 0, } = options;
+    const skewXRad = degreesToRadians(skewX);
+    const skewYRad = degreesToRadians(skewY);
+    return polygonPoints(count, radius, rotate).map(({ angle, radius }, i) => {
+        // inset
+        const insetScale = i % 2 == 0 ? 1 : 1 - inset;
+        // scale
+        let x = radius * insetScale * Math.cos(angle) * scaleX;
+        let y = radius * insetScale * Math.sin(angle) * scaleY;
+        // tilt
+        const normalizedY = (y + radius) / (2 * radius);
+        const normalizedX = (x + radius) / (2 * radius);
+        const tiltScaleX = tiltX > 0 ? 1 + tiltX * (1 - normalizedY) : 1 - tiltX * normalizedY;
+        const tiltScaleY = tiltY > 0 ? 1 + tiltY * (1 - normalizedX) : 1 - tiltY * normalizedX;
+        x *= tiltScaleX;
+        y *= tiltScaleY;
+        // skew
+        const xSkewed = x + Math.tan(skewXRad) * y;
+        const ySkewed = y + Math.tan(skewYRad) * x;
+        return {
+            x: cx + xSkewed,
+            y: cy + ySkewed,
+        };
+    });
+}

package/dist/utils/treemap.d.ts

@@ -9,5 +9,5 @@ export declare function aspectTile(tile: TileFunc, width: number, height: number
 /**
  * Show if the node (a) is a child of the selected (b), or any parent above selected
  */
-export declare function isNodeVisible(a: HierarchyNode<any>, b: HierarchyNode<any> | null): boolean;
+export declare function isNodeVisible(a: HierarchyNode<any>, b: HierarchyNode<any> | null | undefined): boolean;
 export {};

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.16",
+  "version": "2.0.0-next.17",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.44",