layerchart 2.0.0-next.1 → 2.0.0-next.2

package/dist/components/Dagre.svelte

@@ -1,4 +1,9 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+  import dagre, { type Edge, type EdgeConfig, type GraphEdge } from '@dagrejs/dagre';
+
+  import { dagreGraph } from '../utils/graph/dagre.js';
+
   export type DagreGraphData = {
     nodes: Array<{ id: string; parent?: string; label?: string | dagre.Label }>;
     edges: Array<{ source: string; target: string; label?: string }>;
@@ -24,129 +29,213 @@
     center: 'c',
     right: 'r',
   };
+
+  export type DagreProps = {
+    /**
+     * Data of nodes and edges to build graph
+     */
+    data: DagreGraphData;
+
+    /**
+     * Function to extract nodes from data
+     * @default (d: any) => d.nodes
+     */
+    nodes?: (d: any) => any;
+
+    /**
+     * Function to extract node ID from node data
+     * @default (d: any) => d.id
+     */
+    nodeId?: (d: any) => any;
+
+    /**
+     * Function to extract edges from data
+     * @default (d: any) => d.edges
+     */
+    edges?: (d: any) => any;
+
+    /**
+     * Set graph as directed (true, default) or undirected (false),
+     * which does not treat the order of nodes in an edge as significant
+     * @default true
+     */
+    directed?: boolean;
+
+    /**
+     * Allow a graph to have multiple edges between the same pair of nodes
+     * @default false
+     */
+    multigraph?: boolean;
+
+    /**
+     * Allow a graph to have compound nodes - nodes which can be the
+     * `parent` of other nodes
+     * @default false
+     */
+    compound?: boolean;
+
+    /**
+     * Type of algorithm to assigns a rank to each node in the input graph
+     * @default 'network-simplex'
+     */
+    ranker?: 'network-simplex' | 'tight-tree' | 'longest-path';
+
+    /**
+     * Direction for rank nodes
+     * @default 'top-bottom'
+     */
+    direction?: keyof typeof RankDir;
+
+    /**
+     * Alignment for rank nodes
+     * @default undefined
+     */
+    align?: keyof typeof Align | undefined;
+
+    /**
+     * Number of pixels between each rank in the layout
+     * @default 50
+     */
+    rankSeparation?: number;
+
+    /**
+     * Number of pixels that separate nodes horizontally in the layout
+     * @default 50
+     */
+    nodeSeparation?: number;
+
+    /**
+     * Number of pixels that separate edges horizontally in the layout
+     * @default 10
+     */
+    edgeSeparation?: number;
+
+    /**
+     * Default node width if not defined on node
+     * @default 100
+     */
+    nodeWidth?: number;
+
+    /**
+     * Default node height if not defined on node
+     * @default 50
+     */
+    nodeHeight?: number;
+
+    /**
+     * Default link label width if not defined on edge
+     * @default 100
+     */
+    edgeLabelWidth?: number;
+
+    /**
+     * Default edge label height if not defined on edge
+     * @default 20
+     */
+    edgeLabelHeight?: number;
+
+    /**
+     * Default edge label position
+     * @default 'center'
+     */
+    edgeLabelPosition?: keyof typeof EdgeLabelPosition;
+
+    /**
+     * Default pixels to move the label away from the edge if not defined on edge
+     * Applies only when labelpos is l or r
+     * @default 10
+     */
+    edgeLabelOffset?: number;
+
+    /**
+     * Filter nodes
+     * @default () => true
+     */
+    filterNodes?: (nodeId: string, graph: dagre.graphlib.Graph) => boolean;
+
+    /**
+     * Exposed to access to Dagre Graph instance via `bind:graph`
+     */
+    graph?: dagre.graphlib.Graph;
+
+    children?: Snippet<
+      [
+        {
+          nodes: Array<dagre.Node>;
+          edges: Array<Edge & EdgeConfig & GraphEdge>;
+          graph: dagre.graphlib.Graph;
+        },
+      ]
+    >;
+  };
 </script>
 
 <script lang="ts">
