orcasvn-react-diagrams 0.1.59 → 0.1.62

package/dist/cjs/index.js

@@ -821,6 +821,7 @@ var EVENT_MANUALLY_SELECT_ELEMENT = 'manuallySelectElement';
 var EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT = 'manuallyTriggerDraggingElement';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
+var EVENT_MANUALLY_TRIGGER_STARTED_LINKING = 'manuallyTriggerStartedLinking';
 var EditorContext = /** @class */ (function () {
     function EditorContext(elements, links, texts, configuration) {
         var _this = this;
@@ -1064,27 +1065,38 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.triggerRenderElement = function (elementId) {
         this._eventEmitter.emit(EVENT_MANUALLY_RENDER_ELEMENT, elementId);
     };
-    EditorContext.prototype.onManuallyTriggerRenderElement = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerRenderElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENT, callback);
     };
     EditorContext.prototype.triggerRenderPort = function (portId, elementId) {
         this._eventEmitter.emit(EVENT_MANUALLY_RENDER_PORT, portId, elementId);
     };
-    EditorContext.prototype.onManuallyTriggerRenderPort = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerRenderPortHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_RENDER_PORT, callback);
     };
     EditorContext.prototype.setSelectedElement = function (element) {
         this._eventEmitter.emit(EVENT_MANUALLY_SELECT_ELEMENT, element);
     };
-    EditorContext.prototype.onManuallySelectElement = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallySelectElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_SELECT_ELEMENT, callback);
     };
     EditorContext.prototype.triggerDraggingElement = function (element) {
         this._eventEmitter.emit(EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT, element);
     };
-    EditorContext.prototype.onManuallyTriggerDraggingElement = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerDraggingElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT, callback);
     };
+    EditorContext.prototype.triggerStartedLinking = function (sourceElement, sourcePort) {
+        this._eventEmitter.emit(EVENT_MANUALLY_TRIGGER_STARTED_LINKING, sourceElement, sourcePort);
+    };
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerStartedLinkingHandler = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_TRIGGER_STARTED_LINKING, callback);
+    };
     return EditorContext;
 }());
 
@@ -8409,7 +8421,7 @@ var Port1 = React.forwardRef(function (props, ref) {
         else {
             return React.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, onContextMenu: function (e) { return onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" }, children);
         }
-    }, [props]);
+    }, [children, height, id, onContextMenu, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseUp, onSelected, props, ref, renderShape, rotationAngle, width, x, y]);
     return (React.createElement(React.Fragment, null,
         renderedShape,
         label && renderLabel(label)));
@@ -8437,12 +8449,11 @@ var IElementLink = function (_a) {
     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];
-    var _k = React.useState(), draggingPointIndex = _k[0], setDraggingPointIndex = _k[1];
-    var _l = React.useState({
+    var _k = React.useState({
         current: null,
-    }), selectedLabelRef = _l[0], setSelectedLabelRef = _l[1];
-    var _m = React.useState(false), isSelectedLink = _m[0], setIsSelectedLink = _m[1];
-    var _o = React.useContext(paperEventEmitterContext), onPaperClicked = _o.onPaperClicked, onElementSelected = _o.onElementSelected;
+    }), selectedLabelRef = _k[0], setSelectedLabelRef = _k[1];
+    var _l = React.useState(false), isSelectedLink = _l[0], setIsSelectedLink = _l[1];
+    var _m = React.useContext(paperEventEmitterContext), onPaperClicked = _m.onPaperClicked, onElementSelected = _m.onElementSelected;
     var zoom = useZoomContext().zoom;
     var pathRef = React.useRef(null);
     var labelRef = React.useRef(null);
