layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/components/TransformContext.svelte.test.js

@@ -0,0 +1,166 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import TransformTestHarness from './tests/TransformTestHarness.svelte';
+import { geoMercator, geoOrthographic } from 'd3-geo';
+describe('TransformContext', () => {
+    describe('reactive prop syncing', () => {
+        it('should sync processTranslate when projection changes from flat to globe', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                geo: {
+                    projection: geoMercator,
+                    fitGeojson: { type: 'Sphere' },
+                },
+                transform: {
+                    mode: 'projection',
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // Mercator is a flat projection — processTranslate should be undefined
+            expect(chartContext.transform.processTranslate).toBeUndefined();
+            // Switch to orthographic (globe)
+            chartProps.geo = {
+                projection: geoOrthographic,
+                fitGeojson: { type: 'Sphere' },
+            };
+            await tick();
+            // Orthographic is a globe — processTranslate should now be a function
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            });
+        });
+        it('should sync processTranslate when projection changes from globe to flat', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                geo: {
+                    projection: geoOrthographic,
+                    fitGeojson: { type: 'Sphere' },
+                },
+                transform: {
+                    mode: 'projection',
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // Orthographic is a globe — processTranslate should be a function
+            expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            // Switch to Mercator (flat)
+            chartProps.geo = {
+                projection: geoMercator,
+                fitGeojson: { type: 'Sphere' },
+            };
+            await tick();
+            // Mercator is flat — processTranslate should be undefined
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeUndefined();
+            });
+        });
+        it('should enable scale for globe projections so scroll zoom works', async () => {
+            let chartContext;
+            render(TransformTestHarness, {
+                chartProps: {
+                    height: 300,
+                    geo: {
+                        projection: geoOrthographic,
+                        fitGeojson: { type: 'Sphere' },
+                    },
+                    transform: {
+                        mode: 'projection',
+                        scrollMode: 'scale',
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            const initialScale = chartContext.transform.scale;
+            expect(initialScale).toBeGreaterThan(1); // fitSize should give a scale > 1
+            // Simulate zoom in
+            chartContext.transform.setScale(initialScale * 2, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 2, 0);
+            });
+            // Verify the projection scale also updated (transformApply.scale = true for globes)
+            expect(chartContext.geo.projection?.scale()).toBeCloseTo(initialScale * 2, 0);
+        });
+        it('should interpret scaleExtent as relative multipliers in projection mode', async () => {
+            let chartContext;
+            render(TransformTestHarness, {
+                chartProps: {
+                    height: 300,
+                    geo: {
+                        projection: geoMercator,
+                        fitGeojson: { type: 'Sphere' },
+                    },
+                    transform: {
+                        mode: 'projection',
+                        scrollMode: 'scale',
+                        scaleExtent: [0.5, 2],
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            const initialScale = chartContext.transform.scale;
+            expect(initialScale).toBeGreaterThan(10); // Mercator fitSize scale is typically large
+            // Try to zoom way beyond 2x — should be clamped to 2x initial
+            chartContext.transform.setScale(initialScale * 5, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                // Should be clamped to ~2x the initial scale
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 2, 0);
+            });
+            // Try to zoom below 0.5x — should be clamped to 0.5x initial
+            chartContext.transform.setScale(initialScale * 0.1, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 0.5, 0);
+            });
+        });
+        it('should sync disablePointer reactively', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                transform: {
+                    mode: 'canvas',
+                    disablePointer: false,
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            expect(chartContext.transform.disablePointer).toBe(false);
+            // Enable disablePointer
+            chartProps.transform = {
+                mode: 'canvas',
+                disablePointer: true,
+            };
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.disablePointer).toBe(true);
+            });
+        });
+    });
+});

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.
      *
@@ -25,10 +26,17 @@ export type TreeProps<T> = {
 };
 import { type HierarchyPointNode, type HierarchyPointLink, type HierarchyNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: TreeProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): TreeProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

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.
      *
@@ -18,55 +21,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;
-
-    hierarchy?: HierarchyNode<T>;
+    maintainAspectRatio?: boolean;
 
     children?: Snippet<[{ nodes: HierarchyRectangularNode<T>[] }]>;
   };
@@ -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 {
@@ -99,7 +100,7 @@
     paddingBottom = 0,
     paddingLeft,
     paddingRight,
-    selected = $bindable(null),
+    maintainAspectRatio = false,
     children,
   }: TreemapProps<T> = $props();
 
@@ -121,45 +122,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

@@ -1,4 +1,6 @@
 export type TreemapProps<T> = {
+    /** d3 hierarchy node */
+    hierarchy: HierarchyNode<T>;
     /**
      * The tile function to use for the treemap layout.
      *
@@ -10,59 +12,65 @@ 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;
-    hierarchy?: HierarchyNode<T>;
+    maintainAspectRatio?: boolean;
     children?: Snippet<[{
         nodes: HierarchyRectangularNode<T>[];
     }]>;
 };
 import { treemapSquarify, type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
 import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: TreemapProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): TreemapProps<T>;
-    events(): {};
-    slots(): {};
-    bindings(): "selected";
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {