orcasvn-react-diagrams 0.1.60 → 0.1.63

package/dist/cjs/index.js

@@ -817,6 +817,8 @@ var EVENT_ELEMENT_MOUSE_MOVE = 'elementMouseMove';
 var EVENT_ELEMENT_MOUSE_LEAVE = 'elementMouseLeave';
 var EVENT_ELEMENT_MOUSE_UP = 'elementMouseUp';
 var EVENT_ELEMENT_MOUSE_DOWN = 'elementMouseDown';
+var EVENT_ELEMENT_ADDED = 'elementAdded';
+var EVENT_ELEMENT_REMOVED = 'elementRemoved';
 var EVENT_MANUALLY_SELECT_ELEMENT = 'manuallySelectElement';
 var EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT = 'manuallyTriggerDraggingElement';
 var EVENT_LINK_SELECTED = 'linkSelected';
@@ -894,10 +896,12 @@ var EditorContext = /** @class */ (function () {
         }
         this._elements = __spreadArray(__spreadArray([], this._elements, true), [element], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
+        this.onElementAddedHandler(element);
     };
     EditorContext.prototype.removeElement = function (elementId) {
         this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
+        this.onElementRemovedHandler(elementId);
     };
     EditorContext.prototype.getLink = function (linkId) {
         return this._links.find(function (l) { return l.id === linkId; });
@@ -1048,6 +1052,20 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onElementMouseDownHandler = function (ev, element, paperPosition) {
         this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_DOWN, ev, element, paperPosition);
     };
+    EditorContext.prototype.onElementAdded = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_ADDED, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementAddedHandler = function (element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_ADDED, element);
+    };
+    EditorContext.prototype.onElementRemoved = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_REMOVED, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementRemovedHandler = function (elementId) {
+        this._eventEmitter.emit(EVENT_ELEMENT_REMOVED, elementId);
+    };
     EditorContext.prototype.onLinkSelected = function (callback) {
         return this.addEventListener(EVENT_LINK_SELECTED, callback);
     };
@@ -8421,7 +8439,7 @@ var Port1 = React.forwardRef(function (props, ref) {
         else {
             return React.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, onContextMenu: function (e) { return onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" }, children);
         }
-    }, [props]);
+    }, [children, height, id, onContextMenu, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseUp, onSelected, props, ref, renderShape, rotationAngle, width, x, y]);
     return (React.createElement(React.Fragment, null,
         renderedShape,
         label && renderLabel(label)));
@@ -8770,10 +8788,14 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
 });
 
 var Element = React.forwardRef(function (props, forwardedRef) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition, 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated, onPortContextMenu = props.onPortContextMenu; props.onPortsChanged;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition, 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated, onPortContextMenu = props.onPortContextMenu, onPortsChanged = props.onPortsChanged, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort;
+    var propPorts = props.ports;
     var _a = React.useState(), selectedPort = _a[0], setSelectedPort = _a[1];
     var _b = React.useState(), hoveredPort = _b[0], setHoveredPort = _b[1];
-    var _c = React.useState([]), ports = _c[0], setPorts = _c[1];
+    var _c = React.useState((propPorts === null || propPorts === void 0 ? void 0 : propPorts.map(function (p) {
+        var portState = __assign(__assign({}, p), { ref: React.createRef() });
+        return portState;
+    })) || []), ports = _c[0], setPorts = _c[1];
     var _d = React.useState(false), someElementLinkStarted = _d[0], setSomeElementLinkStarted = _d[1];
     var _e = React.useState(), potentialPortPosition = _e[0], setPotentialPortPosition = _e[1];
     var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
@@ -8792,12 +8814,11 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             position.y += parentAbsolutePosition.y;
         }
         return position;