@@ -8450,27 +8461,18 @@ var IElementLink = function (_a) {
     var targetLabelRef = React.useRef(null);
     var isFirstRender = React.useRef(true);
     var onPointsChangedRef = React.useRef();
-    var lastUpdatedPoints = React.useRef(Date.now());
+    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 angleMarkerStart = '0';
     var angleMarkerEnd = '0';
     var markerStartPosition;
     var markerEndPosition;
     var centerPathPosition = undefined;
-    // Throttle pointsProp updates to avoid excessive renders
+    // Initialize points from props
     React.useEffect(function () {
-        var delay = 100; // 100ms delay
-        var timeoutId = setTimeout(function () {
-            var now = Date.now();
-            if (now - lastUpdatedPoints.current >= delay) {
-                setPoints(pointsProp || []);
-                lastUpdatedPoints.current = now;
-            }
-        }, delay - (Date.now() - lastUpdatedPoints.current));
-        return function () {
-            clearTimeout(timeoutId);
-        };
+        setPoints(pointsProp || []);
         // Use JSON.stringify for deep comparison
     }, [JSON.stringify(pointsProp)]);
+    // Reset selected label when paper is clicked
     React.useEffect(function () {
         var paperClickListener = onPaperClicked(function () {
             setSelectedLabelRef({
@@ -8483,6 +8485,7 @@ var IElementLink = function (_a) {
             paperClickListener.off();
         };
     }, []);
+    // Reset selected label when an element is selected
     React.useEffect(function () {
         var elementSelectedListener = onElementSelected(function () {
             setSelectedLabelRef({
@@ -8499,6 +8502,7 @@ var IElementLink = function (_a) {
     React.useEffect(function () {
         onPointsChangedRef.current = onPointsChanged;
     }, [onPointsChanged]);
+    // Notify parent component when points change
     React.useEffect(function () {
         var _a;
         if (isFirstRender.current) {
@@ -8506,7 +8510,7 @@ var IElementLink = function (_a) {
             return;
         }
         (_a = onPointsChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onPointsChangedRef, points, id);
-    }, [points]);
+    }, [JSON.stringify(points)]);
     React.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined, false);
@@ -8517,42 +8521,9 @@ var IElementLink = function (_a) {
             return;
         onPathChanged === null || onPathChanged === void 0 ? void 0 : onPathChanged(pathStr, id);
     }, [pathStr, id]);
-    React.useLayoutEffect(function () {
-        //handle when creating and moving point
-        var handleMouseMove = function (ev) {
-            var mouseEvent = ev;
-            if (isDragging && draggingPointIndex !== undefined && container) {
-                var paperPosition_1 = windowsPositionToPaperPosition({
-                    x: mouseEvent.clientX,
-                    y: mouseEvent.clientY
-                }, container, zoom);
-                setPoints(function (prev) {
-                    var temp = __spreadArray([], prev, true);
-                    temp[draggingPointIndex] = paperPosition_1;
-                    return temp;
-                });
-            }
-        };
-        var mouseUp = function () {
-            setDraggingPointIndex(undefined);
-            setIsDragging(false);
-        };
-        container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
-        container === null || container === void 0 ? void 0 : container.addEventListener('mouseup', mouseUp);
-        return function () {
-            container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
-            container === null || container === void 0 ? void 0 : container.removeEventListener('mouseup', mouseUp);
-        };
-    }, [container, isDragging, draggingPointIndex, zoom]);
-    var handleMouseDownOnPath = function (ev) {
-        ev.preventDefault();
-        //add point if click on path
-        setIsDragging(true);
+    var addMovingPoint = function (mouseDownedOnPaperPos, points) {
         //Position of the new point on the path
-        var paperPosition = windowsPositionToPaperPosition({
-            x: ev.clientX,
-            y: ev.clientY
-        }, container, zoom);
+        var paperPosition = mouseDownedOnPaperPos;
         var newPoints = addPointToList(paperPosition, __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], 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; });
@@ -8595,8 +8566,49 @@ var IElementLink = function (_a) {
         }
         //Find new index of added point
         _draggingPointIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === paperPosition.x && p.y === paperPosition.y; });
-        setDraggingPointIndex(_draggingPointIndex);
-        setPoints(pointsWithoutStartEndPoint);
+        return {
+            draggingPointIndex: _draggingPointIndex,
+            points: pointsWithoutStartEndPoint,
+        };
+    };
+    React.useEffect(function () {
+        //handle when creating and moving point
+        var handleMouseMove = function (ev) {
+            var mouseEvent = ev;
+            if (isDragging && container) {
+                var paperPosition_1 = windowsPositionToPaperPosition({
+                    x: mouseEvent.clientX,
+                    y: mouseEvent.clientY
+                }, container, zoom);
+                if (draggingPointIndexRef.current !== undefined) { // If dragging a point
+                    setPoints(function (prev) {
+                        var temp = __spreadArray([], prev, true);
+                        temp[draggingPointIndexRef.current] = paperPosition_1;
+                        return temp;
+                    });
+                }
+                else { // If adding a new point
+                    var _a = addMovingPoint(paperPosition_1, points), newDraggingPointIndex = _a.draggingPointIndex, newPoints = _a.points;
+                    draggingPointIndexRef.current = newDraggingPointIndex;
+                    setPoints(newPoints);
+                }
+            }
+        };
+        var mouseUp = function () {
+            draggingPointIndexRef.current = undefined;
+            setIsDragging(false);
+        };
+        container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
+        container === null || container === void 0 ? void 0 : container.addEventListener('mouseup', mouseUp);
+        return function () {
+            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]);
+    var handleMouseDownOnPath = function (ev) {
+        ev.preventDefault();
+        //add point if click on path
+        setIsDragging(true);
     };
     var handleLabelMoved = function (newX, newY) {
         if (!onLabelMoved)
@@ -8758,10 +8770,14 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
 });
 
 var Element = React.forwardRef(function (props, forwardedRef) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated, onPortContextMenu = props.onPortContextMenu; props.onPortsChanged;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated, onPortContextMenu = props.onPortContextMenu, onPortsChanged = props.onPortsChanged, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort;
+    var propPorts = props.ports;
     var _a = React.useState(), selectedPort = _a[0], setSelectedPort = _a[1];
     var _b = React.useState(), hoveredPort = _b[0], setHoveredPort = _b[1];
-    var _c = React.useState([]), ports = _c[0], setPorts = _c[1];
+    var _c = React.useState((propPorts === null || propPorts === void 0 ? void 0 : propPorts.map(function (p) {
+        var portState = __assign(__assign({}, p), { ref: React.createRef() });
+        return portState;
+    })) || []), ports = _c[0], setPorts = _c[1];
     var _d = React.useState(false), someElementLinkStarted = _d[0], setSomeElementLinkStarted = _d[1];
     var _e = React.useState(), potentialPortPosition = _e[0], setPotentialPortPosition = _e[1];
     var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
@@ -8780,12 +8796,11 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             position.y += parentAbsolutePosition.y;
         }
         return position;
-    }, [x, y, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y]);
+    }, [x, y, parentAbsolutePosition]);
     var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
     //Listen to manually trigger render event
     React.useEffect(function () {
-        var _a;
-        var off = (_a = props.onManuallyTriggerRenderPort) === null || _a === void 0 ? void 0 : _a.call(props, function (portId, elementId) {
+        var off = onManuallyTriggerRenderPort === null || onManuallyTriggerRenderPort === void 0 ? void 0 : onManuallyTriggerRenderPort(function (portId, elementId) {
             if (elementId !== id)
                 return;
             logger.info('onManuallyTriggerRenderPort', id);
@@ -8794,17 +8809,19 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             off === null || off === void 0 ? void 0 : off();
         };
-    }, [props.onManuallyTriggerRenderPort]);
-    //Update portsRef when ports changed
-    React.useEffect(function () {
-        portsRef.current = ports;
-    }, [ports]);
+    }, [id, onManuallyTriggerRenderPort]);
+    //Normalize port position
+    var normalizePortPosition = React.useCallback(function (tempNewPosition) {
+        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
+        return newPosition || tempNewPosition;
+    }, [width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen a new port is created, after add new port to ports state
     React.useEffect(function () {
-        logger.info('Ports changed', props.ports);
         setPorts(function (prev) {
-            var _a, _b;
-            return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
+            var _a;
+            if (propPorts === undefined)
+                return [];
+            var newState = (_a = propPorts.map(function (p, index) {
                 var prevPortState = prev.find(function (_p) { return _p.id === p.id; });
                 var newPortState;
                 //If port is existed, keep the ref of the port
@@ -8823,24 +8840,39 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                     newPortState.ref = React.createRef();
                 }
                 return newPortState;
-            })) !== null && _b !== void 0 ? _b : [];
+            })) !== null && _a !== void 0 ? _a : [];
+            return newState;
+        });
+    }, [_paperEventEmitterContext, normalizePortPosition, id, onPortMoved, propPorts]);
+    //Update portsRef when ports changed
+    React.useEffect(function () {
+        portsRef.current = ports;
+    }, [ports]);
+    //Normalize port position when element is resized
+    React.useEffect(function () {
+        var newPorts = portsRef.current.map(function (port) {
+            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;
         });
-    }, [props.ports]);
+        setPorts(newPorts);
+    }, [width, height, _paperEventEmitterContext, id, onPortsChanged, normalizePortPosition, onPortMoved]);
     //Listen trigger of Delete key, handle delete port is selected
     React.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
