orcasvn-react-diagrams 0.1.66 → 0.1.71

package/dist/cjs/index.js

@@ -484,7 +484,8 @@ function generateUniqueId() {
 }
 
 var Element$2 = /** @class */ (function () {
-    function Element(id, x, y, width, height, selectable, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
+    function Element(id, x, y, width, height, selectable, removable, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
+        if (removable === void 0) { removable = true; }
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.positionAnchor = exports.PositioningAnchor.TopLeft;
         this._childrenElements = [];
@@ -498,6 +499,7 @@ var Element$2 = /** @class */ (function () {
         this._position = { x: x, y: y };
         this._size = { width: width, height: height };
         this.selectable = selectable === undefined ? true : selectable;
+        this.removable = removable;
         this.cssClass = cssClass;
         this.renderShape = renderShape;
         this.texts = texts;
@@ -607,7 +609,7 @@ var Element$2 = /** @class */ (function () {
     };
     Element.prototype.addPort = function (newPort) {
         if (this.ports) {
-            this.ports.push(newPort);
+            this.ports = __spreadArray(__spreadArray([], this.ports, true), [newPort], false);
         }
         else {
             this.ports = [newPort];
@@ -629,7 +631,7 @@ var Element$2 = /** @class */ (function () {
         if (index === -1) {
             throw new Error("Port with id ".concat(id, " is not found"));
         }
-        this.ports.splice(index, 1);
+        this.ports = this.ports.filter(function (p) { return p.id !== id; });
         this._eventEmitter.emit('deletedPort', id);
     };
     Element.prototype.onDeletedPort = function (callback) {
@@ -645,6 +647,41 @@ var Element$2 = /** @class */ (function () {
             return undefined;
         return this.ports.find(function (p) { return p.id === id; });
     };
+    Element.prototype.addText = function (newText) {
+        if (this.texts) {
+            this.texts.push(newText);
+        }
+        else {
+            this.texts = [newText];
+        }
+        this._eventEmitter.emit('addedText', newText);
+    };
+    Element.prototype.onAddedText = function (callback) {
+        var _this = this;
+        this._eventEmitter.on('addedText', callback);
+        var canceller = function () {
+            _this._eventEmitter.off('addedText', callback);
+        };
+        return canceller;
+    };
+    Element.prototype.deleteText = function (id) {
+        if (!this.texts)
+            return;
+        var index = this.texts.findIndex(function (t) { return t.id === id; });
+        if (index === -1) {
+            throw new Error("Text with id ".concat(id, " is not found"));
+        }
+        this.texts.splice(index, 1);
+        this._eventEmitter.emit('deletedText', id);
+    };
+    Element.prototype.onDeletedText = function (callback) {
+        var _this = this;
+        this._eventEmitter.on('deletedText', callback);
+        var canceller = function () {
+            _this._eventEmitter.off('deletedText', callback);
+        };
+        return canceller;
+    };
     return Element;
 }());
 
@@ -697,7 +734,8 @@ var CustomShape = React.forwardRef(function (props, ref) {
 });
 
 var Port$1 = /** @class */ (function () {
-    function Port(id, x, y, label, shapeRenderer, width, height) {
+    function Port(id, x, y, label, shapeRenderer, width, height, removable) {
+        if (removable === void 0) { removable = true; }
         var _this = this;
         //internal properties
         this._eventEmitter = new EventEmitter();
@@ -720,6 +758,7 @@ var Port$1 = /** @class */ (function () {
                     props.children));
             });
         }
+        this.removable = removable;
     }
     Object.defineProperty(Port.prototype, "id", {
         get: function () {
@@ -733,7 +772,8 @@ var Port$1 = /** @class */ (function () {
 
 var ElementLink$1 = /** @class */ (function () {
     // constructor(id: string | null, sourceElement: IElement, sourcePort: IPort, targetElement: IElement, targetPort: IPort, tempTargetPosition: IPosition, points?: IPosition[]);
-    function ElementLink(id, sourceElement, sourcePort, targetElement, targetPort, tempTargetPosition, points, path, markerStart, markerEnd, markerDistanceFromPort, markerSize, label, sourceLabel, targetLabel) {
+    function ElementLink(id, sourceElement, sourcePort, targetElement, targetPort, tempTargetPosition, points, path, markerStart, markerEnd, markerDistanceFromPort, markerSize, label, sourceLabel, targetLabel, removable) {
+        if (removable === void 0) { removable = true; }
         this.id = id || generateUniqueId();
         this.sourceElement = sourceElement;
         this.sourcePort = sourcePort;
@@ -766,12 +806,14 @@ var ElementLink$1 = /** @class */ (function () {
             this.sourceLabel = sourceLabel;
         if (targetLabel)
             this.targetLabel = targetLabel;
+        this.removable = removable;
     }
     return ElementLink;
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(id, content, width, height, editable, selectable, x, y, align, fontSize, border, style) {
+    function Text(id, content, width, height, editable, selectable, removable, x, y, align, fontSize, border, style) {
+        if (removable === void 0) { removable = true; }
         this._id = id || generateUniqueId();
         this.content = content;
         this.align = align;
@@ -781,6 +823,7 @@ var Text$2 = /** @class */ (function () {
         this.style = style;
         this.editable = editable;
         this.selectable = selectable;
+        this.removable = removable;
         if (selectable === undefined) {
             this.selectable = true; // Default to true if not specified
         }
@@ -7446,10 +7489,10 @@ var getAbsolutePosition = function (element) {
         x: element.position.x,
         y: element.position.y,
     };
-    if (element.positionAnchor === exports.PositioningAnchor.Center) {
-        elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
-        elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
-    }
+    // if (element.positionAnchor === PositioningAnchor.Center) {
+    //     elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
+    //     elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
+    // }
     if (!parentElement) {
         return __assign({}, elemenetPositionWithTopLeftAnchor);
     }
@@ -7479,10 +7522,10 @@ var transformAbsPositionToElementRelativePosition = function (position, element)
         x: position.x - absoluteParentElement.x,
         y: position.y - absoluteParentElement.y,
     };
-    if (element.positionAnchor === exports.PositioningAnchor.Center) {
-        result.x += element.size.width / 2;
-        result.y += element.size.height / 2;
-    }
+    // if (element.positionAnchor === PositioningAnchor.Center) {
+    //     result.x += element.size.width / 2;
+    //     result.y += element.size.height / 2;
+    // }
     return result;
 };
 var transformAbsPositionToRelativePositionInsideElement = function (absolutePosition, parentAbsolutePosition) {
@@ -7891,7 +7934,10 @@ var SelectionFrame = function (props) {
     }
     return (React.createElement(React.Fragment, null,
         PropDragDropHandlerElement && React.createElement(PropDragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown, onMouseUp: propOnMouseUp }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown, onMouseUp: function (ev) {
+                propOnMouseUp === null || propOnMouseUp === void 0 ? void 0 : propOnMouseUp(ev);
+                setDraggingRect(false);
+            } }),
         propResizability.enabled ?
             (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
 };
@@ -7899,10 +7945,7 @@ var SelectionFrame = function (props) {
 var useSelectionFrame = function (props) {
     React.useEffect(function () {
         //log selection frame rendering
-        if (props.targetSVGElement) {
-            console.debug('Rendering SelectionFrame for targetSVGElement:', props.targetSVGElement);
-        }
-        else {
+        if (!props.targetSVGElement) {
             console.warn('No targetSVGElement provided for SelectionFrame.');
         }
         if (props.targetSVGElement && props.container) {
@@ -8464,7 +8507,9 @@ function CloseIcon(_a) {
 // const makerEnd = <path d="M0 0 L 20 10 L0 20 Z" fill="blue"></path>//<path d="M0 0 L 10 5 L0 10 Z"></path>
 var IElementLink = function (_a) {
     var _b, _c;
-    var id = _a.id, path = _a.path, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 4 : _d, pointsProp = _a.points, sourcePosition = _a.sourcePosition, targetPosition = _a.targetPosition, onPathChanged = _a.onPathChanged, onClickDelete = _a.onClickDelete, onSelected = _a.onSelected, onDeselected = _a.onDeselected, onPointsChanged = _a.onPointsChanged, container = _a.container, markerStart = _a.markerStart, markerEnd = _a.markerEnd, _e = _a.markerDistanceFromPort, markerDistanceFromPort = _e === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _e, _f = _a.markerSize, markerSize = _f === void 0 ? LINK_MARKER_SIZE : _f, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
+    var id = _a.id, path = _a.path, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 4 : _d, pointsProp = _a.points, sourcePositionX = _a.sourcePositionX, sourcePositionY = _a.sourcePositionY, targetPositionX = _a.targetPositionX, targetPositionY = _a.targetPositionY, removable = _a.removable, 
+    //TODO: get rid of this
+    onPathChanged = _a.onPathChanged, onClickDelete = _a.onClickDelete, onSelected = _a.onSelected, onDeselected = _a.onDeselected, onPointsChanged = _a.onPointsChanged, container = _a.container, markerStart = _a.markerStart, markerEnd = _a.markerEnd, _e = _a.markerDistanceFromPort, markerDistanceFromPort = _e === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _e, _f = _a.markerSize, markerSize = _f === void 0 ? LINK_MARKER_SIZE : _f, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
     var _g = React.useState(path), pathStr = _g[0], setPathStr = _g[1];
     var _h = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _h[0], setPoints = _h[1];
     var _j = React.useState(false), isDragging = _j[0], setIsDragging = _j[1];
@@ -8481,6 +8526,7 @@ var IElementLink = function (_a) {
     var isFirstRender = React.useRef(true);
     var onPointsChangedRef = React.useRef();
     var draggingPointIndexRef = React.useRef(); // Ref to store the index of the point being dragged. No need to store it in state, as it is only used during the drag operation.
+    var timeFromMouseDownToUpRef = React.useRef(0);
     var angleMarkerStart = '0';
     var angleMarkerEnd = '0';
     var markerStartPosition;
@@ -8503,7 +8549,7 @@ var IElementLink = function (_a) {
         return function () {
             paperClickListener.off();
         };
-    }, []);
+    }, [onPaperClicked, onDeselected]);
     // Reset selected label when an element is selected
     React.useEffect(function () {
         var elementSelectedListener = onElementSelected(function () {
@@ -8516,34 +8562,32 @@ var IElementLink = function (_a) {
         return function () {
             elementSelectedListener.off();
         };
-    }, []);
+    }, [onElementSelected, onDeselected]);
     // Store onPointsChanged in a ref to avoid unnecessary re-renders
     React.useEffect(function () {
         onPointsChangedRef.current = onPointsChanged;
     }, [onPointsChanged]);
     // Notify parent component when points change
     React.useEffect(function () {
-        var _a;
         if (isFirstRender.current) {
             isFirstRender.current = false;
             return;
         }
-        (_a = onPointsChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onPointsChangedRef, points, id);
-    }, [JSON.stringify(points)]);
+    }, []);
     React.useLayoutEffect(function () {
-        var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
+        var pointsList = __spreadArray(__spreadArray([{ x: sourcePositionX, y: sourcePositionY }], points, true), [{ x: targetPositionX, y: targetPositionY }], false);
         var _pathStr = createSmoothPathString(pointsList, undefined, false);
         setPathStr(_pathStr);
-    }, [sourcePosition, points, targetPosition]);
+    }, [sourcePositionX, sourcePositionY, points, targetPositionX, targetPositionY]);
     React.useEffect(function () {
         if (!pathStr)
             return;
         onPathChanged === null || onPathChanged === void 0 ? void 0 : onPathChanged(pathStr, id);
-    }, [pathStr, id]);
-    var addMovingPoint = function (mouseDownedOnPaperPos, points) {
+    }, [pathStr, id, onPathChanged]);
+    var addMovingPoint = React.useCallback(function (mouseDownedOnPaperPos, points) {
         //Position of the new point on the path
         var paperPosition = mouseDownedOnPaperPos;
-        var newPoints = addPointToList(paperPosition, __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false), pathRef.current);
+        var newPoints = addPointToList(paperPosition, __spreadArray(__spreadArray([{ x: sourcePositionX, y: sourcePositionY }], points, true), [{ x: targetPositionX, y: targetPositionY }], false), pathRef.current);
         var pointsWithoutStartEndPoint = newPoints.slice(1, newPoints.length - 1);
         var addedIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === paperPosition.x && p.y === paperPosition.y; });
         var leftPointIndex = addedIndex - 1;
@@ -8589,12 +8633,13 @@ var IElementLink = function (_a) {
             draggingPointIndex: _draggingPointIndex,
             points: pointsWithoutStartEndPoint,
         };
-    };
+    }, [sourcePositionX, sourcePositionY, targetPositionX, targetPositionY]);
     React.useEffect(function () {
         //handle when creating and moving point
         var handleMouseMove = function (ev) {
             var mouseEvent = ev;
             if (isDragging && container) {
+                console.info('Mouse move on link');
                 var paperPosition_1 = windowsPositionToPaperPosition({
                     x: mouseEvent.clientX,
                     y: mouseEvent.clientY
@@ -8614,8 +8659,13 @@ var IElementLink = function (_a) {
             }
         };
         var mouseUp = function () {
+            console.info('Mouse up on link');
             draggingPointIndexRef.current = undefined;
             setIsDragging(false);
+            //trigger onPointsChanged
+            if (onPointsChangedRef.current) {
+                onPointsChangedRef.current(points, id);
+            }
         };
         container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
         container === null || container === void 0 ? void 0 : container.addEventListener('mouseup', mouseUp);
@@ -8623,9 +8673,14 @@ var IElementLink = function (_a) {
             container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
             container === null || container === void 0 ? void 0 : container.removeEventListener('mouseup', mouseUp);
         };
-    }, [container, isDragging, zoom, points]);
+    }, [container, isDragging, zoom, points, id, addMovingPoint]);
+    React.useEffect(function () {
+        console.info("Container changed in link", id);
+    }, [addMovingPoint]);
     var handleMouseDownOnPath = function (ev) {
         ev.preventDefault();
+        console.info('Mouse down on link');
+        timeFromMouseDownToUpRef.current = Date.now();
         //add point if click on path
         setIsDragging(true);
     };
@@ -8639,11 +8694,11 @@ var IElementLink = function (_a) {
                 onLabelMoved(newPosition.x, newPosition.y, 'middle');
                 break;
             case sourceLabelRef.current:
-                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, sourcePosition);
+                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, { x: sourcePositionX, y: sourcePositionY });
                 onLabelMoved(newPosition.x, newPosition.y, 'source');
                 break;
             case targetLabelRef.current:
-                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, targetPosition);
+                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, { x: targetPositionX, y: targetPositionY });
                 onLabelMoved(newPosition.x, newPosition.y, 'target');
                 break;
         }
@@ -8675,6 +8730,11 @@ var IElementLink = function (_a) {
         }
     };
     var handleClickPath = function () {
+        if (Date.now() - timeFromMouseDownToUpRef.current > 400) {
+            //Prevent click event when dragging
+            return;
+        }
+        console.info('Click link', id);
         setIsSelectedLink(true);
         onSelected === null || onSelected === void 0 ? void 0 : onSelected();
     };
@@ -8717,22 +8777,22 @@ var IElementLink = function (_a) {
     if ((_b = pathRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute('d')) {
         if (markerStart) {
             markerStartPosition = pathRef.current.getPointAtLength(markerDistanceFromPort);
-            angleMarkerStart = calculateAngleWithOx(sourcePosition, markerStartPosition);
+            angleMarkerStart = calculateAngleWithOx({ x: sourcePositionX, y: sourcePositionY }, markerStartPosition);
         }
         if (markerEnd) {
             markerEndPosition = pathRef.current.getPointAtLength(pathRef.current.getTotalLength() - markerDistanceFromPort);
-            angleMarkerEnd = calculateAngleWithOx(markerEndPosition, targetPosition);
+            angleMarkerEnd = calculateAngleWithOx(markerEndPosition, { x: targetPositionX, y: targetPositionY });
         }
         centerPathPosition = (_c = pathRef.current) === null || _c === void 0 ? void 0 : _c.getPointAtLength(pathRef.current.getTotalLength() / 2);
     }
     return (React.createElement("g", null,
         React.createElement("path", { ref: pathRef, d: pathStr, className: isSelectedLink ? CSS_CLASS_LINK_SELECTED : '', fill: "none", stroke: stroke || LINK_DEFAULT_COLOR, strokeWidth: strokeWidth }),
         React.createElement("path", { d: pathStr, fill: "none", stroke: 'transparent', strokeWidth: LINK_CLICKABLE_STROKE_WIDTH, onClick: handleClickPath, onMouseDown: handleMouseDownOnPath }),
-        isSelectedLink && centerPathPosition && React.createElement("svg", { x: centerPathPosition.x - 10, y: centerPathPosition.y - 10 },
+        removable !== false && isSelectedLink && centerPathPosition && React.createElement("svg", { x: centerPathPosition.x - 10, y: centerPathPosition.y - 10 },
             React.createElement(CloseIcon, { onClick: onClickDelete })),
         label && renderLabel(label, 'middle', centerPathPosition),
-        sourceLabel && renderLabel(sourceLabel, 'source', sourcePosition),
-        targetLabel && renderLabel(targetLabel, 'target', targetPosition),
+        sourceLabel && renderLabel(sourceLabel, 'source', { x: sourcePositionX, y: sourcePositionY }),
+        targetLabel && renderLabel(targetLabel, 'target', { x: targetPositionX, y: targetPositionY }),
         markerStartPosition && React.createElement("g", { transform: "rotate(".concat(angleMarkerStart, ")"), style: { transformOrigin: 'center', transformBox: 'content-box' } },
             React.createElement("svg", { x: markerStartPosition.x - markerSize / 2, y: markerStartPosition.y - markerSize / 2, width: markerSize, height: markerSize }, markerStart)),
         markerEndPosition && React.createElement("g", { transform: "rotate(".concat(angleMarkerEnd, ")"), style: { transformOrigin: 'center', transformBox: 'content-box' } },
@@ -8789,58 +8849,41 @@ 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, 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((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);
+    // const elementObj = props.element;
+    var beingSelected = props.beingSelected, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, onMoving = props.onMoving, onMoved = props.onMoved, onResized = props.onResized, onPortMoved = props.onPortMoved, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onClick = props.onClick, onContextMenu = props.onContextMenu, onPortContextMenu = props.onPortContextMenu, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort, draggingByDefault = props.draggingByDefault, parentDOM = props.parentDOM;
+    var _a = props.element, id = _a.id, cssClass = _a.cssClass, textsPlaceHolderClassName = _a.textsPlaceHolderClassName, portSlideRailSVGClassName = _a.portSlideRailSVGClassName, portMoveableAreas = _a.portMoveableAreas, portDirection = _a.portDirection, defaultPortSize = _a.defaultPortSize, textsPlaceHolderFlexStyle = _a.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = _a.textsPlaceHolderFlexboxPosition, resizability = _a.resizability, renderShape = _a.renderShape;
+    var propPorts = props.element.ports;
+    //state for position
+    var _b = React.useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
+    //state for size
+    var _c = React.useState(__assign({}, props.element.size)), size = _c[0], setSize = _c[1];
+    var _d = React.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
+    var _e = React.useState(), hoveredPort = _e[0], setHoveredPort = _e[1];
+    var _f = React.useState([]), ports = _f[0], setPorts = _f[1];
+    var _g = React.useState(props.element.texts || []), texts = _g[0], setTexts = _g[1];
+    var _h = React.useState(false), someElementLinkStarted = _h[0], setSomeElementLinkStarted = _h[1];
+    var _j = React.useState(), potentialPortPosition = _j[0], setPotentialPortPosition = _j[1];
+    //Zoom
     var zoom = useZoomContext().zoom;
+    var zoomRef = React.useRef(zoom);
     var elementRef = React.useRef(null);
     React.useImperativeHandle(forwardedRef, function () { return elementRef.current; });
     var elementLinkStarted = React.useRef();
-    var portsRef = React.useRef(ports);
-    var getElementAbsPosition = React.useCallback(function () {
-        var position = {
-            x: x,
-            y: y,
-        };
-        if (parentAbsolutePosition) {
-            position.x += parentAbsolutePosition.x;
-            position.y += parentAbsolutePosition.y;
-        }
-        return position;
-    }, [x, y, parentAbsolutePosition]);
-    var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
-    //Listen to manually trigger render event
-    React.useEffect(function () {
-        var off = onManuallyTriggerRenderPort === null || onManuallyTriggerRenderPort === void 0 ? void 0 : onManuallyTriggerRenderPort(function (portId, elementId) {
-            if (elementId !== id)
-                return;
-            logger.info('onManuallyTriggerRenderPort', id);
-            setPorts(function (prev) { return __spreadArray([], prev, true); });
-        });
-        return function () {
-            off === null || off === void 0 ? void 0 : off();
-        };
-    }, [id, onManuallyTriggerRenderPort]);
+    var portsRef = React.useRef([]);
     //Normalize port position
     var normalizePortPosition = React.useCallback(function (tempNewPosition) {
-        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
+        var newPosition = correctPortPositionInElement(tempNewPosition, size.width, size.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 () {
+    }, [size.width, size.height, portMoveableAreas, portSlideRailSVGClassName]);
+    //set port ref when ports state is changed
+    React.useLayoutEffect(function () {
+        portsRef.current = ports;
+    }, [ports]);
+    //Handle ports state when propPorts is changed
+    var handlePortsState = React.useCallback(function (newPorts) {
         setPorts(function (prev) {
-            var _a;
-            if (propPorts === undefined)
-                return [];
-            var newState = (_a = propPorts.map(function (p, index) {
+            var newState = newPorts === null || newPorts === void 0 ? void 0 : newPorts.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
@@ -8853,45 +8896,85 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 //Handle the case new port is created and the ref of the port is not defined
                 if (!newPortState.ref) {
                     var newPosition = normalizePortPosition(newPortState.position);
-                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, newPortState.position, newPosition);
-                    _paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition);
+                    // onPortMoved?.(p, id, newPortState.position, newPosition)
+                    // _paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition)
                     newPortState.position = newPosition;
                     newPortState.ref = React.createRef();
                 }
                 return newPortState;
-            })) !== null && _a !== void 0 ? _a : [];
+            });
             return newState;
         });
-    }, [_paperEventEmitterContext, normalizePortPosition, id, onPortMoved, propPorts]);
-    //Update portsRef when ports changed
-    React.useEffect(function () {
-        portsRef.current = ports;
-    }, [ports]);
-    //Normalize port position when element is resized
+    }, [normalizePortPosition]);
+    var getParentAbsolutePosition = React.useCallback(function () {
+        return props.element.parentElement ? getAbsolutePosition(props.element.parentElement) : undefined;
+    }, [props.element.parentElement]);
+    var getElementAbsPosition = React.useCallback(function () {
+        var newPosition = {
+            x: position.x,
+            y: position.y,
+        };
+        var parentAbsolutePosition = getParentAbsolutePosition();
+        if (parentAbsolutePosition) {
+            newPosition.x += parentAbsolutePosition.x;
+            newPosition.y += parentAbsolutePosition.y;
+        }
+        return newPosition;
+    }, [position, getParentAbsolutePosition]);
+    var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
+    //update element position
+    var updateElementPosition = React.useCallback(function (newPosition) {
+        setPosition({ x: newPosition.x, y: newPosition.y });
+        props.element.position = { x: newPosition.x, y: newPosition.y };
+    }, [props.element]);
+    //update element size
+    var updateElementSize = React.useCallback(function (newSize) {
+        setSize({ width: newSize.width, height: newSize.height });
+        props.element.size = { width: newSize.width, height: newSize.height };
+    }, [props.element]);
+    //Listen to manually trigger render event
     React.useEffect(function () {
-        var newPorts = portsRef.current.map(function (port) {
-            var newPosition = normalizePortPosition(port.position);
-            onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
-            _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
-            port.position = newPosition;
-            return port;
+        var off = onManuallyTriggerRenderPort === null || onManuallyTriggerRenderPort === void 0 ? void 0 : onManuallyTriggerRenderPort(function (portId, elementId) {
+            if (elementId !== id)
+                return;
+            logger.info('onManuallyTriggerRenderPort', id);
+            handlePortsState(portsRef.current);
         });
-        setPorts(newPorts);
-    }, [width, height, _paperEventEmitterContext, id, onPortsChanged, normalizePortPosition, onPortMoved]);
+        return function () {
+            off === null || off === void 0 ? void 0 : off();
+        };
+    }, [id, onManuallyTriggerRenderPort, handlePortsState, props.element]);
+    //Initialize ports state
+    React.useEffect(function () {
+        handlePortsState(propPorts || []);
+    }, [handlePortsState, propPorts]);
+    // const normalizePortsPosition = useCallback(() => {
+    //     const newPorts = portsRef.current.map(port => {
+    //         const newPosition = normalizePortPosition(port.position);
+    //         port.position = newPosition;
+    //         return port;
+    //     });
+    //     return newPorts;
+    // }, [normalizePortPosition]);
+    // //Normalize port position when element is resized
+    // useEffect(() => {
+    //     //const newPorts = normalizePortsPosition();
+    //     //handlePortsState(newPorts);
+    // }, [size, _paperEventEmitterContext, id, normalizePortPosition, onPortMoved, normalizePortsPosition, handlePortsState]);
     //Listen trigger of Delete key, handle delete port is selected
     React.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
-            if (selectedPort) {
+            if (selectedPort && selectedPort.removable !== false) {
                 var newPorts = portsRef.current.filter(function (p) { return p.id !== selectedPort.id; });
-                setPorts(newPorts);
+                handlePortsState(newPorts);
                 setSelectedPort(undefined);
-                onPortsChanged === null || onPortsChanged === void 0 ? void 0 : onPortsChanged(newPorts, id);
+                //onPortsChanged?.(newPorts, id)
             }
         });
         return function () {
             listener.off();
         };
-    }, [_paperEventEmitterContext, id, onPortsChanged, selectedPort]);
+    }, [_paperEventEmitterContext, id, selectedPort, handlePortsState, props.element.ports]);
     React.useEffect(function () {
         //Listener onMouseDown event on #paper-container
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
@@ -8904,26 +8987,38 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     React.useEffect(function () {
         //listen element resize to update position of the ports by element size.
         var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
-            var isChanged = false;
+            //let isChanged = false;
             var newPorts = portsRef.current.map(function (port) {
                 var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
-                    isChanged = true;
+                    //isChanged = true;
                     _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
                 port.position = newPosition;
                 return port;
             });
-            setPorts(newPorts);
-            if (isChanged) {
-                onPortsChanged === null || onPortsChanged === void 0 ? void 0 : onPortsChanged(newPorts, id);
-            }
+            handlePortsState(newPorts);
+            // if (isChanged) {
+            //     onPortsChanged?.(newPorts, id);
+            // }
         });
         return function () {
             eleResizeListener.off();
         };
-    }, [_paperEventEmitterContext, id, onPortsChanged, onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
+    }, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports]);
+    //list to port added
+    React.useEffect(function () {
+        var _a, _b;
+        //Listen a new port added, then re-render the element component
+        var off = (_b = (_a = props.element).onAddedPort) === null || _b === void 0 ? void 0 : _b.call(_a, function (newPort) {
+            logger.info("A new port has been added to element ".concat(id));
+            handlePortsState(props.element.ports || []);
+        });
+        return function () {
+            off === null || off === void 0 ? void 0 : off();
+        };
+    }, [handlePortsState, id, props.element]);
     //Listen creating element link started, ended.
     React.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -8973,30 +9068,30 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     var handleSelectedPort = React.useCallback(function (portId, e) {
         e.stopPropagation();
         logger.debug('Port selected', portId, e);
-        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        var port = ports.find(function (p) { return p.id === portId; });
         if (!port)
             return;
         setSelectedPort(port);
         _paperEventEmitterContext.emitPortSelected(port, id);
-    }, [id, _paperEventEmitterContext]);
+    }, [ports, id, _paperEventEmitterContext]);
     //Calculate the position of the 4 vertices of a rectangle relative to element
     var calculateSlideRailRectSVGPositions = React.useCallback(function (slideRailSVG) {
         var coordinates = getRectangleCorners(slideRailSVG);
         var ownerSVG = slideRailSVG.ownerSVGElement;
         var rotationAngle = getElementRotationInfo(ownerSVG);
         if (rotationAngle !== 0) {
-            var rotationCenterX = width / 2;
-            var rotationCenterY = height / 2;
+            var rotationCenterX = size.width / 2;
+            var rotationCenterY = size.height / 2;
             coordinates = getRotatedRectangleCoordinates(coordinates, rotationCenterX, rotationCenterY, rotationAngle);
         }
         return coordinates;
-    }, [width, height]);
+    }, [size]);
     var getSlideRailSVG = React.useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
     }, []);
-    var handlePortMove = function (newX, newY) {
+    var handlePortMove = React.useCallback(function (newX, newY) {
         if (!selectedPort)
             return;
         var oldPosition = __assign({}, selectedPort.position);
@@ -9008,11 +9103,14 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         var newPosition = normalizePortPosition(tempNewPosition);
         if (newPosition) {
             selectedPort.position = newPosition;
+            //onPortMoved?.(selectedPort, id, oldPosition, newPosition)
+            handlePortsState(portsRef.current);
+            if (_paperEventEmitterContext.emitter.listenerCount(EVENT_NAME.PORT_MOVED) > 0) {
+                _paperEventEmitterContext.emitPortMoved(selectedPort, id, oldPosition, newPosition);
+            }
             onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(selectedPort, id, oldPosition, newPosition);
-            setPorts(__spreadArray([], portsRef.current, true));
-            _paperEventEmitterContext.emitPortMoved(selectedPort, id, oldPosition, newPosition);
         }
-    };
+    }, [selectedPort, elementAbsPosition, normalizePortPosition, _paperEventEmitterContext, id, onPortMoved, handlePortsState]);
     //Handle when mouse down on port
     var handlePortMouseDown = React.useCallback(function (portId, e) {
         e.stopPropagation();
@@ -9023,7 +9121,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);
-    }, [id, onPortMouseDown, _paperEventEmitterContext]);
+    }, [id, _paperEventEmitterContext, onPortMouseDown]);
     //Handle when mouse up on port
     var handlePortMouseUp = React.useCallback(function (portId, e) {
         e.stopPropagation();
@@ -9036,50 +9134,44 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         if (potentialPortPosition) {
             setPotentialPortPosition(undefined);
         }
-    }, [id, onPortMouseUp, _paperEventEmitterContext, potentialPortPosition]);
+    }, [_paperEventEmitterContext, id, onPortMouseUp, potentialPortPosition]);
     //Update state when label of port is moved
     var handlePortLabelMoved = React.useCallback(function (newX, newY, portId) {
-        setPorts(function (prevPorts) {
-            return prevPorts.map(function (p) {
-                if (p.id === portId && p.label) {
-                    var newLabel = Object.assign(Object.create(Object.getPrototypeOf(p.label)), p.label);
-                    var newPosition = {
-                        x: newX,
-                        y: newY
-                    };
-                    newLabel.position = newPosition;
-                    p.label = newLabel;
-                }
-                return p;
-            });
-        });
-    }, []);
+        handlePortsState(portsRef.current.map(function (p) {
+            if (p.id === portId && p.label) {
+                var newLabel = Object.assign(Object.create(Object.getPrototypeOf(p.label)), p.label);
+                var newPosition = {
+                    x: newX,
+                    y: newY
+                };
+                newLabel.position = newPosition;
+                p.label = newLabel;
+            }
+            return p;
+        }));
+    }, [handlePortsState]);
     //Update state when label of port is resized
     var handlePortLabelResized = React.useCallback(function (width, height, portId) {
-        setPorts(function (prevPorts) {
-            return prevPorts.map(function (p) {
-                if (p.id === portId && p.label) {
-                    p.label.size = {
-                        width: width,
-                        height: height
-                    };
-                }
-                return p;
-            });
-        });
-    }, []);
+        handlePortsState(portsRef.current.map(function (p) {
+            if (p.id === portId && p.label) {
+                p.label.size = {
+                    width: width,
+                    height: height
+                };
+            }
+            return p;
+        }));
+    }, [handlePortsState]);
     //Update state when label of port is changed content
     var handlePortLabelContentChanged = React.useCallback(function (ev, newValue, portId) {
-        setPorts(function (prevPorts) {
-            return prevPorts.map(function (p) {
-                if (p.id === portId && p.label) {
-                    p.label.content = newValue;
-                }
-                return p;
-            });
-        });
-    }, []);
-    function handleElementMouseMove(ev) {
+        handlePortsState(portsRef.current.map(function (p) {
+            if (p.id === portId && p.label) {
+                p.label.content = newValue;
+            }
+            return p;
+        }));
+    }, [handlePortsState]);
+    var handleElementMouseMove = React.useCallback(function (ev) {
         //ev.stopPropagation(); //Can't use stopPropagation here, because do not create tempLink
         onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(ev, id);
         if (someElementLinkStarted && elementRef.current) {
@@ -9106,19 +9198,19 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 setPotentialPortPosition(undefined);
             }
         }
-    }
-    function handleElementMouseLeave(ev) {
+    }, [onMouseMove, id, someElementLinkStarted, container, zoom, getElementAbsPosition, normalizePortPosition, hoveredPort]);
+    var handleElementMouseLeave = React.useCallback(function (ev) {
         ev.stopPropagation();
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(ev, id);
         if (someElementLinkStarted) { //If an element link is being created, clear the placeholder when the mouse leaves the element.
             setPotentialPortPosition(undefined);
         }
-    }
-    var handleElementMouseDown = function (ev) {
+    }, [onMouseLeave, id, someElementLinkStarted]);
+    var handleElementMouseDown = React.useCallback(function (ev) {
         ev.stopPropagation();
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(ev, id);
-    };
-    var handleElementMouseUp = function (ev) {
+    }, [onMouseDown, id]);
+    var handleElementMouseUp = React.useCallback(function (ev) {
         ev.stopPropagation();
         onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev, id);
         //If an element link is being created, trigger onMouseUpAtLinkedPortPlaceholder when the mouse up the element.
@@ -9127,16 +9219,16 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             onMouseUpAtLinkedPortPlaceholder === null || onMouseUpAtLinkedPortPlaceholder === void 0 ? void 0 : onMouseUpAtLinkedPortPlaceholder(newElementLink, potentialPortPosition, id);
             elementLinkStarted.current = undefined;
         }