-    }, [x, y, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y]);
+    }, [x, y, parentAbsolutePosition]);
     var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
     //Listen to manually trigger render event
     React.useEffect(function () {
-        var _a;
-        var off = (_a = props.onManuallyTriggerRenderPort) === null || _a === void 0 ? void 0 : _a.call(props, function (portId, elementId) {
+        var off = onManuallyTriggerRenderPort === null || onManuallyTriggerRenderPort === void 0 ? void 0 : onManuallyTriggerRenderPort(function (portId, elementId) {
             if (elementId !== id)
                 return;
             logger.info('onManuallyTriggerRenderPort', id);
@@ -8806,17 +8827,19 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             off === null || off === void 0 ? void 0 : off();
         };
-    }, [props.onManuallyTriggerRenderPort]);
-    //Update portsRef when ports changed
-    React.useEffect(function () {
-        portsRef.current = ports;
-    }, [ports]);
+    }, [id, onManuallyTriggerRenderPort]);
+    //Normalize port position
+    var normalizePortPosition = React.useCallback(function (tempNewPosition) {
+        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
+        return newPosition || tempNewPosition;
+    }, [width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen a new port is created, after add new port to ports state
     React.useEffect(function () {
-        logger.info('Ports changed', 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;
+            if (propPorts === undefined)
+                return [];
+            var newState = (_a = propPorts.map(function (p, index) {
                 var prevPortState = prev.find(function (_p) { return _p.id === p.id; });
                 var newPortState;
                 //If port is existed, keep the ref of the port
@@ -8835,9 +8858,14 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                     newPortState.ref = React.createRef();
                 }
                 return newPortState;
-            })) !== null && _b !== void 0 ? _b : [];
+            })) !== null && _a !== void 0 ? _a : [];
+            return newState;
         });
-    }, [props.ports]);
+    }, [_paperEventEmitterContext, normalizePortPosition, id, onPortMoved, propPorts]);
+    //Update portsRef when ports changed
+    React.useEffect(function () {
+        portsRef.current = ports;
+    }, [ports]);
     //Normalize port position when element is resized
     React.useEffect(function () {
         var newPorts = portsRef.current.map(function (port) {
@@ -8848,22 +8876,21 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             return port;
         });
         setPorts(newPorts);
-    }, [width, height]);
+    }, [width, height, _paperEventEmitterContext, id, onPortsChanged, normalizePortPosition, onPortMoved]);
     //Listen trigger of Delete key, handle delete port is selected
     React.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
-            var _a;
             if (selectedPort) {
                 var newPorts = portsRef.current.filter(function (p) { return p.id !== selectedPort.id; });
                 setPorts(newPorts);
                 setSelectedPort(undefined);
-                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+                onPortsChanged === null || onPortsChanged === void 0 ? void 0 : onPortsChanged(newPorts, id);
             }
         });
         return function () {
             listener.off();
         };
-    }, [selectedPort, props.onPortsChanged]);
+    }, [_paperEventEmitterContext, id, onPortsChanged, selectedPort]);
     React.useEffect(function () {
         //Listener onMouseDown event on #paper-container
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
@@ -8872,16 +8899,10 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             eventListener.off();
         };
-    }, []);
-    //Normalize port position
-    var normalizePortPosition = React.useCallback(function (tempNewPosition) {
-        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
-        return newPosition || tempNewPosition;
-    }, [width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current]);
+    }, [_paperEventEmitterContext]);
     React.useEffect(function () {
         //listen element resize to update position of the ports by element size.
         var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
-            var _a;
             var isChanged = false;
             var newPorts = portsRef.current.map(function (port) {
                 var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
@@ -8895,13 +8916,13 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             });
             setPorts(newPorts);
             if (isChanged) {
-                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+                onPortsChanged === null || onPortsChanged === void 0 ? void 0 : onPortsChanged(newPorts, id);
             }
         });
         return function () {
             eleResizeListener.off();
         };
-    }, [onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
+    }, [_paperEventEmitterContext, id, onPortsChanged, onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen creating element link started, ended.
     React.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -8918,7 +8939,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             elementStartedListener.off();
             elementEndedListener.off();
         };
-    }, []);
+    }, [id, _paperEventEmitterContext]);
     //Listen another port is selected
     React.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onPortSelected(function (port, elementId) {
@@ -8929,7 +8950,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             portSelectedListener.off();
         };
-    }, []);
+    }, [_paperEventEmitterContext, id]);
     //Listen text is selected
     React.useEffect(function () {
         var textSelectedListener = _paperEventEmitterContext.onTextSelected(function (text) {
@@ -8938,7 +8959,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             textSelectedListener.off();
         };
-    }, []);
+    }, [_paperEventEmitterContext]);
     //Listen another element is selected
     React.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
@@ -8947,7 +8968,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             portSelectedListener.off();
         };