-            var _a;
             if (selectedPort) {
                 var newPorts = portsRef.current.filter(function (p) { return p.id !== selectedPort.id; });
                 setPorts(newPorts);
                 setSelectedPort(undefined);
-                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+                onPortsChanged === null || onPortsChanged === void 0 ? void 0 : onPortsChanged(newPorts, id);
             }
         });
         return function () {
             listener.off();
         };
-    }, [selectedPort, props.onPortsChanged]);
+    }, [_paperEventEmitterContext, id, onPortsChanged, selectedPort]);
     React.useEffect(function () {
         //Listener onMouseDown event on #paper-container
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
@@ -8849,16 +8881,10 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             eventListener.off();
         };
-    }, []);
-    //Normalize port position
-    var normalizePortPosition = React.useCallback(function (tempNewPosition) {
-        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
-        return newPosition || tempNewPosition;
-    }, [width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current]);
+    }, [_paperEventEmitterContext]);
     React.useEffect(function () {
         //listen element resize to update position of the ports by element size.
         var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
-            var _a;
             var isChanged = false;
             var newPorts = portsRef.current.map(function (port) {
                 var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
@@ -8872,13 +8898,13 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             });
             setPorts(newPorts);
             if (isChanged) {
-                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+                onPortsChanged === null || onPortsChanged === void 0 ? void 0 : onPortsChanged(newPorts, id);
             }
         });
         return function () {
             eleResizeListener.off();
         };