-  import dagre, { type Edge, type EdgeConfig, type GraphEdge } from '@dagrejs/dagre';
-
-  /** Data of nodes and edges to build graph */
-  export let data: DagreGraphData;
-
-  export let nodes = (d: any) => d.nodes;
-  export let nodeId = (d: any) => d.id;
-  export let edges = (d: any) => d.edges;
-
-  /** Set graph as directed (true, default) or undirected (false), which does not treat the order of nodes in an edge as significant. */
-  export let directed = true;
-
-  /** Allow a graph to have multiple edges between the same pair of nodes */
-  export let multigraph = false;
-
-  /** Allow a graph to have compound nodes - nodes which can be the `parent` of other nodes */
-  export let compound = false;
-
-  /** Type of algorithm to assigns a rank to each node in the input graph */
-  export let ranker: 'network-simplex' | 'tight-tree' | 'longest-path' = 'network-simplex';
-
-  /** Direction for rank nodes */
-  export let direction: keyof typeof RankDir = 'top-bottom';
-
-  /** Alignment for rank nodes */
-  export let align: keyof typeof Align | undefined = undefined;
-
-  /** Number of pixels between each rank in the layout */
-  export let rankSeparation = 50;
-
-  /** Number of pixels that separate nodes horizontally in the layout */
-  export let nodeSeparation = 50;
-
-  /** Number of pixels that separate edges horizontally in the layout */
-  export let edgeSeparation = 10;
-
-  /** Default node width if not defined on node */
-  export let nodeWidth = 100;
-
-  /** Default node height if not defined on node */
-  export let nodeHeight = 50;
-
-  /** Default link label width if not defined on edge */
-  export let edgeLabelWidth = 100;
-
-  /** Default edge label height if not defined on edge */
-  export let edgeLabelHeight = 20;
-
-  /** Default edge label height if not defined on edge */
-  export let edgeLabelPosition: keyof typeof EdgeLabelPosition = 'center';
-
-  /** Default pixels to move the label away from the edge if not defined on edge. Applies only when labelpos is l or r.*/
-  export let edgeLabelOffset = 10;
-
-  /** Filter nodes */
-  export let filterNodes: (nodeId: string, graph: dagre.graphlib.Graph) => boolean = () => true;
-
-  /** Exposed to access to Dagre Graph instance via `bind:graph` */
-  export let graph: dagre.graphlib.Graph | undefined = undefined;
-  $: {
-    let g = new dagre.graphlib.Graph({ directed, multigraph, compound });
-
-    g.setGraph({
-      ranker: ranker,
-      rankdir: RankDir[direction],
-      align: align ? Align[align] : undefined,
-      ranksep: rankSeparation,
-      nodesep: nodeSeparation,
-      edgesep: edgeSeparation,
-    });
-
-    g.setDefaultEdgeLabel(() => {
-      return {};
-    });
-
-    nodes(data).forEach((n: any) => {
-      const id = nodeId(n);
-
-      g.setNode(nodeId(n), {
-        id,
-        label: typeof n.label === 'string' ? n.label : id,
-        width: nodeWidth,
-        height: nodeHeight,
-        ...(typeof n.label === 'object' ? n.label : null),
-      });
-
-      if (n.parent) {
-        g.setParent(id, n.parent);
-      }
-    });
-
-    edges(data).forEach((e: any) => {
-      const { source, target, label, ...rest } = e;
-      g.setEdge(
-        e.source,
-        e.target,
-        label
-          ? {
-              label: label,
-              labelpos: EdgeLabelPosition[edgeLabelPosition],
-              labeloffset: edgeLabelOffset,
-              width: edgeLabelWidth,
-              height: edgeLabelHeight,
-              ...rest,
-            }
-          : {}
-      );
-    });
-
-    g = filterNodes ? g.filterNodes((nodeId) => filterNodes(nodeId, graph!)) : graph!;
-
-    dagre.layout(g);
-
-    graph = g;
-  }
-
-  $: graphNodes = graph!.nodes().map((id) => graph!.node(id));
-  $: graphEdges = graph!.edges().map((edge) => ({ ...edge, ...graph!.edge(edge) })) as Array<
-    Edge & EdgeConfig & GraphEdge // `EdgeConfig` is excluded when inferred from usage
-  >;
+  let {
+    data,
+    nodes = (d: any) => d.nodes,
+    nodeId = (d: any) => d.id,
+    edges = (d: any) => d.edges,
+    directed = true,
+    multigraph = false,
+    compound = false,
+    ranker = 'network-simplex',
+    direction = 'top-bottom',
+    align,
+    rankSeparation = 50,
+    nodeSeparation = 50,
+    edgeSeparation = 10,
+    nodeWidth = 100,
+    nodeHeight = 50,
+    edgeLabelWidth = 100,
+    edgeLabelHeight = 20,
+    edgeLabelPosition = 'center',
+    edgeLabelOffset = 10,
+    filterNodes = () => true,
+    graph: graphProp = $bindable(),
+    children,
+  }: DagreProps = $props();
+
+  const graph = $derived(
+    dagreGraph(data, {
+      nodes,
+      nodeId,
+      edges,
+      directed,
+      multigraph,
+      compound,
+      ranker,
+      direction,
+      align,
+      rankSeparation,
+      nodeSeparation,
+      edgeSeparation,
+      nodeWidth,
+      nodeHeight,
+      edgeLabelWidth,
+      edgeLabelHeight,
+      edgeLabelPosition,
+      edgeLabelOffset,
+      filterNodes,
+    })
+  );
+
+  $effect.pre(() => {
+    graphProp = graph;
+  });
+
+  const graphNodes = $derived.by(() => {
+    if (typeof document === 'undefined' || !graph) return [];
+    return graph!.nodes().map((id) => graph!.node(id));
+  });
+
+  const graphEdges = $derived.by(() => {
+    if (typeof document === 'undefined' || !graph) return [];
+    return graph!.edges().map((edge) => ({ ...edge, ...graph!.edge(edge) })) as Array<
+      Edge & EdgeConfig & GraphEdge // `EdgeConfig` is excluded when inferred from usage
+    >;
+  });
 </script>
 