-    }, []);
+    }, [_paperEventEmitterContext]);
     var handleSelectedPort = React.useCallback(function (portId, e) {
         e.stopPropagation();
         logger.debug('Port selected', portId, e);
@@ -8956,9 +8977,9 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             return;
         setSelectedPort(port);
         _paperEventEmitterContext.emitPortSelected(port, id);
-    }, [_paperEventEmitterContext]);
+    }, [id, _paperEventEmitterContext]);
     //Calculate the position of the 4 vertices of a rectangle relative to element
-    var calculateSlideRailRectSVGPositions = function (slideRailSVG) {
+    var calculateSlideRailRectSVGPositions = React.useCallback(function (slideRailSVG) {
         var coordinates = getRectangleCorners(slideRailSVG);
         var ownerSVG = slideRailSVG.ownerSVGElement;
         var rotationAngle = getElementRotationInfo(ownerSVG);
@@ -8968,7 +8989,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             coordinates = getRotatedRectangleCoordinates(coordinates, rotationCenterX, rotationCenterY, rotationAngle);
         }
         return coordinates;
-    };
+    }, [width, height]);
     var getSlideRailSVG = React.useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
@@ -9001,7 +9022,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             return;
         _paperEventEmitterContext.emitPortMouseDown(e, port, id);
         onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(e, port, id);
-    }, [_paperEventEmitterContext]);
+    }, [id, onPortMouseDown, _paperEventEmitterContext]);
     //Handle when mouse up on port
     var handlePortMouseUp = React.useCallback(function (portId, e) {
         e.stopPropagation();
@@ -9014,7 +9035,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         if (potentialPortPosition) {
             setPotentialPortPosition(undefined);
         }
-    }, [_paperEventEmitterContext, potentialPortPosition]);
+    }, [id, onPortMouseUp, _paperEventEmitterContext, potentialPortPosition]);
     //Update state when label of port is moved
     var handlePortLabelMoved = React.useCallback(function (newX, newY, portId) {
         setPorts(function (prevPorts) {
@@ -9168,7 +9189,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 break;
         }
         return rotationAngle;
-    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition]);
+    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition, calculateSlideRailRectSVGPositions]);
     var renderedShape = React.useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -9183,7 +9204,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         }
     }, []);
     //log element render
