orcasvn-react-diagrams 0.1.63 → 0.1.65

package/dist/cjs/index.js

@@ -7752,13 +7752,13 @@ var SelectionFrame = function (props) {
     //         off();
     //     }
     // }, [])
-    var getMousePosition = function (event) {
+    var getMousePosition = React.useCallback(function (event) {
         var position = windowsPositionToPaperPosition({
             x: event.clientX,
             y: event.clientY
         }, propContainer, zoom);
         return position;
-    };
+    }, [propContainer, zoom]);
     var addRectHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingCircle) {
@@ -7794,7 +7794,7 @@ var SelectionFrame = function (props) {
                 setStartY(mouseEvent.clientY);
             }
         }
-    }, [draggingRect, propOnMove, propMovingRate, startX, startY, lastMoveTime, xFromMouse, yFromMouse, zoom]);
+    }, [draggingRect, propOnMove, getMousePosition, propMovingRate, lastMoveTime, xFromMouse, yFromMouse]);
     React.useEffect(function () {
         var addRectHandleMouseUp = function () {
             setDraggingRect(false);
@@ -7880,7 +7880,7 @@ var SelectionFrame = function (props) {
             //logging the end of the circle handle mouse move
             logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
         };
-    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
+    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
@@ -9496,18 +9496,18 @@ var Paper = function (props) {
     var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
     var selectedElementAbsPosition = React.useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
-    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     React.useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
     React.useEffect(function () {
-        setElements(props.elements);
+        setElements(__spreadArray([], props.elements, true));
     }, [props.elements]);
     React.useEffect(function () {
-        setLinks(props.links || []);
+        setLinks(__spreadArray([], props.links || [], true));
     }, [props.links]);
     React.useEffect(function () {
-        setTexts(props.texts);
+        setTexts(__spreadArray([], props.texts, true));
     }, [props.texts]);
     React.useEffect(function () {
         var off = manuallyTriggerRenderElementHandler(function (elementId) {
@@ -9555,10 +9555,15 @@ var Paper = function (props) {
             };
         }
     }, [manuallyTriggerStartedLinkingHandler, paperEventEmitter]);
+    var updateElementsTree = React.useCallback(function () {
+        var parsedElementsInTree = convertElementsToTree(elements);
+        setElementsInTree(parsedElementsInTree);
+    }, [elements]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
-    }, [elements]);
+        updateElementsTree();
+    }, [elements, updateElementsTree]);
     //Cache links to avoid re-render when links changed
     React.useEffect(function () {
         linksRef.current = links;
@@ -9570,10 +9575,6 @@ var Paper = function (props) {
     useKeyboardCommands({
         element: paperContainerRef.current
     });
-    var updateElementsTree = React.useCallback(function () {
-        var parsedElementsInTree = convertElementsToTree(elements);
-        setElementsInTree(parsedElementsInTree);
-    }, [elements]);
     //Cache tempLink to avoid re-render when tempLink changed
     React.useEffect(function () {
         tempLinkRef.current = tempLink;
@@ -9581,17 +9582,16 @@ var Paper = function (props) {
     //Listen text is selected
     React.useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
-            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
             //broadcast selected text to parent component
-            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, text);
+            onTextSelected === null || onTextSelected === void 0 ? void 0 : onTextSelected(text);
         });
         return function () {
             textSelectedListener.off();
         };
-    }, []);
+    }, [paperEventEmitter, onTextSelected]);
     //Listen port is selected
     React.useEffect(function () {
         var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
@@ -9640,11 +9640,11 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, [elements, updateElementsTree, onElementsChanged]);
-    //Update elements tree when length of elements change
-    React.useEffect(function () {
-        updateElementsTree();
-    }, [elements, updateElementsTree]);
+    }, [updateElementsTree, onElementsChanged]);
+    // //Update elements tree when length of elements change
+    // useEffect(() => {
+    //     updateElementsTree();
+    // }, [elements, updateElementsTree])
     //Get all child elements of the deleted element
     var getChildOfElement = React.useCallback(function (element) {
         if (!element.childrenElementsInTree)
@@ -9823,7 +9823,6 @@ var Paper = function (props) {
         }
     }, [onLinksChanged]);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
-        var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             //set links equals a clone links to re-render links with new position
@@ -9838,21 +9837,44 @@ var Paper = function (props) {
                 }
                 return link;
             });
