@ajuhos/react-flow-chart - npm Package Compare versions

Comparing version 0.0.39 to 0.0.40

package.json

 {
   "name": "@ajuhos/react-flow-chart",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "A flexible, stateless flow chart library for react.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/Node/Node.wrapper.js

@@ -52,16 +52,25 @@ "use strict";
     var compRef = React.useRef(null);
+    // TODO: probably should add an observer to track node component size changes
     React.useLayoutEffect(function () {
-        onNodeSizeChange({ config: config, nodeId: node.id, size: { width: size.width, height: size.height } });
-    }, [node, size.width, size.height]);
+        var el = compRef.current;
+        if (el) {
+            if ((node.size && node.size.width) !== el.offsetWidth ||
+                (node.size && node.size.height) !== el.offsetHeight) {
+                var newSize = { width: el.offsetWidth, height: el.offsetHeight };
+                setSize(newSize);
+                onNodeSizeChange({ config: config, nodeId: node.id, size: newSize });
+            }
+        }
+    }, [node, compRef.current, size.width, size.height]);
     var children = (React.createElement("div", { style: { minWidth: portsSize.width, minHeight: portsSize.height } },
-        React.createElement(NodeInner, { node: node, config: config }),
-        React.createElement(Ports, { node: node, config: config, onResize: setPortsSize }, Object.keys(node.ports).map(function (portId) { return (React.createElement(__1.PortWrapper, { config: config, key: portId, offset: offset, selected: selected, selectedLink: selectedLink, hoveredLink: hoveredLink, hovered: hovered, node: node, port: node.ports[portId], Component: Port, onPortPositionChange: onPortPositionChange, onLinkStart: config.readonly ? utils_1.noop : onLinkStart, onLinkMove: config.readonly ? utils_1.noop : onLinkMove, onLinkComplete: onLinkComplete, onLinkCancel: onLinkCancel })); }))));
-    return (React.createElement(react_draggable_1.default, { bounds: "parent", axis: "both", position: node.position, grid: [1, 1], scale: zoomScale, onStart: onStart, onDrag: onDrag, onStop: onStop, disabled: config.readonly },
         React.createElement(react_resize_observer_1.default, { onResize: function (rect) {
                 var newSize = { width: rect.width, height: rect.height };
                 setSize(newSize);
-                onNodeSizeChange({ config: config, nodeId: node.id, size: newSize });
+                // onNodeSizeChange({ config, nodeId: node.id, size: newSize })
             } }),
+        React.createElement(NodeInner, { node: node, config: config }),
+        React.createElement(Ports, { node: node, config: config, onResize: setPortsSize }, Object.keys(node.ports).map(function (portId) { return (React.createElement(__1.PortWrapper, { config: config, key: portId, offset: offset, selected: selected, selectedLink: selectedLink, hoveredLink: hoveredLink, hovered: hovered, node: node, port: node.ports[portId], Component: Port, onPortPositionChange: onPortPositionChange, onLinkStart: config.readonly ? utils_1.noop : onLinkStart, onLinkMove: config.readonly ? utils_1.noop : onLinkMove, onLinkComplete: onLinkComplete, onLinkCancel: onLinkCancel })); }))));
+    return (React.createElement(react_draggable_1.default, { bounds: "parent", axis: "both", position: node.position, grid: [1, 1], scale: zoomScale, onStart: onStart, onDrag: onDrag, onStop: onStop, disabled: config.readonly },
         React.createElement(Component, { config: config, ref: compRef, children: children, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, isSelected: isSelected, node: node })));
 };
 //# sourceMappingURL=Node.wrapper.js.map

No alert changes

Improved metrics

Total package byte prevSize

187312

increased by0.35%

Lines of code

2779

increased by0.32%

No dependency changes