layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/TransformControls.svelte

@@ -1,8 +1,41 @@
+<script lang="ts" module>
+  import type { Placement } from './types.js';
+
+  type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
+
+  export type TransformControlsPropsWithoutHTML = {
+    /**
+     * @default 'top-right'
+     */
+    placement?: Placement;
+
+    /**
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+
+    /**
+     * @default 'md'
+     */
+    size?: ComponentProps<Button>['size'];
+
+    /**
+     * @default ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode']
+     */
+    show?: Actions[];
+  };
+
+  export type TransformControlsProps = TransformControlsPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, TransformControlsPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
   import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
+  // TODO: maybe we include the icons as I think importing them like this
+  // will bog down the dev server
   import {
     mdiArrowULeftTop,
     mdiMagnifyPlusOutline,
@@ -14,27 +47,19 @@
     mdiCancel,
   } from '@mdi/js';
 
-  import { transformContext } from './TransformContext.svelte';
+  import { getTransformContext } from './TransformContext.svelte';
+  import type { Without } from '../utils/types.js';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  type Placement =
-    | 'top-left'
-    | 'top'
-    | 'top-right'
-    | 'left'
-    | 'center'
-    | 'right'
-    | 'bottom-left'
-    | 'bottom'
-    | 'bottom-right';
-
-  export let placement: Placement = 'top-right';
-  export let orientation: 'horizontal' | 'vertical' = 'vertical';
-  export let size: ComponentProps<Button>['size'] = 'md';
-
-  type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
-  export let show: Actions[] = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
+  let {
+    placement = 'top-right',
+    orientation = 'vertical',
+    size = 'md',
+    show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'],
+    class: className,
+  }: TransformControlsProps = $props();
 
-  $: menuPlacementByOrientationAndPlacement = {
+  const menuPlacementByOrientationAndPlacement = $derived({
     horizontal: {
       'top-left': 'bottom-end',
       top: 'bottom-end',
@@ -57,13 +82,12 @@
       bottom: 'right-end',
       'bottom-right': 'left-end',
     },
-  } as const;
+  } as const);
 
-  const transform = transformContext();
-  const scrollMode = transform.scrollMode;
+  const transform = getTransformContext();
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class={cls(
     'bg-surface-300/50 border rounded-full m-1 backdrop-blur-sm z-10 flex',
@@ -79,9 +103,9 @@
       bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
       'bottom-right': 'absolute bottom-0 right-0',
     }[placement],
-    $$props.class
+    className
   )}