-            setLinks(newLinks);
+            setLinks(function (prev) {
+                return prev.map(function (link) {
+                    var _a, _b;
+                    if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
+                        link.sourcePort.position = newPosition;
+                    }
+                    if (((_a = link.targetElement) === null || _a === void 0 ? void 0 : _a.id) === elementId && ((_b = link.targetPort) === null || _b === void 0 ? void 0 : _b.id) === port.id) {
+                        link.targetPort.position = newPosition;
+                    }
+                    return link;
+                });
+            });
             if (onLinksChanged) {
                 onLinksChanged(newLinks);
             }
             var newElements = elementsRef.current;
-            var updatedElementIndex = newElements.findIndex(function (e) { return e.id === elementId; });
-            newElements[updatedElementIndex].ports = (_a = newElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-                if (p.id === port.id) {
-                    p.position = newPosition;
-                }
-                return p;
-            });
+            // newElements[updatedElementIndex].ports = newElements[updatedElementIndex].ports?.map(p => {
+            //     if (p.id === port.id) {
+            //         p.position = newPosition
+            //     }
+            //     return p
+            // })
             //Update port position in element, not re-render
             //To avoid re-render
-            setElements(newElements);
+            setElements(function (prev) {
+                var _a;
+                var newElements = __spreadArray([], prev, true);
+                var updatedElement = newElements.find(function (e) { return e.id === elementId; });
+                if (updatedElement) {
+                    updatedElement.ports = (_a = updatedElement.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                        if (p.id === port.id) {
+                            p.position = newPosition;
+                        }
+                        return p;
+                    });
+                }
+                return newElements;
+            });
             if (onElementsChanged) {
                 onElementsChanged(newElements);
             }
@@ -10210,6 +10232,7 @@ var Paper = function (props) {
         }
     }, [onElementMouseLeave]);
     var renderElementInTree = React.useCallback(function (element) {
+        logger.info("Rendering element tree for element ".concat(element.id));
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
@@ -10224,25 +10247,22 @@ var Paper = function (props) {
                         }, objectX: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, objectY: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width, height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height, zoom: zoom, draggingByDefault: autoEnabledDraggingSelectedElement, 
                         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
                         onMouseDown: function (ev) {
-                            var _a;
                             if (selectedElement) {
                                 var paperPosition = windowsPositionToPaperPosition({
                                     x: ev.clientX,
                                     y: ev.clientY
                                 }, paperContainerRef.current, zoomRef.current);
-                                (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement, paperPosition);
+                                onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, selectedElement, paperPosition);
                             }
                         }, onMouseUp: function (ev) {
-                            var _a;
                             if (selectedElement) {
                                 var paperPosition = windowsPositionToPaperPosition({
                                     x: ev.clientX,
                                     y: ev.clientY
                                 }, paperContainerRef.current, zoomRef.current);
-                                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement, paperPosition);
+                                onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, selectedElement, paperPosition);
                             }
                         }, onMove: function (newX, newY) {
-                            var _a;
                             if (!selectedElement)
                                 return;
                             var oldPosition = __assign({}, selectedElement.position);
@@ -10279,13 +10299,13 @@ var Paper = function (props) {
                                 }
                                 return link;
                             });
-                            (_a = props.onLinksChanged) === null || _a === void 0 ? void 0 : _a.call(props, newLinks);
+                            onLinksChanged === null || onLinksChanged === void 0 ? void 0 : onLinksChanged(newLinks);
                             // End updating the position of links connected to the selected element
                             //Set state to re-render UI with new position
                             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