-    logger.debug('Rendering Element', id, x, y, width, height, cssClass, portPlaceholderShape, children, container, parentAbsolutePosition, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
+    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,
         React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
             renderedShape,
@@ -9475,6 +9496,7 @@ 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;
     React.useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
@@ -9488,40 +9510,37 @@ var Paper = function (props) {
         setTexts(props.texts);
     }, [props.texts]);
     React.useEffect(function () {
-        var off = props.manuallyTriggerRenderElementHandler(function (elementId) {
+        var off = manuallyTriggerRenderElementHandler(function (elementId) {
             var newElements = __spreadArray([], elements, true);
             setElements(newElements);
-            if (props.onElementsChanged) {
-                props.onElementsChanged(newElements);
+            if (onElementsChanged) {
+                onElementsChanged(newElements);
             }
         });
         return function () {
             off();
         };
-    }, [props.manuallyTriggerRenderElementHandler, props.onElementsChanged, elements, selectedElement]);
+    }, [manuallyTriggerRenderElementHandler, onElementsChanged, elements, selectedElement]);
     React.useEffect(function () {
-        var _a, _b;
         var offs = [];
-        offs.push((_a = props.manuallySelectElementHandler) === null || _a === void 0 ? void 0 : _a.call(props, function (element) {
-            var _a;
+        offs.push(manuallySelectElementHandler === null || manuallySelectElementHandler === void 0 ? void 0 : manuallySelectElementHandler(function (element) {
             setSelectedElement(element || undefined);
             if (element) {
-                (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
+                onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
             }
         }));
-        offs.push((_b = props.manuallyTriggerDraggingElementHandler) === null || _b === void 0 ? void 0 : _b.call(props, function (element) {
-            var _a;
+        offs.push(manuallyTriggerDraggingElementHandler === null || manuallyTriggerDraggingElementHandler === void 0 ? void 0 : manuallyTriggerDraggingElementHandler(function (element) {
             setSelectedElement(element);
-            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
+            onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
             setAutoEnabledDraggingSelectedElement(true);
         }));
         return function () {
             offs.forEach(function (off) { return off(); });
         };
-    }, [props.manuallySelectElementHandler, props.manuallyTriggerDraggingElementHandler, props.onElementSelected]);
+    }, [manuallySelectElementHandler, manuallyTriggerDraggingElementHandler, onElementSelected]);
     React.useEffect(function () {
-        if (props.manuallyTriggerStartedLinkingHandler) {
-            var off_1 = props.manuallyTriggerStartedLinkingHandler(function (sourceElement, sourcePort) {
+        if (manuallyTriggerStartedLinkingHandler) {
+            var off_1 = manuallyTriggerStartedLinkingHandler(function (sourceElement, sourcePort) {
                 var newLink = {
                     id: generateUniqueId(),
                     points: [],
@@ -9535,7 +9554,7 @@ var Paper = function (props) {
                 off_1();
             };
         }
-    }, [props.manuallyTriggerStartedLinkingHandler]);
+    }, [manuallyTriggerStartedLinkingHandler, paperEventEmitter]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
@@ -9551,10 +9570,10 @@ var Paper = function (props) {
     useKeyboardCommands({
         element: paperContainerRef.current
     });
-    var updateElementsTree = function () {
+    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;
@@ -9576,20 +9595,19 @@ var Paper = function (props) {
     //Listen port is selected
     React.useEffect(function () {
         var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
-            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
             //broadcast selected port to parent component
             var element = elementsRef.current.find(function (e) { return e.id === elementId; });
             if (element) {
-                (_a = props.onPortSelected) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+                onPortSelected === null || onPortSelected === void 0 ? void 0 : onPortSelected(port, element);
             }
         });
         return function () {
             portSelectedListener.off();
         };
-    }, []);
+    }, [paperEventEmitter, onPortSelected]);
     React.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
         var parentChangedCancelers = elementsRef.current.map(function (element) {
@@ -9613,8 +9631,8 @@ var Paper = function (props) {
                 });
                 //Set state to re-render component
                 setElements(newElements);
-                if (props.onElementsChanged) {
-                    props.onElementsChanged(newElements);
+                if (onElementsChanged) {
+                    onElementsChanged(newElements);
                 }
             });
         });
@@ -9622,13 +9640,13 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, [elements]);
+    }, [elements, updateElementsTree, onElementsChanged]);
     //Update elements tree when length of elements change
     React.useEffect(function () {
         updateElementsTree();
-    }, [elements]);
+    }, [elements, updateElementsTree]);
     //Get all child elements of the deleted element
-    var getChildOfElement = function (element) {
+    var getChildOfElement = React.useCallback(function (element) {
         if (!element.childrenElementsInTree)
             return [];
         var childElms = element.childrenElementsInTree;
@@ -9636,10 +9654,9 @@ var Paper = function (props) {
             return __spreadArray(__spreadArray([], acc, true), getChildOfElement(ele), true);
         }, []);
         return __spreadArray(__spreadArray([], childElms, true), childOfChildElements, true);
-    };
+    }, []);
     //Listen command delete selected for element
     React.useEffect(function () {
-        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
                 selectedElement.parentElement = undefined; //Remove parent element to avoid memory leak. This will remove the element from the parent element's childrenElements array.
@@ -9647,17 +9664,18 @@ var Paper = function (props) {
                 var deletedElementIds_1 = __spreadArray(__spreadArray([], deletedChildElements, true), [selectedElement], false).map(function (e) { return e.id; });
                 var prevElements = elementsRef.current;
                 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);
-                if (props.onElementsChanged) {
-                    props.onElementsChanged(newElements);
+                if (onElementsChanged) {
+                    onElementsChanged(newElements);
                 }
                 //Update links
                 var prevLinks = linksRef.current;
                 var newLinks = prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); });
                 setLinks(newLinks);
-                if (props.onLinksChanged) {
-                    props.onLinksChanged(newLinks);
+                if (onLinksChanged) {
+                    onLinksChanged(newLinks);
                 }
                 setSelectedElement(undefined);
                 setSelectedElementSVG(null);
@@ -9665,56 +9683,54 @@ var Paper = function (props) {
         });
         //broadcast selected element to parent component
         if (selectedElement) {
-            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedElement);
+            onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(selectedElement);
         }
         return function () {
             listener.off();
         };
-    }, [selectedElement, props.onElementsChanged]);
+    }, [selectedElement, onElementSelected, onElementsChanged, onLinksChanged, getChildOfElement, paperEventEmitter, onElementDeleted]);
     //Listen command delete selected for link
     React.useEffect(function () {
-        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
                 var prevLinks = linksRef.current;
                 var newLinks = prevLinks.filter(function (l) { return l.id !== selectedLink.id; });
                 setLinks(links);
                 setSelectedLink(undefined);
-                if (props.onLinksChanged) {
-                    props.onLinksChanged(newLinks);
+                if (onLinksChanged) {
+                    onLinksChanged(newLinks);
                 }
             }
         });
         //broadcast selected link to parent component
         if (selectedLink) {
-            (_a = props.onLinkSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedLink);
+            onLinkSelected === null || onLinkSelected === void 0 ? void 0 : onLinkSelected(selectedLink);
         }
         return function () {
             listener.off();
         };