-<slot nodes={graphNodes} edges={graphEdges} {graph} />
+<!-- TODO: are we sure we want to force these types? -->
+{@render children?.({ nodes: graphNodes, edges: graphEdges, graph: graph! })}

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

@@ -1,4 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
+import { type Snippet } from 'svelte';
+import dagre, { type Edge, type EdgeConfig, type GraphEdge } from '@dagrejs/dagre';
 export type DagreGraphData = {
     nodes: Array<{
         id: string;
@@ -29,59 +30,121 @@ export declare const EdgeLabelPosition: {
     center: string;
     right: string;
 };
-import dagre from '@dagrejs/dagre';
-declare const __propDef: {
-    props: {
-        /** Data of nodes and edges to build graph */ data: DagreGraphData;
-        nodes?: (d: any) => any;
-        nodeId?: (d: any) => any;
-        edges?: (d: any) => any;
-        /** Set graph as directed (true, default) or undirected (false), which does not treat the order of nodes in an edge as significant. */ directed?: boolean;
-        /** Allow a graph to have multiple edges between the same pair of nodes */ multigraph?: boolean;
-        /** Allow a graph to have compound nodes - nodes which can be the `parent` of other nodes */ compound?: boolean;
-        /** Type of algorithm to assigns a rank to each node in the input graph */ ranker?: "network-simplex" | "tight-tree" | "longest-path";
-        /** Direction for rank nodes */ direction?: keyof typeof RankDir;
-        /** Alignment for rank nodes */ align?: keyof typeof Align | undefined;
-        /** Number of pixels between each rank in the layout */ rankSeparation?: number;
-        /** Number of pixels that separate nodes horizontally in the layout */ nodeSeparation?: number;
-        /** Number of pixels that separate edges horizontally in the layout */ edgeSeparation?: number;
-        /** Default node width if not defined on node */ nodeWidth?: number;
-        /** Default node height if not defined on node */ nodeHeight?: number;
-        /** Default link label width if not defined on edge */ edgeLabelWidth?: number;
-        /** Default edge label height if not defined on edge */ edgeLabelHeight?: number;
-        /** Default edge label height if not defined on edge */ edgeLabelPosition?: keyof typeof EdgeLabelPosition;
-        /** Default pixels to move the label away from the edge if not defined on edge. Applies only when labelpos is l or r.*/ edgeLabelOffset?: number;
-        /** Filter nodes */ filterNodes?: (nodeId: string, graph: dagre.graphlib.Graph) => boolean;
-        /** Exposed to access to Dagre Graph instance via `bind:graph` */ graph?: dagre.graphlib.Graph | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            nodes: {
-                x: number;
-                y: number;
-                width: number;
-                height: number;
-                class?: string | undefined;
-                label?: string | undefined;
-                padding?: number | undefined;
-                paddingX?: number | undefined;
-                paddingY?: number | undefined;
-                rank?: number | undefined;
-                rx?: number | undefined;
-                ry?: number | undefined;
-                shape?: string | undefined;
-            }[];
-            edges: (dagre.Edge & dagre.EdgeConfig & dagre.GraphEdge)[];
-            graph: dagre.graphlib.Graph<{}> | undefined;
-        };
-    };
+export type DagreProps = {
+    /**
+     * Data of nodes and edges to build graph
+     */
+    data: DagreGraphData;
+    /**
+     * Function to extract nodes from data
+     * @default (d: any) => d.nodes
+     */
+    nodes?: (d: any) => any;
+    /**
+     * Function to extract node ID from node data
+     * @default (d: any) => d.id
+     */
+    nodeId?: (d: any) => any;
+    /**
+     * Function to extract edges from data
+     * @default (d: any) => d.edges
+     */
+    edges?: (d: any) => any;
+    /**
+     * Set graph as directed (true, default) or undirected (false),
+     * which does not treat the order of nodes in an edge as significant
+     * @default true
+     */
+    directed?: boolean;
+    /**
+     * Allow a graph to have multiple edges between the same pair of nodes
+     * @default false
+     */
+    multigraph?: boolean;
+    /**
+     * Allow a graph to have compound nodes - nodes which can be the
+     * `parent` of other nodes
+     * @default false
+     */
+    compound?: boolean;
+    /**
+     * Type of algorithm to assigns a rank to each node in the input graph
+     * @default 'network-simplex'
+     */
+    ranker?: 'network-simplex' | 'tight-tree' | 'longest-path';
+    /**
+     * Direction for rank nodes
+     * @default 'top-bottom'
+     */
+    direction?: keyof typeof RankDir;
+    /**
+     * Alignment for rank nodes
+     * @default undefined
+     */
+    align?: keyof typeof Align | undefined;
+    /**
+     * Number of pixels between each rank in the layout
+     * @default 50
+     */
+    rankSeparation?: number;
+    /**
+     * Number of pixels that separate nodes horizontally in the layout
+     * @default 50
+     */
+    nodeSeparation?: number;
+    /**
+     * Number of pixels that separate edges horizontally in the layout
+     * @default 10
+     */
+    edgeSeparation?: number;
+    /**
+     * Default node width if not defined on node
+     * @default 100
+     */
+    nodeWidth?: number;
+    /**
+     * Default node height if not defined on node
+     * @default 50
+     */
+    nodeHeight?: number;
+    /**
+     * Default link label width if not defined on edge
+     * @default 100
+     */
+    edgeLabelWidth?: number;
+    /**
+     * Default edge label height if not defined on edge
+     * @default 20
+     */
+    edgeLabelHeight?: number;
+    /**
+     * Default edge label position
+     * @default 'center'
+     */
+    edgeLabelPosition?: keyof typeof EdgeLabelPosition;
+    /**
+     * Default pixels to move the label away from the edge if not defined on edge
+     * Applies only when labelpos is l or r
+     * @default 10
+     */
+    edgeLabelOffset?: number;
+    /**
+     * Filter nodes
+     * @default () => true
+     */
+    filterNodes?: (nodeId: string, graph: dagre.graphlib.Graph) => boolean;
+    /**
+     * Exposed to access to Dagre Graph instance via `bind:graph`
+     */
+    graph?: dagre.graphlib.Graph;
+    children?: Snippet<[
+        {
+            nodes: Array<dagre.Node>;
+            edges: Array<Edge & EdgeConfig & GraphEdge>;
+            graph: dagre.graphlib.Graph;
+        }
+    ]>;
 };
-export type DagreProps = typeof __propDef.props;
-export type DagreEvents = typeof __propDef.events;
-export type DagreSlots = typeof __propDef.slots;
-export default class Dagre extends SvelteComponentTyped<DagreProps, DagreEvents, DagreSlots> {
-}
-export {};
+declare const Dagre: import("svelte").Component<DagreProps, {}, "graph">;
+type Dagre = ReturnType<typeof Dagre>;
+export default Dagre;