@knotx/react 0.4.6 → 0.4.8

package/dist/index.cjs

@@ -7,6 +7,41 @@ const rxjs = require('rxjs');
 const operators = require('rxjs/operators');
 const pluginsBaseRender = require('@knotx/plugins-base-render');
 
+const LayerWrapper = ({ children, layer }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        zIndex: layer
+      },
+      children
+    }
+  );
+};
+function createLayer({ engine, layer }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(LayerWrapper, { layer, children: engine.getLayerComponents(layer).map(({ name, render: Component }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, name)) }, layer);
+}
+
+function LayerContent({ engineRef }) {
+  const engine = engineRef.current;
+  if (!engine) {
+    return null;
+  }
+  const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > core.Layer.Canvas);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: engine.getLayerComponents(core.Layer.Canvas).reduce(
+    (children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsxRuntime.jsx(CanvasComponent, { children }, name),
+    layers.map(
+      (layer) => createLayer({
+        engine,
+        layer
+      })
+    )
+  ) });
+}
+
 function initReactEngine({
   container,
   nodes = [],
@@ -49,64 +84,42 @@ function initReactEngine({
 }
 
 function useContainerRef(onResize) {
-  const [container, setContainer] = react.useState();
-  const [_, setSize] = react.useState();
-  const onResizeRef = react.useRef(onResize);
+  const onResizeRef = react.useRef(null);
   onResizeRef.current = onResize;
-  react.useLayoutEffect(() => {
-    if (!container)
+  const observerRef = react.useRef();
+  react.useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = void 0;
+      }
+    };
+  }, []);
+  return react.useCallback((ref) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = void 0;
+    }
+    if (!ref) {
       return;
+    }
     const resizeObserver = new ResizeObserver((entries) => {
       var _a;
       const { width, height } = entries[0].contentRect;
       (_a = onResizeRef.current) == null ? void 0 : _a.call(onResizeRef, { width, height });
-      setSize({ width, height });
     });
-    resizeObserver.observe(container);
-    return () => resizeObserver.disconnect();
-  }, [container]);
-  return setContainer;
-}
-
-const LayerWrapper = ({ children, layer }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
-    {
-      style: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        zIndex: layer
-      },
-      children
-    }
-  );
-};
-function createLayer({ engine, layer }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(LayerWrapper, { layer, children: engine.getLayerComponents(layer).map(({ name, render: Component }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, name)) }, layer);
-}
-
-function useLayerContent(engineRef) {
-  const engine = engineRef.current;
-  if (!engine) {
-    return null;
-  }
-  const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > core.Layer.Canvas);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: engine.getLayerComponents(core.Layer.Canvas).reduce(
-    (children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsxRuntime.jsx(CanvasComponent, { children }, name),
-    layers.map(
-      (layer) => createLayer({
-        engine,
-        layer
-      })
-    )
-  ) });
+    resizeObserver.observe(ref);
+    observerRef.current = resizeObserver;
+  }, []);
 }
 
 function useDataUpdate(engineRef, { nodes, edges, initRef }) {
   react.useEffect(() => {
     const engine = engineRef.current;
-    if (!engine || !initRef.current) {
+    if (
+      // 未初始化完成
+      !initRef.current || !(engine == null ? void 0 : engine.nodesManager.version)
+    ) {
       return;
     }
     const previousNodes = engine.nodesManager.dataMap$.value;
@@ -116,7 +129,10 @@ function useDataUpdate(engineRef, { nodes, edges, initRef }) {
   }, [nodes, nodes == null ? void 0 : nodes.length]);
   react.useEffect(() => {
     const engine = engineRef.current;
-    if (!engine || !initRef.current) {
+    if (
+      // 未初始化完成
+      !initRef.current || !(engine == null ? void 0 : engine.edgesManager.version)
+    ) {
       return;
     }
     const previousEdges = engine.edgesManager.dataMap$.value;
@@ -183,6 +199,7 @@ var __spreadValues = (a, b) => {
 const Knotx = react.memo(react.forwardRef(({
   className,
   style,
+  getContainerStyle,
   initialNodes,
   initialEdges,
   nodes,
@@ -192,40 +209,43 @@ const Knotx = react.memo(react.forwardRef(({
   disablePresetPlugins = false,
   onInit
 }, ref) => {
+  const [, rerender] = react.useReducer((state) => state + 1, 0);
   const initRef = react.useRef(false);
   const engineRef = useEngineRef();
   const plugins = useMergedPlugins(_plugins, disablePresetPlugins);
+  if (!engineRef.current) {
+    engineRef.current = initReactEngine({
+      container: { width: 0, height: 0 },
+      nodes: nodes != null ? nodes : initialNodes,
+      edges: edges != null ? edges : initialEdges,
+      plugins,
+      pluginConfig
+    });
+  }
   const setContainer = useContainerRef((containerSize) => {
-    if (engineRef.current) {
-      engineRef.current.container = containerSize;
-    } else {
-      engineRef.current = initReactEngine({
-        container: containerSize,
-        nodes: nodes != null ? nodes : initialNodes,
-        edges: edges != null ? edges : initialEdges,
-        plugins,
-        pluginConfig
-      });
+    if (!engineRef.current) {
+      return;
     }
+    engineRef.current.container = containerSize;
+    if (!initRef.current) {
+      initRef.current = true;
+      onInit == null ? void 0 : onInit(engineRef.current);
+    }
+    rerender();
   });
-  react.useImperativeHandle(ref, () => ({ engineRef }));
+  react.useImperativeHandle(ref, () => ({ engineRef, rerender }));
   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",
     {
       ref: setContainer,
       className,
-      style: __spreadValues({
+      style: __spreadValues(__spreadValues({
         overflow: "hidden",
         contain: "strict"
-      }, style),
-      children: content
+      }, style), getContainerStyle == null ? void 0 : getContainerStyle(engineRef.current)),
+      children: initRef.current && /* @__PURE__ */ jsxRuntime.jsx(LayerContent, { engineRef })
     }
   );
 }));

package/dist/index.d.cts

@@ -5,11 +5,18 @@ import { FC, MutableRefObject, Ref, CSSProperties, ForwardedRef, ReactElement }
 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>;
+    rerender: () => void;
 }
 type KnotxProps<TPlugins extends Plugin[] = Plugin[], TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = {
     ref?: Ref<KnotxInstance<TNode, TEdge>> | undefined;
     className?: string;
     style?: CSSProperties;
+    /**
+     * get container style, merge into default style
+     * @param engine
+     * @returns
+     */
+    getContainerStyle?: (engine: ReactEngine<TNode, TEdge>) => CSSProperties;
     /**
      * initial nodes used to create engine
      */

package/dist/index.d.mts

@@ -5,11 +5,18 @@ import { FC, MutableRefObject, Ref, CSSProperties, ForwardedRef, ReactElement }
 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>;
+    rerender: () => void;
 }
 type KnotxProps<TPlugins extends Plugin[] = Plugin[], TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = {
     ref?: Ref<KnotxInstance<TNode, TEdge>> | undefined;
     className?: string;
     style?: CSSProperties;
+    /**
+     * get container style, merge into default style
+     * @param engine
+     * @returns
+     */
+    getContainerStyle?: (engine: ReactEngine<TNode, TEdge>) => CSSProperties;
     /**
      * initial nodes used to create engine
      */

package/dist/index.d.ts

@@ -5,11 +5,18 @@ import { FC, MutableRefObject, Ref, CSSProperties, ForwardedRef, ReactElement }
 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>;
+    rerender: () => void;
 }
 type KnotxProps<TPlugins extends Plugin[] = Plugin[], TNode extends IRecord = IRecord, TEdge extends IRecord = IRecord> = {
     ref?: Ref<KnotxInstance<TNode, TEdge>> | undefined;
     className?: string;
     style?: CSSProperties;
+    /**
+     * get container style, merge into default style
+     * @param engine
+     * @returns
+     */
+    getContainerStyle?: (engine: ReactEngine<TNode, TEdge>) => CSSProperties;
     /**
      * initial nodes used to create engine
      */

package/dist/index.js

@@ -1,10 +1,45 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useLayoutEffect, useMemo, memo, forwardRef, useImperativeHandle } from 'react';
-import { Engine, Layer, buildDiffOperation } from '@knotx/core';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo, memo, forwardRef, useReducer, useImperativeHandle } from 'react';
+import { Layer, Engine, buildDiffOperation } from '@knotx/core';
 import { BehaviorSubject } from 'rxjs';
 import { map, distinctUntilChanged } from 'rxjs/operators';
 import { BaseRender } from '@knotx/plugins-base-render';
 
+const LayerWrapper = ({ children, layer }) => {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        zIndex: layer
+      },
+      children
+    }
+  );
+};
+function createLayer({ engine, layer }) {
+  return /* @__PURE__ */ jsx(LayerWrapper, { layer, children: engine.getLayerComponents(layer).map(({ name, render: Component }) => /* @__PURE__ */ jsx(Component, {}, name)) }, layer);
+}
+
+function LayerContent({ engineRef }) {
+  const engine = engineRef.current;
+  if (!engine) {
+    return null;
+  }
+  const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > Layer.Canvas);
+  return /* @__PURE__ */ jsx(Fragment, { children: engine.getLayerComponents(Layer.Canvas).reduce(
+    (children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsx(CanvasComponent, { children }, name),
+    layers.map(
+      (layer) => createLayer({
+        engine,
+        layer
+      })
+    )
+  ) });
+}
+
 function initReactEngine({
   container,
   nodes = [],
@@ -47,64 +82,42 @@ function initReactEngine({
 }
 
 function useContainerRef(onResize) {
-  const [container, setContainer] = useState();
-  const [_, setSize] = useState();
-  const onResizeRef = useRef(onResize);
+  const onResizeRef = useRef(null);
   onResizeRef.current = onResize;
-  useLayoutEffect(() => {
-    if (!container)
+  const observerRef = useRef();
+  useEffect(() => {
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = void 0;
+      }
+    };
+  }, []);
+  return useCallback((ref) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = void 0;
+    }
+    if (!ref) {
       return;
+    }
     const resizeObserver = new ResizeObserver((entries) => {
       var _a;
       const { width, height } = entries[0].contentRect;
       (_a = onResizeRef.current) == null ? void 0 : _a.call(onResizeRef, { width, height });
-      setSize({ width, height });
     });
-    resizeObserver.observe(container);
-    return () => resizeObserver.disconnect();
-  }, [container]);
-  return setContainer;
-}
-
-const LayerWrapper = ({ children, layer }) => {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      style: {
-        position: "absolute",
-        left: 0,
-        top: 0,
-        zIndex: layer
-      },
-      children
-    }
-  );
-};
-function createLayer({ engine, layer }) {
-  return /* @__PURE__ */ jsx(LayerWrapper, { layer, children: engine.getLayerComponents(layer).map(({ name, render: Component }) => /* @__PURE__ */ jsx(Component, {}, name)) }, layer);
-}
-
-function useLayerContent(engineRef) {
-  const engine = engineRef.current;
-  if (!engine) {
-    return null;
-  }
-  const layers = Array.from(engine.layers.keys()).sort((a, b) => a - b).filter((layer) => layer > Layer.Canvas);
-  return /* @__PURE__ */ jsx(Fragment, { children: engine.getLayerComponents(Layer.Canvas).reduce(
-    (children, { name, render: CanvasComponent }) => /* @__PURE__ */ jsx(CanvasComponent, { children }, name),
-    layers.map(
-      (layer) => createLayer({
-        engine,
-        layer
-      })
-    )
-  ) });
+    resizeObserver.observe(ref);
+    observerRef.current = resizeObserver;
+  }, []);
 }
 
 function useDataUpdate(engineRef, { nodes, edges, initRef }) {
   useEffect(() => {
     const engine = engineRef.current;
-    if (!engine || !initRef.current) {
+    if (
+      // 未初始化完成
+      !initRef.current || !(engine == null ? void 0 : engine.nodesManager.version)
+    ) {
       return;
     }
     const previousNodes = engine.nodesManager.dataMap$.value;
@@ -114,7 +127,10 @@ function useDataUpdate(engineRef, { nodes, edges, initRef }) {
   }, [nodes, nodes == null ? void 0 : nodes.length]);
   useEffect(() => {
     const engine = engineRef.current;
-    if (!engine || !initRef.current) {
+    if (
+      // 未初始化完成
+      !initRef.current || !(engine == null ? void 0 : engine.edgesManager.version)
+    ) {
       return;
     }
     const previousEdges = engine.edgesManager.dataMap$.value;
@@ -181,6 +197,7 @@ var __spreadValues = (a, b) => {
 const Knotx = memo(forwardRef(({
   className,
   style,
+  getContainerStyle,
   initialNodes,
   initialEdges,
   nodes,
@@ -190,40 +207,43 @@ const Knotx = memo(forwardRef(({
   disablePresetPlugins = false,
   onInit
 }, ref) => {
+  const [, rerender] = useReducer((state) => state + 1, 0);
   const initRef = useRef(false);
   const engineRef = useEngineRef();
   const plugins = useMergedPlugins(_plugins, disablePresetPlugins);
+  if (!engineRef.current) {
+    engineRef.current = initReactEngine({
+      container: { width: 0, height: 0 },
+      nodes: nodes != null ? nodes : initialNodes,
+      edges: edges != null ? edges : initialEdges,
+      plugins,
+      pluginConfig
+    });
+  }
   const setContainer = useContainerRef((containerSize) => {
-    if (engineRef.current) {
-      engineRef.current.container = containerSize;
-    } else {
-      engineRef.current = initReactEngine({
-        container: containerSize,
-        nodes: nodes != null ? nodes : initialNodes,
-        edges: edges != null ? edges : initialEdges,
-        plugins,
-        pluginConfig
-      });
+    if (!engineRef.current) {
+      return;
     }
+    engineRef.current.container = containerSize;
+    if (!initRef.current) {
+      initRef.current = true;
+      onInit == null ? void 0 : onInit(engineRef.current);
+    }
+    rerender();
   });
-  useImperativeHandle(ref, () => ({ engineRef }));
+  useImperativeHandle(ref, () => ({ engineRef, rerender }));
   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",
     {
       ref: setContainer,
       className,
-      style: __spreadValues({
+      style: __spreadValues(__spreadValues({
         overflow: "hidden",
         contain: "strict"
-      }, style),
-      children: content
+      }, style), getContainerStyle == null ? void 0 : getContainerStyle(engineRef.current)),
+      children: initRef.current && /* @__PURE__ */ jsx(LayerContent, { engineRef })
     }
   );
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/react",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "React for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -33,19 +33,19 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.4.6",
-    "@knotx/jsx": "0.4.6",
-    "@knotx/plugins-base-render": "0.4.6"
+    "@knotx/core": "0.4.8",
+    "@knotx/jsx": "0.4.8",
+    "@knotx/plugins-base-render": "0.4.8"
   },
   "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.4.6",
-    "@knotx/eslint-config": "0.4.6",
-    "@knotx/jsx": "0.4.6",
-    "@knotx/typescript-config": "0.4.6"
+    "@knotx/build-config": "0.4.8",
+    "@knotx/eslint-config": "0.4.8",
+    "@knotx/jsx": "0.4.8",
+    "@knotx/typescript-config": "0.4.8"
   },
   "scripts": {
     "build": "unbuild",