-                            if (props.onElementMoved) {
+                            if (onElementMoved) {
                                 console.log('onElementMoved', selectedElement.position, paperPosition);
-                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
+                                onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
                             }
                             paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
                             setMouseDownedOnPaper(false);
@@ -10298,16 +10318,16 @@ var Paper = function (props) {
                             elements[indexSelectedElement].size = newSize;
                             var newElements = __spreadArray([], elements, true);
                             setElements(newElements);
-                            if (props.onElementsChanged) {
-                                props.onElementsChanged(newElements);
+                            if (onElementsChanged) {
+                                onElementsChanged(newElements);
                             }
-                            if (props.onElementResized) {
-                                props.onElementResized(newSize, selectedElement, indexSelectedElement);
+                            if (onElementResized) {
+                                onElementResized(newSize, selectedElement, indexSelectedElement);
                             }
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, props, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter]);
+    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter, onElementResized, onElementsChanged, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);

package/dist/esm/index.js

@@ -7748,13 +7748,13 @@ var SelectionFrame = function (props) {
     //         off();
     //     }
     // }, [])
-    var getMousePosition = function (event) {
+    var getMousePosition = useCallback(function (event) {
         var position = windowsPositionToPaperPosition({
             x: event.clientX,
             y: event.clientY
         }, propContainer, zoom);
         return position;
-    };
+    }, [propContainer, zoom]);
     var addRectHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingCircle) {
@@ -7790,7 +7790,7 @@ var SelectionFrame = function (props) {
                 setStartY(mouseEvent.clientY);
             }
         }
-    }, [draggingRect, propOnMove, propMovingRate, startX, startY, lastMoveTime, xFromMouse, yFromMouse, zoom]);
+    }, [draggingRect, propOnMove, getMousePosition, propMovingRate, lastMoveTime, xFromMouse, yFromMouse]);
     useEffect(function () {
         var addRectHandleMouseUp = function () {
             setDraggingRect(false);
@@ -7876,7 +7876,7 @@ var SelectionFrame = function (props) {
             //logging the end of the circle handle mouse move
             logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
         };
-    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
+    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
@@ -9492,18 +9492,18 @@ var Paper = function (props) {
     var textsRef = useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
     var selectedElementAbsPosition = useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
-    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
     useEffect(function () {
-        setElements(props.elements);
+        setElements(__spreadArray([], props.elements, true));
     }, [props.elements]);
     useEffect(function () {
-        setLinks(props.links || []);
+        setLinks(__spreadArray([], props.links || [], true));
     }, [props.links]);
     useEffect(function () {
-        setTexts(props.texts);
+        setTexts(__spreadArray([], props.texts, true));
     }, [props.texts]);
     useEffect(function () {
         var off = manuallyTriggerRenderElementHandler(function (elementId) {
@@ -9551,10 +9551,15 @@ var Paper = function (props) {
             };
         }
     }, [manuallyTriggerStartedLinkingHandler, paperEventEmitter]);
+    var updateElementsTree = useCallback(function () {
+        var parsedElementsInTree = convertElementsToTree(elements);
+        setElementsInTree(parsedElementsInTree);
+    }, [elements]);
     //Cache elements to avoid re-render when elements changed
     useEffect(function () {
         elementsRef.current = elements;
-    }, [elements]);
+        updateElementsTree();
+    }, [elements, updateElementsTree]);
     //Cache links to avoid re-render when links changed
     useEffect(function () {
         linksRef.current = links;
@@ -9566,10 +9571,6 @@ var Paper = function (props) {
     useKeyboardCommands({
         element: paperContainerRef.current
     });
-    var updateElementsTree = useCallback(function () {
-        var parsedElementsInTree = convertElementsToTree(elements);
-        setElementsInTree(parsedElementsInTree);
-    }, [elements]);
     //Cache tempLink to avoid re-render when tempLink changed
     useEffect(function () {
         tempLinkRef.current = tempLink;
@@ -9577,17 +9578,16 @@ var Paper = function (props) {
     //Listen text is selected
     useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
-            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
             //broadcast selected text to parent component
-            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, text);
+            onTextSelected === null || onTextSelected === void 0 ? void 0 : onTextSelected(text);
         });
         return function () {
             textSelectedListener.off();
         };
-    }, []);
+    }, [paperEventEmitter, onTextSelected]);
     //Listen port is selected
     useEffect(function () {
         var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
@@ -9636,11 +9636,11 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, [elements, updateElementsTree, onElementsChanged]);
-    //Update elements tree when length of elements change
-    useEffect(function () {
-        updateElementsTree();
-    }, [elements, updateElementsTree]);
+    }, [updateElementsTree, onElementsChanged]);
+    // //Update elements tree when length of elements change
+    // useEffect(() => {
+    //     updateElementsTree();
+    // }, [elements, updateElementsTree])
     //Get all child elements of the deleted element
     var getChildOfElement = useCallback(function (element) {
         if (!element.childrenElementsInTree)
@@ -9819,7 +9819,6 @@ var Paper = function (props) {
         }
     }, [onLinksChanged]);
     var handlePortMoved = useCallback(function (port, elementId, oldPosition, newPosition) {
-        var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             //set links equals a clone links to re-render links with new position
@@ -9834,21 +9833,44 @@ var Paper = function (props) {
                 }
                 return link;
             });
-            setLinks(newLinks);
+            setLinks(function (prev) {
+                return prev.map(function (link) {
+                    var _a, _b;
+                    if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
+                        link.sourcePort.position = newPosition;
+                    }
+                    if (((_a = link.targetElement) === null || _a === void 0 ? void 0 : _a.id) === elementId && ((_b = link.targetPort) === null || _b === void 0 ? void 0 : _b.id) === port.id) {
+                        link.targetPort.position = newPosition;
+                    }
+                    return link;
+                });
+            });
             if (onLinksChanged) {
                 onLinksChanged(newLinks);
             }
             var newElements = elementsRef.current;
