@3plate/graph-core 0.1.15 → 0.1.17

package/dist/index.d.cts

@@ -213,6 +213,12 @@ type EventsOptions<N, E> = {
 };
 /** Function to render a node */
 type RenderNode<N> = (node: N, props?: NodeProps<N>) => HTMLElement;
+/**
+ * Function called after a node element has been mounted to the DOM.
+ * Use this to integrate framework-specific rendering (e.g. React, Vue) into node content.
+ * The returned function, if any, is called when the node is removed.
+ */
+type MountNode<N> = (node: N, element: HTMLElement) => (() => void) | void;
 /** Color mode */
 type ColorMode = 'light' | 'dark' | 'system';
 /** Canvas background and general colors */
@@ -265,6 +271,12 @@ type CanvasOptions<N> = {
     panZoom?: boolean;
     /** Function to render a node */
     renderNode?: RenderNode<N>;
+    /**
+     * Called after a node element is mounted to the DOM.
+     * Use this to integrate framework renderers (React, Vue, etc.) into node content.
+     * Return a cleanup function to be called when the node is removed.
+     */
+    mountNode?: MountNode<N>;
     /** Color mode */
     colorMode?: ColorMode;
     /** Theme */
@@ -718,4 +730,4 @@ declare class Playground {
 
 declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
 
-export { API, type APIArguments, type APIOptions, type CanvasTheme, type ColorMode, type EdgeProps, type EdgeTheme, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, type FileSourceArgs, type FileStatus, type FileStatusListener, FileSystemSource, type FileSystemSourceArgs, type HistoryMessage, Ingest, type IngestMessage, type IngestionConfig, type NewEdge, type NewNode, type NodeAlign, type NodeProps, type NodeTheme, type Orientation, Playground, type PlaygroundOptions, type PortProps, type PortStyle, type PortTheme, type RenderNode, type SnapshotMessage, type ThemeVars, type Update, type UpdateMessage, Updater, WebSocketSource, type WebSocketSourceArgs, type WebSocketStatus, type WebSocketStatusListener, graph as default, graph };
+export { API, type APIArguments, type APIOptions, type CanvasOptions, type CanvasTheme, type ColorMode, type EdgeProps, type EdgeTheme, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, type FileSourceArgs, type FileStatus, type FileStatusListener, FileSystemSource, type FileSystemSourceArgs, type HistoryMessage, Ingest, type IngestMessage, type IngestionConfig, type MountNode, type NewEdge, type NewNode, type NodeAlign, type NodeProps, type NodeTheme, type Orientation, Playground, type PlaygroundOptions, type PortProps, type PortStyle, type PortTheme, type RenderNode, type SnapshotMessage, type ThemeVars, type Update, type UpdateMessage, Updater, WebSocketSource, type WebSocketSourceArgs, type WebSocketStatus, type WebSocketStatusListener, graph as default, graph };

package/dist/index.d.ts

@@ -213,6 +213,12 @@ type EventsOptions<N, E> = {
 };
 /** Function to render a node */
 type RenderNode<N> = (node: N, props?: NodeProps<N>) => HTMLElement;
+/**
+ * Function called after a node element has been mounted to the DOM.
+ * Use this to integrate framework-specific rendering (e.g. React, Vue) into node content.
+ * The returned function, if any, is called when the node is removed.
+ */
+type MountNode<N> = (node: N, element: HTMLElement) => (() => void) | void;
 /** Color mode */
 type ColorMode = 'light' | 'dark' | 'system';
 /** Canvas background and general colors */
@@ -265,6 +271,12 @@ type CanvasOptions<N> = {
     panZoom?: boolean;
     /** Function to render a node */
     renderNode?: RenderNode<N>;
+    /**
+     * Called after a node element is mounted to the DOM.
+     * Use this to integrate framework renderers (React, Vue, etc.) into node content.
+     * Return a cleanup function to be called when the node is removed.
+     */
+    mountNode?: MountNode<N>;
     /** Color mode */
     colorMode?: ColorMode;
     /** Theme */
@@ -718,4 +730,4 @@ declare class Playground {
 
 declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
 
-export { API, type APIArguments, type APIOptions, type CanvasTheme, type ColorMode, type EdgeProps, type EdgeTheme, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, type FileSourceArgs, type FileStatus, type FileStatusListener, FileSystemSource, type FileSystemSourceArgs, type HistoryMessage, Ingest, type IngestMessage, type IngestionConfig, type NewEdge, type NewNode, type NodeAlign, type NodeProps, type NodeTheme, type Orientation, Playground, type PlaygroundOptions, type PortProps, type PortStyle, type PortTheme, type RenderNode, type SnapshotMessage, type ThemeVars, type Update, type UpdateMessage, Updater, WebSocketSource, type WebSocketSourceArgs, type WebSocketStatus, type WebSocketStatusListener, graph as default, graph };
+export { API, type APIArguments, type APIOptions, type CanvasOptions, type CanvasTheme, type ColorMode, type EdgeProps, type EdgeTheme, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, type FileSourceArgs, type FileStatus, type FileStatusListener, FileSystemSource, type FileSystemSourceArgs, type HistoryMessage, Ingest, type IngestMessage, type IngestionConfig, type MountNode, type NewEdge, type NewNode, type NodeAlign, type NodeProps, type NodeTheme, type Orientation, Playground, type PlaygroundOptions, type PortProps, type PortStyle, type PortTheme, type RenderNode, type SnapshotMessage, type ThemeVars, type Update, type UpdateMessage, Updater, WebSocketSource, type WebSocketSourceArgs, type WebSocketStatus, type WebSocketStatusListener, graph as default, graph };

package/dist/index.js

@@ -1971,6 +1971,8 @@ var Node2 = class {
   hovered;
   container;
   content;
+  innerContent;
+  cleanup;
   canvas;
   data;
   isDummy;
@@ -1985,10 +1987,13 @@ var Node2 = class {
       const size = canvas.dummyNodeSize;
     } else {
       const render = data.render ?? canvas.renderNode;
-      this.content = this.renderContent(render(data.data, data));
+      const innerEl = render(data.data, data);
+      this.innerContent = innerEl;
+      this.content = this.renderContent(innerEl);
     }
   }
   remove() {
+    this.cleanup?.();
     this.container.remove();
   }
   append() {
@@ -2929,7 +2934,24 @@ var Canvas = class {
       newNodes.set(data.data, node);
       this.measurement.appendChild(node.content);
     }
-    await new Promise(requestAnimationFrame);
+    if (this.mountNode) {
+      for (const node of newNodes.values()) {
+        if (node.innerContent) {
+          node.cleanup = this.mountNode(node.data.data, node.innerContent) ?? void 0;
+        }
+      }
+    }
+    await new Promise((resolve) => {
+      let resolved = false;
+      const done = () => {
+        if (!resolved) {
+          resolved = true;
+          resolve();
+        }
+      };
+      requestAnimationFrame(done);
+      setTimeout(done, 50);
+    });
     const isVertical = this.orientation === "TB" || this.orientation === "BT";
     for (const node of newNodes.values()) {
       node.measure(isVertical);