-    }, [selectedLink, props.onLinksChanged]);
+    }, [selectedLink, onLinksChanged, onLinkSelected, links, paperEventEmitter]);
     //Listen command delete selected for Text
     React.useEffect(function () {
-        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
                 var prevTexts = textsRef.current;
                 var newTexts = prevTexts.filter(function (t) { return t.id !== selectedText.id; });
                 setTexts(newTexts);
-                if (props.onTextsChanged) {
-                    props.onTextsChanged(newTexts);
+                if (onTextsChanged) {
+                    onTextsChanged(newTexts);
                 }
                 setSelectedText(undefined);
             }
         });
         //broadcast selected text to parent component
         if (selectedText) {
-            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedText);
+            onTextSelected === null || onTextSelected === void 0 ? void 0 : onTextSelected(selectedText);
         }
         return function () {
             listener.off();
         };
-    }, [selectedText, props.onTextsChanged]);
+    }, [selectedText, onTextsChanged, onTextSelected, texts, paperEventEmitter]);
     var handlePaperMouseMove = function (ev) {
         var _a;
         var _b = windowsPositionToPaperPosition({
@@ -9793,19 +9809,19 @@ var Paper = function (props) {
         links[updatedLinkIndex].path = path;
         var newLinks = __spreadArray([], links, true);
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged, links]);
+    }, [onLinksChanged, links]);
     var handlePointsOfLinkChange = React.useCallback(function (points, linkId) {
         var newLinks = __spreadArray([], linksRef.current, true);
         var updatedLinkIndex = newLinks.findIndex(function (l) { return l.id === linkId; });
         newLinks[updatedLinkIndex].points = points;
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
         var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
@@ -9823,8 +9839,8 @@ var Paper = function (props) {
                 return link;
             });
             setLinks(newLinks);
-            if (props.onLinksChanged) {
-                props.onLinksChanged(newLinks);
+            if (onLinksChanged) {
+                onLinksChanged(newLinks);
             }
             var newElements = elementsRef.current;
             var updatedElementIndex = newElements.findIndex(function (e) { return e.id === elementId; });
@@ -9837,17 +9853,16 @@ var Paper = function (props) {
             //Update port position in element, not re-render
             //To avoid re-render
             setElements(newElements);
-            if (props.onElementsChanged) {
-                props.onElementsChanged(newElements);
+            if (onElementsChanged) {
+                onElementsChanged(newElements);
             }
-            if (props.onPortMoved) {
-                props.onPortMoved(newPosition, port, element);
+            if (onPortMoved) {
+                onPortMoved(newPosition, port, element);
             }
         }
-    }, [props.onPortMoved, props.onElementsChanged, props.onLinksChanged]);
+    }, [onPortMoved, onElementsChanged, onLinksChanged]);
     //Handle creating a new element link
     var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
-        var _a;
         ev.stopPropagation();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
@@ -9857,7 +9872,7 @@ var Paper = function (props) {
         console.log(paperPosition);
         //broadcast port mouse down to parent component
         if (element) {
-            (_a = props.onPortMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, port, element, paperPosition);
+            onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(port, element, paperPosition);
         }
         if (!tempLinkRef.current && element) {
             //handle create temp element link;
@@ -9870,13 +9885,13 @@ var Paper = function (props) {
             setTempLink(newLink);
             paperEventEmitter.emitElementLinkStarted(newLink);
         }
-    }, [paperEventEmitter, props.onPortMouseDown]);
+    }, [paperEventEmitter, onPortMouseDown]);
     var createElementLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         //if no onCreatingLink prop, no link will be created