-  on:dblclick={(e) => {
+  ondblclick={(e) => {
     // Stop from propagating to TransformContext
     e.stopPropagation();
   }}
@@ -142,7 +166,7 @@
         menuProps={{ placement: menuPlacementByOrientationAndPlacement[orientation][placement] }}
         menuIcon={null}
         {size}
-        value={$scrollMode}
+        value={transform.scrollMode}
         on:change={(e) => transform.setScrollMode(e.detail.value)}
         class="text-surface-content"
       >

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

@@ -1,20 +1,28 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        placement?: ("bottom" | "left" | "right" | "top" | "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
-        orientation?: "horizontal" | "vertical" | undefined;
-        size?: import("svelte-ux").ButtonSize | undefined;
-        show?: ("center" | "reset" | "scrollMode" | "zoomIn" | "zoomOut")[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { Placement } from './types.js';
+type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
+export type TransformControlsPropsWithoutHTML = {
+    /**
+     * @default 'top-right'
+     */
+    placement?: Placement;
+    /**
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * @default 'md'
+     */
+    size?: ComponentProps<Button>['size'];
+    /**
+     * @default ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode']
+     */
+    show?: Actions[];
 };
-export type TransformControlsProps = typeof __propDef.props;
-export type TransformControlsEvents = typeof __propDef.events;
-export type TransformControlsSlots = typeof __propDef.slots;
-export default class TransformControls extends SvelteComponentTyped<TransformControlsProps, TransformControlsEvents, TransformControlsSlots> {
-}
-export {};
+export type TransformControlsProps = TransformControlsPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TransformControlsPropsWithoutHTML>;
+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,41 +1,82 @@
-<script lang="ts">
-  import { type HierarchyPointNode, tree as d3Tree, type TreeLayout } from 'd3-hierarchy';
-  import { chartContext } from './ChartContext.svelte';
-
-  const { data, width, height } = chartContext();
-
-  /**
-   * 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
-   * positioned at `⟨0, 0⟩`.
-   *
-   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-   */
-  export let nodeSize: [number, number] | undefined = undefined;
-
-  /**
-   * see: https://github.com/d3/d3-hierarchy#tree_separation
-   */
-  export let separation:
-    | ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number)
-    | undefined = undefined;
-
-  export let orientation: 'vertical' | 'horizontal' = 'horizontal';
-
-  let tree: TreeLayout<any>;
-  $: {
-    tree = d3Tree().size(orientation === 'horizontal' ? [$height, $width] : [$width, $height]);
+<script lang="ts" module>
+  export type TreeProps<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
+     * positioned at `⟨0, 0⟩`.
+     *
+     * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+     */
+    nodeSize?: [number, number];
+
+    /**
+     * 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.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+
+    children?: Snippet<[{ nodes: HierarchyPointNode<any>[]; links: HierarchyPointLink<any>[] }]>;
+  };
+</script>
+
+<script lang="ts" generics="T">
+  import {
+    type HierarchyPointNode,
+    tree as d3Tree,
+    type HierarchyPointLink,
+    type HierarchyNode,
+  } from 'd3-hierarchy';
+  import type { Snippet } from 'svelte';
+  import { getChartContext } from './Chart.svelte';
+
+  let {
+    nodeSize,
+    separation,
+    orientation = 'horizontal',
+    children,
+    hierarchy,
+  }: TreeProps<T> = $props();
+
+  const ctx = getChartContext();
+
+  const treeData = $derived.by(() => {
+    const _tree = d3Tree<T>().size(
+      orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height]
+    );
 
     if (nodeSize) {
-      tree.nodeSize(nodeSize);
+      _tree.nodeSize(nodeSize);
     }
+
     if (separation) {
-      tree.separation(separation);
+      _tree.separation(separation);
+    }
+
+    if (hierarchy) {
+      const h = hierarchy.copy();
+      const treeData = _tree(h);
+      return {
+        links: treeData.links(),
+        nodes: treeData.descendants(),
+      };
     }
-  }
 
-  // @ts-expect-error
-  $: treeData = tree($data);
+    return {
+      links: [],
+      nodes: [],
+    };
+  });
 </script>
 
-<slot nodes={treeData.descendants()} links={treeData.links()} />
+{@render children?.({
+  nodes: treeData.nodes,
+  links: treeData.links,
+})}

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

@@ -1,32 +1,44 @@
-import { SvelteComponentTyped } from "svelte";
-import { type HierarchyPointNode } from 'd3-hierarchy';
-declare const __propDef: {
-    props: {
-        /**
-           * 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
-           * positioned at `⟨0, 0⟩`.
-           *
-           * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-           */ nodeSize?: [number, number] | undefined;
-        /**
-           * see: https://github.com/d3/d3-hierarchy#tree_separation
-           */ separation?: ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number) | undefined;
-        orientation?: "vertical" | "horizontal";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            nodes: HierarchyPointNode<any>[];
-            links: import("d3-hierarchy").HierarchyPointLink<any>[];
-        };
-    };
+export type TreeProps<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
+     * positioned at `⟨0, 0⟩`.
+     *
+     * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+     */
+    nodeSize?: [number, number];
+    /**
+     * 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.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    children?: Snippet<[{
+        nodes: HierarchyPointNode<any>[];
+        links: HierarchyPointLink<any>[];
+    }]>;
 };
-export type TreeProps = typeof __propDef.props;
-export type TreeEvents = typeof __propDef.events;
-export type TreeSlots = typeof __propDef.slots;
-export default class Tree extends SvelteComponentTyped<TreeProps, TreeEvents, TreeSlots> {
+import { type HierarchyPointNode, type HierarchyPointLink, type HierarchyNode } from 'd3-hierarchy';
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): TreeProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-export {};
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tree: $$IsomorphicComponent;
+type Tree<T> = InstanceType<typeof Tree<T>>;
+export default Tree;

package/dist/components/Treemap.svelte

@@ -1,4 +1,78 @@
-<script lang="ts">
+<script lang="ts" module>
+  export type TreemapProps<T> = {
+    /**
+     * The tile function to use for the treemap layout.
+     *
+     * @default treemapSquarify
+     */
+    tile?:
+      | typeof treemapSquarify
+      | 'binary'
+      | 'squarify'
+      | 'resquarify'
+      | 'dice'
+      | 'slice'
+      | 'sliceDice';
+    /**
+     * The padding between nodes.
+     *
+     * @default 0
+     */
+    padding?: number;
+
+    /**
+     * The inner padding between nodes.
+     *
+     * @default 0
+     */
+    paddingInner?: number;
+
+    /**
+     * The outer padding between nodes.
+     *
+     * @default 0
+     */
+    paddingOuter?: number;
+
+    /**
+     * The top padding between nodes.
+     *
+     * @default 0
+     */
+    paddingTop?: number;
+
+    /**
+     * The bottom padding between nodes.
+     *
+     * @default 0
+     */
+    paddingBottom?: number;
+    /**
+     * The left padding between nodes.
+     *
+     */
+    paddingLeft?: number;
+
+    /**
+     * The right padding between nodes.
+     *
+     */
+    paddingRight?: number;
+
+    /**
+     * The selected node.
+     *
+     * @default null
+     */
+    selected?: HierarchyRectangularNode<T> | null;
+
+    hierarchy?: HierarchyNode<T>;
+
+    children?: Snippet<[{ nodes: HierarchyRectangularNode<T>[] }]>;
+  };
+</script>
+
+<script lang="ts" generics="T">
   import {
     treemap as d3treemap,
     treemapBinary,
@@ -9,33 +83,29 @@
     treemapSquarify,
     type HierarchyNode,
     type HierarchyRectangularNode,
-    type TreemapLayout,
   } from 'd3-hierarchy';
 