-    };
+    }, [potentialPortPosition, elementLinkStarted, onMouseUpAtLinkedPortPlaceholder, id]);
     //Handle when mouse move on port
     var handlePortMouseMove = React.useCallback(function (portId) {
         if (someElementLinkStarted) {
-            var port = portsRef.current.find(function (p) { return p.id === portId; });
+            var port = ports.find(function (p) { return p.id === portId; });
             if (!port)
                 return;
             setHoveredPort(port);
         }
-    }, [someElementLinkStarted]);
+    }, [someElementLinkStarted, ports]);
     //Handle when mouse leave on port
     var handlePortMouseLeave = React.useCallback(function () {
         if (someElementLinkStarted)
@@ -9145,11 +9237,11 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     //Handle when context menu is opened on port
     var handlePortContextMenu = React.useCallback(function (portId, e) {
         e.preventDefault();
-        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        var port = ports.find(function (p) { return p.id === portId; });
         if (!port)
             return;
         onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, id, e);
-    }, [onPortContextMenu, id]);
+    }, [ports, onPortContextMenu, id]);
     //Get rotate angle of port by port direction is defined.
     var rotatePort = React.useCallback(function (x, y) {
         // logger.info('calculating port rotation', x, y)
@@ -9164,8 +9256,8 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         switch (portDirection) {
             case exports.SubObjectDirection.Radial:
                 var center = {
-                    x: width / 2,
-                    y: height / 2
+                    x: size.width / 2,
+                    y: size.height / 2
                 };
                 rotationAngle = calculateAngleWithOx(normalizedPosition, center);
                 break;
@@ -9190,46 +9282,149 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 break;
         }
         return rotationAngle;
-    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition, calculateSlideRailRectSVGPositions]);
-    var renderedShape = React.useMemo(function () {
-        if (renderShape)
-            return renderShape(props);
-        return null;
-    }, [props, renderShape]);
+    }, [size.width, size.height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition, calculateSlideRailRectSVGPositions]);
+    // const prevElms = elementsRef.current;
+    var handleTextChanged = React.useCallback(function (textId, content) {
+        var textToUpdate = texts === null || texts === void 0 ? void 0 : texts.find(function (t) { return t.id === textId; });
+        if (!textToUpdate)
+            return;
+        textToUpdate.content = content;
+        setTexts(__spreadArray([], texts, true));
+    }, [texts]);
+    // const renderedShape = useMemo(() => {
+    //     if (renderShape) return renderShape(props);
+    //     return null;
+    // }, [props, size, position, renderShape])
+    var adjustElementPositionOnParentPortArea = React.useCallback(function (toBeAdjustedPosition, isAbsolutePosition) {
+        if (isAbsolutePosition === void 0) { isAbsolutePosition = false; }
+        if (props.element.moveAsPortOnParent && props.element.parentElement && parentDOM) {
+            var newRelativePosition = {
+                x: toBeAdjustedPosition.x,
+                y: toBeAdjustedPosition.y
+            };
+            if (isAbsolutePosition) {
+                newRelativePosition = transformAbsPositionToElementRelativePosition(toBeAdjustedPosition, props.element);
+            }
+            return correctPortPositionInElement(newRelativePosition, props.element.size.width, props.element.size.height, props.element.parentElement.portMoveableAreas, props.element.parentElement.portSlideRailSVGClassName, parentDOM);
+        }
+        return toBeAdjustedPosition;
+    }, [props.element, parentDOM]);
+    //update absolute position of element and absolute position of children elements
+    // const updateElementPosition = (element: IElementInTreeState, x: number, y: number, isRelativePosition?: boolean): IElementInTreeState => {
+    //     if (isRelativePosition) {
+    //         element.position.x = x;
+    //         element.position.y = y;
+    //     } else {
+    //         const relativePosition = transformAbsPositionToElementRelativePosition({ x, y }, element)
+    //         element.position.x = relativePosition.x;
+    //         element.position.y = relativePosition.y;
+    //     }
+    //     return element;
+    // }
     //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); });