-        if (!props.onCreatingLink) {
+        if (!onCreatingLink) {
             return null;
         }
-        var newElementLink = props.onCreatingLink(sourcePort, sourceElement, targetPort, targetElement);
+        var newElementLink = onCreatingLink(sourcePort, sourceElement, targetPort, targetElement);
         if (!newElementLink)
             return null;
         //Automatic bending, if is not defined points
@@ -9885,9 +9900,8 @@ var Paper = function (props) {
             newElementLink = automationAddPointsToLink(newElementLink, elements_1, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
-    }, [props.onCreatingLink]);
+    }, [onCreatingLink]);
     var handlePortMouseUp = React.useCallback(function (ev, port, elementId) {
-        var _a;
         ev.stopPropagation();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
@@ -9896,7 +9910,7 @@ var Paper = function (props) {
         }, paperContainerRef.current, zoomRef.current);
         //broadcast port mouse down to parent component
         if (element) {
-            (_a = props.onPortMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, port, element, paperPosition);
+            onPortMouseUp === null || onPortMouseUp === void 0 ? void 0 : onPortMouseUp(port, element, paperPosition);
         }
         //Create new element link, if has tempLink
         if (tempLinkRef.current) {
@@ -9904,7 +9918,7 @@ var Paper = function (props) {
             var isMouseUpOnNotSelf = tempLinkRef.current.sourcePort.id !== port.id || tempLinkRef.current.sourceElement.id !== elementId;
             var newElementLink = null;
             if (isMouseUpOnNotSelf) {
-                var _b = tempLinkRef.current, sourcePort = _b.sourcePort, sourceElement = _b.sourceElement;
+                var _a = tempLinkRef.current, sourcePort = _a.sourcePort, sourceElement = _a.sourceElement;
                 var targetElement = elementsRef.current.find(function (e) { return e.id === elementId; });
                 newElementLink = createElementLink(sourcePort, sourceElement, port, targetElement);
             }
@@ -9912,8 +9926,8 @@ var Paper = function (props) {
                 var prevLinks = linksRef.current;
                 var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
                 setLinks(newLinks);
-                if (props.onLinksChanged) {
-                    props.onLinksChanged(newLinks);
+                if (onLinksChanged) {
+                    onLinksChanged(newLinks);
                 }
                 paperEventEmitter.emitElementLinkEnded(newElementLink);
             }
@@ -9922,14 +9936,14 @@ var Paper = function (props) {
             }
             setTempLink(null);
         }
-    }, [paperEventEmitter, createElementLink, props.onPortMouseUp, props.onLinksChanged]);
+    }, [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
-            props.onPortsChanged(ports, element);
+            onPortsChanged(ports, element);
         }