-  import { chartContext } from './ChartContext.svelte';
   import { aspectTile } from '../utils/treemap.js';
+  import { getChartContext } from './Chart.svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    hierarchy,
+    tile = treemapSquarify,
+    padding = 0,
+    paddingInner = 0,
+    paddingOuter = 0,
+    paddingTop = 0,
+    paddingBottom = 0,
+    paddingLeft,
+    paddingRight,
+    selected = $bindable(null),
+    children,
+  }: TreemapProps<T> = $props();
 
-  const { data, width, height } = chartContext();
-
-  export let tile:
-    | typeof treemapSquarify
-    | 'binary'
-    | 'squarify'
-    | 'resquarify'
-    | 'dice'
-    | 'slice'
-    | 'sliceDice' = treemapSquarify;
-  export let padding = 0;
-  export let paddingInner = 0;
-  export let paddingOuter = 0;
-  export let paddingTop = 0;
-  export let paddingBottom = 0;
-  export let paddingLeft: number | undefined = undefined;
-  export let paddingRight: number | undefined = undefined;
-
-  export let selected: HierarchyRectangularNode<any> | null | undefined = null;
-
-  $: tileFunc =
+  const ctx = getChartContext();
+
+  const tileFunc = $derived(
     tile === 'squarify'
       ? treemapSquarify
       : tile === 'resquarify'
@@ -48,41 +118,48 @@
               ? treemapSlice
               : tile === 'sliceDice'
                 ? treemapSliceDice
-                : tile;
+                : tile
+  );
 