-    }, [onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
+    }, [_paperEventEmitterContext, id, onPortsChanged, onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen creating element link started, ended.
     React.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -8895,7 +8921,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             elementStartedListener.off();
             elementEndedListener.off();
         };
-    }, []);
+    }, [id, _paperEventEmitterContext]);
     //Listen another port is selected
     React.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onPortSelected(function (port, elementId) {
@@ -8906,7 +8932,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             portSelectedListener.off();
         };
-    }, []);
+    }, [_paperEventEmitterContext, id]);
     //Listen text is selected
     React.useEffect(function () {
         var textSelectedListener = _paperEventEmitterContext.onTextSelected(function (text) {
@@ -8915,7 +8941,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             textSelectedListener.off();
         };
-    }, []);
+    }, [_paperEventEmitterContext]);
     //Listen another element is selected
     React.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
@@ -8924,7 +8950,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         return function () {
             portSelectedListener.off();
         };
-    }, []);
+    }, [_paperEventEmitterContext]);
     var handleSelectedPort = React.useCallback(function (portId, e) {
         e.stopPropagation();
         logger.debug('Port selected', portId, e);
@@ -8933,9 +8959,9 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             return;
         setSelectedPort(port);
         _paperEventEmitterContext.emitPortSelected(port, id);
-    }, [_paperEventEmitterContext]);
+    }, [id, _paperEventEmitterContext]);
     //Calculate the position of the 4 vertices of a rectangle relative to element
-    var calculateSlideRailRectSVGPositions = function (slideRailSVG) {
+    var calculateSlideRailRectSVGPositions = React.useCallback(function (slideRailSVG) {
         var coordinates = getRectangleCorners(slideRailSVG);
         var ownerSVG = slideRailSVG.ownerSVGElement;
         var rotationAngle = getElementRotationInfo(ownerSVG);
@@ -8945,7 +8971,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             coordinates = getRotatedRectangleCoordinates(coordinates, rotationCenterX, rotationCenterY, rotationAngle);
         }
         return coordinates;
-    };
+    }, [width, height]);
     var getSlideRailSVG = React.useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
@@ -8978,7 +9004,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             return;
         _paperEventEmitterContext.emitPortMouseDown(e, port, id);
         onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(e, port, id);
-    }, [_paperEventEmitterContext]);
+    }, [id, onPortMouseDown, _paperEventEmitterContext]);
     //Handle when mouse up on port
     var handlePortMouseUp = React.useCallback(function (portId, e) {
         e.stopPropagation();
@@ -8991,7 +9017,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         if (potentialPortPosition) {
             setPotentialPortPosition(undefined);
         }
-    }, [_paperEventEmitterContext, potentialPortPosition]);
+    }, [id, onPortMouseUp, _paperEventEmitterContext, potentialPortPosition]);
     //Update state when label of port is moved
     var handlePortLabelMoved = React.useCallback(function (newX, newY, portId) {
         setPorts(function (prevPorts) {
@@ -9145,7 +9171,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 break;
         }
         return rotationAngle;
-    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition]);
+    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition, calculateSlideRailRectSVGPositions]);
     var renderedShape = React.useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -9160,7 +9186,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         }
     }, []);
     //log element render
