@knotx/react 0.2.12 → 0.2.14

package/dist/index.cjs

@@ -10,12 +10,15 @@ const pluginsBaseRender = require('@knotx/plugins-base-render');
 function useContainerRef(onResize) {
   const [container, setContainer] = react.useState();
   const [_, setSize] = react.useState();
+  const onResizeRef = react.useRef(onResize);
+  onResizeRef.current = onResize;
   react.useLayoutEffect(() => {
     if (!container)
       return;
     const resizeObserver = new ResizeObserver((entries) => {
+      var _a;
       const { width, height } = entries[0].contentRect;
-      onResize({ width, height });
+      (_a = onResizeRef.current) == null ? void 0 : _a.call(onResizeRef, { width, height });
       setSize({ width, height });
     });
     resizeObserver.observe(container);
@@ -59,6 +62,29 @@ function useLayerContent(engineRef) {
   ) });
 }
 
+function useDataUpdate(engineRef, { nodes, edges, initRef }) {
+  react.useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine || !initRef.current) {
+      return;
+    }
+    const previousNodes = engine.nodesManager.dataMap$.value;
+    const currentNodes = new Map(nodes == null ? void 0 : nodes.map((node) => [node.id, node]));
+    const operation = core.buildDiffOperation(previousNodes, currentNodes);
+    engine.dispatchNodeOperation(operation);
+  }, [nodes, nodes == null ? void 0 : nodes.length]);
+  react.useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine || !initRef.current) {
+      return;
+    }
+    const previousEdges = engine.edgesManager.dataMap$.value;
+    const currentEdges = new Map(edges == null ? void 0 : edges.map((edge) => [edge.id, edge]));
+    const operation = core.buildDiffOperation(previousEdges, currentEdges);
+    engine.dispatchEdgeOperation(operation);
+  }, [edges, edges == null ? void 0 : edges.length]);
+}
+
 function useEngineRef() {
   const engineRef = react.useRef(null);
   react.useLayoutEffect(() => () => {
@@ -76,10 +102,14 @@ function useMergedPlugins(plugins, disablePresetPlugins) {
     return [pluginsBaseRender.BaseRender, ...plugins || []];
   }, [disablePresetPlugins, plugins]);
 }
-function usePluginConfigUpdate(engineRef, pluginConfig = {}) {
+function usePluginConfigUpdate(engineRef, {
+  initRef,
+  pluginConfig = {}
+}) {
   const pluginConfigRef = react.useRef(pluginConfig);
   react.useLayoutEffect(() => {
-    if (!engineRef.current) {
+    const engine = engineRef.current;
+    if (!engine || !initRef.current) {
       return;
     }
     for (const pluginName in pluginConfig) {
@@ -88,7 +118,7 @@ function usePluginConfigUpdate(engineRef, pluginConfig = {}) {
         continue;
       }
       pluginConfigRef.current[pluginName] = pluginConfigValue;
-      engineRef.current.changePluginConfig(pluginName, pluginConfigValue);
+      engine.changePluginConfig(pluginName, pluginConfigValue);
     }
   });
 }
@@ -112,24 +142,39 @@ var __spreadValues = (a, b) => {
 const Knotx = react.memo(react.forwardRef(({
   className,
   style,
+  initialNodes,
+  initialEdges,
   nodes,
   edges,
   plugins: _plugins,
   pluginConfig,
-  disablePresetPlugins = false
+  disablePresetPlugins = false,
+  onInit
 }, ref) => {
+  const initRef = react.useRef(false);
   const engineRef = useEngineRef();
   const plugins = useMergedPlugins(_plugins, disablePresetPlugins);
   const setContainer = useContainerRef((containerSize) => {
     if (engineRef.current) {
       engineRef.current.container = containerSize;
     } else {
-      engineRef.current = initReactEngine({ container: containerSize, nodes, edges, plugins, pluginConfig });
+      engineRef.current = initReactEngine({
+        container: containerSize,
+        nodes: nodes != null ? nodes : initialNodes,
+        edges: edges != null ? edges : initialEdges,
+        plugins,
+        pluginConfig
+      });
     }
   });
   react.useImperativeHandle(ref, () => ({ engineRef }));
-  usePluginConfigUpdate(engineRef, pluginConfig);
+  useDataUpdate(engineRef, { nodes, edges, initRef });
+  usePluginConfigUpdate(engineRef, { pluginConfig, initRef });
   const content = useLayerContent(engineRef);
+  if (!initRef.current && engineRef.current && content) {
+    initRef.current = true;
+    onInit == null ? void 0 : onInit(engineRef.current);
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/index.d.cts

@@ -1,17 +1,33 @@
-import { Engine, Plugin, NodeData, EdgeData } from '@knotx/core';
-export { EdgeData, EdgeOperation, EdgeOperationPipe, EdgeOperatorFunction, EdgeProps, EdgeRenderType, EngineOptions, IData, IEngineRuntime, IPlugin, Layer, LayerComponent, NodeData, NodeMeasured, NodeOperation, NodeOperationPipe, NodeOperatorFunction, NodePosition, NodeProps, NodeRenderType, Plugin, PluginConfigs, PluginData, PluginTools, Position } from '@knotx/core';
+import { IRecord, Engine, Plugin, Node, Edge } from '@knotx/core';
+export { Edge, EdgeOperation, EdgeOperationPipe, EdgeOperatorFunction, EdgeProps, EdgeRenderType, EngineOptions, IData, IEngineRuntime, IPlugin, Layer, LayerComponent, Node, NodeMeasured, NodeOperation, NodeOperationPipe, NodeOperatorFunction, NodePosition, NodeProps, NodeRenderType, Plugin, PluginConfigs, PluginData, PluginTools, Position } from '@knotx/core';
 import { FC, MutableRefObject, Ref, CSSProperties, ForwardedRef, ReactElement } from 'react';
 
-type ReactEngine = Engine<FC<any>>;
-interface KnotxInstance {
-    engineRef: MutableRefObject<ReactEngine | null>;
+type ReactEngine<TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = Engine<FC<any>, TNode, TEdge>;
+interface KnotxInstance<TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> {
+    engineRef: MutableRefObject<ReactEngine<TNode, TEdge> | null>;
 }
-type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
-    ref?: Ref<KnotxInstance> | undefined;
+type KnotxProps<TPlugins extends Plugin[] = Plugin[], TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = {
+    ref?: Ref<KnotxInstance<TNode, TEdge>> | undefined;
     className?: string;
     style?: CSSProperties;
-    nodes?: NodeData[];
-    edges?: EdgeData[];
+    /**
+     * initial nodes used to create engine
+     */
+    initialNodes?: Node<TNode>[];
+    /**
+     * initial edges used to create engine
+     */
+    initialEdges?: Edge<TEdge>[];
+    /**
+     * auto dispatch diff operation to engine when nodes changed
+     * if not provided , use initialNodes
+     */
+    nodes?: Node<TNode>[];
+    /**
+     * auto dispatch diff operation to engine when edges changed
+     * if not provided, use initialEdges
+     */
+    edges?: Edge<TEdge>[];
     plugins?: TPlugins;
     /**
      * disable preset plugins
@@ -20,6 +36,7 @@ type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
      * @default false
      */
     disablePresetPlugins?: boolean;
+    onInit?: (engine: ReactEngine<TNode, TEdge>) => void;
 } & ((TPlugins[number] extends Plugin<infer T> ? {
     [TName in T as Extract<TPlugins[number], Plugin<TName>> extends Plugin<TName, undefined> ? never : TName]: Extract<TPlugins[number], Plugin<TName>> extends infer T ? T extends Plugin<TName, infer TConfig> ? TConfig : never : never;
 } : {}) extends infer PluginConfig ? {} extends PluginConfig ? {
@@ -29,7 +46,7 @@ type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
 } : {});
 
 declare const Knotx: {
-    <TPlugins extends Plugin[]>(props: KnotxProps<TPlugins>, ref: ForwardedRef<KnotxInstance>): ReactElement | null;
+    <TPlugins extends Plugin[], TNode extends IRecord, TEdge extends IRecord>(props: KnotxProps<TPlugins, TNode, TEdge>, ref: ForwardedRef<KnotxInstance<TNode, TEdge>>): ReactElement | null;
     displayName?: string | undefined;
 };
 

package/dist/index.d.mts

@@ -1,17 +1,33 @@
-import { Engine, Plugin, NodeData, EdgeData } from '@knotx/core';
-export { EdgeData, EdgeOperation, EdgeOperationPipe, EdgeOperatorFunction, EdgeProps, EdgeRenderType, EngineOptions, IData, IEngineRuntime, IPlugin, Layer, LayerComponent, NodeData, NodeMeasured, NodeOperation, NodeOperationPipe, NodeOperatorFunction, NodePosition, NodeProps, NodeRenderType, Plugin, PluginConfigs, PluginData, PluginTools, Position } from '@knotx/core';
+import { IRecord, Engine, Plugin, Node, Edge } from '@knotx/core';
+export { Edge, EdgeOperation, EdgeOperationPipe, EdgeOperatorFunction, EdgeProps, EdgeRenderType, EngineOptions, IData, IEngineRuntime, IPlugin, Layer, LayerComponent, Node, NodeMeasured, NodeOperation, NodeOperationPipe, NodeOperatorFunction, NodePosition, NodeProps, NodeRenderType, Plugin, PluginConfigs, PluginData, PluginTools, Position } from '@knotx/core';
 import { FC, MutableRefObject, Ref, CSSProperties, ForwardedRef, ReactElement } from 'react';
 
-type ReactEngine = Engine<FC<any>>;
-interface KnotxInstance {
-    engineRef: MutableRefObject<ReactEngine | null>;
+type ReactEngine<TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = Engine<FC<any>, TNode, TEdge>;
+interface KnotxInstance<TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> {
+    engineRef: MutableRefObject<ReactEngine<TNode, TEdge> | null>;
 }
-type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
-    ref?: Ref<KnotxInstance> | undefined;
+type KnotxProps<TPlugins extends Plugin[] = Plugin[], TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = {
+    ref?: Ref<KnotxInstance<TNode, TEdge>> | undefined;
     className?: string;
     style?: CSSProperties;
-    nodes?: NodeData[];
-    edges?: EdgeData[];
+    /**
+     * initial nodes used to create engine
+     */
+    initialNodes?: Node<TNode>[];
+    /**
+     * initial edges used to create engine
+     */
+    initialEdges?: Edge<TEdge>[];
+    /**
+     * auto dispatch diff operation to engine when nodes changed
+     * if not provided , use initialNodes
+     */
+    nodes?: Node<TNode>[];
+    /**
+     * auto dispatch diff operation to engine when edges changed
+     * if not provided, use initialEdges
+     */
+    edges?: Edge<TEdge>[];
     plugins?: TPlugins;
     /**
      * disable preset plugins
@@ -20,6 +36,7 @@ type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
      * @default false
      */
     disablePresetPlugins?: boolean;
+    onInit?: (engine: ReactEngine<TNode, TEdge>) => void;
 } & ((TPlugins[number] extends Plugin<infer T> ? {
     [TName in T as Extract<TPlugins[number], Plugin<TName>> extends Plugin<TName, undefined> ? never : TName]: Extract<TPlugins[number], Plugin<TName>> extends infer T ? T extends Plugin<TName, infer TConfig> ? TConfig : never : never;
 } : {}) extends infer PluginConfig ? {} extends PluginConfig ? {
@@ -29,7 +46,7 @@ type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
 } : {});
 
 declare const Knotx: {
-    <TPlugins extends Plugin[]>(props: KnotxProps<TPlugins>, ref: ForwardedRef<KnotxInstance>): ReactElement | null;
+    <TPlugins extends Plugin[], TNode extends IRecord, TEdge extends IRecord>(props: KnotxProps<TPlugins, TNode, TEdge>, ref: ForwardedRef<KnotxInstance<TNode, TEdge>>): ReactElement | null;
     displayName?: string | undefined;
 };
 

package/dist/index.d.ts

@@ -1,17 +1,33 @@
-import { Engine, Plugin, NodeData, EdgeData } from '@knotx/core';
-export { EdgeData, EdgeOperation, EdgeOperationPipe, EdgeOperatorFunction, EdgeProps, EdgeRenderType, EngineOptions, IData, IEngineRuntime, IPlugin, Layer, LayerComponent, NodeData, NodeMeasured, NodeOperation, NodeOperationPipe, NodeOperatorFunction, NodePosition, NodeProps, NodeRenderType, Plugin, PluginConfigs, PluginData, PluginTools, Position } from '@knotx/core';
+import { IRecord, Engine, Plugin, Node, Edge } from '@knotx/core';
+export { Edge, EdgeOperation, EdgeOperationPipe, EdgeOperatorFunction, EdgeProps, EdgeRenderType, EngineOptions, IData, IEngineRuntime, IPlugin, Layer, LayerComponent, Node, NodeMeasured, NodeOperation, NodeOperationPipe, NodeOperatorFunction, NodePosition, NodeProps, NodeRenderType, Plugin, PluginConfigs, PluginData, PluginTools, Position } from '@knotx/core';
 import { FC, MutableRefObject, Ref, CSSProperties, ForwardedRef, ReactElement } from 'react';
 
-type ReactEngine = Engine<FC<any>>;
-interface KnotxInstance {
-    engineRef: MutableRefObject<ReactEngine | null>;
+type ReactEngine<TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = Engine<FC<any>, TNode, TEdge>;
+interface KnotxInstance<TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> {
+    engineRef: MutableRefObject<ReactEngine<TNode, TEdge> | null>;
 }
-type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
-    ref?: Ref<KnotxInstance> | undefined;
+type KnotxProps<TPlugins extends Plugin[] = Plugin[], TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = {
+    ref?: Ref<KnotxInstance<TNode, TEdge>> | undefined;
     className?: string;
     style?: CSSProperties;
-    nodes?: NodeData[];
-    edges?: EdgeData[];
+    /**
+     * initial nodes used to create engine
+     */
+    initialNodes?: Node<TNode>[];
+    /**
+     * initial edges used to create engine
+     */
+    initialEdges?: Edge<TEdge>[];
+    /**
+     * auto dispatch diff operation to engine when nodes changed
+     * if not provided , use initialNodes
+     */
+    nodes?: Node<TNode>[];
+    /**
+     * auto dispatch diff operation to engine when edges changed
+     * if not provided, use initialEdges
+     */
+    edges?: Edge<TEdge>[];
     plugins?: TPlugins;
     /**
      * disable preset plugins
@@ -20,6 +36,7 @@ type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
      * @default false
      */
     disablePresetPlugins?: boolean;
+    onInit?: (engine: ReactEngine<TNode, TEdge>) => void;
 } & ((TPlugins[number] extends Plugin<infer T> ? {
     [TName in T as Extract<TPlugins[number], Plugin<TName>> extends Plugin<TName, undefined> ? never : TName]: Extract<TPlugins[number], Plugin<TName>> extends infer T ? T extends Plugin<TName, infer TConfig> ? TConfig : never : never;
 } : {}) extends infer PluginConfig ? {} extends PluginConfig ? {
@@ -29,7 +46,7 @@ type KnotxProps<TPlugins extends Plugin[] = Plugin[]> = {
 } : {});
 
 declare const Knotx: {
-    <TPlugins extends Plugin[]>(props: KnotxProps<TPlugins>, ref: ForwardedRef<KnotxInstance>): ReactElement | null;
+    <TPlugins extends Plugin[], TNode extends IRecord, TEdge extends IRecord>(props: KnotxProps<TPlugins, TNode, TEdge>, ref: ForwardedRef<KnotxInstance<TNode, TEdge>>): ReactElement | null;
     displayName?: string | undefined;
 };
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Layer, Engine } from '@knotx/core';
-import { useState, useLayoutEffect, useRef, useMemo, memo, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { Layer, buildDiffOperation, Engine } from '@knotx/core';
+import { useState, useRef, useLayoutEffect, useEffect, useMemo, memo, forwardRef, useImperativeHandle } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { map, distinctUntilChanged } from 'rxjs/operators';
 import { BaseRender } from '@knotx/plugins-base-render';
@@ -8,12 +8,15 @@ import { BaseRender } from '@knotx/plugins-base-render';
 function useContainerRef(onResize) {
   const [container, setContainer] = useState();
   const [_, setSize] = useState();
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
   useLayoutEffect(() => {
     if (!container)
       return;
     const resizeObserver = new ResizeObserver((entries) => {
+      var _a;
       const { width, height } = entries[0].contentRect;
-      onResize({ width, height });
+      (_a = onResizeRef.current) == null ? void 0 : _a.call(onResizeRef, { width, height });
       setSize({ width, height });
     });
     resizeObserver.observe(container);
@@ -57,6 +60,29 @@ function useLayerContent(engineRef) {
   ) });
 }
 
+function useDataUpdate(engineRef, { nodes, edges, initRef }) {
+  useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine || !initRef.current) {
+      return;
+    }
+    const previousNodes = engine.nodesManager.dataMap$.value;
+    const currentNodes = new Map(nodes == null ? void 0 : nodes.map((node) => [node.id, node]));
+    const operation = buildDiffOperation(previousNodes, currentNodes);
+    engine.dispatchNodeOperation(operation);
+  }, [nodes, nodes == null ? void 0 : nodes.length]);
+  useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine || !initRef.current) {
+      return;
+    }
+    const previousEdges = engine.edgesManager.dataMap$.value;
+    const currentEdges = new Map(edges == null ? void 0 : edges.map((edge) => [edge.id, edge]));
+    const operation = buildDiffOperation(previousEdges, currentEdges);
+    engine.dispatchEdgeOperation(operation);
+  }, [edges, edges == null ? void 0 : edges.length]);
+}
+
 function useEngineRef() {
   const engineRef = useRef(null);
   useLayoutEffect(() => () => {
@@ -74,10 +100,14 @@ function useMergedPlugins(plugins, disablePresetPlugins) {
     return [BaseRender, ...plugins || []];
   }, [disablePresetPlugins, plugins]);
 }
-function usePluginConfigUpdate(engineRef, pluginConfig = {}) {
+function usePluginConfigUpdate(engineRef, {
+  initRef,
+  pluginConfig = {}
+}) {
   const pluginConfigRef = useRef(pluginConfig);
   useLayoutEffect(() => {
-    if (!engineRef.current) {
+    const engine = engineRef.current;
+    if (!engine || !initRef.current) {
       return;
     }
     for (const pluginName in pluginConfig) {
@@ -86,7 +116,7 @@ function usePluginConfigUpdate(engineRef, pluginConfig = {}) {
         continue;
       }
       pluginConfigRef.current[pluginName] = pluginConfigValue;
-      engineRef.current.changePluginConfig(pluginName, pluginConfigValue);
+      engine.changePluginConfig(pluginName, pluginConfigValue);
     }
   });
 }
@@ -110,24 +140,39 @@ var __spreadValues = (a, b) => {
 const Knotx = memo(forwardRef(({
   className,
   style,
+  initialNodes,
+  initialEdges,
   nodes,
   edges,
   plugins: _plugins,
   pluginConfig,
-  disablePresetPlugins = false
+  disablePresetPlugins = false,
+  onInit
 }, ref) => {
+  const initRef = useRef(false);
   const engineRef = useEngineRef();
   const plugins = useMergedPlugins(_plugins, disablePresetPlugins);
   const setContainer = useContainerRef((containerSize) => {
     if (engineRef.current) {
       engineRef.current.container = containerSize;
     } else {
-      engineRef.current = initReactEngine({ container: containerSize, nodes, edges, plugins, pluginConfig });
+      engineRef.current = initReactEngine({
+        container: containerSize,
+        nodes: nodes != null ? nodes : initialNodes,
+        edges: edges != null ? edges : initialEdges,
+        plugins,
+        pluginConfig
+      });
     }
   });
   useImperativeHandle(ref, () => ({ engineRef }));
-  usePluginConfigUpdate(engineRef, pluginConfig);
+  useDataUpdate(engineRef, { nodes, edges, initRef });
+  usePluginConfigUpdate(engineRef, { pluginConfig, initRef });
   const content = useLayerContent(engineRef);
+  if (!initRef.current && engineRef.current && content) {
+    initRef.current = true;
+    onInit == null ? void 0 : onInit(engineRef.current);
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/react",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "React for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -33,19 +33,19 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.2.9",
-    "@knotx/jsx": "0.2.9",
-    "@knotx/plugins-base-render": "0.2.11"
+    "@knotx/core": "0.2.11",
+    "@knotx/jsx": "0.2.11",
+    "@knotx/plugins-base-render": "0.2.13"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "@knotx/build-config": "0.2.9",
-    "@knotx/eslint-config": "0.2.9",
-    "@knotx/jsx": "0.2.9",
-    "@knotx/typescript-config": "0.2.9"
+    "@knotx/build-config": "0.2.11",
+    "@knotx/eslint-config": "0.2.11",
+    "@knotx/jsx": "0.2.11",
+    "@knotx/typescript-config": "0.2.11"
   },
   "scripts": {
     "build": "unbuild",