-        }
-    }, []);
-    //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,
-        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,
-            potentialPortPosition && (portPlaceholderShape
-                ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
-                : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
-            ports.map(function (p, index) {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, onMouseLeave: handlePortMouseLeave, onContextMenu: handlePortContextMenu, renderShape: p.renderShape },
-                    selectedPort && selectedPort.id === p.id && (hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.id) !== p.id &&
-                        (React.createElement(SelectionFrame, { container: container, targetSVGElement: ((_g = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _g === void 0 ? void 0 : _g.current) || undefined, resizability: {
-                                enabled: false,
-                                keepRatio: false
-                            }, objectX: elementAbsPosition.x + selectedPort.position.x, objectY: elementAbsPosition.y + selectedPort.position.y, onMove: handlePortMove, zoom: zoom })),
-                    hoveredPort && hoveredPort.id === p.id && (React.createElement(SelectionFrame, { container: container, targetSVGElement: ((_h = hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref) === null || _h === void 0 ? void 0 : _h.current) || undefined, resizability: {
+    // useLayoutEffect(() => {
+    //     if (elementRef.current) {
+    //         handlePortsState(portsRef.current);
+    //     }
+    // }, [handlePortsState])
+    //cache render ports
+    var renderedPorts = React.useMemo(function () {
+        return ports === null || ports === void 0 ? void 0 : ports.map(function (p, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, onMouseLeave: handlePortMouseLeave, onContextMenu: handlePortContextMenu, renderShape: p.renderShape },
+                selectedPort && selectedPort.id === p.id && (hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.id) !== p.id &&
+                    (React.createElement(SelectionFrame, { container: container, targetSVGElement: ((_g = p.ref) === null || _g === void 0 ? void 0 : _g.current) || undefined, resizability: {
                             enabled: false,
                             keepRatio: false
-                        }, zoom: zoom })));
-            }), texts === null || texts === void 0 ? void 0 :
-            texts.map(function (t, index) {
-                var _a, _b;
-                return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: ((_a = t.position) === null || _a === void 0 ? void 0 : _a.x) || 0, y: ((_b = t.position) === null || _b === void 0 ? void 0 : _b.y) || 0, width: t.size.width, height: t.size.height, editable: t.editable, selectable: t.selectable, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, parentAbsolutePosition: elementAbsPosition, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(id, t.id, newContent); } });
-            }),
-            children)));
+                        }, objectX: elementAbsPosition.x + selectedPort.position.x, objectY: elementAbsPosition.y + selectedPort.position.y, onMove: handlePortMove, zoom: zoom })),
+                hoveredPort && hoveredPort.id === p.id && (React.createElement(SelectionFrame, { container: container, targetSVGElement: ((_h = hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref) === null || _h === void 0 ? void 0 : _h.current) || undefined, resizability: {
+                        enabled: false,
+                        keepRatio: false
+                    }, zoom: zoom })));
+        });
+    }, [ports, elementAbsPosition, defaultPortSize, container, rotatePort, handlePortLabelMoved, handlePortLabelResized, handlePortLabelContentChanged, handleSelectedPort, handlePortMouseDown, handlePortMouseUp, handlePortMouseMove, handlePortMouseLeave, handlePortContextMenu, selectedPort, hoveredPort, handlePortMove, zoom]);
+    //cache render texts
+    var renderedTexts = React.useMemo(function () {
+        return texts === null || texts === void 0 ? void 0 : texts.map(function (t, index) {
+            var _a, _b;
+            return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: ((_a = t.position) === null || _a === void 0 ? void 0 : _a.x) || 0, y: ((_b = t.position) === null || _b === void 0 ? void 0 : _b.y) || 0, width: t.size.width, height: t.size.height, editable: t.editable, selectable: t.selectable, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, parentAbsolutePosition: elementAbsPosition, onContentChanged: function (ev, newContent) { return handleTextChanged(t.id, newContent); } });
+        });
+    }, [id, texts, container, elementAbsPosition, handleTextChanged]);
+    //log element render
+    logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
+    return (React.createElement(ElementWrapper, { key: "ElementWrapper", ref: elementRef, x: position.x, y: position.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; } }, renderShape === null || renderShape === void 0 ? void 0 :
+        renderShape(props),
+        !!container && !!beingSelected &&
+            React.createElement(SelectionFrame, { key: id, container: container, targetSVGElement: elementRef.current || undefined, resizability: resizability || {
+                    enabled: true,
+                    keepRatio: true
+                }, objectX: elementAbsPosition === null || elementAbsPosition === void 0 ? void 0 : elementAbsPosition.x, objectY: elementAbsPosition === null || elementAbsPosition === void 0 ? void 0 : elementAbsPosition.y, width: size.width, height: size.height, zoom: zoom, draggingByDefault: draggingByDefault, 
+                //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
+                onMouseDown: function (ev) {
+                    windowsPositionToPaperPosition({
+                        x: ev.clientX,
+                        y: ev.clientY
+                    }, container, zoomRef.current);
+                    onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(ev, id);
+                }, onMouseUp: function (ev) {
+                    windowsPositionToPaperPosition({
+                        x: ev.clientX,
+                        y: ev.clientY
+                    }, container, zoomRef.current);
+                    onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev, id);
+                }, onMove: function (newX, newY) {
+                    var _a;
+                    var oldPosition = __assign({}, position);
+                    // Relative position to the paper container
+                    var paperPosition = {
+                        x: newX,
+                        y: newY
+                    };
+                    //Call onElementMoving to check if the element should be moved or not
+                    if (onMoving) {
+                        var _b = (_a = onMoving(props.element, paperPosition)) !== null && _a !== void 0 ? _a : {}, horizontalAllowed = _b.horizontalAllowed, verticalAllowed = _b.verticalAllowed;
+                        //If both horizontalAllowed and verticalAllowed are false, do not move the element
+                        if (!horizontalAllowed && !verticalAllowed) {
+                            return;
+                        }
+                        //If horizontalAllowed is false, keep the old x position
+                        if (!horizontalAllowed) {
+                            paperPosition.x = oldPosition.x;
+                        }
+                        //If verticalAllowed is false, keep the old y position
+                        if (!verticalAllowed) {
+                            paperPosition.y = oldPosition.y;
+                        }
+                    }
+                    logger.info("Element ".concat(props.element.id, " is dragging to position ").concat(JSON.stringify(paperPosition)));
+                    //Adjust position of element if it should move as a port on parent port area
+                    if (props.element.moveAsPortOnParent && props.element.parentElement) {
+                        paperPosition = adjustElementPositionOnParentPortArea(paperPosition, true);
+                        updateElementPosition(paperPosition);
+                    }
+                    else {
+                        var relativePosition = transformAbsPositionToElementRelativePosition(paperPosition, props.element);
+                        updateElementPosition(relativePosition);
+                    }
+                    //let newElementPosition = updateElementPosition(props.element, newPosition.x, newPosition.y, true)
+                    logger.info("Element ".concat(props.element.id, " is moving to relative position ").concat(JSON.stringify(props.element.position)));
+                    onMoved === null || onMoved === void 0 ? void 0 : onMoved(props.element, oldPosition, paperPosition);
+                }, onResize: function (width, height) {
+                    var oldSize = size;
+                    var newSize = { width: width, height: height };
+                    updateElementSize(newSize);
+                    if (onResized) {
+                        onResized(props.element, oldSize, newSize);
+                    }
+                } }),
+        potentialPortPosition && (portPlaceholderShape
+            ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
+            : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })),
+        renderedPorts,
+        renderedTexts,
+        children));
 });
 var Element$1 = React.memo(Element);
 