-    logger.debug('Rendering Element', id, x, y, width, height, cssClass, portPlaceholderShape, children, container, parentAbsolutePosition, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
+    logger.debug('Rendering Element', id, x, y, width, height, cssClass, portPlaceholderShape, children, container, parentAbsolutePosition, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
     return (React.createElement(React.Fragment, null,
         React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
             renderedShape,
@@ -9452,6 +9478,7 @@ var Paper = function (props) {
     var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
     var selectedElementAbsPosition = React.useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
+    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMouseLeave = props.onElementMouseLeave, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     React.useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
@@ -9465,36 +9492,51 @@ var Paper = function (props) {
         setTexts(props.texts);
     }, [props.texts]);
     React.useEffect(function () {
-        var off = props.onManuallyTriggerRenderElement(function (elementId) {
-            setElements(__spreadArray([], elements, true));
-            if (props.onElementsChanged) {
-                props.onElementsChanged(__spreadArray([], elements, true));
+        var off = manuallyTriggerRenderElementHandler(function (elementId) {
+            var newElements = __spreadArray([], elements, true);
+            setElements(newElements);
+            if (onElementsChanged) {
+                onElementsChanged(newElements);
             }
         });
         return function () {
             off();
         };
-    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements, selectedElement]);
+    }, [manuallyTriggerRenderElementHandler, onElementsChanged, elements, selectedElement]);
     React.useEffect(function () {
-        var _a, _b;
         var offs = [];
-        offs.push((_a = props.onManuallySelectElement) === null || _a === void 0 ? void 0 : _a.call(props, function (element) {
-            var _a;
+        offs.push(manuallySelectElementHandler === null || manuallySelectElementHandler === void 0 ? void 0 : manuallySelectElementHandler(function (element) {
             setSelectedElement(element || undefined);
             if (element) {
-                (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
+                onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
             }
         }));
-        offs.push((_b = props.onManuallyTriggerDraggingElement) === null || _b === void 0 ? void 0 : _b.call(props, function (element) {
-            var _a;
+        offs.push(manuallyTriggerDraggingElementHandler === null || manuallyTriggerDraggingElementHandler === void 0 ? void 0 : manuallyTriggerDraggingElementHandler(function (element) {
             setSelectedElement(element);
-            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
+            onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(element);
             setAutoEnabledDraggingSelectedElement(true);
         }));
         return function () {
             offs.forEach(function (off) { return off(); });
         };
-    }, [props.onManuallySelectElement, props.onManuallyTriggerDraggingElement, props.onElementSelected]);
+    }, [manuallySelectElementHandler, manuallyTriggerDraggingElementHandler, onElementSelected]);
+    React.useEffect(function () {
+        if (manuallyTriggerStartedLinkingHandler) {
+            var off_1 = manuallyTriggerStartedLinkingHandler(function (sourceElement, sourcePort) {
+                var newLink = {
+                    id: generateUniqueId(),
+                    points: [],
+                    sourceElement: sourceElement,
+                    sourcePort: sourcePort,
+                };
+                setTempLink(newLink);
+                paperEventEmitter.emitElementLinkStarted(newLink);
+            });
+            return function () {
+                off_1();
+            };
+        }
+    }, [manuallyTriggerStartedLinkingHandler, paperEventEmitter]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
@@ -9510,10 +9552,10 @@ var Paper = function (props) {
     useKeyboardCommands({
         element: paperContainerRef.current
     });
-    var updateElementsTree = function () {
+    var updateElementsTree = React.useCallback(function () {
         var parsedElementsInTree = convertElementsToTree(elements);
         setElementsInTree(parsedElementsInTree);
-    };
+    }, [elements]);
     //Cache tempLink to avoid re-render when tempLink changed
     React.useEffect(function () {
         tempLinkRef.current = tempLink;
@@ -9535,20 +9577,19 @@ var Paper = function (props) {
     //Listen port is selected
     React.useEffect(function () {
         var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
-            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
             //broadcast selected port to parent component
             var element = elementsRef.current.find(function (e) { return e.id === elementId; });
             if (element) {
-                (_a = props.onPortSelected) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+                onPortSelected === null || onPortSelected === void 0 ? void 0 : onPortSelected(port, element);
             }
         });
         return function () {
             portSelectedListener.off();
         };
-    }, []);
+    }, [paperEventEmitter, onPortSelected]);
     React.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
         var parentChangedCancelers = elementsRef.current.map(function (element) {
@@ -9572,8 +9613,8 @@ var Paper = function (props) {
                 });
                 //Set state to re-render component
                 setElements(newElements);
-                if (props.onElementsChanged) {
-                    props.onElementsChanged(newElements);
+                if (onElementsChanged) {
+                    onElementsChanged(newElements);
                 }
             });
         });
@@ -9581,13 +9622,13 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, [elements]);
+    }, [elements, updateElementsTree, onElementsChanged]);
     //Update elements tree when length of elements change
     React.useEffect(function () {
         updateElementsTree();
-    }, [elements]);
+    }, [elements, updateElementsTree]);
     //Get all child elements of the deleted element
-    var getChildOfElement = function (element) {
+    var getChildOfElement = React.useCallback(function (element) {
         if (!element.childrenElementsInTree)
             return [];
         var childElms = element.childrenElementsInTree;
@@ -9595,10 +9636,9 @@ var Paper = function (props) {
             return __spreadArray(__spreadArray([], acc, true), getChildOfElement(ele), true);
         }, []);
         return __spreadArray(__spreadArray([], childElms, true), childOfChildElements, true);
-    };
+    }, []);
     //Listen command delete selected for element
     React.useEffect(function () {
-        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
                 selectedElement.parentElement = undefined; //Remove parent element to avoid memory leak. This will remove the element from the parent element's childrenElements array.
@@ -9608,15 +9648,15 @@ var Paper = function (props) {
                 var newElements = prevElements.filter(function (e) { return !deletedElementIds_1.includes(e.id); });
                 //Set state to re-render component
                 setElements(newElements);
-                if (props.onElementsChanged) {
-                    props.onElementsChanged(newElements);
+                if (onElementsChanged) {
+                    onElementsChanged(newElements);
                 }
                 //Update links
                 var prevLinks = linksRef.current;
                 var newLinks = prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); });
                 setLinks(newLinks);
-                if (props.onLinksChanged) {
-                    props.onLinksChanged(newLinks);
+                if (onLinksChanged) {
+                    onLinksChanged(newLinks);
                 }
                 setSelectedElement(undefined);
                 setSelectedElementSVG(null);
@@ -9624,56 +9664,54 @@ var Paper = function (props) {
         });
         //broadcast selected element to parent component
         if (selectedElement) {
-            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedElement);
+            onElementSelected === null || onElementSelected === void 0 ? void 0 : onElementSelected(selectedElement);
         }
         return function () {
             listener.off();
         };
-    }, [selectedElement, props.onElementsChanged]);
+    }, [selectedElement, onElementSelected, onElementsChanged, onLinksChanged, getChildOfElement, paperEventEmitter]);
     //Listen command delete selected for link
     React.useEffect(function () {
-        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
                 var prevLinks = linksRef.current;
                 var newLinks = prevLinks.filter(function (l) { return l.id !== selectedLink.id; });
                 setLinks(links);
                 setSelectedLink(undefined);
-                if (props.onLinksChanged) {
-                    props.onLinksChanged(newLinks);
+                if (onLinksChanged) {
+                    onLinksChanged(newLinks);
                 }
             }
         });
         //broadcast selected link to parent component
         if (selectedLink) {
-            (_a = props.onLinkSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedLink);
+            onLinkSelected === null || onLinkSelected === void 0 ? void 0 : onLinkSelected(selectedLink);
         }
         return function () {
             listener.off();
         };