-            var updatedElementIndex = newElements.findIndex(function (e) { return e.id === elementId; });
-            newElements[updatedElementIndex].ports = (_a = newElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-                if (p.id === port.id) {
-                    p.position = newPosition;
-                }
-                return p;
-            });
+            // newElements[updatedElementIndex].ports = newElements[updatedElementIndex].ports?.map(p => {
+            //     if (p.id === port.id) {
+            //         p.position = newPosition
+            //     }
+            //     return p
+            // })
             //Update port position in element, not re-render
             //To avoid re-render
-            setElements(newElements);
+            setElements(function (prev) {
+                var _a;
+                var newElements = __spreadArray([], prev, true);
+                var updatedElement = newElements.find(function (e) { return e.id === elementId; });
+                if (updatedElement) {
+                    updatedElement.ports = (_a = updatedElement.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                        if (p.id === port.id) {
+                            p.position = newPosition;
+                        }
+                        return p;
+                    });
+                }
+                return newElements;
+            });
             if (onElementsChanged) {
                 onElementsChanged(newElements);
             }
@@ -10206,6 +10228,7 @@ var Paper = function (props) {
         }
     }, [onElementMouseLeave]);
     var renderElementInTree = useCallback(function (element) {
+        logger.info("Rendering element tree for element ".concat(element.id));
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
@@ -10220,25 +10243,22 @@ var Paper = function (props) {
                         }, objectX: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, objectY: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width, height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height, zoom: zoom, draggingByDefault: autoEnabledDraggingSelectedElement, 
                         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
                         onMouseDown: function (ev) {
-                            var _a;
                             if (selectedElement) {
                                 var paperPosition = windowsPositionToPaperPosition({
                                     x: ev.clientX,
                                     y: ev.clientY
                                 }, paperContainerRef.current, zoomRef.current);
-                                (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement, paperPosition);
+                                onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, selectedElement, paperPosition);
                             }
                         }, onMouseUp: function (ev) {
-                            var _a;
                             if (selectedElement) {
                                 var paperPosition = windowsPositionToPaperPosition({
                                     x: ev.clientX,
                                     y: ev.clientY
                                 }, paperContainerRef.current, zoomRef.current);
-                                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement, paperPosition);
+                                onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, selectedElement, paperPosition);
                             }
                         }, onMove: function (newX, newY) {
-                            var _a;
                             if (!selectedElement)
                                 return;
                             var oldPosition = __assign({}, selectedElement.position);
@@ -10275,13 +10295,13 @@ var Paper = function (props) {
                                 }
                                 return link;
                             });
-                            (_a = props.onLinksChanged) === null || _a === void 0 ? void 0 : _a.call(props, newLinks);
+                            onLinksChanged === null || onLinksChanged === void 0 ? void 0 : onLinksChanged(newLinks);
                             // End updating the position of links connected to the selected element
                             //Set state to re-render UI with new position
                             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
-                            if (props.onElementMoved) {
+                            if (onElementMoved) {
                                 console.log('onElementMoved', selectedElement.position, paperPosition);
-                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
+                                onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
                             }
                             paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
                             setMouseDownedOnPaper(false);
@@ -10294,16 +10314,16 @@ var Paper = function (props) {
                             elements[indexSelectedElement].size = newSize;
                             var newElements = __spreadArray([], elements, true);
                             setElements(newElements);
-                            if (props.onElementsChanged) {
-                                props.onElementsChanged(newElements);
+                            if (onElementsChanged) {
+                                onElementsChanged(newElements);
                             }
-                            if (props.onElementResized) {
-                                props.onElementResized(newSize, selectedElement, indexSelectedElement);
+                            if (onElementResized) {
+                                onElementResized(newSize, selectedElement, indexSelectedElement);
                             }
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, props, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter]);
+    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter, onElementResized, onElementsChanged, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged]);
     var ElementsInTree = useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);