orcasvn-react-diagrams 0.1.66 → 0.1.67

package/dist/cjs/index.js

@@ -9010,7 +9010,9 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             selectedPort.position = newPosition;
             onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(selectedPort, id, oldPosition, newPosition);
             setPorts(__spreadArray([], portsRef.current, true));
-            _paperEventEmitterContext.emitPortMoved(selectedPort, id, oldPosition, newPosition);
+            if (_paperEventEmitterContext.emitter.listenerCount(EVENT_NAME.PORT_MOVED) > 0) {
+                _paperEventEmitterContext.emitPortMoved(selectedPort, id, oldPosition, newPosition);
+            }
         }
     };
     //Handle when mouse down on port
@@ -9199,11 +9201,11 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     //Re-render port again after rendered to automation rotate port
     //Because elementRef.current equals null in first render so automation rotate port is incorrect.
     //TODO: check if this is still needed -> Still needed
-    React.useLayoutEffect(function () {
-        if (elementRef.current) {
-            setPorts(function (prev) { return __spreadArray([], prev, true); });
-        }
-    }, []);
+    // useLayoutEffect(() => {
+    //     if (elementRef.current) {
+    //         setPorts(prev => [...prev])
+    //     }
+    // }, [])
     //log element render
     logger.debug('Rendering Element', id, x, y, width, height, cssClass, portPlaceholderShape, children, container, parentAbsolutePosition, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
     return (React.createElement(React.Fragment, null,
@@ -9477,34 +9479,45 @@ function convertElementsToTree(elements) {
 }
 var Paper = function (props) {
     var _a, _b;
-    var _c = React.useState([]), elements = _c[0], setElements = _c[1];
-    var _d = React.useState([]), elementsInTree = _d[0], setElementsInTree = _d[1];
-    var _e = React.useState(), selectedElement = _e[0], setSelectedElement = _e[1];
-    var _f = React.useState(false), autoEnabledDraggingSelectedElement = _f[0], setAutoEnabledDraggingSelectedElement = _f[1];
-    var _g = React.useState([]), links = _g[0], setLinks = _g[1];
-    var _h = React.useState(), selectedLink = _h[0], setSelectedLink = _h[1];
-    var _j = React.useState(null), tempLink = _j[0], setTempLink = _j[1];
-    var _k = React.useState([]), texts = _k[0], setTexts = _k[1];
-    var _l = React.useState(), selectedText = _l[0], setSelectedText = _l[1];
-    var _m = React.useState(null), selectedElementSVG = _m[0], setSelectedElementSVG = _m[1];
-    var _o = React.useState(false), mouseDownedOnPaper = _o[0], setMouseDownedOnPaper = _o[1];
+    var _c = React.useState({ elements: [], elementsInTree: [] }), elementsState = _c[0], setElementsState = _c[1];
+    // const [elements, setElements] = React.useState<IElementState[]>([]);
+    // const [elementsInTree, setElementsInTree] = React.useState<IElementInTreeState[]>([]);
+    var _d = React.useState(), selectedElement = _d[0], setSelectedElement = _d[1];
+    var _e = React.useState(false), autoEnabledDraggingSelectedElement = _e[0], setAutoEnabledDraggingSelectedElement = _e[1];
+    var _f = React.useState([]), links = _f[0], setLinks = _f[1];
+    var _g = React.useState(), selectedLink = _g[0], setSelectedLink = _g[1];
+    var _h = React.useState(null), tempLink = _h[0], setTempLink = _h[1];
+    var _j = React.useState([]), texts = _j[0], setTexts = _j[1];
+    var _k = React.useState(), selectedText = _k[0], setSelectedText = _k[1];
+    var _l = React.useState(null), selectedElementSVG = _l[0], setSelectedElementSVG = _l[1];
+    var _m = React.useState(false), mouseDownedOnPaper = _m[0], setMouseDownedOnPaper = _m[1];
     var paperEventEmitter = React.useContext(paperEventEmitterContext);
     var zoom = useZoomContext().zoom;
     var zoomRef = React.useRef(zoom);
     var paperContainerRef = React.useRef(null);
     var tempLinkRef = React.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
-    var elementsRef = React.useRef(elements); //Cache elements to avoid re-render when elements changed
+    var elementsRef = React.useRef([]); //Cache elements to avoid re-render when elements changed
     var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
     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, (_a = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position) === null || _a === void 0 ? void 0 : _a.x, (_b = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position) === null || _b === void 0 ? void 0 : _b.y, 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, 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, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, 
+    //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, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    var handleElementsState = React.useCallback(function (elements) {
+        var elementsInTree = convertElementsToTree(elements);
+        setElementsState({ elements: __spreadArray([], elements, true), elementsInTree: elementsInTree });
+        elementsRef.current = __spreadArray([], elements, true);
+    }, []);
+    var rerenderWhenAnyElementChanged = React.useCallback(function () {
+        setElementsState(function (prev) { return ({ elements: __spreadArray([], prev.elements, true), elementsInTree: __spreadArray([], prev.elementsInTree, true) }); });
+    }, []);
     React.useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
     React.useEffect(function () {
-        setElements(__spreadArray([], props.elements, true));
-    }, [props.elements]);
+        handleElementsState(props.elements);
+    }, [handleElementsState, props.elements]);
     React.useEffect(function () {
         setLinks(__spreadArray([], props.links || [], true));
     }, [props.links]);