-    }, [props.onPortsChanged]);
+    }, [onPortsChanged]);
     var handleLinkLabelMoved = React.useCallback(function (newX, newY, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -9953,10 +9967,10 @@ var Paper = function (props) {
             }
         }
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleLinkLabelResized = React.useCallback(function (width, height, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -9988,10 +10002,10 @@ var Paper = function (props) {
             }
         }
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleLinkLabelContentChanged = React.useCallback(function (newValue, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -10011,10 +10025,10 @@ var Paper = function (props) {
             }
         }
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleSelectLink = function (link, index) {
         setSelectedLink(link);
     };
@@ -10067,20 +10081,20 @@ var Paper = function (props) {
             var newLinks = __spreadArray([], prevLinks, true);
             newLinks.splice(index, 1);
             setLinks(newLinks);
-            if (props.onLinksChanged) {
-                props.onLinksChanged(newLinks);
+            if (onLinksChanged) {
+                onLinksChanged(newLinks);
             }
         };
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleMouseUpAtLinkedPortPlaceholder = React.useCallback(function (link, position, targetElementId) {
         var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
         if (!targetElement)
             return;
         logger.info("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
-        if (props.onCreatingPortByLinking) {
+        if (onCreatingPortByLinking) {
             var sourcePort = link.sourcePort, sourceElement = link.sourceElement;
             //Handle create port via onCreatingPortByLinking prop
-            var targetPort = props.onCreatingPortByLinking(sourceElement, sourcePort, targetElement, position);
+            var targetPort = onCreatingPortByLinking(sourceElement, sourcePort, targetElement, position);
             if (targetPort) {
                 //Add new port to target element
                 targetElement.addPort(targetPort);
@@ -10091,8 +10105,8 @@ var Paper = function (props) {
                     var prevLinks = linksRef.current;
                     var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
                     setLinks(newLinks);
-                    if (props.onLinksChanged) {
-                        props.onLinksChanged(newLinks);
+                    if (onLinksChanged) {
+                        onLinksChanged(newLinks);
                     }
                     paperEventEmitter.emitElementLinkEnded(newElementLink);
                     setTempLink(null);
@@ -10103,7 +10117,7 @@ var Paper = function (props) {
         //Clear tempLink
         setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
-    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter, props.onLinksChanged]);
+    }, [onCreatingPortByLinking, createElementLink, paperEventEmitter, onLinksChanged]);
     var handleElementTextChange = React.useCallback(function (elementId, textId, newContent) {
         var prevElms = elementsRef.current;
         var newElements = prevElms.map(function (curEle) {
@@ -10117,10 +10131,10 @@ var Paper = function (props) {
             return curEle;
         });
         setElements(newElements);
-        if (props.onElementsChanged) {
-            props.onElementsChanged(newElements);
+        if (onElementsChanged) {
+            onElementsChanged(newElements);
         }
-    }, [props.onElementsChanged]);
+    }, [onElementsChanged]);
     var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
@@ -10141,73 +10155,67 @@ var Paper = function (props) {
         setMouseDownedOnPaper(false);
     }, [paperEventEmitter]);
     var handlePortContextMenu = React.useCallback(function (port, elementId, e) {
-        var _a;
         e.preventDefault();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
-            (_a = props.onPortContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, port, element, e);
+            onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, element, e);
         }
-    }, [props.onPortContextMenu]);
+    }, [onPortContextMenu]);
     var handleContextMenu = React.useCallback(function (elementId, e, ref) {
-        var _a;
         e.preventDefault();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             handleElementClicked(elementId, e, ref);
-            (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
+            onElementContextMenu === null || onElementContextMenu === void 0 ? void 0 : onElementContextMenu(element, e);
         }
-    }, [props.onElementContextMenu, handleElementClicked]);
+    }, [onElementContextMenu, handleElementClicked]);
     var handleMouseUp = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, element, paperPosition);
         }
-    }, [props.onElementMouseUp]);
+    }, [onElementMouseUp]);
     var handleMouseDown = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, element, paperPosition);
         }
-    }, [props.onElementMouseDown]);
+    }, [onElementMouseDown]);
     var handleMouseMove = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseMove) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseMove === null || onElementMouseMove === void 0 ? void 0 : onElementMouseMove(ev, element, paperPosition);
         }
-    }, [props.onElementMouseMove]);
+    }, [onElementMouseMove]);
     var handleMouseLeave = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseLeave) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseLeave === null || onElementMouseLeave === void 0 ? void 0 : onElementMouseLeave(ev, element, paperPosition);
         }
-    }, [props.onElementMouseLeave]);
+    }, [onElementMouseLeave]);
     var renderElementInTree = React.useCallback(function (element) {
         //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, 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: props.manuallyTriggerRenderPortHandler, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
+                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),
                 !!paperContainerRef.current && !!selectedElement && selectedElement.id === element.id &&
                     React.createElement(SelectionFrame, { key: selectedElement.id, container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
@@ -10299,7 +10307,7 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [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, 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]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -10382,7 +10390,7 @@ var Editor = function (_a) {
     }, [editorContext]);
     var handlePortsChanged = React.useCallback(function (ports, element) {
         element.ports = ports;
-    }, [editorContext]);
+    }, []);
     var handlePortContextMenu = React.useCallback(function (port, element, event) {
         editorContext.onPortContextMenuHandler(port, element, event);
     }, [editorContext]);
@@ -10446,9 +10454,12 @@ var Editor = function (_a) {
     var handlePaperMouseUp = React.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
+    var handleElementRemoved = React.useCallback(function (element) {
+        editorContext.onElementRemovedHandler(element.id);
+    }, [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, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, 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, 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;