@@ -9476,35 +9671,44 @@ function convertElementsToTree(elements) {
     return parsedElementsInTree;
 }
 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 _a = React.useState({ elements: [], elementsInTree: [] }), elementsState = _a[0], setElementsState = _a[1];
+    // const [elements, setElements] = React.useState<IElementState[]>([]);
+    // const [elementsInTree, setElementsInTree] = React.useState<IElementInTreeState[]>([]);
+    var _b = React.useState(), selectedElement = _b[0], setSelectedElement = _b[1];
+    var _c = React.useState(false), autoEnabledDraggingSelectedElement = _c[0], setAutoEnabledDraggingSelectedElement = _c[1];
+    var _d = React.useState([]), links = _d[0], setLinks = _d[1];
+    var _e = React.useState(), selectedLink = _e[0], setSelectedLink = _e[1];
+    var _f = React.useState(null), tempLink = _f[0], setTempLink = _f[1];
+    var _g = React.useState([]), texts = _g[0], setTexts = _g[1];
+    var _h = React.useState(), selectedText = _h[0], setSelectedText = _h[1];
+    var _j = React.useState(null), selectedElementSVG = _j[0], setSelectedElementSVG = _j[1];
+    var _k = React.useState(false), mouseDownedOnPaper = _k[0], setMouseDownedOnPaper = _k[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 = [...elements];
+    }, []);
+    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,36 +9717,45 @@ 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);
-            }
+            //find the element
+            var element = elementsState.elements.find(function (elm) { return elm.id === elementId; });
+            if (!element)
+                return;
+            element.version = (element.version || 0) + 1;
+            handleElementsState(elementsState.elements);
         });
         return function () {
             off();
         };
