orcasvn-react-diagrams 0.1.14 → 0.1.15

package/dist/cjs/index.js

@@ -8976,24 +8976,34 @@ var bundleExports = bundle.exports;
 var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
-    var _c = React$1.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
-    var _d = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+    var _d = React$1.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
+    var _e = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
-    })) !== null && _b !== void 0 ? _b : []), ports = _d[0], setPorts = _d[1];
-    var _e = React$1.useState(false), someElementLinkStarted = _e[0], setSomeElementLinkStarted = _e[1];
-    var _f = React$1.useState(), potentialPortPosition = _f[0], setPotentialPortPosition = _f[1];
+    })) !== null && _b !== void 0 ? _b : []), ports = _e[0], setPorts = _e[1];
+    var _f = React$1.useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
+    var _g = React$1.useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
     var _paperEventEmitterContext = React$1.useContext(paperEventEmitterContext);
     var elementRef = React$1.useRef(null);
     var elementLinkStarted = React$1.useRef();
     //Listen a new port is created, after add new port to ports state
     React$1.useEffect(function () {
-        var _a, _b;
-        setPorts((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-            return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
-        })) !== null && _b !== void 0 ? _b : []);
-    }, [props.ports]);
+        setPorts(function (prev) {
+            var _a, _b;
+            return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
+                var _a, _b;
+                var position = p.position;
+                //Handle the case when the port is created.
+                if (!((_a = prev[index]) === null || _a === void 0 ? void 0 : _a.ref)) {
+                    position = normalizePortPosition(position);
+                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, p.position, position);
+                    _paperEventEmitterContext.emitPortMoved(p, id, p.position, position);
+                }
+                return __assign(__assign({}, p), { position: position, id: p.id, ref: ((_b = prev[index]) === null || _b === void 0 ? void 0 : _b.ref) || React$1.createRef() });
+            })) !== null && _b !== void 0 ? _b : [];
+        });
+    }, [(_c = props.ports) === null || _c === void 0 ? void 0 : _c.length]);
     //Listen trigger of Delete key, handle delete port is selected
     React$1.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
@@ -9018,6 +9028,7 @@ var Element = function (props) {
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
                     onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
                 return __assign(__assign({}, port), { position: newPosition });
             });
@@ -9835,6 +9846,18 @@ var Paper = function (props) {
             }
             return link;
         }); });
+        //Update port position in element, not re-render
+        setElements(function (prevElements) {
+            var _a;
+            var updatedElementIndex = prevElements.findIndex(function (e) { return e.id === elementId; });
+            prevElements[updatedElementIndex].ports = (_a = prevElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                if (p.id === port.id) {
+                    p.position = newPosition;
+                }
+                return p;
+            });
+            return prevElements;
+        });
     };
     //Handle creating a new element link
     var handlePortMouseDown = function (ev, port, elementId) {

package/dist/esm/index.js

@@ -8972,24 +8972,34 @@ var bundleExports = bundle.exports;
 var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
-    var _c = useState(), selectedPort = _c[0], setSelectedPort = _c[1];
-    var _d = useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+    var _d = useState(), selectedPort = _d[0], setSelectedPort = _d[1];
+    var _e = useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
-    })) !== null && _b !== void 0 ? _b : []), ports = _d[0], setPorts = _d[1];
-    var _e = useState(false), someElementLinkStarted = _e[0], setSomeElementLinkStarted = _e[1];
-    var _f = useState(), potentialPortPosition = _f[0], setPotentialPortPosition = _f[1];
+    })) !== null && _b !== void 0 ? _b : []), ports = _e[0], setPorts = _e[1];
+    var _f = useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
+    var _g = useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
     var _paperEventEmitterContext = useContext(paperEventEmitterContext);
     var elementRef = useRef(null);
     var elementLinkStarted = useRef();
     //Listen a new port is created, after add new port to ports state
     useEffect(function () {
-        var _a, _b;
-        setPorts((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-            return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
-        })) !== null && _b !== void 0 ? _b : []);
-    }, [props.ports]);
+        setPorts(function (prev) {
+            var _a, _b;
+            return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
+                var _a, _b;
+                var position = p.position;
+                //Handle the case when the port is created.
+                if (!((_a = prev[index]) === null || _a === void 0 ? void 0 : _a.ref)) {
+                    position = normalizePortPosition(position);
+                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, p.position, position);
+                    _paperEventEmitterContext.emitPortMoved(p, id, p.position, position);
+                }
+                return __assign(__assign({}, p), { position: position, id: p.id, ref: ((_b = prev[index]) === null || _b === void 0 ? void 0 : _b.ref) || React$1.createRef() });
+            })) !== null && _b !== void 0 ? _b : [];
+        });
+    }, [(_c = props.ports) === null || _c === void 0 ? void 0 : _c.length]);
     //Listen trigger of Delete key, handle delete port is selected
     useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
@@ -9014,6 +9024,7 @@ var Element = function (props) {
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
                     onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
                 return __assign(__assign({}, port), { position: newPosition });
             });
@@ -9831,6 +9842,18 @@ var Paper = function (props) {
             }
             return link;
         }); });
+        //Update port position in element, not re-render
+        setElements(function (prevElements) {
+            var _a;
+            var updatedElementIndex = prevElements.findIndex(function (e) { return e.id === elementId; });
+            prevElements[updatedElementIndex].ports = (_a = prevElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                if (p.id === port.id) {
+                    p.position = newPosition;
+                }
+                return p;
+            });
+            return prevElements;
+        });
     };
     //Handle creating a new element link
     var handlePortMouseDown = function (ev, port, elementId) {