@@ -9513,16 +9526,16 @@ var Paper = function (props) {
     }, [props.texts]);
     React.useEffect(function () {
         var off = manuallyTriggerRenderElementHandler(function (elementId) {
-            var newElements = __spreadArray([], elements, true);
-            setElements(newElements);
-            if (onElementsChanged) {
-                onElementsChanged(newElements);
-            }
+            rerenderWhenAnyElementChanged();
+            //setElementsState(prevElementsState => ({ ...prevElementsState }));
+            // if (onElementsChanged) {
+            //     onElementsChanged(newElements)
+            // }
         });
         return function () {
             off();
         };
-    }, [manuallyTriggerRenderElementHandler, onElementsChanged, elements, selectedElement]);
+    }, [manuallyTriggerRenderElementHandler, rerenderWhenAnyElementChanged]);
     React.useEffect(function () {
         var offs = [];
         offs.push(manuallySelectElementHandler === null || manuallySelectElementHandler === void 0 ? void 0 : manuallySelectElementHandler(function (element) {
@@ -9557,15 +9570,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;
-        updateElementsTree();
-    }, [elements, updateElementsTree]);
+    // const updateElementsTree = useCallback(() => {
+    //     const parsedElementsInTree = convertElementsToTree(element)
+    //     setElementsInTree(parsedElementsInTree)
+    // }, [elements])
+    // //Cache elements to avoid re-render when elements changed
+    // useEffect(() => {
+    //     elementsRef.current = elements;
+    //     updateElementsTree();
+    // }, [elements, updateElementsTree])
     //Cache links to avoid re-render when links changed
     React.useEffect(function () {
         linksRef.current = links;
@@ -9616,7 +9629,7 @@ var Paper = function (props) {
             var _a;
             return (_a = element.onParentChanged) === null || _a === void 0 ? void 0 : _a.call(element, function (newPa, oldPa) {
                 logger.info('onParentChanged');
-                updateElementsTree();
+                handleElementsState(elementsRef.current);
             });
         });
         //Listen a new port added, then re-render the element component
@@ -9624,25 +9637,21 @@ var Paper = function (props) {
             var _a;
             return (_a = element.onAddedPort) === null || _a === void 0 ? void 0 : _a.call(element, function (newPort) {
                 logger.info("A new port has been added to element ".concat(element.id));
-                var prevElements = elementsRef.current;
-                var newElements = prevElements.map(function (ele) {
+                elementsRef.current.forEach(function (ele) {
                     if (ele.id === element.id) {
                         ele.ports = __spreadArray([], (ele.ports || []), true);
                     }
-                    return ele;
                 });
                 //Set state to re-render component
-                setElements(newElements);
-                if (onElementsChanged) {
-                    onElementsChanged(newElements);
-                }
+                // setElements(newElements)
+                rerenderWhenAnyElementChanged();
             });
         });
         return function () {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, [updateElementsTree, onElementsChanged]);
+    }, [handleElementsState, rerenderWhenAnyElementChanged]);
     // //Update elements tree when length of elements change
     // useEffect(() => {
     //     updateElementsTree();
@@ -9668,7 +9677,7 @@ var Paper = function (props) {
                 var newElements = prevElements.filter(function (e) { return !deletedElementIds_1.includes(e.id); });
                 onElementDeleted === null || onElementDeleted === void 0 ? void 0 : onElementDeleted(selectedElement);
                 //Set state to re-render component
-                setElements(newElements);
+                handleElementsState(newElements);
                 if (onElementsChanged) {
                     onElementsChanged(newElements);
                 }
@@ -9690,7 +9699,7 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedElement, onElementSelected, onElementsChanged, onLinksChanged, getChildOfElement, paperEventEmitter, onElementDeleted]);
+    }, [selectedElement, onElementSelected, onElementsChanged, onLinksChanged, getChildOfElement, paperEventEmitter, onElementDeleted, handleElementsState]);
     //Listen command delete selected for link
     React.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