-    }, [manuallyTriggerRenderElementHandler, onElementsChanged, elements, selectedElement]);
+    }, [elementsState.elements, handleElementsState, manuallyTriggerRenderElementHandler, onElementsChanged, rerenderWhenAnyElementChanged]);
     React.useEffect(function () {
-        var offs = [];
-        offs.push(manuallySelectElementHandler === null || manuallySelectElementHandler === void 0 ? void 0 : manuallySelectElementHandler(function (element) {
-            setSelectedElement(element || undefined);
-            if (element) {
+        if (manuallySelectElementHandler) {
+            var off_1 = manuallySelectElementHandler(function (element) {
+                setSelectedElement(element || undefined);
+                if (element) {
+                    onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
+                }
+            });
+            return function () {
+                off_1();
+            };
+        }
+    }, [manuallySelectElementHandler, onElementSelected]);
+    React.useEffect(function () {
+        if (manuallyTriggerDraggingElementHandler) {
+            var off_2 = manuallyTriggerDraggingElementHandler(function (element) {
+                setSelectedElement(element);
                 onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
-            }
-        }));
-        offs.push(manuallyTriggerDraggingElementHandler === null || manuallyTriggerDraggingElementHandler === void 0 ? void 0 : manuallyTriggerDraggingElementHandler(function (element) {
-            setSelectedElement(element);
-            onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
-            setAutoEnabledDraggingSelectedElement(true);
-        }));
-        return function () {
-            offs.forEach(function (off) { return off(); });
-        };
-    }, [manuallySelectElementHandler, manuallyTriggerDraggingElementHandler, onElementSelected]);
+                setAutoEnabledDraggingSelectedElement(true);
+            });
+            return function () {
+                off_2();
+            };
+        }
+    }, [elementsState.elements, manuallyTriggerDraggingElementHandler, onElementSelected]);
     React.useEffect(function () {
         if (manuallyTriggerStartedLinkingHandler) {
-            var off_1 = manuallyTriggerStartedLinkingHandler(function (sourceElement, sourcePort) {
+            var off_3 = manuallyTriggerStartedLinkingHandler(function (sourceElement, sourcePort) {
                 var newLink = {
                     id: generateUniqueId(),
                     points: [],
@@ -9553,19 +9766,19 @@ var Paper = function (props) {
                 paperEventEmitter.emitElementLinkStarted(newLink);
             });
             return function () {
-                off_1();
+                off_3();
             };
         }
     }, [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;
@@ -9601,7 +9814,7 @@ var Paper = function (props) {
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
             //broadcast selected port to parent component
-            var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+            var element = elementsState.elements.find(function (e) { return e.id === elementId; });
             if (element) {
                 onPortSelected === null || onPortSelected === void 0 ? void 0 : onPortSelected(port, element);
             }
@@ -9609,40 +9822,44 @@ var Paper = function (props) {
         return function () {
             portSelectedListener.off();
         };
-    }, [paperEventEmitter, onPortSelected]);
+    }, [paperEventEmitter, onPortSelected, elementsState]);
     React.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
-        var parentChangedCancelers = elementsRef.current.map(function (element) {
+        var parentChangedCancelers = elementsState.elements.map(function (element) {
             var _a;
             return (_a = element.onParentChanged) === null || _a === void 0 ? void 0 : _a.call(element, function (newPa, oldPa) {
                 logger.info('onParentChanged');
-                updateElementsTree();
+                handleElementsState(elementsState.elements);
             });
         });
-        //Listen a new port added, then re-render the element component
-        var addedPortCancelers = elementsRef.current.map(function (element) {
+        return function () {
+            parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
+        };
+    }, [handleElementsState, rerenderWhenAnyElementChanged, elementsState]);
+    React.useEffect(function () {
+        //Listen a new text added, then re-render the element component
+        //TODO: to be moved to Element component
+        var addedTextCancelers = elementsRef.current.map(function (element) {
             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) {
-                    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);
-                }
+            return (_a = element.onAddedText) === null || _a === void 0 ? void 0 : _a.call(element, function (newText) {
+                logger.info("A new text has been added to element ".concat(element.id));
+                rerenderWhenAnyElementChanged();
+            });
+        });
+        // Listen a text deleted, then re-render the element component
+        //TODO: to be moved to Element component
+        var deletedTextCancelers = elementsRef.current.map(function (element) {
+            var _a;
+            return (_a = element.onDeletedText) === null || _a === void 0 ? void 0 : _a.call(element, function (deletedTextId) {
+                logger.info("A text has been deleted from element ".concat(element.id));
+                rerenderWhenAnyElementChanged();
             });
         });
         return function () {
-            parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
-            addedPortCancelers.forEach(function (canceller) { return canceller(); });
+            addedTextCancelers.forEach(function (canceller) { return canceller(); });
+            deletedTextCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, [updateElementsTree, onElementsChanged]);
+    }, [elementsState.elements, onElementsChanged, rerenderWhenAnyElementChanged]);
     // //Update elements tree when length of elements change
     // useEffect(() => {
     //     updateElementsTree();
@@ -9660,15 +9877,15 @@ var Paper = function (props) {
     //Listen command delete selected for element
     React.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
-            if (selectedElement) {
+            if (selectedElement && selectedElement.removable !== false) {
                 selectedElement.parentElement = undefined; //Remove parent element to avoid memory leak. This will remove the element from the parent element's childrenElements array.
                 var deletedChildElements = getChildOfElement(selectedElement);
                 var deletedElementIds_1 = __spreadArray(__spreadArray([], deletedChildElements, true), [selectedElement], false).map(function (e) { return e.id; });
-                var prevElements = elementsRef.current;
+                var prevElements = elementsState.elements;
                 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,14 +9907,20 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedElement, onElementSelected, onElementsChanged, onLinksChanged, getChildOfElement, paperEventEmitter, onElementDeleted]);
+    }, [selectedElement, elementsState, onElementSelected, onElementsChanged, onLinksChanged, getChildOfElement, paperEventEmitter, onElementDeleted, handleElementsState]);
+    var removeElementLink = React.useCallback(function (elementLink) {
+        if (elementLink.removable === false)
+            return linksRef.current;
+        var prevLinks = linksRef.current;
+        var newLinks = prevLinks.filter(function (l) { return l.id !== elementLink.id; });
+        return newLinks;
+    }, []);
     //Listen command delete selected for link
     React.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
-                var prevLinks = linksRef.current;
-                var newLinks = prevLinks.filter(function (l) { return l.id !== selectedLink.id; });
-                setLinks(links);
+                var newLinks = removeElementLink(selectedLink);
+                setLinks(newLinks);
                 setSelectedLink(undefined);
                 if (onLinksChanged) {
                     onLinksChanged(newLinks);
@@ -9711,11 +9934,11 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedLink, onLinksChanged, onLinkSelected, links, paperEventEmitter]);
+    }, [selectedLink, onLinksChanged, onLinkSelected, paperEventEmitter, removeElementLink]);
     //Listen command delete selected for Text
     React.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