-    }, [selectedLink, props.onLinksChanged]);
+    }, [selectedLink, onLinksChanged, onLinkSelected, links, paperEventEmitter]);
     //Listen command delete selected for Text
     React.useEffect(function () {
-        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
                 var prevTexts = textsRef.current;
                 var newTexts = prevTexts.filter(function (t) { return t.id !== selectedText.id; });
                 setTexts(newTexts);
-                if (props.onTextsChanged) {
-                    props.onTextsChanged(newTexts);
+                if (onTextsChanged) {
+                    onTextsChanged(newTexts);
                 }
                 setSelectedText(undefined);
             }
         });
         //broadcast selected text to parent component
         if (selectedText) {
-            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedText);
+            onTextSelected === null || onTextSelected === void 0 ? void 0 : onTextSelected(selectedText);
         }
         return function () {
             listener.off();
         };
-    }, [selectedText, props.onTextsChanged]);
+    }, [selectedText, onTextsChanged, onTextSelected, texts, paperEventEmitter]);
     var handlePaperMouseMove = function (ev) {
         var _a;
         var _b = windowsPositionToPaperPosition({
@@ -9752,19 +9790,19 @@ var Paper = function (props) {
         links[updatedLinkIndex].path = path;
         var newLinks = __spreadArray([], links, true);
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged, links]);
+    }, [onLinksChanged, links]);
     var handlePointsOfLinkChange = React.useCallback(function (points, linkId) {
         var newLinks = __spreadArray([], linksRef.current, true);
         var updatedLinkIndex = newLinks.findIndex(function (l) { return l.id === linkId; });
         newLinks[updatedLinkIndex].points = points;
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
         var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
@@ -9782,8 +9820,8 @@ var Paper = function (props) {
                 return link;
             });
             setLinks(newLinks);
-            if (props.onLinksChanged) {
-                props.onLinksChanged(newLinks);
+            if (onLinksChanged) {
+                onLinksChanged(newLinks);
             }
             var newElements = elementsRef.current;
             var updatedElementIndex = newElements.findIndex(function (e) { return e.id === elementId; });
@@ -9796,17 +9834,16 @@ var Paper = function (props) {
             //Update port position in element, not re-render
             //To avoid re-render
             setElements(newElements);
-            if (props.onElementsChanged) {
-                props.onElementsChanged(newElements);
+            if (onElementsChanged) {
+                onElementsChanged(newElements);
             }
-            if (props.onPortMoved) {
-                props.onPortMoved(newPosition, port, element);
+            if (onPortMoved) {
+                onPortMoved(newPosition, port, element);
             }
         }
-    }, [props.onPortMoved, props.onElementsChanged, props.onLinksChanged]);
+    }, [onPortMoved, onElementsChanged, onLinksChanged]);
     //Handle creating a new element link
     var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
-        var _a;
         ev.stopPropagation();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
@@ -9816,7 +9853,7 @@ var Paper = function (props) {
         console.log(paperPosition);
         //broadcast port mouse down to parent component
         if (element) {
-            (_a = props.onPortMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, port, element, paperPosition);
+            onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(port, element, paperPosition);
         }
         if (!tempLinkRef.current && element) {
             //handle create temp element link;
@@ -9829,13 +9866,13 @@ var Paper = function (props) {
             setTempLink(newLink);
             paperEventEmitter.emitElementLinkStarted(newLink);
         }
-    }, [paperEventEmitter, props.onPortMouseDown]);
+    }, [paperEventEmitter, onPortMouseDown]);
     var createElementLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         //if no onCreatingLink prop, no link will be created