@@ -9825,6 +9834,7 @@ 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
@@ -9854,7 +9864,7 @@ var Paper = function (props) {
             if (onLinksChanged) {
                 onLinksChanged(newLinks);
             }
-            var newElements = elementsRef.current;
+            //const newElements = elementsRef.current;
             // newElements[updatedElementIndex].ports = newElements[updatedElementIndex].ports?.map(p => {
             //     if (p.id === port.id) {
             //         p.position = newPosition
@@ -9863,28 +9873,25 @@ var Paper = function (props) {
             // })
             //Update port position in element, not re-render
             //To avoid re-render
-            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);
+            // setElements(prev => {
+            //     const newElements = [...prev]
+            var updatedElement = elementsRef.current.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;
+                });
             }
+            rerenderWhenAnyElementChanged();
+            //     return newElements
+            // });
             if (onPortMoved) {
                 onPortMoved(newPosition, port, element);
             }
         }
-    }, [onPortMoved, onElementsChanged, onLinksChanged]);
+    }, [onPortMoved, onLinksChanged, rerenderWhenAnyElementChanged]);
     //Handle creating a new element link
     var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
         ev.stopPropagation();
@@ -9920,8 +9927,8 @@ var Paper = function (props) {
             return null;
         //Automatic bending, if is not defined points
         if (!newElementLink.points || newElementLink.points.length === 0) {
-            var elements_1 = elementsRef.current;
-            newElementLink = automationAddPointsToLink(newElementLink, elements_1, MAX_LINK_KNOT_COUNT);
+            var elements = elementsRef.current;
+            newElementLink = automationAddPointsToLink(newElementLink, elements, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
     }, [onCreatingLink]);
@@ -9961,13 +9968,13 @@ var Paper = function (props) {
             setTempLink(null);
         }
     }, [paperEventEmitter, createElementLink, onPortMouseUp, onLinksChanged]);
-    var handlePortsChanged = React.useCallback(function (ports, elementId) {
-        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
-        if (element) {
-            //broadcast ports changed to parent component
-            onPortsChanged(ports, element);
-        }
-    }, [onPortsChanged]);
+    // const handlePortsChanged = useCallback((ports: IPort[], elementId: string) => {
+    //     const element = elementsRef.current.find(e => e.id === elementId);
+    //     if (element) {
+    //         //broadcast ports changed to parent component
+    //         onPortsChanged(ports, element);
+    //     }
+    // }, [onPortsChanged])
     var handleLinkLabelMoved = React.useCallback(function (newX, newY, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -10143,8 +10150,8 @@ var Paper = function (props) {
         paperEventEmitter.emitElementLinkEnded();
     }, [onCreatingPortByLinking, createElementLink, paperEventEmitter, onLinksChanged]);
     var handleElementTextChange = React.useCallback(function (elementId, textId, newContent) {
-        var prevElms = elementsRef.current;
-        var newElements = prevElms.map(function (curEle) {
+        // const prevElms = elementsRef.current;
+        elementsRef.current.forEach(function (curEle) {
             //Find changed text of element to update the content for it.
             if (curEle.id === elementId && curEle.texts) {
                 var updatedTextId = curEle.texts.findIndex(function (t) { return t.id === textId; });
@@ -10152,13 +10159,9 @@ var Paper = function (props) {
                     curEle.texts[updatedTextId].content = newContent;
                 }
             }
-            return curEle;
         });
-        setElements(newElements);
-        if (onElementsChanged) {
-            onElementsChanged(newElements);
-        }
-    }, [onElementsChanged]);
+        rerenderWhenAnyElementChanged();
+    }, [rerenderWhenAnyElementChanged]);
     var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
@@ -10239,7 +10242,9 @@ var Paper = function (props) {
         //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 },
-            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, selectable: element.selectable, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, 
+            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, selectable: element.selectable, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
+                // onPortsChanged={handlePortsChanged}
+                onPortContextMenu: handlePortContextMenu, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
                 onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: manuallyTriggerRenderPortHandler, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -10291,7 +10296,7 @@ var Paper = function (props) {
                                 updateElementPosition(selectedElement, paperPosition.x, paperPosition.y, false);
                             }
                             //let newElementPosition = updateElementPosition(selectedElement, newPosition.x, newPosition.y, true)
-                            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
+                            var indexSelectedElement = elementsRef.current.findIndex(function (e) { return e.id === selectedElement.id; });
                             logger.info("Element ".concat(selectedElement.id, " is moving to relative position ").concat(JSON.stringify(selectedElement.position)));
                             // Start updating the position of links connected to the selected element
                             var childElements = getChildOfElement(selectedElement);
@@ -10312,7 +10317,7 @@ var Paper = function (props) {
                             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); });