-            if (selectedText) {
+            if (selectedText && selectedText.removable !== false) {
                 var prevTexts = textsRef.current;
                 var newTexts = prevTexts.filter(function (t) { return t.id !== selectedText.id; });
                 setTexts(newTexts);
@@ -9804,32 +10027,59 @@ var Paper = function (props) {
             y: yPosOnPaper
         });
     };
-    var handlePathChange = React.useCallback(function (path, id) {
-        //Update path of element link, that changed
-        // const prevLinks = linksRef.current;
-        var updatedLinkIndex = links.findIndex(function (l) { return l.id === id; });
-        links[updatedLinkIndex].path = path;
-        var newLinks = __spreadArray([], links, true);
+    var handleElementMoved = React.useCallback(function (element, oldPosition, paperPosition) {
+        // Start updating the position of links connected to the selected element
+        var childElements = getChildOfElement(element);
+        var elementIds = __spreadArray(__spreadArray([], childElements.map(function (e) { return e.id; }), true), [element.id], false);
+        var offsetX = element.position.x - oldPosition.x;
+        var offsetY = element.position.y - oldPosition.y;
+        // Update position of all points of links that are connected to the selected element
+        var newLinks = linksRef.current.map(function (link) {
+            var isUpdate = elementIds.includes(link.sourceElement.id) && elementIds.includes(link.targetElement.id);
+            if (link.points && isUpdate) {
+                link.points.forEach(function (p) {
+                    p.x += offsetX;
+                    p.y += offsetY;
+                });
+            }
+            return link;
+        });
         setLinks(newLinks);
-        if (onLinksChanged) {
-            onLinksChanged(newLinks);
+        // onLinksChanged?.(newLinks);
+        // End updating the position of links connected to the selected element
+        if (onElementMoved) {
+            onElementMoved(element.position, element, paperPosition);
         }
-    }, [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 (onLinksChanged) {
-            onLinksChanged(newLinks);
+        paperEventEmitter.emitElementMoved(element, oldPosition, element.position);
+        setMouseDownedOnPaper(false);
+    }, [getChildOfElement, onElementMoved, paperEventEmitter]);
+    var handleElementResized = React.useCallback(function (element, oldSize, newSize) {
+        if (onElementResized) {
+            onElementResized(newSize, element);
         }
-    }, [onLinksChanged]);
+        paperEventEmitter.emitElementResized(element, oldSize, newSize);
+        setMouseDownedOnPaper(false);
+    }, [paperEventEmitter, onElementResized]);
+    // const handlePathChange = useCallback((path: string, id: string) => {
+    //     //Update path of element link, that changed
+    //     //const prevLinks = linksRef.current;
+    //     const updatedLink = linksRef.current.find(l => l.id === id)
+    //     if (updatedLink) {
+    //         updatedLink.path = path;
+    //     }
+    // }, [])
+    //TODO: to be cleaned
+    var handlePointsOfLinkChange = React.useCallback(function (points, linkId) {
+        var updatedLinkIndex = linksRef.current.findIndex(function (l) { return l.id === linkId; });
+        linksRef.current[updatedLinkIndex].points = points;
+    }, []);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
-        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        var _a;
+        var element = elementsState.elements.find(function (e) { return e.id === elementId; });
         if (element) {
             //set links equals a clone links to re-render links with new position
             var prevLinks = linksRef.current;
-            var newLinks = prevLinks.map(function (link) {
+            prevLinks.map(function (link) {
                 var _a, _b;
                 if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
                     link.sourcePort.position = newPosition;
@@ -9851,10 +10101,10 @@ var Paper = function (props) {
                     return link;
                 });
             });
-            if (onLinksChanged) {
-                onLinksChanged(newLinks);
-            }
-            var newElements = elementsRef.current;
+            // if (onLinksChanged) {
+            //     onLinksChanged(newLinks)
+            // }
+            //const newElements = elementsRef.current;
             // newElements[updatedElementIndex].ports = newElements[updatedElementIndex].ports?.map(p => {
             //     if (p.id === port.id) {
             //         p.position = newPosition
@@ -9863,37 +10113,50 @@ 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 = elementsState.elements.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, elementsState, rerenderWhenAnyElementChanged]);
+    React.useEffect(function () {
+        //on port manually trigger render
+        var off = manuallyTriggerRenderPortHandler(function (portId, elementId) {
+            var _a;
+            //find the element
+            var element = elementsState.elements.find(function (e) { return e.id === elementId; });
+            //find the port
+            var port = (_a = element === null || element === void 0 ? void 0 : element.ports) === null || _a === void 0 ? void 0 : _a.find(function (p) { return p.id === portId; });
+            if (!element || !port)
+                return;
+            //rerender links connected to the port
+            handlePortMoved(port, elementId, __assign({}, port.position), __assign({}, port.position));
+        });
+        return function () {
+            off();
+        };
+    }, [manuallyTriggerRenderPortHandler, handlePortMoved, elementsState]);
     //Handle creating a new element link
     var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
         ev.stopPropagation();
-        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        var element = elementsState.elements.find(function (e) { return e.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
-        console.log(paperPosition);
         //broadcast port mouse down to parent component
         if (element) {
             onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(port, element, paperPosition);
@@ -9909,7 +10172,7 @@ var Paper = function (props) {
             setTempLink(newLink);
             paperEventEmitter.emitElementLinkStarted(newLink);
         }
-    }, [paperEventEmitter, onPortMouseDown]);
+    }, [paperEventEmitter, elementsState, onPortMouseDown]);
     var createElementLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         //if no onCreatingLink prop, no link will be created
         if (!onCreatingLink) {
@@ -9920,14 +10183,14 @@ 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 = elementsState.elements;
+            newElementLink = automationAddPointsToLink(newElementLink, elements, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
-    }, [onCreatingLink]);
+    }, [onCreatingLink, elementsState]);
     var handlePortMouseUp = React.useCallback(function (ev, port, elementId) {
         ev.stopPropagation();
-        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        var element = elementsState.elements.find(function (e) { return e.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
@@ -9943,7 +10206,7 @@ var Paper = function (props) {
             var newElementLink = null;
             if (isMouseUpOnNotSelf) {
                 var _a = tempLinkRef.current, sourcePort = _a.sourcePort, sourceElement = _a.sourceElement;
-                var targetElement = elementsRef.current.find(function (e) { return e.id === elementId; });
+                var targetElement = elementsState.elements.find(function (e) { return e.id === elementId; });
                 newElementLink = createElementLink(sourcePort, sourceElement, port, targetElement);
             }
             if (newElementLink) {
@@ -9960,14 +10223,14 @@ 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]);
+    }, [paperEventEmitter, elementsState, createElementLink, onPortMouseUp, onLinksChanged]);
+    // 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);
@@ -10059,19 +10322,6 @@ var Paper = function (props) {
     var handleDeselectLink = function (link, index) {
         setSelectedLink(undefined);
     };
-    //update absolute position of element and absolute position of children elements
-    var updateElementPosition = function (element, x, y, isRelativePosition) {
-        if (isRelativePosition) {
-            element.position.x = x;
-            element.position.y = y;
-        }
-        else {
-            var relativePosition = transformAbsPositionToElementRelativePosition({ x: x, y: y }, element);
-            element.position.x = relativePosition.x;
-            element.position.y = relativePosition.y;
-        }
-        return element;
-    };
     /*
        Cache to avoid re-initializing the function when the component re-renders to
        avoid causing the components using it to re-render unnecessarily
@@ -10101,17 +10351,16 @@ var Paper = function (props) {
     }, [handleLinkLabelContentChanged]);
     var handleClickLinkDelete = React.useCallback(function (link, index) {
         return function () {
-            var prevLinks = linksRef.current;
-            var newLinks = __spreadArray([], prevLinks, true);
-            newLinks.splice(index, 1);
+            var newLinks = removeElementLink(link);
             setLinks(newLinks);
+            setSelectedLink(undefined);
             if (onLinksChanged) {
                 onLinksChanged(newLinks);
             }
         };
-    }, [onLinksChanged]);
+    }, [onLinksChanged, removeElementLink]);
     var handleMouseUpAtLinkedPortPlaceholder = React.useCallback(function (link, position, targetElementId) {
-        var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
+        var targetElement = elementsState.elements.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));
@@ -10141,24 +10390,20 @@ var Paper = function (props) {
         //Clear tempLink
         setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
-    }, [onCreatingPortByLinking, createElementLink, paperEventEmitter, onLinksChanged]);
-    var handleElementTextChange = React.useCallback(function (elementId, textId, newContent) {
-        var prevElms = elementsRef.current;
-        var newElements = prevElms.map(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; });
-                if (updatedTextId !== undefined) {
-                    curEle.texts[updatedTextId].content = newContent;
-                }
-            }
-            return curEle;
-        });
-        setElements(newElements);
-        if (onElementsChanged) {
-            onElementsChanged(newElements);
-        }
-    }, [onElementsChanged]);
+    }, [onCreatingPortByLinking, elementsState, createElementLink, paperEventEmitter, onLinksChanged]);
+    // const handleElementTextChange = useCallback((elementId: string, textId: string, newContent: string) => {
+    //     // const prevElms = elementsRef.current;
+    //     elementsState.elements.forEach(curEle => {
+    //         //Find changed text of element to update the content for it.
+    //         if (curEle.id === elementId && curEle.texts) {
+    //             const updatedTextId = curEle.texts.findIndex(t => t.id === textId)
+    //             if (updatedTextId !== undefined) {
+    //                 curEle.texts[updatedTextId].content = newContent;
+    //             }
+    //         }
+    //     })
+    //     rerenderWhenAnyElementChanged();
+    // }, [rerenderWhenAnyElementChanged, elementsState])
     var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
@@ -10168,7 +10413,7 @@ var Paper = function (props) {
             paperEventEmitter.emitElementLinkEnded();
         }
         else {
-            var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+            var element = elementsState.elements.find(function (e) { return e.id === elementId; });
             // Select the element only if it is selectable
             if (element && element.selectable) {
                 setSelectedElementSVG(ref);
@@ -10178,24 +10423,24 @@ var Paper = function (props) {
             }
         }
         setMouseDownedOnPaper(false);
-    }, [paperEventEmitter]);
+    }, [paperEventEmitter, elementsState.elements]);
     var handlePortContextMenu = React.useCallback(function (port, elementId, e) {
         e.preventDefault();
-        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        var element = elementsState.elements.find(function (e) { return e.id === elementId; });
         if (element) {
             onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, element, e);
         }
-    }, [onPortContextMenu]);
+    }, [onPortContextMenu, elementsState]);
     var handleContextMenu = React.useCallback(function (elementId, e, ref) {
         e.preventDefault();
-        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        var element = elementsState.elements.find(function (e) { return e.id === elementId; });
         if (element) {
             handleElementClicked(elementId, e, ref);
             onElementContextMenu === null || onElementContextMenu === void 0 ? void 0 : onElementContextMenu(element, e);
         }
-    }, [onElementContextMenu, handleElementClicked]);
+    }, [onElementContextMenu, handleElementClicked, elementsState]);
     var handleMouseUp = React.useCallback(function (ev, elementId) {
-        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
@@ -10203,9 +10448,9 @@ var Paper = function (props) {
         if (element) {
             onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, element, paperPosition);
         }
-    }, [onElementMouseUp]);
+    }, [onElementMouseUp, elementsState]);
     var handleMouseDown = React.useCallback(function (ev, elementId) {
-        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
@@ -10213,9 +10458,9 @@ var Paper = function (props) {
         if (element) {
             onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, element, paperPosition);
         }
-    }, [onElementMouseDown]);
+    }, [onElementMouseDown, elementsState]);
     var handleMouseMove = React.useCallback(function (ev, elementId) {
-        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
@@ -10223,9 +10468,9 @@ var Paper = function (props) {
         if (element) {
             onElementMouseMove === null || onElementMouseMove === void 0 ? void 0 : onElementMouseMove(ev, element, paperPosition);
         }
-    }, [onElementMouseMove]);
+    }, [onElementMouseMove, elementsState]);
     var handleMouseLeave = React.useCallback(function (ev, elementId) {
-        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
@@ -10233,116 +10478,43 @@ var Paper = function (props) {
         if (element) {
             onElementMouseLeave === null || onElementMouseLeave === void 0 ? void 0 : onElementMouseLeave(ev, element, paperPosition);
         }
-    }, [onElementMouseLeave]);
+    }, [onElementMouseLeave, elementsState]);
     var renderElementInTree = React.useCallback(function (element) {
+        var _a;
         logger.info("Rendering element tree for element ".concat(element.id));
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
-            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, "-").concat(element.version), element: element, 
+                //id={element.id}
+                //ref={(refDOM) => element.DOM = refDOM}
+                //height={element.size.height}
+                //width={element.size.width}
+                //x={element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x}
+                //y={element.positionAnchor === 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, onMoving: onElementMoving, onMoved: handleElementMoved, onResized: handleElementResized, 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),
-                !!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) || {
-                            enabled: true,
-                            keepRatio: true
-                        }, objectX: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, objectY: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width, height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height, zoom: zoom, draggingByDefault: autoEnabledDraggingSelectedElement, 
-                        //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
-                        onMouseDown: function (ev) {
-                            if (selectedElement) {
-                                var paperPosition = windowsPositionToPaperPosition({
-                                    x: ev.clientX,
-                                    y: ev.clientY
-                                }, paperContainerRef.current, zoomRef.current);
-                                onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, selectedElement, paperPosition);
-                            }
-                        }, onMouseUp: function (ev) {
-                            if (selectedElement) {
-                                var paperPosition = windowsPositionToPaperPosition({
-                                    x: ev.clientX,
-                                    y: ev.clientY
-                                }, paperContainerRef.current, zoomRef.current);
-                                onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, selectedElement, paperPosition);
-                            }
-                        }, onMove: function (newX, newY) {
-                            if (!selectedElement)
-                                return;
-                            var oldPosition = __assign({}, selectedElement.position);
-                            // Relative position to the paper container
-                            var paperPosition = {
-                                x: newX,
-                                y: newY
-                            };
-                            //Call onElementMoving to check if the element should be moved or not
-                            if (onElementMoving) {
-                                var isSkip = onElementMoving(selectedElement, paperPosition);
-                                if (!isSkip) {
-                                    return;
-                                }
-                            }
-                            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(paperPosition)));
-                            //Adjust position of element if it should move as a port on parent port area
-                            if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
-                                paperPosition = adjustElementPositionOnParentPortArea(selectedElement, paperPosition, true);
-                                updateElementPosition(selectedElement, paperPosition.x, paperPosition.y, true);
-                            }
-                            else {
-                                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; });
-                            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);
-                            var elementIds = __spreadArray(__spreadArray([], childElements.map(function (e) { return e.id; }), true), [selectedElement.id], false);
-                            var offsetX = selectedElement.position.x - oldPosition.x;
-                            var offsetY = selectedElement.position.y - oldPosition.y;
-                            // Update position of all points of links that are connected to the selected element
-                            var newLinks = linksRef.current.map(function (link) {
-                                var isUpdate = elementIds.includes(link.sourceElement.id) && elementIds.includes(link.targetElement.id);
-                                if (link.points && isUpdate) {
-                                    link.points.forEach(function (p) {
-                                        p.x += offsetX;
-                                        p.y += offsetY;
-                                    });
-                                }
-                                return link;
-                            });
-                            onLinksChanged === null || onLinksChanged === void 0 ? void 0 : onLinksChanged(newLinks);
-                            // End updating the position of links connected to the selected element
-                            //Set state to re-render UI with new position
-                            setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
-                            if (onElementMoved) {
-                                console.log('onElementMoved', selectedElement.position, paperPosition);
-                                onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
-                            }
-                            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
-                            setMouseDownedOnPaper(false);
-                        }, onResize: function (width, height) {
-                            if (!selectedElement)
-                                return;
-                            var indexSelectedElement = elements.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);
-                            }
-                            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]);
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, 
+                // onTextUpdated={handleElementTextChange}
+                onManuallyTriggerRenderPort: manuallyTriggerRenderPortHandler, parentDOM: (_a = element.parentElementInTree) === null || _a === void 0 ? void 0 : _a.DOM, beingSelected: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === element.id, draggingByDefault: autoEnabledDraggingSelectedElement && (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === element.id }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
+    }, [handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, onElementMoving, handleElementMoved, handleElementResized, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, manuallyTriggerRenderPortHandler, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id, autoEnabledDraggingSelectedElement]);
     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 },
@@ -10350,18 +10522,11 @@ var Paper = function (props) {
             links && links.map(function (link, index) {
                 if (!link.targetElement || !link.targetPort)
                     return null;
-                return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
-                        x: getAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
-                        y: getAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
-                    }, targetPosition: {
-                        x: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
-                        y: getAbsolutePosition(link.targetElement).y + link.targetPort.position.y
-                    }, points: link.points, onPathChanged: handlePathChange, onPointsChanged: handlePointsOfLinkChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
+                return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePositionX: getAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x, sourcePositionY: getAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y, targetPositionX: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x, targetPositionY: getAbsolutePosition(link.targetElement).y + link.targetPort.position.y, points: link.points, 
+                    //onPathChanged={handlePathChange}
+                    onPointsChanged: handlePointsOfLinkChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
             }),
-            (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
-                    x: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
-                    y: getAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
-                }, targetPosition: tempLink.tempTargetPosition, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
+            (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePositionX: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x, sourcePositionY: getAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y, targetPositionX: tempLink.tempTargetPosition.x, targetPositionY: tempLink.tempTargetPosition.y, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
             texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, selectable: text.selectable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
                     setSelectedText(text);
                 } })); })),
@@ -10418,9 +10583,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]);
@@ -10473,7 +10635,7 @@ var Editor = function (_a) {
         if (editorContext.onElementMovingHandler) {
             return editorContext.onElementMovingHandler(element, newPaperPosition);
         }
-        return true;
+        return { horizontalAllowed: true, verticalAllowed: true };
     }, [editorContext]);
     var handleOnCreatingPortByLinking = React.useCallback(function (sourceElement, sourcePort, targetElement, position) {
         if (editorContext.onCreatingPortByLinkingHandler) {
@@ -10491,11 +10653,14 @@ var Editor = function (_a) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
     var handleElementRemoved = React.useCallback(function (element) {
-        editorContext.onElementRemovedHandler(element.id);
+        var _a;
+        editorContext.onElementRemovedHandler(element.id, (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.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, 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;