-        if (!props.onCreatingLink) {
+        if (!onCreatingLink) {
             return null;
         }
-        var newElementLink = props.onCreatingLink(sourcePort, sourceElement, targetPort, targetElement);
+        var newElementLink = onCreatingLink(sourcePort, sourceElement, targetPort, targetElement);
         if (!newElementLink)
             return null;
         //Automatic bending, if is not defined points
@@ -9844,9 +9881,8 @@ var Paper = function (props) {
             newElementLink = automationAddPointsToLink(newElementLink, elements_1, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
-    }, [props.onCreatingLink]);
+    }, [onCreatingLink]);
     var handlePortMouseUp = React.useCallback(function (ev, port, elementId) {
-        var _a;
         ev.stopPropagation();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
@@ -9855,7 +9891,7 @@ var Paper = function (props) {
         }, paperContainerRef.current, zoomRef.current);
         //broadcast port mouse down to parent component
         if (element) {
-            (_a = props.onPortMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, port, element, paperPosition);
+            onPortMouseUp === null || onPortMouseUp === void 0 ? void 0 : onPortMouseUp(port, element, paperPosition);
         }
         //Create new element link, if has tempLink
         if (tempLinkRef.current) {
@@ -9863,7 +9899,7 @@ var Paper = function (props) {
             var isMouseUpOnNotSelf = tempLinkRef.current.sourcePort.id !== port.id || tempLinkRef.current.sourceElement.id !== elementId;
             var newElementLink = null;
             if (isMouseUpOnNotSelf) {
-                var _b = tempLinkRef.current, sourcePort = _b.sourcePort, sourceElement = _b.sourceElement;
+                var _a = tempLinkRef.current, sourcePort = _a.sourcePort, sourceElement = _a.sourceElement;
                 var targetElement = elementsRef.current.find(function (e) { return e.id === elementId; });
                 newElementLink = createElementLink(sourcePort, sourceElement, port, targetElement);
             }
@@ -9871,8 +9907,8 @@ var Paper = function (props) {
                 var prevLinks = linksRef.current;
                 var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
                 setLinks(newLinks);
-                if (props.onLinksChanged) {
-                    props.onLinksChanged(newLinks);
+                if (onLinksChanged) {
+                    onLinksChanged(newLinks);
                 }
                 paperEventEmitter.emitElementLinkEnded(newElementLink);
             }
@@ -9881,14 +9917,14 @@ var Paper = function (props) {
             }
             setTempLink(null);
         }
-    }, [paperEventEmitter, createElementLink, props.onPortMouseUp, props.onLinksChanged]);
+    }, [paperEventEmitter, createElementLink, onPortMouseUp, onLinksChanged]);
     var handlePortsChanged = React.useCallback(function (ports, elementId) {
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             //broadcast ports changed to parent component
-            props.onPortsChanged(ports, element);
+            onPortsChanged(ports, element);
         }
-    }, [props.onPortsChanged]);
+    }, [onPortsChanged]);
     var handleLinkLabelMoved = React.useCallback(function (newX, newY, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -9912,10 +9948,10 @@ var Paper = function (props) {
             }
         }
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleLinkLabelResized = React.useCallback(function (width, height, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -9947,10 +9983,10 @@ var Paper = function (props) {
             }
         }
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleLinkLabelContentChanged = React.useCallback(function (newValue, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -9970,10 +10006,10 @@ var Paper = function (props) {
             }
         }
         setLinks(newLinks);
-        if (props.onLinksChanged) {
-            props.onLinksChanged(newLinks);
+        if (onLinksChanged) {
+            onLinksChanged(newLinks);
         }
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleSelectLink = function (link, index) {
         setSelectedLink(link);
     };
@@ -10026,20 +10062,20 @@ var Paper = function (props) {
             var newLinks = __spreadArray([], prevLinks, true);
             newLinks.splice(index, 1);
             setLinks(newLinks);
-            if (props.onLinksChanged) {
-                props.onLinksChanged(newLinks);
+            if (onLinksChanged) {
+                onLinksChanged(newLinks);
             }
         };
-    }, [props.onLinksChanged]);
+    }, [onLinksChanged]);
     var handleMouseUpAtLinkedPortPlaceholder = React.useCallback(function (link, position, targetElementId) {
         var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
         if (!targetElement)
             return;
         logger.info("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
-        if (props.onCreatingPortByLinking) {
+        if (onCreatingPortByLinking) {
             var sourcePort = link.sourcePort, sourceElement = link.sourceElement;
             //Handle create port via onCreatingPortByLinking prop
-            var targetPort = props.onCreatingPortByLinking(sourceElement, sourcePort, targetElement, position);
+            var targetPort = onCreatingPortByLinking(sourceElement, sourcePort, targetElement, position);
             if (targetPort) {
                 //Add new port to target element
                 targetElement.addPort(targetPort);
@@ -10050,8 +10086,8 @@ var Paper = function (props) {
                     var prevLinks = linksRef.current;
                     var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
                     setLinks(newLinks);
-                    if (props.onLinksChanged) {
-                        props.onLinksChanged(newLinks);
+                    if (onLinksChanged) {
+                        onLinksChanged(newLinks);
                     }
                     paperEventEmitter.emitElementLinkEnded(newElementLink);
                     setTempLink(null);
@@ -10062,7 +10098,7 @@ var Paper = function (props) {
         //Clear tempLink
         setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
-    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter, props.onLinksChanged]);
+    }, [onCreatingPortByLinking, createElementLink, paperEventEmitter, onLinksChanged]);
     var handleElementTextChange = React.useCallback(function (elementId, textId, newContent) {
         var prevElms = elementsRef.current;
         var newElements = prevElms.map(function (curEle) {
@@ -10076,10 +10112,10 @@ var Paper = function (props) {
             return curEle;
         });
         setElements(newElements);
-        if (props.onElementsChanged) {
-            props.onElementsChanged(newElements);
+        if (onElementsChanged) {
+            onElementsChanged(newElements);
         }
-    }, [props.onElementsChanged]);
+    }, [onElementsChanged]);
     var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
@@ -10100,73 +10136,67 @@ var Paper = function (props) {
         setMouseDownedOnPaper(false);
     }, [paperEventEmitter]);
     var handlePortContextMenu = React.useCallback(function (port, elementId, e) {
-        var _a;
         e.preventDefault();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
-            (_a = props.onPortContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, port, element, e);
+            onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, element, e);
         }
-    }, [props.onPortContextMenu]);
+    }, [onPortContextMenu]);
     var handleContextMenu = React.useCallback(function (elementId, e, ref) {
-        var _a;
         e.preventDefault();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             handleElementClicked(elementId, e, ref);
-            (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
+            onElementContextMenu === null || onElementContextMenu === void 0 ? void 0 : onElementContextMenu(element, e);
         }
-    }, [props.onElementContextMenu, handleElementClicked]);
+    }, [onElementContextMenu, handleElementClicked]);
     var handleMouseUp = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, element, paperPosition);
         }