+                            rerenderWhenAnyElementChanged();
                             if (onElementMoved) {
                                 console.log('onElementMoved', selectedElement.position, paperPosition);
                                 onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
@@ -10322,27 +10327,23 @@ var Paper = function (props) {
                         }, onResize: function (width, height) {
                             if (!selectedElement)
                                 return;
-                            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
+                            var indexSelectedElement = elementsRef.current.findIndex(function (e) { return e.id === selectedElement.id; });
                             var oldSize = selectedElement.size;
                             var newSize = { width: width, height: height };
-                            elements[indexSelectedElement].size = newSize;
-                            var newElements = __spreadArray([], elements, true);
-                            setElements(newElements);
-                            if (onElementsChanged) {
-                                onElementsChanged(newElements);
-                            }
+                            elementsRef.current[indexSelectedElement].size = newSize;
+                            rerenderWhenAnyElementChanged();
                             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, 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, onElementMoving]);
+    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, 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, getChildOfElement, paperEventEmitter, onElementResized, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged, onElementMoving, rerenderWhenAnyElementChanged]);
     var ElementsInTree = React.useMemo(function () {
-        return elementsInTree.map(function (element, index) {
+        return elementsState.elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
         });
-    }, [elementsInTree, renderElementInTree]);
+    }, [elementsState.elementsInTree, renderElementInTree]);
     return (React.createElement("div", { style: { position: "relative" } },
         React.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),
         React.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
@@ -10418,9 +10419,6 @@ var Editor = function (_a) {
     var handlePortSelected = React.useCallback(function (port, element) {
         editorContext.onPortSelectedHandler(port, element);
     }, [editorContext]);
-    var handlePortsChanged = React.useCallback(function (ports, element) {
-        element.ports = ports;
-    }, []);
     var handlePortContextMenu = React.useCallback(function (port, element, event) {
         editorContext.onPortContextMenuHandler(port, element, event);
     }, [editorContext]);
@@ -10495,7 +10493,9 @@ var Editor = function (_a) {
     }, [editorContext]);
     return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
         React.createElement(ZoomContextProvider, null,
-            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
+            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, 
+                //onPortsChanged={handlePortsChanged}
+                onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
 };
 
 exports.CircleRC = Circle;

package/dist/cjs/types/components/paper.d.ts

@@ -21,7 +21,6 @@ interface PaperProps {
     onPortMouseUp?: (port: IPort, element: IElement, paperPosition: IPosition) => void;
     onPortMoved?: (relativePosition: IPosition, port: IPort, element: IElement) => void;
     onPortSelected?: (port: IPort, element: IElement) => void;
-    onPortsChanged: (ports: IPort[], element: IElement) => void;
     onPortContextMenu?: (port: IPort, element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (relativePosition: IPosition, element: IElement, index: number, paperPosition: IPosition) => void;