-  let treemap: TreemapLayout<any>;
-  $: {
-    treemap = d3treemap()
-      .size([$width, $height])
-      .tile(aspectTile(tileFunc, $width, $height));
+  const treemap = $derived.by(() => {
+    const _treemap = d3treemap<T>()
+      .size([ctx.width, ctx.height])
+      .tile(aspectTile(tileFunc, ctx.width, ctx.height));
 
     if (padding) {
-      treemap.padding(padding);
+      _treemap.padding(padding);
     }
+
     if (paddingInner) {
-      treemap.paddingInner(paddingInner);
+      _treemap.paddingInner(paddingInner);
     }
+
     if (paddingOuter) {
-      treemap.paddingOuter(paddingOuter);
+      _treemap.paddingOuter(paddingOuter);
     }
+
     if (paddingTop) {
-      treemap.paddingTop(paddingTop);
+      _treemap.paddingTop(paddingTop);
     }
+
     if (paddingBottom) {
-      treemap.paddingBottom(paddingBottom);
+      _treemap.paddingBottom(paddingBottom);
     }
+
     if (paddingLeft) {
-      treemap.paddingLeft(paddingLeft);
+      _treemap.paddingLeft(paddingLeft);
     }
     if (paddingRight) {
-      treemap.paddingRight(paddingRight);
+      _treemap.paddingRight(paddingRight);
     }
-  }
+    return _treemap;
+  });
 
-  $: treemapData = treemap($data as HierarchyNode<any>);
+  const treemapData = $derived(hierarchy ? treemap(hierarchy) : null);
 
-  // TODO: Remove selected
-  $: selected = treemapData; // set initial selection
+  $effect.pre(() => {
+    selected = treemapData;
+  });
 </script>
 
-<slot nodes={treemapData.descendants()} />
+{@render children?.({ nodes: treemapData ? treemapData.descendants() : [] })}

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

@@ -1,29 +1,77 @@
-import { SvelteComponentTyped } from "svelte";
-import { treemapSquarify, type HierarchyRectangularNode } from 'd3-hierarchy';
-declare const __propDef: {
-    props: {
-        tile?: typeof treemapSquarify | "binary" | "squarify" | "resquarify" | "dice" | "slice" | "sliceDice";
-        padding?: number;
-        paddingInner?: number;
-        paddingOuter?: number;
-        paddingTop?: number;
-        paddingBottom?: number;
-        paddingLeft?: number | undefined;
-        paddingRight?: number | undefined;
-        selected?: HierarchyRectangularNode<any> | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            nodes: HierarchyRectangularNode<any>[];
-        };
-    };
+export type TreemapProps<T> = {
+    /**
+     * The tile function to use for the treemap layout.
+     *
+     * @default treemapSquarify
+     */
+    tile?: typeof treemapSquarify | 'binary' | 'squarify' | 'resquarify' | 'dice' | 'slice' | 'sliceDice';
+    /**
+     * The padding between nodes.
+     *
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * The inner padding between nodes.
+     *
+     * @default 0
+     */
+    paddingInner?: number;
+    /**
+     * The outer padding between nodes.
+     *
+     * @default 0
+     */
+    paddingOuter?: number;
+    /**
+     * The top padding between nodes.
+     *
+     * @default 0
+     */
+    paddingTop?: number;
+    /**
+     * The bottom padding between nodes.
+     *
+     * @default 0
+     */
+    paddingBottom?: number;
+    /**
+     * The left padding between nodes.
+     *
+     */
+    paddingLeft?: number;
+    /**
+     * The right padding between nodes.
+     *
+     */
+    paddingRight?: number;
+    /**
+     * The selected node.
+     *
+     * @default null
+     */
+    selected?: HierarchyRectangularNode<T> | null;
+    hierarchy?: HierarchyNode<T>;
+    children?: Snippet<[{
+        nodes: HierarchyRectangularNode<T>[];
+    }]>;
 };
-export type TreemapProps = typeof __propDef.props;
-export type TreemapEvents = typeof __propDef.events;
-export type TreemapSlots = typeof __propDef.slots;
-export default class Treemap extends SvelteComponentTyped<TreemapProps, TreemapEvents, TreemapSlots> {
+import { treemapSquarify, type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): TreemapProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "selected";
+    exports(): {};
 }
-export {};
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Treemap: $$IsomorphicComponent;
+type Treemap<T> = InstanceType<typeof Treemap<T>>;
+export default Treemap;