-    }, [props.onElementMouseUp]);
+    }, [onElementMouseUp]);
     var handleMouseDown = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, element, paperPosition);
         }
-    }, [props.onElementMouseDown]);
+    }, [onElementMouseDown]);
     var handleMouseMove = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseMove) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseMove === null || onElementMouseMove === void 0 ? void 0 : onElementMouseMove(ev, element, paperPosition);
         }
-    }, [props.onElementMouseMove]);
+    }, [onElementMouseMove]);
     var handleMouseLeave = React.useCallback(function (ev, elementId) {
-        var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
         }, paperContainerRef.current, zoomRef.current);
         if (element) {
-            (_a = props.onElementMouseLeave) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
+            onElementMouseLeave === null || onElementMouseLeave === void 0 ? void 0 : onElementMouseLeave(ev, element, paperPosition);
         }
-    }, [props.onElementMouseLeave]);
+    }, [onElementMouseLeave]);
     var renderElementInTree = React.useCallback(function (element) {
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: manuallyTriggerRenderPortHandler, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
                 !!paperContainerRef.current && !!selectedElement && selectedElement.id === element.id &&
                     React.createElement(SelectionFrame, { key: selectedElement.id, container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
@@ -10198,18 +10228,18 @@ var Paper = function (props) {
                                 return;
                             var oldPosition = __assign({}, selectedElement.position);
                             // Relative position to the paper container
-                            var newPosition = {
+                            var paperPosition = {
                                 x: newX,
                                 y: newY
                             };
-                            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
+                            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) {
-                                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
-                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
+                                paperPosition = adjustElementPositionOnParentPortArea(selectedElement, paperPosition, true);
+                                updateElementPosition(selectedElement, paperPosition.x, paperPosition.y, true);
                             }
                             else {
-                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, false);
+                                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; });
@@ -10217,8 +10247,8 @@ var Paper = function (props) {
                             // 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 = newPosition.x - oldPosition.x;
-                            var offsetY = newPosition.y - oldPosition.y;
+                            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);
@@ -10235,8 +10265,8 @@ var Paper = function (props) {
                             //Set state to re-render UI with new position
                             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
                             if (props.onElementMoved) {
-                                console.log('onElementMoved', selectedElement.position, newPosition);
-                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, newPosition);
+                                console.log('onElementMoved', selectedElement.position, paperPosition);
+                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
                             }
                             paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
                             setMouseDownedOnPaper(false);
@@ -10258,7 +10288,7 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, props, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter]);
+    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, props, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -10407,7 +10437,7 @@ var Editor = function (_a) {
     }, [editorContext]);
     return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
         React.createElement(ZoomContextProvider, null,
-            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext), onManuallySelectElement: editorContext.onManuallySelectElement.bind(editorContext), onManuallyTriggerDraggingElement: editorContext.onManuallyTriggerDraggingElement.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, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
 };
 
 exports.CircleRC = Circle;