orcasvn-react-diagrams 0.1.54 → 0.1.56

package/dist/cjs/index.js

@@ -808,6 +808,7 @@ var EVENT_PORT_MOUSE_DOWN = 'portMouseDown';
 var EVENT_PORT_MOUSE_UP = 'portMouseUp';
 var EVENT_PORT_MOVED = 'portMoved';
 var EVENT_PORT_SELECTED = 'portSelected';
+var EVENT_PORT_CONTEXT_MENU = 'portContextMenu';
 var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
 var EVENT_ELEMENT_MOVED = 'elementMoved';
 var EVENT_ELEMENT_RESIZED = 'elementResized';
@@ -957,15 +958,15 @@ var EditorContext = /** @class */ (function () {
         return this.addEventListener(EVENT_PORT_MOUSE_DOWN, callback);
     };
     /** @internal */
-    EditorContext.prototype.onPortMouseDownHandler = function (port, element) {
-        this._eventEmitter.emit(EVENT_PORT_MOUSE_DOWN, port, element);
+    EditorContext.prototype.onPortMouseDownHandler = function (port, element, paperPosition) {
+        this._eventEmitter.emit(EVENT_PORT_MOUSE_DOWN, port, element, paperPosition);
     };
     EditorContext.prototype.onPortMouseUp = function (callback) {
         return this.addEventListener(EVENT_PORT_MOUSE_UP, callback);
     };
     /** @internal */
-    EditorContext.prototype.onPortMouseUpHandler = function (port, element) {
-        this._eventEmitter.emit(EVENT_PORT_MOUSE_UP, port, element);
+    EditorContext.prototype.onPortMouseUpHandler = function (port, element, paperPosition) {
+        this._eventEmitter.emit(EVENT_PORT_MOUSE_UP, port, element, paperPosition);
     };
     EditorContext.prototype.onPortMoved = function (callback) {
         return this.addEventListener(EVENT_PORT_MOVED, callback);
@@ -981,6 +982,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onPortSelectedHandler = function (port, element) {
         this._eventEmitter.emit(EVENT_PORT_SELECTED, port, element);
     };
+    EditorContext.prototype.onPortContextMenu = function (callback) {
+        return this.addEventListener(EVENT_PORT_CONTEXT_MENU, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onPortContextMenuHandler = function (port, element, mouseEvent) {
+        this._eventEmitter.emit(EVENT_PORT_CONTEXT_MENU, port, element, mouseEvent);
+    };
     EditorContext.prototype.onElementContextMenu = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_CONTEXT_MENU, callback);
     };
@@ -992,8 +1000,8 @@ var EditorContext = /** @class */ (function () {
         return this.addEventListener(EVENT_ELEMENT_MOVED, callback);
     };
     /** @internal */
-    EditorContext.prototype.onElementMovedHandler = function (position, element) {
-        this._eventEmitter.emit(EVENT_ELEMENT_MOVED, position, element);
+    EditorContext.prototype.onElementMovedHandler = function (relativePosition, element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOVED, relativePosition, element);
     };
     EditorContext.prototype.onElementResized = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_RESIZED, callback);
@@ -1013,29 +1021,29 @@ var EditorContext = /** @class */ (function () {
         return this.addEventListener(EVENT_ELEMENT_MOUSE_MOVE, callback);
     };
     /** @internal */
-    EditorContext.prototype.onElementMouseMoveHandler = function (ev, element) {
-        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_MOVE, ev, element);
+    EditorContext.prototype.onElementMouseMoveHandler = function (ev, element, paperPosition) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_MOVE, ev, element, paperPosition);
     };
     EditorContext.prototype.onElementMouseLeave = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_MOUSE_LEAVE, callback);
     };
     /** @internal */
-    EditorContext.prototype.onElementMouseLeaveHandler = function (ev, element) {
-        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_LEAVE, ev, element);
+    EditorContext.prototype.onElementMouseLeaveHandler = function (ev, element, paperPosition) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_LEAVE, ev, element, paperPosition);
     };
     EditorContext.prototype.onElementMouseUp = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_MOUSE_UP, callback);
     };
     /** @internal */
-    EditorContext.prototype.onElementMouseUpHandler = function (ev, element) {
-        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_UP, ev, element);
+    EditorContext.prototype.onElementMouseUpHandler = function (ev, element, paperPosition) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_UP, ev, element, paperPosition);
     };
     EditorContext.prototype.onElementMouseDown = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_MOUSE_DOWN, callback);
     };
     /** @internal */
-    EditorContext.prototype.onElementMouseDownHandler = function (ev, element) {
-        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_DOWN, ev, element);
+    EditorContext.prototype.onElementMouseDownHandler = function (ev, element, paperPosition) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_DOWN, ev, element, paperPosition);
     };
     EditorContext.prototype.onLinkSelected = function (callback) {
         return this.addEventListener(EVENT_LINK_SELECTED, callback);
@@ -1305,667 +1313,70 @@ var Logger = /** @class */ (function () {
 }());
 var logger = new Logger();
 
-var SelectionFrame = function (props) {
-    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, objectX = props.objectX, objectY = props.objectY, 
-    // movingOffsetThreshold: propMovingOffsetThreshold,
-    propMovingRate = props.movingRate, propOnMouseDown = props.onMouseDown, propOnMouseUp = props.onMouseUp, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor;
-    var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
-    var _a = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _a[0], setWidth = _a[1];
-    var _b = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _b[0], setHeight = _b[1];
-    React.useEffect(function () {
-        if (propWidth) {
-            setWidth(propWidth);
-        }
-    }, [objectX, propWidth]);
-    var _c = React.useState(objectX !== null && objectX !== void 0 ? objectX : 0), curX = _c[0], setCurX = _c[1];
-    var _d = React.useState(objectY !== null && objectY !== void 0 ? objectY : 0), curY = _d[0], setCurY = _d[1];
-    React.useEffect(function () {
-        if (objectX) {
-            setCurX(objectX);
-        }
-    }, [objectX]);
-    React.useEffect(function () {
-        if (objectY) {
-            setCurY(objectY);
-        }
-    }, [objectY]);
-    var framePadding = propFramePadding || 0;
-    var r = 5;
-    var _e = React.useState(false), draggingRect = _e[0], setDraggingRect = _e[1];
-    var _f = React.useState(false), draggingCircle = _f[0], setDraggingCircle = _f[1];
-    var _g = React.useState(0), startX = _g[0], setStartX = _g[1];
-    var _h = React.useState(0), startY = _h[0], setStartY = _h[1];
-    var _j = React.useState(0), xFromMouse = _j[0], setXFromMouse = _j[1];
-    var _k = React.useState(0), yFromMouse = _k[0], setYFromMouse = _k[1];
-    var _l = React.useState(0), lastMoveTime = _l[0], setLastMoveTime = _l[1];
-    //set x by props.x
-    var getMousePosition = function (event) {
-        var elementBounding = propContainer.getBoundingClientRect();
-        //Coordinates of mouse on paper. 
-        var mousePosition = {
-            x: event.clientX - elementBounding.left,
-            y: event.clientY - elementBounding.top
-        };
-        return mousePosition;
-    };
-    var addRectHandleMouseDown = function (event) {
-        event.stopPropagation();
-        if (!draggingCircle) {
-            setDraggingRect(true);
-            setStartX(event.clientX);
-            setStartY(event.clientY);
-            var mousePosition = getMousePosition(event);
-            var xFromMouse_1 = (curX || 0) - mousePosition.x;
-            var yFromMouse_1 = (curY || 0) - mousePosition.y;
-            setXFromMouse(xFromMouse_1);
-            setYFromMouse(yFromMouse_1);
-        }
-        if (propOnMouseDown) {
-            propOnMouseDown(event);
-        }
-    };
-    var rectHandleMouseMove = React.useCallback(function (event) {
-        var mouseEvent = event;
-        if (draggingRect) {
-            //Coordinates of mouse on paper. 
-            var mousePosition = getMousePosition(mouseEvent);
-            var newX = mousePosition.x + xFromMouse;
-            var newY = mousePosition.y + yFromMouse;
-            if (propOnMove) {
-                setCurX(newX);
-                setCurY(newY);
-                propOnMove(newX, newY);
-                setLastMoveTime(Date.now());
-                setStartX(mouseEvent.clientX);
-                setStartY(mouseEvent.clientY);
-            }
-        }
-    }, [draggingRect, propOnMove, propMovingRate, startX, startY, lastMoveTime, xFromMouse, yFromMouse]);
-    React.useEffect(function () {
-        var addRectHandleMouseUp = function () {
-            setDraggingRect(false);
-            setXFromMouse(0);
-            setYFromMouse(0);
-        };
-        propContainer === null || propContainer === void 0 ? void 0 : propContainer.addEventListener('mousemove', rectHandleMouseMove);
-        propContainer === null || propContainer === void 0 ? void 0 : propContainer.addEventListener('mouseup', addRectHandleMouseUp);
-        return function () {
-            propContainer === null || propContainer === void 0 ? void 0 : propContainer.removeEventListener('mousemove', rectHandleMouseMove);
-            propContainer === null || propContainer === void 0 ? void 0 : propContainer.removeEventListener('mouseup', addRectHandleMouseUp);
-        };
-    }, [propContainer, rectHandleMouseMove]);
-    var circleHandleMouseDown = function (event) {
-        event.stopPropagation();
-        if (!draggingRect) {
-            setStartX(event.clientX);
-            setStartY(event.clientY);
-            setDraggingCircle(true);
-        }
-    };
-    React.useEffect(function () {
-        logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
-            draggingCircle: draggingCircle,
-            startX: startX,
-            startY: startY,
-            width: width,
-            height: height,
-            propMovingRate: propMovingRate
-        });
-        var circleHandleMouseMove = function (event) {
-            var mouseEvent = event;
-            if (draggingCircle) {
-                var offsetX = mouseEvent.clientX - startX;
-                var offsetY = mouseEvent.clientY - startY;
-                if (Date.now() - lastMoveTime < (propMovingRate || 0)) {
-                    return;
-                }
-                setStartX(mouseEvent.clientX);
-                setStartY(mouseEvent.clientY);
-                setLastMoveTime(Date.now());
-                var newWidth = width;
-                var newHeight = height;
-                if (propResizability.keepRatio) {
-                    var resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
-                    var increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
-                    offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
-                    offsetY = increasing ? resizingRatio * height : -resizingRatio * height;
-                }
-                newWidth += offsetX;
-                newHeight += offsetY;
-                if (newWidth < MIN_ELEMENT_SIZE) {
-                    newWidth = MIN_ELEMENT_SIZE;
-                }
-                if (newHeight < MIN_ELEMENT_SIZE) {
-                    newHeight = MIN_ELEMENT_SIZE;
-                }
-                setWidth(newWidth);
-                setHeight(newHeight);
-                if (propOnResize) {
-                    propOnResize(newWidth, newHeight);
-                }
-            }
-        };
-        var circleHandleMouseUp = function () {
-            setDraggingCircle(false);
-        };
-        var container = propContainer;
-        container.addEventListener('mousemove', circleHandleMouseMove);
-        container.addEventListener('mouseup', circleHandleMouseUp);
-        //logging the start of the circle handle mouse move
-        logger.debug('SelectionFrame: circleHandleMouseMove started', container);
-        return function () {
-            container.removeEventListener('mousemove', circleHandleMouseMove);
-            container.removeEventListener('mouseup', circleHandleMouseUp);
-            //logging the end of the circle handle mouse move
-            logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
-        };
-    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
-    var rectangleSize = Math.max(width, height);
-    var leftX = framePadding;
-    var topY = framePadding;
-    if (propAnchor === exports.PositioningAnchor.Center) {
-        leftX -= rectangleSize / 2;
-        topY -= rectangleSize / 2;
+/**
+ * Created by Alex Bol on 2/18/2017.
+ */
+
+/**
+ * Global constant DP_TOL is used for comparison of floating point numbers.
+ * It is set to 0.000001.
+ * @type {number}
+ */
+const DP_TOL = 0.000001;
+
+var utils = {
+    DP_TOL: DP_TOL,
+    /**
+     * Returns *true* if value comparable to zero
+     * @return {boolean}
+     */
+    EQ_0: function(x) {
+        return ( (x) < DP_TOL && (x) > -DP_TOL );
+    },
+    /**
+     * Returns *true* if two values are equal up to DP_TOL
+     * @return {boolean}
+     */
+    EQ: function(x,y) {
+        return ( (x)-(y) <  DP_TOL && (x)-(y) > -DP_TOL );
+    },
+    /**
+     * Returns *true* if first argument greater than second argument up to DP_TOL
+     * @return {boolean}
+     */
+    GT: (x,y) => {
+        return ( (x)-(y) >  DP_TOL );
+    },
+    /**
+     * Returns *true* if first argument greater than or equal to second argument up to DP_TOL
+     * @return {boolean}
+     */
+    GE: (x,y) => {
+        return ( (x)-(y) > -DP_TOL );
+    },
+    /**
+     * Returns *true* if first argument less than second argument up to DP_TOL
+     * @return {boolean}
+     */
+    LT: (x,y) => {
+        return ( (x)-(y) < -DP_TOL )
+    },
+    /**
+     * Returns *true* if first argument less than or equal to second argument up to DP_TOL
+     * @return {boolean}
+     */
+    LE: (x,y) => {
+        return ( (x)-(y) <  DP_TOL );
     }
-    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 }),
-        propResizability.enabled ?
-            (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
 };
 
-var useSelectionFrame = function (props) {
-    React.useEffect(function () {
-        //log selection frame rendering
-        if (props.targetSVGElement) {
-            console.debug('Rendering SelectionFrame for targetSVGElement:', props.targetSVGElement);
-        }
-        else {
-            console.warn('No targetSVGElement provided for SelectionFrame.');
-        }
-        if (props.targetSVGElement && props.container) {
-            //render SelectionFrame component to the parent element of the targetSVGElement            
-            if (props.container) {
-                var svg_1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                svg_1.style.overflow = 'visible';
-                svg_1.style.outline = 'none';
-                props.targetSVGElement.appendChild(svg_1);
-                var root_1 = createRoot(svg_1);
-                root_1.render(React.createElement(SelectionFrame, __assign({}, props, { container: props.container })));
-                return function () {
-                    root_1.unmount();
-                    if (props.targetSVGElement) {
-                        props.targetSVGElement.removeChild(svg_1);
-                    }
-                };
-            }
-        }
-    }, [props]);
-};
-
-var eventEmitter = new EventEmitter();
-var emitPaperClicked = function (ev) {
-    eventEmitter.emit(EVENT_NAME.PAPER_CLICK, ev);
-};
-var onPaperClicked = function (callback) {
-    eventEmitter.on(EVENT_NAME.PAPER_CLICK, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.PAPER_CLICK, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitPortMouseUp = function (ev, port, elementId) {
-    eventEmitter.emit(EVENT_NAME.PORT_MOUSE_UP, ev, port, elementId);
-};
-var onPortMouseUp = function (callback) {
-    eventEmitter.on(EVENT_NAME.PORT_MOUSE_UP, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.PORT_MOUSE_UP, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitPortMouseDown = function (ev, port, elementId) {
-    eventEmitter.emit(EVENT_NAME.PORT_MOUSE_DOWN, ev, port, elementId);
-};
-var onPortMouseDown = function (callback) {
-    eventEmitter.on(EVENT_NAME.PORT_MOUSE_DOWN, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.PORT_MOUSE_DOWN, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitPortMoved = function (port, elementId, oldPosition, newPosition) {
-    eventEmitter.emit(EVENT_NAME.PORT_MOVED, port, elementId, oldPosition, newPosition);
-};
-var onPortMoved = function (callback) {
-    eventEmitter.on(EVENT_NAME.PORT_MOVED, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.PORT_MOVED, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitElementMoved = function (element, oldPosition, newPosition) {
-    eventEmitter.emit("".concat(EVENT_NAME.ELEMENT_MOVED, "_").concat(element.id));
-};
-var onElementMoved = function (elementId, callback) {
-    eventEmitter.on("".concat(EVENT_NAME.ELEMENT_MOVED, "_").concat(elementId), callback);
-    var off = function () {
-        eventEmitter.off("".concat(EVENT_NAME.ELEMENT_MOVED, "_").concat(elementId), callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitElementResized = function (element, oldSize, newSize) {
-    eventEmitter.emit("".concat(EVENT_NAME.ELEMENT_RESIZED, "_").concat(element.id), oldSize, newSize);
-};
-var onElementResized = function (elementId, callback) {
-    eventEmitter.on("".concat(EVENT_NAME.ELEMENT_RESIZED, "_").concat(elementId), callback);
-    var off = function () {
-        eventEmitter.off("".concat(EVENT_NAME.ELEMENT_RESIZED, "_").concat(elementId), callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitCommandDeleteSelectedPort = function () {
-    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_PORT);
-};
-var onCommandDeleteSelectedPort = function (callback) {
-    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_PORT, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_PORT, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitCommandDeleteSelectedElement = function () {
-    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_ELEMENT);
-};
-var onCommandDeleteSelectedElement = function (callback) {
-    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_ELEMENT, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_ELEMENT, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitCommandDeleteSelectedLink = function () {
-    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_LINK);
-};
-var onCommandDeleteSelectedLink = function (callback) {
-    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_LINK, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_LINK, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitCommandDeleteSelectedText = function () {
-    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_TEXT);
-};
-var onCommandDeleteSelectedText = function (callback) {
-    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_TEXT, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_TEXT, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitElementLinkStarted = function (elementLink) {
-    eventEmitter.emit(EVENT_NAME.ELEMENT_LINK_STARTED, elementLink);
-};
-var onElementLinkStarted = function (callback) {
-    eventEmitter.on(EVENT_NAME.ELEMENT_LINK_STARTED, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.ELEMENT_LINK_STARTED, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitElementLinkEnded = function (elementLink) {
-    eventEmitter.emit(EVENT_NAME.ELEMENT_LINK_ENDED, elementLink);
-};
-var onElementLinkEnded = function (callback) {
-    eventEmitter.on(EVENT_NAME.ELEMENT_LINK_ENDED, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.ELEMENT_LINK_ENDED, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitElementSelected = function (element) {
-    eventEmitter.emit(EVENT_NAME.ELEMENT_SELECTED, element);
-};
-var onElementSelected = function (callback) {
-    eventEmitter.on(EVENT_NAME.ELEMENT_SELECTED, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.ELEMENT_SELECTED, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitCommandRenderElement = function (elementId) {
-    eventEmitter.emit(EVENT_NAME.COMMAND_RENDER_ELEMENT, elementId);
-};
-var onCommandRenderElement = function (callback) {
-    eventEmitter.on(EVENT_NAME.COMMAND_RENDER_ELEMENT, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.COMMAND_RENDER_ELEMENT, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitPortSelected = function (port, elementId) {
-    eventEmitter.emit(EVENT_NAME.PORT_SELECTED, port, elementId);
-};
-var onPortSelected = function (callback) {
-    eventEmitter.on(EVENT_NAME.PORT_SELECTED, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.PORT_SELECTED, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitCommandRenderPort = function (portId, elementId) {
-    eventEmitter.emit(EVENT_NAME.COMMAND_RENDER_PORT, portId, elementId);
-};
-var onCommandRenderPort = function (callback) {
-    eventEmitter.on(EVENT_NAME.COMMAND_RENDER_PORT, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.COMMAND_RENDER_PORT, callback);
-    };
-    return {
-        off: off
-    };
-};
-var emitTextSelected = function (text) {
-    eventEmitter.emit(EVENT_NAME.TEXT_SELECTED, text);
-};
-var onTextSelected = function (callback) {
-    eventEmitter.on(EVENT_NAME.TEXT_SELECTED, callback);
-    var off = function () {
-        eventEmitter.off(EVENT_NAME.TEXT_SELECTED, callback);
-    };
-    return {
-        off: off
-    };
-};
-var paperEventEmitterContext = React.createContext({
-    emitter: eventEmitter,
-    emitPaperClicked: emitPaperClicked,
-    onPaperClicked: onPaperClicked,
-    emitPortMouseUp: emitPortMouseUp,
-    onPortMouseUp: onPortMouseUp,
-    emitPortMouseDown: emitPortMouseDown,
-    onPortMouseDown: onPortMouseDown,
-    emitPortMoved: emitPortMoved,
-    onPortMoved: onPortMoved,
-    emitPortSelected: emitPortSelected,
-    onPortSelected: onPortSelected,
-    emitElementMoved: emitElementMoved,
-    onElementMoved: onElementMoved,
-    emitElementResized: emitElementResized,
-    onElementResized: onElementResized,
-    emitElementSelected: emitElementSelected,
-    onElementSelected: onElementSelected,
-    emitCommandRenderElement: emitCommandRenderElement,
-    onCommandRenderElement: onCommandRenderElement,
-    emitCommandDeleteSelectedPort: emitCommandDeleteSelectedPort,
-    onCommandDeleteSelectedPort: onCommandDeleteSelectedPort,
-    emitCommandDeleteSelectedElement: emitCommandDeleteSelectedElement,
-    onCommandDeleteSelectedElement: onCommandDeleteSelectedElement,
-    emitCommandDeleteSelectedLink: emitCommandDeleteSelectedLink,
-    onCommandDeleteSelectedLink: onCommandDeleteSelectedLink,
-    emitCommandDeleteSelectedText: emitCommandDeleteSelectedText,
-    onCommandDeleteSelectedText: onCommandDeleteSelectedText,
-    emitElementLinkStarted: emitElementLinkStarted,
-    onElementLinkStarted: onElementLinkStarted,
-    emitElementLinkEnded: emitElementLinkEnded,
-    onElementLinkEnded: onElementLinkEnded,
-    emitTextSelected: emitTextSelected,
-    onTextSelected: onTextSelected,
-    emitCommandRenderPort: emitCommandRenderPort,
-    onCommandRenderPort: onCommandRenderPort,
-});
-
-var editorConfigurationContext = React.createContext(null);
-var useEditorConfiguration = function () {
-    var context = React.useContext(editorConfigurationContext);
-    if (!context) {
-        throw new Error("useEditorConfiguration must be used within an EditorConfigurationProvider");
-    }
-    return context;
-};
-var EditorConfigurationContextProvider = editorConfigurationContext.Provider;
-
-var Text = React.forwardRef(function (_a, ref) {
-    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.selectable, selectable = _b === void 0 ? true : _b, _c = _a.align, align = _c === void 0 ? exports.TextAlign.left : _c, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
-    var _d = React.useState(false), isSelected = _d[0], setIsSelected = _d[1];
-    var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
-    var textFontSize = useEditorConfiguration().textFontSize;
-    var absolutePosition = React.useMemo(function () {
-        var _a, _b;
-        return {
-            x: ((_a = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x) !== null && _a !== void 0 ? _a : 0) + x,
-            y: ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0) + y,
-        };
-    }, [x, y, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y]);
-    var svgRef = React.useRef();
-    var _f = React.useContext(paperEventEmitterContext), onPaperClicked = _f.onPaperClicked, emitTextSelected = _f.emitTextSelected, onPortSelected = _f.onPortSelected, onElementSelected = _f.onElementSelected, onTextSelected = _f.onTextSelected;
-    React.useEffect(function () {
-        var paperClickListener = onPaperClicked(function (ev) {
-            var _a;
-            var textareaELe = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
-            if (ev.target !== textareaELe) {
-                setIsSelected(false);
-                setIsEditing(false);
-            }
-        });
-        var portSelectedListener = onPortSelected(function (port) {
-            setIsSelected(false);
-            setIsEditing(false);
-        });
-        var elementSelectedListener = onElementSelected(function (element) {
-            setIsSelected(false);
-            setIsEditing(false);
-        });
-        var textSelectedListener = onTextSelected(function (text) {
-            if (text.id !== id) {
-                setIsSelected(false);
-                setIsEditing(false);
-            }
-        });
-        return function () {
-            paperClickListener.off();
-            portSelectedListener.off();
-            elementSelectedListener.off();
-            textSelectedListener.off();
-        };
-    }, []);
-    //Handle click on svg element
-    var handleClick = function (ev) {
-        if (!selectable)
-            return;
-        ev.stopPropagation();
-        var position = {
-            x: x,
-            y: y,
-        };
-        var text = {
-            id: id,
-            content: content,
-            position: position,
-            size: {
-                width: width,
-                height: height,
-            },
-            editable: editable
-        };
-        setIsSelected(true);
-        onSelected && onSelected(text);
-        emitTextSelected(text);
-    };
-    var handleChangeText = function (ev) {
-        if (!editable)
-            return;
-        onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
-    };
-    useSelectionFrame({
-        objectX: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.x,
-        objectY: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.y,
-        container: container,
-        targetSVGElement: (isSelected && svgRef.current) ? svgRef.current : undefined,
-        resizability: {
-            enabled: onResized ? true : false,
-            keepRatio: false,
-        },
-        onMove: onMoved,
-        onResize: onResized,
-        strokeWidth: 3,
-    });
-    var textAlign = React.useMemo(function () {
-        switch (align) {
-            case exports.TextAlign.left:
-                return 'left';
-            case exports.TextAlign.right:
-                return 'right';
-            case exports.TextAlign.center:
-                return 'center';
-            default:
-                return 'left';
-        }
-    }, [align]);
-    var fontSize = fontSizeProp || textFontSize || TEXT_FONT_SIZE;
-    var borderStyle = border || 'none';
-    return (React.createElement("svg", { style: {
-            overflow: "visible",
-            pointerEvents: selectable ? undefined : 'none',
-        }, x: x, y: y, ref: function (node) {
-            svgRef.current = node;
-            if (typeof ref === 'function') {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, onClick: handleClick },
-        React.createElement("foreignObject", { width: width, height: height, style: {
-                overflow: 'visible',
-                userSelect: 'none',
-                WebkitUserSelect: 'none',
-                msUserSelect: 'none'
-            } },
-            React.createElement("div", { style: {
-                    width: '100%',
-                    height: '100%',
-                    borderWidth: '1px',
-                    borderColor: '#ccc',
-                    borderStyle: borderStyle,
-                    // whiteSpace: 'pre-wrap',
-                    boxSizing: 'border-box',
-                } },
-                React.createElement("textarea", { style: {
-                        fontFamily: 'initial',
-                        display: 'inline-block',
-                        width: '100%',
-                        height: '100%',
-                        overflow: 'hidden',
-                        border: 'none',
-                        background: 'transparent',
-                        outline: 'none',
-                        resize: 'none',
-                        textAlign: textAlign,
-                        fontSize: fontSize,
-                    }, readOnly: !isEditing, onDoubleClick: function () {
-                        if (editable) {
-                            setIsEditing(true);
-                        }
-                    }, value: content, onChange: handleChangeText })))));
-});
-var Text$1 = React.memo(Text);
-
-/**
- * Created by Alex Bol on 2/18/2017.
- */
-
-/**
- * Global constant DP_TOL is used for comparison of floating point numbers.
- * It is set to 0.000001.
- * @type {number}
- */
-const DP_TOL = 0.000001;
-
-var utils = {
-    DP_TOL: DP_TOL,
-    /**
-     * Returns *true* if value comparable to zero
-     * @return {boolean}
-     */
-    EQ_0: function(x) {
-        return ( (x) < DP_TOL && (x) > -DP_TOL );
-    },
-    /**
-     * Returns *true* if two values are equal up to DP_TOL
-     * @return {boolean}
-     */
-    EQ: function(x,y) {
-        return ( (x)-(y) <  DP_TOL && (x)-(y) > -DP_TOL );
-    },
-    /**
-     * Returns *true* if first argument greater than second argument up to DP_TOL
-     * @return {boolean}
-     */
-    GT: (x,y) => {
-        return ( (x)-(y) >  DP_TOL );
-    },
-    /**
-     * Returns *true* if first argument greater than or equal to second argument up to DP_TOL
-     * @return {boolean}
-     */
-    GE: (x,y) => {
-        return ( (x)-(y) > -DP_TOL );
-    },
-    /**
-     * Returns *true* if first argument less than second argument up to DP_TOL
-     * @return {boolean}
-     */
-    LT: (x,y) => {
-        return ( (x)-(y) < -DP_TOL )
-    },
-    /**
-     * Returns *true* if first argument less than or equal to second argument up to DP_TOL
-     * @return {boolean}
-     */
-    LE: (x,y) => {
-        return ( (x)-(y) <  DP_TOL );
-    }
-};
-
-/**
- * Created by Alex Bol on 2/19/2017.
- */
-
-var errors = {
-    ILLEGAL_PARAMETERS: new ReferenceError('Illegal Parameters'),
-    ZERO_DIVISION: new Error('Zero division')
+/**
+ * Created by Alex Bol on 2/19/2017.
+ */
+
+var errors = {
+    ILLEGAL_PARAMETERS: new ReferenceError('Illegal Parameters'),
+    ZERO_DIVISION: new Error('Zero division')
 };
 
 var matrix = function(Flatten) {
@@ -7442,43 +6853,6 @@ var checkPositionOnLine = function (position, line) {
     return _line.contains(point);
 };
 
-// Calculate the position of the 4 vertices of a rectangle relative to its parent svg
-var getRectangleCorners = function (rectSVG) {
-    var ownerSVG = rectSVG.ownerSVGElement;
-    var rectStrokeWidth = Number(rectSVG.getAttribute('stroke-width')) || 0;
-    var strokeWidthOffset = rectStrokeWidth / 2;
-    if (!ownerSVG) {
-        throw new Error('Rectangle does not wrapper by svg.');
-    }
-    var ownerX = ownerSVG.x.baseVal.value;
-    var ownerY = ownerSVG.y.baseVal.value;
-    var ownerWidth = ownerSVG.width.baseVal.value;
-    var ownerHeight = ownerSVG.height.baseVal.value;
-    var a = { x: ownerX + strokeWidthOffset, y: ownerY + strokeWidthOffset };
-    var b = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + strokeWidthOffset };
-    var c = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
-    var d = { x: ownerX + strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
-    return [a, b, c, d];
-};
-//find rotation angle of svg element on g element
-var getElementRotationInfo = function (element) {
-    var gElement = element;
-    var rotationAngle = 0;
-    while (!(gElement instanceof SVGGElement)) {
-        gElement = gElement.parentElement;
-    }
-    var transform = gElement.getAttribute('transform');
-    if (transform) {
-        // Match the rotation value using a regular expression
-        var rotateMatch = transform.match(/rotate\(([-\d.]+)(?:\s+[-\d.]+\s+[-\d.]+)?\)/);
-        if (rotateMatch) {
-            // The first capture group is the rotation angle
-            rotationAngle = parseFloat(rotateMatch[1]);
-        }
-    }
-    return rotationAngle;
-};
-
 // const topLeftOffsetOfSquareHoldingRect = (x: number, y: number, rectWidth: number, rectHeight: number, rotation?: number): IPosition => {
 //     rotation = rotation || 0;
 //     const rotationInRadians = rotation * Math.PI / 180;
@@ -7532,8 +6906,213 @@ function calculateAngleWithOx(pStart, pEnd) {
     if (angleInDegrees < 0) {
         angleInDegrees += 360;
     }
-    return angleInDegrees;
-}
+    return angleInDegrees;
+}
+
+// Render the svg <path> element
+function getCurvePathData(points, smoothing, closed) {
+    if (smoothing === void 0) { smoothing = 0.2; }
+    // append first 2 points for closed paths
+    if (closed) {
+        points = points.concat(points.slice(0, 2));
+    }
+    // Properties of a line
+    var line = function (pointA, pointB) {
+        var lengthX = pointB.x - pointA.x;
+        var lengthY = pointB.y - pointA.y;
+        return {
+            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+            angle: Math.atan2(lengthY, lengthX)
+        };
+    };
+    // Position of a control point
+    var controlPoint = function (current, previous, next, reverse) {
+        var p = previous || current;
+        var n = next || current;
+        var o = line(p, n);
+        var angle = o.angle + (reverse ? Math.PI : 0);
+        var length = o.length * smoothing;
+        var x = current.x + Math.cos(angle) * length;
+        var y = current.y + Math.sin(angle) * length;
+        return { x: x, y: y };
+    };
+    var pathData = [];
+    pathData.push({ type: "M", values: [points[0].x, points[0].y] });
+    for (var i = 1; i < points.length; i++) {
+        var point = points[i];
+        var cp1 = controlPoint(points[i - 1], points[i - 2], point);
+        var cp2 = controlPoint(point, points[i - 1], points[i + 1], true);
+        var command = {
+            type: "C",
+            values: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]
+        };
+        pathData.push(command);
+    }
+    // copy last commands 1st controlpoint to first curveto
+    if (closed) {
+        var comLast = pathData[pathData.length - 1];
+        var valuesLastC = comLast.values;
+        var valuesFirstC = pathData[1].values;
+        pathData[1] = {
+            type: "C",
+            values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
+        };
+        // delete last curveto
+        pathData = pathData.slice(0, pathData.length - 1);
+    }
+    return pathData;
+}
+// convert pathdata to d attribute string
+function pathDataToD(pathData, decimals) {
+    if (decimals === void 0) { decimals = 3; }
+    var d = pathData
+        .map(function (com) {
+        return "".concat(com.type).concat(com.values.map(function (value) { return +value.toFixed(decimals); }).join(" "));
+    })
+        .join(" ");
+    return d;
+}
+function createSmoothPathString(points, smoothing, close) {
+    var pathData = getCurvePathData(points, smoothing, close);
+    var pathString = pathDataToD(pathData);
+    return pathString;
+}
+// a helper function to measure the distance between 2 points
+function dist(p1, p2) {
+    var dx = p2.x - p1.x;
+    var dy = p2.y - p1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+//find distance from starting point of path to a point
+function getLengthForPoint(p, thePath, precision) {
+    if (precision === void 0) { precision = 50; }
+    var pathLength = thePath.getTotalLength();
+    var theRecord = pathLength; //length of path
+    var division = pathLength / precision;
+    var theSegment;
+    for (var i = 0; i < precision; i++) {
+        // get a point on the path for thia distance
+        var _p = thePath.getPointAtLength(i * division);
+        // get the distance between the new point _p and the point p
+        var theDistance = dist(_p, p);
+        if (theDistance < theRecord) {
+            // if the distance is smaller than the record set the new record
+            theRecord = theDistance;
+            theSegment = i;
+        }
+    }
+    return (theSegment * division);
+}
+//Add points to the list of points in the correct position
+function addPointToList(point, listPoints, path) {
+    var getAddIndex = function (startIndex, endIndex) {
+        //Add in the middle if there are only 2 points
+        if ((endIndex - startIndex) === 1) {
+            return startIndex + 1;
+        }
+        var middleIndex = Math.ceil((startIndex + endIndex) / 2);
+        var lengthOfMiddlePoint = getLengthForPoint(listPoints[middleIndex], path); //distance from start point to mid point
+        var lengthOfAddedPoint = getLengthForPoint(point, path); //distance from adding point to mid point
+        //compare if lengthOfMiddlePoint is less than lengthOfAddedPoint, 
+        //then new point can be added in the range of mid point to end point, 
+        //otherwise it can be added in the range of start point to middle point.
+        if (lengthOfAddedPoint < lengthOfMiddlePoint) {
+            return getAddIndex(startIndex, middleIndex);
+        }
+        else {
+            return getAddIndex(middleIndex, endIndex);
+        }
+    };
+    var addedIndex = getAddIndex(0, listPoints.length - 1);
+    listPoints.splice(addedIndex, 0, point);
+    return __spreadArray([], listPoints, true);
+}
+// Parse the d attribute of a path element and extract points from path commands
+function getPointsFromPathData(dAttribute) {
+    var points = [];
+    // Remove extra whitespace and split by command letters
+    var cleanD = dAttribute.replace(/\s+/g, ' ').trim();
+    // Regular expression to match path commands (M, L, C, etc.) and their values
+    var commandRegex = /([MLCZmlcz])\s*([^MLCZmlcz]*)/g;
+    var match;
+    while ((match = commandRegex.exec(cleanD)) !== null) {
+        var command = match[1].toUpperCase();
+        var values = match[2].trim();
+        if (values) {
+            var coords = values.split(/[\s,]+/).map(Number).filter(function (num) { return !isNaN(num); });
+            switch (command) {
+                case 'M': // Move to
+                    if (coords.length >= 2) {
+                        points.push({ x: coords[0], y: coords[1] });
+                    }
+                    break;
+                case 'L': // Line to
+                    if (coords.length >= 2) {
+                        points.push({ x: coords[0], y: coords[1] });
+                    }
+                    break;
+                case 'C': // Cubic bezier curve
+                    // For cubic curves, we take the end point (last 2 coordinates)
+                    if (coords.length >= 6) {
+                        points.push({ x: coords[4], y: coords[5] });
+                    }
+                    break;
+                case 'Q': // Quadratic bezier curve
+                    // For quadratic curves, we take the end point (last 2 coordinates)
+                    if (coords.length >= 4) {
+                        points.push({ x: coords[2], y: coords[3] });
+                    }
+                    break;
+            }
+        }
+    }
+    return points;
+}
+// Get points from a path element's d attribute
+function getPointsFromPathElement(pathElement) {
+    var dAttribute = pathElement.getAttribute('d');
+    if (!dAttribute) {
+        return [];
+    }
+    return getPointsFromPathData(dAttribute);
+}
+
+// Calculate the position of the 4 vertices of a rectangle relative to its parent svg
+var getRectangleCorners = function (rectSVG) {
+    var ownerSVG = rectSVG.ownerSVGElement;
+    var rectStrokeWidth = Number(rectSVG.getAttribute('stroke-width')) || 0;
+    var strokeWidthOffset = rectStrokeWidth / 2;
+    if (!ownerSVG) {
+        throw new Error('Rectangle does not wrapper by svg.');
+    }
+    var ownerX = ownerSVG.x.baseVal.value;
+    var ownerY = ownerSVG.y.baseVal.value;
+    var ownerWidth = ownerSVG.width.baseVal.value;
+    var ownerHeight = ownerSVG.height.baseVal.value;
+    var a = { x: ownerX + strokeWidthOffset, y: ownerY + strokeWidthOffset };
+    var b = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + strokeWidthOffset };
+    var c = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
+    var d = { x: ownerX + strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
+    return [a, b, c, d];
+};
+//find rotation angle of svg element on g element
+var getElementRotationInfo = function (element) {
+    var gElement = element;
+    var rotationAngle = 0;
+    while (!(gElement instanceof SVGGElement)) {
+        gElement = gElement.parentElement;
+    }
+    var transform = gElement.getAttribute('transform');
+    if (transform) {
+        // Match the rotation value using a regular expression
+        var rotateMatch = transform.match(/rotate\(([-\d.]+)(?:\s+[-\d.]+\s+[-\d.]+)?\)/);
+        if (rotateMatch) {
+            // The first capture group is the rotation angle
+            rotationAngle = parseFloat(rotateMatch[1]);
+        }
+    }
+    return rotationAngle;
+};
 
 /**
  * Check if position 1 is within the radius r of position 2
@@ -7573,591 +7152,1184 @@ var findNearestPointOnSegment = function (position, linePoints) {
     var segment = Flatten$1.segment(Flatten$1.point(beginPosition.x, beginPosition.y), Flatten$1.point(endPosition.x, endPosition.y));
     var _a = point.distanceTo(segment); _a[0]; var segmentFromPointToSegment = _a[1];
     return {
-        x: segmentFromPointToSegment.pe.x,
-        y: segmentFromPointToSegment.pe.y
+        x: segmentFromPointToSegment.pe.x,
+        y: segmentFromPointToSegment.pe.y
+    };
+};
+/**
+ * From 1 point find projected Point on the line segments so that the distance between 2 points is shortest.
+ * @param position
+ * @param lines
+ * @returns
+ */
+var findNearestProjectedPoint = function (position, lines) {
+    var possiblePoints = lines.map(function (p) { return findNearestPointOnSegment(position, p); });
+    var nearestPoint = findNearestPosition(possiblePoints, position);
+    return nearestPoint;
+};
+/**
+ * Check if a point is inside a polygon
+ * @param position
+ * @param polygonPoints
+ * @returns
+ */
+var checkPointContainsPolygon = function (position, polygonPoints) {
+    var polygon = new Flatten$1.Polygon();
+    polygon.addFace(polygonPoints.map(function (p) { return Flatten$1.point(p.x, p.y); }));
+    return polygon.contains(Flatten$1.point(position.x, position.y));
+};
+/**
+ * @param ele : IElement
+ * @returns Flatten.Polygon
+ */
+var makePolygonOfElement = function (ele) {
+    var polygon = new Flatten$1.Polygon();
+    var vertexes = getFourVertexesOfBBoxFromElement(ele);
+    polygon.addFace([
+        Flatten$1.point(vertexes[0].x, vertexes[0].y),
+        Flatten$1.point(vertexes[1].x, vertexes[1].y),
+        Flatten$1.point(vertexes[2].x, vertexes[2].y),
+        Flatten$1.point(vertexes[3].x, vertexes[3].y),
+    ]);
+    return polygon;
+};
+var getIntersectionPositions = function (pointStart, pointEnd, ele) {
+    var segment = Flatten$1.segment(Flatten$1.point(pointStart.x, pointStart.y), Flatten$1.point(pointEnd.x, pointEnd.y));
+    var polygonOfEle = makePolygonOfElement(ele);
+    /* Remove duplicate positions from the result of finding the intersection points between a segment and a polygon.
+    It then maps the intersection points to objects with rounded x and y coordinates. */
+    return removeDuplicatePosition(segment.intersect(polygonOfEle).map(function (p) { return ({ x: Math.round(p.x), y: Math.round(p.y) }); }));
+};
+//Find the first intersection point of the line starting from startPosition to endPosition on the elements
+var getFirstIntersection = function (startPosition, endPosition, elements) {
+    if (!endPosition)
+        return undefined;
+    var result;
+    for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
+        var element = elements_1[_i];
+        //Find intersection positions on element
+        var intersectionPoints = getIntersectionPositions(startPosition, endPosition, element);
+        //If the line intersects at 1 point (can be the starting point or the ending point) or no point then ignore
+        if (intersectionPoints.length <= 1) {
+            continue;
+        }
+        var selectablePointsList = __spreadArray([], intersectionPoints, true);
+        //If a point is found on a previous element, add it to the list of intersection points on the current element.
+        if (result === null || result === void 0 ? void 0 : result.nearestIntersection) {
+            selectablePointsList.push(result.nearestIntersection);
+        }
+        var nearest = findNearestPosition(selectablePointsList, startPosition);
+        //If the closest intersection point to the starting point is not found or the new point is different from the previously found point, set a new value.
+        if (!(result === null || result === void 0 ? void 0 : result.nearestIntersection) || !checkSamePosition(nearest, result.nearestIntersection)) {
+            result = {
+                element: element,
+                intersectionPointsList: intersectionPoints,
+                nearestIntersection: nearest,
+            };
+        }
+    }
+    return result;
+};
+//Find a point next to an element from a point on the element
+var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
+    var translationOffset = 20;
+    var _a = getFourVertexesOfBBoxFromElement(ele), vertex1Position = _a[0], vertex2Position = _a[1], vertex3Position = _a[2], vertex4Position = _a[3];
+    var replacementPosition = null;
+    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
+        //Cut at vertex 1 of bbox, move out a distance x,y
+        replacementPosition = {
+            x: vertex1Position.x - translationOffset,
+            y: vertex1Position.y - translationOffset,
+        };
+    }
+    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
+        //Cut at vertex 2 of bbox, move out a distance x,y
+        replacementPosition = {
+            x: vertex2Position.x + translationOffset,
+            y: vertex2Position.y - translationOffset,
+        };
+    }
+    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
+        //Cut at vertex 3 of bbox, move out a distance x,y
+        replacementPosition = {
+            x: vertex3Position.x + translationOffset,
+            y: vertex3Position.y + translationOffset,
+        };
+    }
+    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
+        //Cut at vertex 4 of bbox, move out a distance x,y
+        replacementPosition = {
+            x: vertex4Position.x - translationOffset,
+            y: vertex4Position.y + translationOffset,
+        };
+    }
+    else if (checkPositionOnLine(intersectedPosition, [vertex1Position, vertex2Position])) {
+        //cut top edge, move left or right
+        var lineOfVertex12 = Flatten$1.line(Flatten$1.point(vertex1Position.x, vertex1Position.y), Flatten$1.point(vertex2Position.x, vertex2Position.y));
+        //Check if the line lies on the edge of the bbox then move the starting point out 1 distance perpendicular to the edge.
+        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex12)[0] === 0 &&
+            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex12)[0] === 0) {
+            //lie on a straight line 1-2
+            replacementPosition = {
+                x: intersectedPosition.x,
+                y: intersectedPosition.y - translationOffset,
+            };
+        }
+        else {
+            //Translate to the left of vertex 1
+            var leftPosition = {
+                x: vertex1Position.x - translationOffset,
+                y: vertex1Position.y,
+            };
+            //Translate to the right of vertex 2
+            var rightPosition = {
+                x: vertex2Position.x + translationOffset,
+                y: vertex2Position.y,
+            };
+            replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
+        }
+    }
+    else if (checkPositionOnLine(intersectedPosition, [vertex3Position, vertex4Position])) {
+        //cut bottom edge, move left or right
+        var lineOfVertex34 = Flatten$1.line(Flatten$1.point(vertex3Position.x, vertex3Position.y), Flatten$1.point(vertex4Position.x, vertex4Position.y));
+        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex34)[0] === 0 &&
+            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex34)[0] === 0) {
+            //lie on a straight line 3-4
+            replacementPosition = {
+                x: intersectedPosition.x,
+                y: intersectedPosition.y + translationOffset,
+            };
+        }
+        else {
+            //Translate to the left of vertex 4
+            var leftPosition = {
+                x: vertex4Position.x - translationOffset,
+                y: vertex4Position.y,
+            };
+            //Translate to the right of vertex 3
+            var rightPosition = {
+                x: vertex3Position.x + translationOffset,
+                y: vertex3Position.y,
+            };
+            replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
+        }
+    }
+    else if (checkPositionOnLine(intersectedPosition, [vertex1Position, vertex4Position])) {
+        //cut left edge, move up or down
+        var lineOfVertex14 = Flatten$1.line(Flatten$1.point(vertex1Position.x, vertex1Position.y), Flatten$1.point(vertex4Position.x, vertex4Position.y));
+        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex14)[0] === 0 &&
+            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex14)[0] === 0) {
+            //lie on a straight line 1-4
+            replacementPosition = {
+                x: intersectedPosition.x - translationOffset,
+                y: intersectedPosition.y,
+            };
+        }
+        else {
+            //Translate to the top of vertex 1
+            var topPosition = {
+                x: vertex1Position.x,
+                y: vertex1Position.y - translationOffset,
+            };
+            //Translate to the bottom of vertex 4
+            var bottomPosition = {
+                x: vertex4Position.x,
+                y: vertex4Position.y + translationOffset,
+            };
+            replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
+        }
+    }
+    else if (checkPositionOnLine(intersectedPosition, [vertex2Position, vertex3Position])) {
+        //cut right edge, move up or down
+        var lineOfVertex23 = Flatten$1.line(Flatten$1.point(vertex2Position.x, vertex2Position.y), Flatten$1.point(vertex3Position.x, vertex3Position.y));
+        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex23)[0] === 0 &&
+            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex23)[0] === 0) {
+            //lie on a straight line 2-3
+            replacementPosition = {
+                x: intersectedPosition.x + translationOffset,
+                y: intersectedPosition.y,
+            };
+        }
+        else {
+            //Translate to the top of vertex 2
+            var topPosition = {
+                x: vertex2Position.x,
+                y: vertex2Position.y - translationOffset,
+            };
+            //Translate to the bottom of vertex 3
+            var bottomPosition = {
+                x: vertex3Position.x,
+                y: vertex3Position.y + translationOffset,
+            };
+            replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
+        }
+    }
+    return replacementPosition;
+};
+// export const getRelativePosition = (clientPosition: IPosition, relativeElement: Element): IPosition => {
+//     const relativeRect = relativeElement.getBoundingClientRect();
+//     return {
+//         x: clientPosition.x - relativeRect.left,
+//         y: clientPosition.y - relativeRect.top,
+//     }
+// }
+var getFourVertexesOfBBoxFromElement = function (element) {
+    var absolutePosition = getAbsolutePosition(element);
+    var vertex1Position = {
+        x: absolutePosition.x,
+        y: absolutePosition.y
+    };
+    var vertex2Position = {
+        x: absolutePosition.x + element.size.width,
+        y: absolutePosition.y
+    };
+    var vertex3Position = {
+        x: absolutePosition.x + element.size.width,
+        y: absolutePosition.y + element.size.height
+    };
+    var vertex4Position = {
+        x: absolutePosition.x,
+        y: absolutePosition.y + element.size.height
+    };
+    return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
+};
+//get absolute position of element
+var getAbsolutePosition = function (element) {
+    var parentElement = element.parentElement;
+    var elemenetPositionWithTopLeftAnchor = {
+        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 (!parentElement) {
+        return __assign({}, elemenetPositionWithTopLeftAnchor);
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    var x = elemenetPositionWithTopLeftAnchor.x + absoluteParentElement.x;
+    var y = elemenetPositionWithTopLeftAnchor.y + absoluteParentElement.y;
+    return {
+        x: x,
+        y: y,
     };
 };
-/**
- * From 1 point find projected Point on the line segments so that the distance between 2 points is shortest.
- * @param position
- * @param lines
- * @returns
- */
-var findNearestProjectedPoint = function (position, lines) {
-    var possiblePoints = lines.map(function (p) { return findNearestPointOnSegment(position, p); });
-    var nearestPoint = findNearestPosition(possiblePoints, position);
-    return nearestPoint;
-};
-/**
- * Check if a point is inside a polygon
- * @param position
- * @param polygonPoints
- * @returns
- */
-var checkPointContainsPolygon = function (position, polygonPoints) {
-    var polygon = new Flatten$1.Polygon();
-    polygon.addFace(polygonPoints.map(function (p) { return Flatten$1.point(p.x, p.y); }));
-    return polygon.contains(Flatten$1.point(position.x, position.y));
+//get absolute position of element
+var getPortAbsolutePosition = function (port, element) {
+    var elementAbsolutePosition = getAbsolutePosition(element);
+    return {
+        x: elementAbsolutePosition.x + port.position.x,
+        y: elementAbsolutePosition.y + port.position.y,
+    };
 };
-/**
- * @param ele : IElement
- * @returns Flatten.Polygon
- */
-var makePolygonOfElement = function (ele) {
-    var polygon = new Flatten$1.Polygon();
-    var vertexes = getFourVertexesOfBBoxFromElement(ele);
-    polygon.addFace([
-        Flatten$1.point(vertexes[0].x, vertexes[0].y),
-        Flatten$1.point(vertexes[1].x, vertexes[1].y),
-        Flatten$1.point(vertexes[2].x, vertexes[2].y),
-        Flatten$1.point(vertexes[3].x, vertexes[3].y),
-    ]);
-    return polygon;
+var transformAbsPositionToElementRelativePosition = function (position, element) {
+    var parentElement = element.parentElement;
+    if (!parentElement) {
+        return position;
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    var result = {
+        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;
+    }
+    return result;
 };
-var getIntersectionPositions = function (pointStart, pointEnd, ele) {
-    var segment = Flatten$1.segment(Flatten$1.point(pointStart.x, pointStart.y), Flatten$1.point(pointEnd.x, pointEnd.y));
-    var polygonOfEle = makePolygonOfElement(ele);
-    /* Remove duplicate positions from the result of finding the intersection points between a segment and a polygon.
-    It then maps the intersection points to objects with rounded x and y coordinates. */
-    return removeDuplicatePosition(segment.intersect(polygonOfEle).map(function (p) { return ({ x: Math.round(p.x), y: Math.round(p.y) }); }));
+var transformAbsPositionToRelativePositionInsideElement = function (absolutePosition, parentAbsolutePosition) {
+    var _a, _b;
+    var position = {
+        x: absolutePosition.x - ((_a = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x) !== null && _a !== void 0 ? _a : 0),
+        y: absolutePosition.y - ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0),
+    };
+    return position;
 };
-//Find the first intersection point of the line starting from startPosition to endPosition on the elements
-var getFirstIntersection = function (startPosition, endPosition, elements) {
-    if (!endPosition)
-        return undefined;
-    var result;
-    for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
-        var element = elements_1[_i];
-        //Find intersection positions on element
-        var intersectionPoints = getIntersectionPositions(startPosition, endPosition, element);
-        //If the line intersects at 1 point (can be the starting point or the ending point) or no point then ignore
-        if (intersectionPoints.length <= 1) {
-            continue;
+var correctPortPositionInElement = function (elementRelativePosition, elementWidth, elementHeight, portMoveableAreas, portSlideRailSVGClassName, element) {
+    //Normalize a point so that it can lie exactly on an area
+    var normalizePortPositionOnMoveableAreas = function (moveableAreas, position) {
+        var lines = moveableAreas.filter(function (area) { return area.length === 2; });
+        var polygons = moveableAreas.filter(function (area) { return area.length >= 3; });
+        var normalizedPosition;
+        //If moveableAreas is lines
+        if (lines.length > 0) {
+            var newPosition_1 = findNearestProjectedPoint({ x: position.x, y: position.y }, lines);
+            if (newPosition_1) {
+                normalizedPosition = newPosition_1;
+            }
         }
-        var selectablePointsList = __spreadArray([], intersectionPoints, true);
-        //If a point is found on a previous element, add it to the list of intersection points on the current element.
-        if (result === null || result === void 0 ? void 0 : result.nearestIntersection) {
-            selectablePointsList.push(result.nearestIntersection);
+        //If moveableAreas is polygons
+        else if (polygons.length > 0) {
+            var newPosition_2 = { x: position.x, y: position.y };
+            var isContainsInPolygons = polygons.some(function (p) { return checkPointContainsPolygon(newPosition_2, p); });
+            if (isContainsInPolygons) {
+                normalizedPosition = newPosition_2;
+            }
         }
-        var nearest = findNearestPosition(selectablePointsList, startPosition);
-        //If the closest intersection point to the starting point is not found or the new point is different from the previously found point, set a new value.
-        if (!(result === null || result === void 0 ? void 0 : result.nearestIntersection) || !checkSamePosition(nearest, result.nearestIntersection)) {
-            result = {
-                element: element,
-                intersectionPointsList: intersectionPoints,
-                nearestIntersection: nearest,
-            };
+        return normalizedPosition;
+    };
+    var getSlideRailSVG = function (portSlideRailSVGClassName) {
+        if (!element)
+            return;
+        var slideRailSVG = element.querySelector(".".concat(portSlideRailSVGClassName));
+        return slideRailSVG;
+    };
+    //Calculate the position of the 4 vertices of a rectangle relative to element
+    var calculateSlideRailRectSVGPositions = function (slideRailSVG) {
+        var coordinates = getRectangleCorners(slideRailSVG);
+        var ownerSVG = slideRailSVG.ownerSVGElement;
+        var rotationAngle = getElementRotationInfo(ownerSVG);
+        if (rotationAngle !== 0) {
+            var rotationCenterX = elementWidth / 2;
+            var rotationCenterY = elementHeight / 2;
+            coordinates = getRotatedRectangleCoordinates(coordinates, rotationCenterX, rotationCenterY, rotationAngle);
+        }
+        return coordinates;
+    };
+    var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
+        var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
+        if (!slideRailSVG)
+            return;
+        var moveTo;
+        //check and get new position if Rect element
+        if (slideRailSVG instanceof SVGRectElement) {
+            var _a = calculateSlideRailRectSVGPositions(slideRailSVG), a = _a[0], b = _a[1], c = _a[2], d = _a[3]; //Get 4 vertices of rect element
+            var moveableAreas = [
+                [a, b],
+                [b, c],
+                [c, d],
+                [d, a]
+            ];
+            logger.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
+            var newPosition_3 = normalizePortPositionOnMoveableAreas(moveableAreas, position);
+            if (newPosition_3) {
+                moveTo = newPosition_3;
+            }
+        }
+        else if (slideRailSVG instanceof SVGCircleElement) { //check and get new position if circle element
+            var cx = Number(slideRailSVG.getAttribute('cx'));
+            var cy = Number(slideRailSVG.getAttribute('cy'));
+            var r = Number(slideRailSVG.getAttribute('r'));
+            var circle = Flatten$1.circle(Flatten$1.point(cx, cy), r);
+            var _b = circle.distanceTo(Flatten$1.point(position.x, position.y)), num = _b[0], segment = _b[1];
+            if (num <= r) {
+                moveTo = {
+                    x: segment.ps.x,
+                    y: segment.ps.y,
+                };
+            }
         }
+        return moveTo;
+    };
+    var newPosition;
+    if (portMoveableAreas && portMoveableAreas.length > 0) { //If moveable areas is defined
+        newPosition = normalizePortPositionOnMoveableAreas(portMoveableAreas, elementRelativePosition);
     }
-    return result;
+    else if (portSlideRailSVGClassName) { //If port slide rail svg classname is defined
+        newPosition = normalizePortPositionOnSlideRailSVG(portSlideRailSVGClassName, elementRelativePosition);
+    }
+    return newPosition || elementRelativePosition;
 };
-//Find a point next to an element from a point on the element
-var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
-    var translationOffset = 20;
-    var _a = getFourVertexesOfBBoxFromElement(ele), vertex1Position = _a[0], vertex2Position = _a[1], vertex3Position = _a[2], vertex4Position = _a[3];
-    var replacementPosition = null;
-    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
-        //Cut at vertex 1 of bbox, move out a distance x,y
-        replacementPosition = {
-            x: vertex1Position.x - translationOffset,
-            y: vertex1Position.y - translationOffset,
+var windowsPositionToPaperPosition = function (clientPosition, paperElement, zoom) {
+    var paperRect = paperElement.getBoundingClientRect();
+    // Calculate the position relative to the paper element
+    var xPosOnPaper = (clientPosition.x - paperRect.left) / zoom;
+    var yPosOnPaper = (clientPosition.y - paperRect.top) / zoom;
+    return {
+        x: Math.round(xPosOnPaper),
+        y: Math.round(yPosOnPaper),
+    };
+};
+
+var getSVGBBoxOutsideTransformedParent = function (svgElement) {
+    var bbox = svgElement.getBBox(); // Get bounding box of the element
+    var matrix = svgElement.getCTM(); // Get the current transformation matrix of the parent element
+    // Define the four corners of the bounding box
+    var corners = [
+        { x: bbox.x, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
+        { x: bbox.x, y: bbox.y + bbox.height } // Bottom-left
+    ];
+    // Function to apply the transformation matrix to a point
+    function transformPoint(x, y, matrix) {
+        return {
+            x: matrix.a * x + matrix.c * y + matrix.e,
+            y: matrix.b * x + matrix.d * y + matrix.f
         };
     }
-    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
-        //Cut at vertex 2 of bbox, move out a distance x,y
-        replacementPosition = {
-            x: vertex2Position.x + translationOffset,
-            y: vertex2Position.y - translationOffset,
-        };
+    // Transform each corner according to the matrix
+    if (matrix) {
+        return corners.map(function (corner) {
+            return transformPoint(corner.x, corner.y, matrix);
+        });
     }
-    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
-        //Cut at vertex 3 of bbox, move out a distance x,y
-        replacementPosition = {
-            x: vertex3Position.x + translationOffset,
-            y: vertex3Position.y + translationOffset,
-        };
+    else {
+        return corners;
     }
-    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
-        //Cut at vertex 4 of bbox, move out a distance x,y
-        replacementPosition = {
-            x: vertex4Position.x - translationOffset,
-            y: vertex4Position.y + translationOffset,
+};
+//function returns the array of corners of the bbox of the element after applying the transformation matrix of the parent element
+var getRotatedSVGBBox = function (svgElement) {
+    var bbox = svgElement.getBBox(); // Get bounding box of the element
+    var matrix = svgElement.getCTM(); // Get the current transformation matrix of the parent element
+    // Define the four corners of the bounding box
+    var corners = [
+        { x: bbox.x, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
+        { x: bbox.x, y: bbox.y + bbox.height } // Bottom-left
+    ];
+    // Function to apply the transformation matrix to a point
+    function transformPoint(x, y, matrix) {
+        return {
+            x: matrix.a * x + matrix.c * y,
+            y: matrix.b * x + matrix.d * y // + matrix.f
         };
     }
-    else if (checkPositionOnLine(intersectedPosition, [vertex1Position, vertex2Position])) {
-        //cut top edge, move left or right
-        var lineOfVertex12 = Flatten$1.line(Flatten$1.point(vertex1Position.x, vertex1Position.y), Flatten$1.point(vertex2Position.x, vertex2Position.y));
-        //Check if the line lies on the edge of the bbox then move the starting point out 1 distance perpendicular to the edge.
-        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex12)[0] === 0 &&
-            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex12)[0] === 0) {
-            //lie on a straight line 1-2
-            replacementPosition = {
-                x: intersectedPosition.x,
-                y: intersectedPosition.y - translationOffset,
-            };
+    // Transform each corner according to the matrix
+    if (matrix) {
+        return corners.map(function (corner) {
+            return transformPoint(corner.x, corner.y, matrix);
+        });
+    }
+    else {
+        return corners;
+    }
+};
+
+var SelectionFrame = function (props) {
+    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, objectX = props.objectX, objectY = props.objectY, 
+    // movingOffsetThreshold: propMovingOffsetThreshold,
+    propMovingRate = props.movingRate, propOnMouseDown = props.onMouseDown, propOnMouseUp = props.onMouseUp, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor, zoom = props.zoom;
+    var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
+    var _a = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _a[0], setWidth = _a[1];
+    var _b = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _b[0], setHeight = _b[1];
+    React.useEffect(function () {
+        if (propWidth) {
+            setWidth(propWidth);
         }
-        else {
-            //Translate to the left of vertex 1
-            var leftPosition = {
-                x: vertex1Position.x - translationOffset,
-                y: vertex1Position.y,
-            };
-            //Translate to the right of vertex 2
-            var rightPosition = {
-                x: vertex2Position.x + translationOffset,
-                y: vertex2Position.y,
-            };
-            replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
+    }, [objectX, propWidth]);
+    React.useEffect(function () {
+        if (propHeight) {
+            setHeight(propHeight);
         }
-    }
-    else if (checkPositionOnLine(intersectedPosition, [vertex3Position, vertex4Position])) {
-        //cut bottom edge, move left or right
-        var lineOfVertex34 = Flatten$1.line(Flatten$1.point(vertex3Position.x, vertex3Position.y), Flatten$1.point(vertex4Position.x, vertex4Position.y));
-        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex34)[0] === 0 &&
-            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex34)[0] === 0) {
-            //lie on a straight line 3-4
-            replacementPosition = {
-                x: intersectedPosition.x,
-                y: intersectedPosition.y + translationOffset,
-            };
+    }, [objectY, propHeight]);
+    var _c = React.useState(objectX !== null && objectX !== void 0 ? objectX : 0), curX = _c[0], setCurX = _c[1];
+    var _d = React.useState(objectY !== null && objectY !== void 0 ? objectY : 0), curY = _d[0], setCurY = _d[1];
+    React.useEffect(function () {
+        if (objectX) {
+            setCurX(objectX);
         }
-        else {
-            //Translate to the left of vertex 4
-            var leftPosition = {
-                x: vertex4Position.x - translationOffset,
-                y: vertex4Position.y,
-            };
-            //Translate to the right of vertex 3
-            var rightPosition = {
-                x: vertex3Position.x + translationOffset,
-                y: vertex3Position.y,
-            };
-            replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
+    }, [objectX]);
+    React.useEffect(function () {
+        if (objectY) {
+            setCurY(objectY);
         }
-    }
-    else if (checkPositionOnLine(intersectedPosition, [vertex1Position, vertex4Position])) {
-        //cut left edge, move up or down
-        var lineOfVertex14 = Flatten$1.line(Flatten$1.point(vertex1Position.x, vertex1Position.y), Flatten$1.point(vertex4Position.x, vertex4Position.y));
-        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex14)[0] === 0 &&
-            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex14)[0] === 0) {
-            //lie on a straight line 1-4
-            replacementPosition = {
-                x: intersectedPosition.x - translationOffset,
-                y: intersectedPosition.y,
-            };
+    }, [objectY]);
+    var framePadding = propFramePadding || 0;
+    var r = 5;
+    var _e = React.useState(false), draggingRect = _e[0], setDraggingRect = _e[1];
+    var _f = React.useState(false), draggingCircle = _f[0], setDraggingCircle = _f[1];
+    var _g = React.useState(0), startX = _g[0], setStartX = _g[1];
+    var _h = React.useState(0), startY = _h[0], setStartY = _h[1];
+    var _j = React.useState(0), xFromMouse = _j[0], setXFromMouse = _j[1];
+    var _k = React.useState(0), yFromMouse = _k[0], setYFromMouse = _k[1];
+    var _l = React.useState(0), lastMoveTime = _l[0], setLastMoveTime = _l[1];
+    var getMousePosition = function (event) {
+        var position = windowsPositionToPaperPosition({
+            x: event.clientX,
+            y: event.clientY
+        }, propContainer, zoom);
+        return position;
+    };
+    var addRectHandleMouseDown = function (event) {
+        event.stopPropagation();
+        if (!draggingCircle) {
+            setDraggingRect(true);
+            setStartX(event.clientX);
+            setStartY(event.clientY);
+            var mousePosition = getMousePosition(event);
+            var xFromMouse_1 = (curX || 0) - mousePosition.x;
+            var yFromMouse_1 = (curY || 0) - mousePosition.y;
+            setXFromMouse(xFromMouse_1);
+            setYFromMouse(yFromMouse_1);
         }
-        else {
-            //Translate to the top of vertex 1
-            var topPosition = {
-                x: vertex1Position.x,
-                y: vertex1Position.y - translationOffset,
-            };
-            //Translate to the bottom of vertex 4
-            var bottomPosition = {
-                x: vertex4Position.x,
-                y: vertex4Position.y + translationOffset,
-            };
-            replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
+        if (propOnMouseDown) {
+            propOnMouseDown(event);
+        }
+    };
+    var rectHandleMouseMove = React.useCallback(function (event) {
+        var mouseEvent = event;
+        if (draggingRect) {
+            if (Date.now() - lastMoveTime < (propMovingRate || 0)) {
+                return;
+            }
+            //Coordinates of mouse on paper. 
+            var mousePosition = getMousePosition(mouseEvent);
+            var newX = mousePosition.x + xFromMouse;
+            var newY = mousePosition.y + yFromMouse;
+            if (propOnMove) {
+                setCurX(newX);
+                setCurY(newY);
+                propOnMove(newX, newY);
+                setLastMoveTime(Date.now());
+                setStartX(mouseEvent.clientX);
+                setStartY(mouseEvent.clientY);
+            }
+        }
+    }, [draggingRect, propOnMove, propMovingRate, startX, startY, lastMoveTime, xFromMouse, yFromMouse, zoom]);
+    React.useEffect(function () {
+        var addRectHandleMouseUp = function () {
+            setDraggingRect(false);
+            setXFromMouse(0);
+            setYFromMouse(0);
+        };
+        propContainer === null || propContainer === void 0 ? void 0 : propContainer.addEventListener('mousemove', rectHandleMouseMove);
+        propContainer === null || propContainer === void 0 ? void 0 : propContainer.addEventListener('mouseup', addRectHandleMouseUp);
+        return function () {
+            propContainer === null || propContainer === void 0 ? void 0 : propContainer.removeEventListener('mousemove', rectHandleMouseMove);
+            propContainer === null || propContainer === void 0 ? void 0 : propContainer.removeEventListener('mouseup', addRectHandleMouseUp);
+        };
+    }, [propContainer, rectHandleMouseMove, zoom]);
+    var circleHandleMouseDown = function (event) {
+        event.stopPropagation();
+        if (!draggingRect) {
+            // const paperPosition = getMousePosition(event);
+            // setStartX(paperPosition.x);
+            // setStartY(paperPosition.y);
+            setDraggingCircle(true);
         }
+    };
+    React.useEffect(function () {
+        logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
+            draggingCircle: draggingCircle,
+            startX: startX,
+            startY: startY,
+            width: width,
+            height: height,
+            propMovingRate: propMovingRate
+        });
+        var circleHandleMouseMove = function (event) {
+            var mouseEvent = event;
+            if (draggingCircle) {
+                var mousePosition = getMousePosition(mouseEvent);
+                // let offsetX = mouseEvent.clientX - startX;
+                // let offsetY = mouseEvent.clientY - startY;
+                if (Date.now() - lastMoveTime < (propMovingRate || 0)) {
+                    return;
+                }
+                // setStartX(mouseEvent.clientX);
+                // setStartY(mouseEvent.clientY);
+                setLastMoveTime(Date.now());
+                var newWidth = mousePosition.x - curX;
+                var newHeight = mousePosition.y - curY;
+                if (propResizability.keepRatio) {
+                    var ratio = Math.max(Math.abs(newWidth / width), Math.abs(newHeight / height));
+                    newWidth = newWidth > 0 ? ratio * width : -ratio * width;
+                    newHeight = newHeight > 0 ? ratio * height : -ratio * height;
+                }
+                // if (propResizability.keepRatio) {
+                //     let resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
+                //     const increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
+                //     offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
+                //     offsetY = increasing ? resizingRatio * height : -resizingRatio * height;
+                // }
+                // newWidth += offsetX;
+                // newHeight += offsetY;
+                if (newWidth < MIN_ELEMENT_SIZE) {
+                    newWidth = MIN_ELEMENT_SIZE;
+                }
+                if (newHeight < MIN_ELEMENT_SIZE) {
+                    newHeight = MIN_ELEMENT_SIZE;
+                }
+                setWidth(newWidth);
+                setHeight(newHeight);
+                if (propOnResize) {
+                    propOnResize(newWidth, newHeight);
+                }
+            }
+        };
+        var circleHandleMouseUp = function () {
+            setDraggingCircle(false);
+        };
+        var container = propContainer;
+        container.addEventListener('mousemove', circleHandleMouseMove);
+        container.addEventListener('mouseup', circleHandleMouseUp);
+        //logging the start of the circle handle mouse move
+        logger.debug('SelectionFrame: circleHandleMouseMove started', container);
+        return function () {
+            container.removeEventListener('mousemove', circleHandleMouseMove);
+            container.removeEventListener('mouseup', circleHandleMouseUp);
+            //logging the end of the circle handle mouse move
+            logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
+        };
+    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
+    var rectangleSize = Math.max(width, height);
+    var leftX = framePadding;
+    var topY = framePadding;
+    if (propAnchor === exports.PositioningAnchor.Center) {
+        leftX -= rectangleSize / 2;
+        topY -= rectangleSize / 2;
     }
-    else if (checkPositionOnLine(intersectedPosition, [vertex2Position, vertex3Position])) {
-        //cut right edge, move up or down
-        var lineOfVertex23 = Flatten$1.line(Flatten$1.point(vertex2Position.x, vertex2Position.y), Flatten$1.point(vertex3Position.x, vertex3Position.y));
-        if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex23)[0] === 0 &&
-            Flatten$1.point(targetPosition.x, targetPosition.y).distanceTo(lineOfVertex23)[0] === 0) {
-            //lie on a straight line 2-3
-            replacementPosition = {
-                x: intersectedPosition.x + translationOffset,
-                y: intersectedPosition.y,
-            };
+    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 }),
+        propResizability.enabled ?
+            (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
+};
+
+var useSelectionFrame = function (props) {
+    React.useEffect(function () {
+        //log selection frame rendering
+        if (props.targetSVGElement) {
+            console.debug('Rendering SelectionFrame for targetSVGElement:', props.targetSVGElement);
         }
         else {
-            //Translate to the top of vertex 2
-            var topPosition = {
-                x: vertex2Position.x,
-                y: vertex2Position.y - translationOffset,
-            };
-            //Translate to the bottom of vertex 3
-            var bottomPosition = {
-                x: vertex3Position.x,
-                y: vertex3Position.y + translationOffset,
-            };
-            replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
+            console.warn('No targetSVGElement provided for SelectionFrame.');
+        }
+        if (props.targetSVGElement && props.container) {
+            //render SelectionFrame component to the parent element of the targetSVGElement            
+            if (props.container) {
+                var svg_1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                svg_1.style.overflow = 'visible';
+                svg_1.style.outline = 'none';
+                props.targetSVGElement.appendChild(svg_1);
+                var root_1 = createRoot(svg_1);
+                root_1.render(React.createElement(SelectionFrame, __assign({}, props, { container: props.container })));
+                return function () {
+                    root_1.unmount();
+                    if (props.targetSVGElement) {
+                        props.targetSVGElement.removeChild(svg_1);
+                    }
+                };
+            }
         }
-    }
-    return replacementPosition;
+    }, [props]);
+};
+
+var eventEmitter = new EventEmitter();
+var emitPaperClicked = function (ev) {
+    eventEmitter.emit(EVENT_NAME.PAPER_CLICK, ev);
 };
-var getRelativePosition = function (clientPosition, relativeElement) {
-    var relativeRect = relativeElement.getBoundingClientRect();
+var onPaperClicked = function (callback) {
+    eventEmitter.on(EVENT_NAME.PAPER_CLICK, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PAPER_CLICK, callback);
+    };
     return {
-        x: clientPosition.x - relativeRect.left,
-        y: clientPosition.y - relativeRect.top,
+        off: off
     };
 };
-var getFourVertexesOfBBoxFromElement = function (element) {
-    var absolutePosition = getAbsolutePosition(element);
-    var vertex1Position = {
-        x: absolutePosition.x,
-        y: absolutePosition.y
+var emitPortMouseUp = function (ev, port, elementId) {
+    eventEmitter.emit(EVENT_NAME.PORT_MOUSE_UP, ev, port, elementId);
+};
+var onPortMouseUp = function (callback) {
+    eventEmitter.on(EVENT_NAME.PORT_MOUSE_UP, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PORT_MOUSE_UP, callback);
     };
-    var vertex2Position = {
-        x: absolutePosition.x + element.size.width,
-        y: absolutePosition.y
+    return {
+        off: off
     };
-    var vertex3Position = {
-        x: absolutePosition.x + element.size.width,
-        y: absolutePosition.y + element.size.height
+};
+var emitPortMouseDown = function (ev, port, elementId) {
+    eventEmitter.emit(EVENT_NAME.PORT_MOUSE_DOWN, ev, port, elementId);
+};
+var onPortMouseDown = function (callback) {
+    eventEmitter.on(EVENT_NAME.PORT_MOUSE_DOWN, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PORT_MOUSE_DOWN, callback);
     };
-    var vertex4Position = {
-        x: absolutePosition.x,
-        y: absolutePosition.y + element.size.height
+    return {
+        off: off
     };
-    return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
 };
-//get absolute position of element
-var getAbsolutePosition = function (element) {
-    var parentElement = element.parentElement;
-    var elemenetPositionWithTopLeftAnchor = {
-        x: element.position.x,
-        y: element.position.y,
+var emitPortMoved = function (port, elementId, oldPosition, newPosition) {
+    eventEmitter.emit(EVENT_NAME.PORT_MOVED, port, elementId, oldPosition, newPosition);
+};
+var onPortMoved = function (callback) {
+    eventEmitter.on(EVENT_NAME.PORT_MOVED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PORT_MOVED, callback);
     };
-    if (element.positionAnchor === exports.PositioningAnchor.Center) {
-        elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
-        elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
-    }
-    if (!parentElement) {
-        return __assign({}, elemenetPositionWithTopLeftAnchor);
-    }
-    var absoluteParentElement = getAbsolutePosition(parentElement);
-    var x = elemenetPositionWithTopLeftAnchor.x + absoluteParentElement.x;
-    var y = elemenetPositionWithTopLeftAnchor.y + absoluteParentElement.y;
     return {
-        x: x,
-        y: y,
+        off: off
     };
 };
-//get absolute position of element
-var getPortAbsolutePosition = function (port, element) {
-    var elementAbsolutePosition = getAbsolutePosition(element);
+var emitElementMoved = function (element, oldPosition, newPosition) {
+    eventEmitter.emit("".concat(EVENT_NAME.ELEMENT_MOVED, "_").concat(element.id));
+};
+var onElementMoved = function (elementId, callback) {
+    eventEmitter.on("".concat(EVENT_NAME.ELEMENT_MOVED, "_").concat(elementId), callback);
+    var off = function () {
+        eventEmitter.off("".concat(EVENT_NAME.ELEMENT_MOVED, "_").concat(elementId), callback);
+    };
     return {
-        x: elementAbsolutePosition.x + port.position.x,
-        y: elementAbsolutePosition.y + port.position.y,
+        off: off
     };
 };
-var transformAbsPositionToElementRelativePosition = function (position, element) {
-    var parentElement = element.parentElement;
-    if (!parentElement) {
-        return position;
-    }
-    var absoluteParentElement = getAbsolutePosition(parentElement);
-    var result = {
-        x: position.x - absoluteParentElement.x,
-        y: position.y - absoluteParentElement.y,
+var emitElementResized = function (element, oldSize, newSize) {
+    eventEmitter.emit("".concat(EVENT_NAME.ELEMENT_RESIZED, "_").concat(element.id), oldSize, newSize);
+};
+var onElementResized = function (elementId, callback) {
+    eventEmitter.on("".concat(EVENT_NAME.ELEMENT_RESIZED, "_").concat(elementId), callback);
+    var off = function () {
+        eventEmitter.off("".concat(EVENT_NAME.ELEMENT_RESIZED, "_").concat(elementId), callback);
+    };
+    return {
+        off: off
     };
-    if (element.positionAnchor === exports.PositioningAnchor.Center) {
-        result.x += element.size.width / 2;
-        result.y += element.size.height / 2;
-    }
-    return result;
 };
-var transformAbsPositionToRelativePositionInsideElement = function (absolutePosition, parentAbsolutePosition) {
-    var _a, _b;
-    var position = {
-        x: absolutePosition.x - ((_a = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x) !== null && _a !== void 0 ? _a : 0),
-        y: absolutePosition.y - ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0),
+var emitCommandDeleteSelectedPort = function () {
+    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_PORT);
+};
+var onCommandDeleteSelectedPort = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_PORT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_PORT, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitCommandDeleteSelectedElement = function () {
+    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_ELEMENT);
+};
+var onCommandDeleteSelectedElement = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_ELEMENT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_ELEMENT, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitCommandDeleteSelectedLink = function () {
+    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_LINK);
+};
+var onCommandDeleteSelectedLink = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_LINK, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_LINK, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitCommandDeleteSelectedText = function () {
+    eventEmitter.emit(EVENT_NAME.COMMAND_DELETE_SELECTED_TEXT);
+};
+var onCommandDeleteSelectedText = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_DELETE_SELECTED_TEXT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_DELETE_SELECTED_TEXT, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitElementLinkStarted = function (elementLink) {
+    eventEmitter.emit(EVENT_NAME.ELEMENT_LINK_STARTED, elementLink);
+};
+var onElementLinkStarted = function (callback) {
+    eventEmitter.on(EVENT_NAME.ELEMENT_LINK_STARTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.ELEMENT_LINK_STARTED, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitElementLinkEnded = function (elementLink) {
+    eventEmitter.emit(EVENT_NAME.ELEMENT_LINK_ENDED, elementLink);
+};
+var onElementLinkEnded = function (callback) {
+    eventEmitter.on(EVENT_NAME.ELEMENT_LINK_ENDED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.ELEMENT_LINK_ENDED, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitElementSelected = function (element) {
+    eventEmitter.emit(EVENT_NAME.ELEMENT_SELECTED, element);
+};
+var onElementSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.ELEMENT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.ELEMENT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitCommandRenderElement = function (elementId) {
+    eventEmitter.emit(EVENT_NAME.COMMAND_RENDER_ELEMENT, elementId);
+};
+var onCommandRenderElement = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_RENDER_ELEMENT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_RENDER_ELEMENT, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitPortSelected = function (port, elementId) {
+    eventEmitter.emit(EVENT_NAME.PORT_SELECTED, port, elementId);
+};
+var onPortSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.PORT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PORT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitCommandRenderPort = function (portId, elementId) {
+    eventEmitter.emit(EVENT_NAME.COMMAND_RENDER_PORT, portId, elementId);
+};
+var onCommandRenderPort = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_RENDER_PORT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_RENDER_PORT, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitTextSelected = function (text) {
+    eventEmitter.emit(EVENT_NAME.TEXT_SELECTED, text);
+};
+var onTextSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.TEXT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.TEXT_SELECTED, callback);
     };
-    return position;
-};
-var correctPortPositionInElement = function (elementRelativePosition, elementWidth, elementHeight, portMoveableAreas, portSlideRailSVGClassName, element) {
-    //Normalize a point so that it can lie exactly on an area
-    var normalizePortPositionOnMoveableAreas = function (moveableAreas, position) {
-        var lines = moveableAreas.filter(function (area) { return area.length === 2; });
-        var polygons = moveableAreas.filter(function (area) { return area.length >= 3; });
-        var normalizedPosition;
-        //If moveableAreas is lines
-        if (lines.length > 0) {
-            var newPosition_1 = findNearestProjectedPoint({ x: position.x, y: position.y }, lines);
-            if (newPosition_1) {
-                normalizedPosition = newPosition_1;
-            }
-        }
-        //If moveableAreas is polygons
-        else if (polygons.length > 0) {
-            var newPosition_2 = { x: position.x, y: position.y };
-            var isContainsInPolygons = polygons.some(function (p) { return checkPointContainsPolygon(newPosition_2, p); });
-            if (isContainsInPolygons) {
-                normalizedPosition = newPosition_2;
-            }
-        }
-        return normalizedPosition;
+    return {
+        off: off
     };
-    var getSlideRailSVG = function (portSlideRailSVGClassName) {
-        if (!element)
+};
+var paperEventEmitterContext = React.createContext({
+    emitter: eventEmitter,
+    emitPaperClicked: emitPaperClicked,
+    onPaperClicked: onPaperClicked,
+    emitPortMouseUp: emitPortMouseUp,
+    onPortMouseUp: onPortMouseUp,
+    emitPortMouseDown: emitPortMouseDown,
+    onPortMouseDown: onPortMouseDown,
+    emitPortMoved: emitPortMoved,
+    onPortMoved: onPortMoved,
+    emitPortSelected: emitPortSelected,
+    onPortSelected: onPortSelected,
+    emitElementMoved: emitElementMoved,
+    onElementMoved: onElementMoved,
+    emitElementResized: emitElementResized,
+    onElementResized: onElementResized,
+    emitElementSelected: emitElementSelected,
+    onElementSelected: onElementSelected,
+    emitCommandRenderElement: emitCommandRenderElement,
+    onCommandRenderElement: onCommandRenderElement,
+    emitCommandDeleteSelectedPort: emitCommandDeleteSelectedPort,
+    onCommandDeleteSelectedPort: onCommandDeleteSelectedPort,
+    emitCommandDeleteSelectedElement: emitCommandDeleteSelectedElement,
+    onCommandDeleteSelectedElement: onCommandDeleteSelectedElement,
+    emitCommandDeleteSelectedLink: emitCommandDeleteSelectedLink,
+    onCommandDeleteSelectedLink: onCommandDeleteSelectedLink,
+    emitCommandDeleteSelectedText: emitCommandDeleteSelectedText,
+    onCommandDeleteSelectedText: onCommandDeleteSelectedText,
+    emitElementLinkStarted: emitElementLinkStarted,
+    onElementLinkStarted: onElementLinkStarted,
+    emitElementLinkEnded: emitElementLinkEnded,
+    onElementLinkEnded: onElementLinkEnded,
+    emitTextSelected: emitTextSelected,
+    onTextSelected: onTextSelected,
+    emitCommandRenderPort: emitCommandRenderPort,
+    onCommandRenderPort: onCommandRenderPort,
+});
+
+var editorConfigurationContext = React.createContext(null);
+var useEditorConfiguration = function () {
+    var context = React.useContext(editorConfigurationContext);
+    if (!context) {
+        throw new Error("useEditorConfiguration must be used within an EditorConfigurationProvider");
+    }
+    return context;
+};
+var EditorConfigurationContextProvider = editorConfigurationContext.Provider;
+
+/**
+ * Zoom context to manage zoom level and related state.
+ * This context can be used to provide zoom functionality across the application.
+ */
+var zoomContext = React.createContext(null);
+var ZoomContextProvider = function (_a) {
+    var children = _a.children;
+    var _b = React.useState(1), zoom = _b[0], setZoom = _b[1];
+    var _c = React.useState(0), scrollLeft = _c[0], setScrollLeft = _c[1];
+    var _d = React.useState(0), scrollTop = _d[0], setScrollTop = _d[1];
+    var wrapperRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var handleWheel = function (e) {
+        // Chỉ zoom khi giữ Ctrl
+        if (!e.ctrlKey)
             return;
-        var slideRailSVG = element.querySelector(".".concat(portSlideRailSVGClassName));
-        return slideRailSVG;
+        e.preventDefault();
+        var delta = -e.deltaY;
+        var zoomFactor = 0.05;
+        var newZoom = zoom + (delta > 0 ? zoomFactor : -zoomFactor);
+        newZoom = Math.max(0.1, Math.min(newZoom, 4));
+        if (!wrapperRef.current || !contentRef.current)
+            return;
+        var wrapper = wrapperRef.current;
+        var content = contentRef.current;
+        // Get bounding rectangle of the content
+        var rect = content.getBoundingClientRect();
+        var offsetX = e.clientX - rect.left;
+        var offsetY = e.clientY - rect.top;
+        var percentX = offsetX / (content.offsetWidth);
+        var percentY = offsetY / (content.offsetHeight);
+        console.log(offsetX, offsetY, content.offsetWidth, content.offsetHeight, percentX, percentY);
+        // Old width and height of content
+        var prevWidth = content.offsetWidth * zoom;
+        var prevHeight = content.offsetHeight * zoom;
+        var newWidth = content.offsetWidth * newZoom;
+        var newHeight = content.offsetHeight * newZoom;
+        var scrollLeft = wrapper.scrollLeft + (percentX * (newWidth - prevWidth));
+        var scrollTop = wrapper.scrollTop + (percentY * (newHeight - prevHeight));
+        setZoom(newZoom);
+        setScrollLeft(scrollLeft);
+        setScrollTop(scrollTop);
     };
-    //Calculate the position of the 4 vertices of a rectangle relative to element
-    var calculateSlideRailRectSVGPositions = function (slideRailSVG) {
-        var coordinates = getRectangleCorners(slideRailSVG);
-        var ownerSVG = slideRailSVG.ownerSVGElement;
-        var rotationAngle = getElementRotationInfo(ownerSVG);
-        if (rotationAngle !== 0) {
-            var rotationCenterX = elementWidth / 2;
-            var rotationCenterY = elementHeight / 2;
-            coordinates = getRotatedRectangleCoordinates(coordinates, rotationCenterX, rotationCenterY, rotationAngle);
-        }
-        return coordinates;
+    React.useLayoutEffect(function () {
+        var _a;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: scrollLeft,
+            top: scrollTop,
+        });
+    }, [zoom, scrollLeft, scrollTop]);
+    var resetZoom = function () {
+        setZoom(1);
     };
-    var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
-        var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
-        if (!slideRailSVG)
-            return;
-        var moveTo;
-        //check and get new position if Rect element
-        if (slideRailSVG instanceof SVGRectElement) {
-            var _a = calculateSlideRailRectSVGPositions(slideRailSVG), a = _a[0], b = _a[1], c = _a[2], d = _a[3]; //Get 4 vertices of rect element
-            var moveableAreas = [
-                [a, b],
-                [b, c],
-                [c, d],
-                [d, a]
-            ];
-            logger.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
-            var newPosition_3 = normalizePortPositionOnMoveableAreas(moveableAreas, position);
-            if (newPosition_3) {
-                moveTo = newPosition_3;
-            }
-        }
-        else if (slideRailSVG instanceof SVGCircleElement) { //check and get new position if circle element
-            var cx = Number(slideRailSVG.getAttribute('cx'));
-            var cy = Number(slideRailSVG.getAttribute('cy'));
-            var r = Number(slideRailSVG.getAttribute('r'));
-            var circle = Flatten$1.circle(Flatten$1.point(cx, cy), r);
-            var _b = circle.distanceTo(Flatten$1.point(position.x, position.y)), num = _b[0], segment = _b[1];
-            if (num <= r) {
-                moveTo = {
-                    x: segment.ps.x,
-                    y: segment.ps.y,
-                };
+    React.useEffect(function () {
+        var preventBrowserZoom = function (e) {
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
             }
-        }
-        return moveTo;
-    };
-    var newPosition;
-    if (portMoveableAreas && portMoveableAreas.length > 0) { //If moveable areas is defined
-        newPosition = normalizePortPositionOnMoveableAreas(portMoveableAreas, elementRelativePosition);
-    }
-    else if (portSlideRailSVGClassName) { //If port slide rail svg classname is defined
-        newPosition = normalizePortPositionOnSlideRailSVG(portSlideRailSVGClassName, elementRelativePosition);
+        };
+        window.addEventListener("wheel", preventBrowserZoom, { passive: false });
+        return function () {
+            window.removeEventListener("wheel", preventBrowserZoom);
+        };
+    }, []);
+    return (React.createElement(zoomContext.Provider, { value: { zoom: zoom, setZoom: setZoom, resetZoom: resetZoom } },
+        React.createElement("div", { ref: wrapperRef, onWheel: handleWheel, style: {
+                width: "100vw",
+                height: "92vh",
+                overflow: "auto",
+            } },
+            React.createElement("div", { ref: contentRef, style: {
+                    transform: "scale(".concat(zoom, ")"),
+                    transformOrigin: "top left",
+                    // transition: "transform 0.1s linear",
+                } }, children))));
+};
+var useZoomContext = function () {
+    var context = React.useContext(zoomContext);
+    if (!context) {
+        throw new Error("useZoomContext must be used within a ZoomContextProvider");
     }
-    return newPosition || elementRelativePosition;
+    return context;
 };
 
-var Port1 = React.forwardRef(function (props, ref) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, parentAbsolutePosition = props.parentAbsolutePosition, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, 
-    // onManuallyTriggerRenderHandler,
-    renderShape = props.renderShape, children = props.children;
-    var textRef = React.useRef(null);
-    var rotationAngle = React.useMemo(function () {
-        if (!calculateRotationAngle)
-            return 0;
-        return calculateRotationAngle(x, y);
-    }, [calculateRotationAngle, x, y]);
-    var renderLabel = function (label) {
-        var content = label.content, size = label.size;
-        var position = label.position || PORT_LABEL_POSITION;
-        return React.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, parentAbsolutePosition: parentAbsolutePosition, width: size.width, height: size.height, editable: label.editable, selectable: label.selectable, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: function (xOnPaper, yOnPaper) {
-                if (onPortLabelMoved) {
-                    var relativePosInSideEle = transformAbsPositionToRelativePositionInsideElement({ x: xOnPaper, y: yOnPaper }, parentAbsolutePosition);
-                    var newXPort = relativePosInSideEle.x - x;
-                    var newYPort = relativePosInSideEle.y - y;
-                    onPortLabelMoved(newXPort, newYPort, id);
-                }
-            }, onResized: function (width, height) { return onPortLabelResized === null || onPortLabelResized === void 0 ? void 0 : onPortLabelResized(width, height, id); }, onContentChanged: function (ev, newValue) { return onPortLabelContentChanged === null || onPortLabelContentChanged === void 0 ? void 0 : onPortLabelContentChanged(ev, newValue, id); } });
-    };
-    var renderedShape = React.useMemo(function () {
-        if (renderShape) {
-            var RenderShape = renderShape;
-            return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle }), children));
-        }
-        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); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" }, children);
-        }
-    }, [props]);
-    return (React.createElement(React.Fragment, null,
-        renderedShape,
-        label && renderLabel(label)));
-});
-var Port = React.memo(Port1);
-
-// Render the svg <path> element
-function getCurvePathData(points, smoothing, closed) {
-    if (smoothing === void 0) { smoothing = 0.2; }
-    // append first 2 points for closed paths
-    if (closed) {
-        points = points.concat(points.slice(0, 2));
-    }
-    // Properties of a line
-    var line = function (pointA, pointB) {
-        var lengthX = pointB.x - pointA.x;
-        var lengthY = pointB.y - pointA.y;
+var Text = React.forwardRef(function (_a, ref) {
+    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.selectable, selectable = _b === void 0 ? true : _b, _c = _a.align, align = _c === void 0 ? exports.TextAlign.left : _c, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
+    var _d = React.useState(false), isSelected = _d[0], setIsSelected = _d[1];
+    var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var textFontSize = useEditorConfiguration().textFontSize;
+    var zoom = useZoomContext().zoom;
+    var absolutePosition = React.useMemo(function () {
+        var _a, _b;
         return {
-            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-            angle: Math.atan2(lengthY, lengthX)
+            x: ((_a = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x) !== null && _a !== void 0 ? _a : 0) + x,
+            y: ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0) + y,
         };
-    };
-    // Position of a control point
-    var controlPoint = function (current, previous, next, reverse) {
-        var p = previous || current;
-        var n = next || current;
-        var o = line(p, n);
-        var angle = o.angle + (reverse ? Math.PI : 0);
-        var length = o.length * smoothing;
-        var x = current.x + Math.cos(angle) * length;
-        var y = current.y + Math.sin(angle) * length;
-        return { x: x, y: y };
-    };
-    var pathData = [];
-    pathData.push({ type: "M", values: [points[0].x, points[0].y] });
-    for (var i = 1; i < points.length; i++) {
-        var point = points[i];
-        var cp1 = controlPoint(points[i - 1], points[i - 2], point);
-        var cp2 = controlPoint(point, points[i - 1], points[i + 1], true);
-        var command = {
-            type: "C",
-            values: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]
+    }, [x, y, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y]);
+    var svgRef = React.useRef();
+    var _f = React.useContext(paperEventEmitterContext), onPaperClicked = _f.onPaperClicked, emitTextSelected = _f.emitTextSelected, onPortSelected = _f.onPortSelected, onElementSelected = _f.onElementSelected, onTextSelected = _f.onTextSelected;
+    React.useEffect(function () {
+        var paperClickListener = onPaperClicked(function (ev) {
+            var _a;
+            var textareaELe = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
+            if (ev.target !== textareaELe) {
+                setIsSelected(false);
+                setIsEditing(false);
+            }
+        });
+        var portSelectedListener = onPortSelected(function (port) {
+            setIsSelected(false);
+            setIsEditing(false);
+        });
+        var elementSelectedListener = onElementSelected(function (element) {
+            setIsSelected(false);
+            setIsEditing(false);
+        });
+        var textSelectedListener = onTextSelected(function (text) {
+            if (text.id !== id) {
+                setIsSelected(false);
+                setIsEditing(false);
+            }
+        });
+        return function () {
+            paperClickListener.off();
+            portSelectedListener.off();
+            elementSelectedListener.off();
+            textSelectedListener.off();
         };
-        pathData.push(command);
-    }
-    // copy last commands 1st controlpoint to first curveto
-    if (closed) {
-        var comLast = pathData[pathData.length - 1];
-        var valuesLastC = comLast.values;
-        var valuesFirstC = pathData[1].values;
-        pathData[1] = {
-            type: "C",
-            values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
+    }, []);
+    //Handle click on svg element
+    var handleClick = function (ev) {
+        if (!selectable)
+            return;
+        ev.stopPropagation();
+        var position = {
+            x: x,
+            y: y,
         };
-        // delete last curveto
-        pathData = pathData.slice(0, pathData.length - 1);
-    }
-    return pathData;
-}
-// convert pathdata to d attribute string
-function pathDataToD(pathData, decimals) {
-    if (decimals === void 0) { decimals = 3; }
-    var d = pathData
-        .map(function (com) {
-        return "".concat(com.type).concat(com.values.map(function (value) { return +value.toFixed(decimals); }).join(" "));
-    })
-        .join(" ");
-    return d;
-}
-function createSmoothPathString(points, smoothing, close) {
-    var pathData = getCurvePathData(points, smoothing, close);
-    var pathString = pathDataToD(pathData);
-    return pathString;
-}
-// a helper function to measure the distance between 2 points
-function dist(p1, p2) {
-    var dx = p2.x - p1.x;
-    var dy = p2.y - p1.y;
-    return Math.sqrt(dx * dx + dy * dy);
-}
-//find distance from starting point of path to a point
-function getLengthForPoint(p, thePath, precision) {
-    if (precision === void 0) { precision = 50; }
-    var pathLength = thePath.getTotalLength();
-    var theRecord = pathLength; //length of path
-    var division = pathLength / precision;
-    var theSegment;
-    for (var i = 0; i < precision; i++) {
-        // get a point on the path for thia distance
-        var _p = thePath.getPointAtLength(i * division);
-        // get the distance between the new point _p and the point p
-        var theDistance = dist(_p, p);
-        if (theDistance < theRecord) {
-            // if the distance is smaller than the record set the new record
-            theRecord = theDistance;
-            theSegment = i;
-        }
-    }
-    return (theSegment * division);
-}
-//Add points to the list of points in the correct position
-function addPointToList(point, listPoints, path) {
-    var getAddIndex = function (startIndex, endIndex) {
-        //Add in the middle if there are only 2 points
-        if ((endIndex - startIndex) === 1) {
-            return startIndex + 1;
-        }
-        var middleIndex = Math.ceil((startIndex + endIndex) / 2);
-        var lengthOfMiddlePoint = getLengthForPoint(listPoints[middleIndex], path); //distance from start point to mid point
-        var lengthOfAddedPoint = getLengthForPoint(point, path); //distance from adding point to mid point
-        //compare if lengthOfMiddlePoint is less than lengthOfAddedPoint, 
-        //then new point can be added in the range of mid point to end point, 
-        //otherwise it can be added in the range of start point to middle point.
-        if (lengthOfAddedPoint < lengthOfMiddlePoint) {
-            return getAddIndex(startIndex, middleIndex);
-        }
-        else {
-            return getAddIndex(middleIndex, endIndex);
-        }
+        var text = {
+            id: id,
+            content: content,
+            position: position,
+            size: {
+                width: width,
+                height: height,
+            },
+            editable: editable
+        };
+        setIsSelected(true);
+        onSelected && onSelected(text);
+        emitTextSelected(text);
     };
-    var addedIndex = getAddIndex(0, listPoints.length - 1);
-    listPoints.splice(addedIndex, 0, point);
-    return __spreadArray([], listPoints, true);
-}
-// Parse the d attribute of a path element and extract points from path commands
-function getPointsFromPathData(dAttribute) {
-    var points = [];
-    // Remove extra whitespace and split by command letters
-    var cleanD = dAttribute.replace(/\s+/g, ' ').trim();
-    // Regular expression to match path commands (M, L, C, etc.) and their values
-    var commandRegex = /([MLCZmlcz])\s*([^MLCZmlcz]*)/g;
-    var match;
-    while ((match = commandRegex.exec(cleanD)) !== null) {
-        var command = match[1].toUpperCase();
-        var values = match[2].trim();
-        if (values) {
-            var coords = values.split(/[\s,]+/).map(Number).filter(function (num) { return !isNaN(num); });
-            switch (command) {
-                case 'M': // Move to
-                    if (coords.length >= 2) {
-                        points.push({ x: coords[0], y: coords[1] });
-                    }
-                    break;
-                case 'L': // Line to
-                    if (coords.length >= 2) {
-                        points.push({ x: coords[0], y: coords[1] });
-                    }
-                    break;
-                case 'C': // Cubic bezier curve
-                    // For cubic curves, we take the end point (last 2 coordinates)
-                    if (coords.length >= 6) {
-                        points.push({ x: coords[4], y: coords[5] });
-                    }
-                    break;
-                case 'Q': // Quadratic bezier curve
-                    // For quadratic curves, we take the end point (last 2 coordinates)
-                    if (coords.length >= 4) {
-                        points.push({ x: coords[2], y: coords[3] });
-                    }
-                    break;
+    var handleChangeText = function (ev) {
+        if (!editable)
+            return;
+        onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
+    };
+    useSelectionFrame({
+        objectX: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.x,
+        objectY: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.y,
+        container: container,
+        targetSVGElement: (isSelected && svgRef.current) ? svgRef.current : undefined,
+        resizability: {
+            enabled: onResized ? true : false,
+            keepRatio: false,
+        },
+        onMove: onMoved,
+        onResize: onResized,
+        strokeWidth: 3,
+        zoom: zoom,
+    });
+    var textAlign = React.useMemo(function () {
+        switch (align) {
+            case exports.TextAlign.left:
+                return 'left';
+            case exports.TextAlign.right:
+                return 'right';
+            case exports.TextAlign.center:
+                return 'center';
+            default:
+                return 'left';
+        }
+    }, [align]);
+    var fontSize = fontSizeProp || textFontSize || TEXT_FONT_SIZE;
+    var borderStyle = border || 'none';
+    return (React.createElement("svg", { style: {
+            overflow: "visible",
+            pointerEvents: selectable ? undefined : 'none',
+        }, x: x, y: y, ref: function (node) {
+            svgRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
             }
+        }, onClick: handleClick },
+        React.createElement("foreignObject", { width: width, height: height, style: {
+                overflow: 'visible',
+                userSelect: 'none',
+                WebkitUserSelect: 'none',
+                msUserSelect: 'none'
+            } },
+            React.createElement("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    borderWidth: '1px',
+                    borderColor: '#ccc',
+                    borderStyle: borderStyle,
+                    // whiteSpace: 'pre-wrap',
+                    boxSizing: 'border-box',
+                } },
+                React.createElement("textarea", { style: {
+                        fontFamily: 'initial',
+                        display: 'inline-block',
+                        width: '100%',
+                        height: '100%',
+                        overflow: 'hidden',
+                        border: 'none',
+                        background: 'transparent',
+                        outline: 'none',
+                        resize: 'none',
+                        textAlign: textAlign,
+                        fontSize: fontSize,
+                    }, readOnly: !isEditing, onDoubleClick: function () {
+                        if (editable) {
+                            setIsEditing(true);
+                        }
+                    }, value: content, onChange: handleChangeText })))));
+});
+var Text$1 = React.memo(Text);
+
+var Port1 = React.forwardRef(function (props, ref) {
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, parentAbsolutePosition = props.parentAbsolutePosition, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, onContextMenu = props.onContextMenu, 
+    // onManuallyTriggerRenderHandler,
+    renderShape = props.renderShape, children = props.children;
+    var textRef = React.useRef(null);
+    var rotationAngle = React.useMemo(function () {
+        if (!calculateRotationAngle)
+            return 0;
+        return calculateRotationAngle(x, y);
+    }, [calculateRotationAngle, x, y]);
+    var renderLabel = function (label) {
+        var content = label.content, size = label.size;
+        var position = label.position || PORT_LABEL_POSITION;
+        return React.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, parentAbsolutePosition: parentAbsolutePosition, width: size.width, height: size.height, editable: label.editable, selectable: label.selectable, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: function (xOnPaper, yOnPaper) {
+                if (onPortLabelMoved) {
+                    var relativePosInSideEle = transformAbsPositionToRelativePositionInsideElement({ x: xOnPaper, y: yOnPaper }, parentAbsolutePosition);
+                    var newXPort = relativePosInSideEle.x - x;
+                    var newYPort = relativePosInSideEle.y - y;
+                    onPortLabelMoved(newXPort, newYPort, id);
+                }
+            }, onResized: function (width, height) { return onPortLabelResized === null || onPortLabelResized === void 0 ? void 0 : onPortLabelResized(width, height, id); }, onContentChanged: function (ev, newValue) { return onPortLabelContentChanged === null || onPortLabelContentChanged === void 0 ? void 0 : onPortLabelContentChanged(ev, newValue, id); } });
+    };
+    var renderedShape = React.useMemo(function () {
+        if (renderShape) {
+            var RenderShape = renderShape;
+            return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle, onContextMenu: function (e) { return onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(id, e); } }), children));
         }
-    }
-    return points;
-}
-// Get points from a path element's d attribute
-function getPointsFromPathElement(pathElement) {
-    var dAttribute = pathElement.getAttribute('d');
-    if (!dAttribute) {
-        return [];
-    }
-    return getPointsFromPathData(dAttribute);
-}
+        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]);
+    return (React.createElement(React.Fragment, null,
+        renderedShape,
+        label && renderLabel(label)));
+});
+var Port = React.memo(Port1);
 
 //Defined remove icon for element link, shown when element link is selected.
 function CloseIcon(_a) {
@@ -8186,17 +8358,34 @@ var IElementLink = function (_a) {
     }), 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;
+    var zoom = useZoomContext().zoom;
     var pathRef = React.useRef(null);
     var labelRef = React.useRef(null);
     var sourceLabelRef = React.useRef(null);
     var targetLabelRef = React.useRef(null);
     var isFirstRender = React.useRef(true);
     var onPointsChangedRef = React.useRef();
+    var lastUpdatedPoints = React.useRef(Date.now());
     var angleMarkerStart = '0';
     var angleMarkerEnd = '0';
     var markerStartPosition;
     var markerEndPosition;
     var centerPathPosition = undefined;
+    // Throttle pointsProp updates to avoid excessive renders
+    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);
+        };
+        // Use JSON.stringify for deep comparison
+    }, [JSON.stringify(pointsProp)]);
     React.useEffect(function () {
         var paperClickListener = onPaperClicked(function () {
             setSelectedLabelRef({
@@ -8248,10 +8437,13 @@ var IElementLink = function (_a) {
         var handleMouseMove = function (ev) {
             var mouseEvent = ev;
             if (isDragging && draggingPointIndex !== undefined && container) {
-                var offset_1 = getRelativePosition({ x: mouseEvent.clientX, y: mouseEvent.clientY }, container);
+                var paperPosition_1 = windowsPositionToPaperPosition({
+                    x: mouseEvent.clientX,
+                    y: mouseEvent.clientY
+                }, container, zoom);
                 setPoints(function (prev) {
                     var temp = __spreadArray([], prev, true);
-                    temp[draggingPointIndex] = offset_1;
+                    temp[draggingPointIndex] = paperPosition_1;
                     return temp;
                 });
             }
@@ -8266,23 +8458,19 @@ 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, draggingPointIndex]);
+    }, [container, isDragging, draggingPointIndex, zoom]);
     var handleMouseDownOnPath = function (ev) {
         ev.preventDefault();
-        var svgContainer = ev.target.ownerSVGElement;
         //add point if click on path
         setIsDragging(true);
-        var rect = svgContainer.getBoundingClientRect();
-        var offsetX = ev.clientX - rect.left;
-        var offsetY = ev.clientY - rect.top;
         //Position of the new point on the path
-        var newPoint = {
-            x: offsetX,
-            y: offsetY
-        };
-        var newPoints = addPointToList(newPoint, __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false), pathRef.current);
+        var paperPosition = windowsPositionToPaperPosition({
+            x: ev.clientX,
+            y: ev.clientY
+        }, container, zoom);
+        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 === newPoint.x && p.y === newPoint.y; });
+        var addedIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === paperPosition.x && p.y === paperPosition.y; });
         var leftPointIndex = addedIndex - 1;
         var rightPointIndex = addedIndex + 1;
         var distFromLeftPoint;
@@ -8321,7 +8509,7 @@ var IElementLink = function (_a) {
             }
         }
         //Find new index of added point
-        _draggingPointIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === newPoint.x && p.y === newPoint.y; });
+        _draggingPointIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === paperPosition.x && p.y === paperPosition.y; });
         setDraggingPointIndex(_draggingPointIndex);
         setPoints(pointsWithoutStartEndPoint);
     };
@@ -8436,62 +8624,6 @@ var IElementLink = function (_a) {
 };
 var ElementLink = React.memo(IElementLink);
 
-var getSVGBBoxOutsideTransformedParent = function (svgElement) {
-    var bbox = svgElement.getBBox(); // Get bounding box of the element
-    var matrix = svgElement.getCTM(); // Get the current transformation matrix of the parent element
-    // Define the four corners of the bounding box
-    var corners = [
-        { x: bbox.x, y: bbox.y },
-        { x: bbox.x + bbox.width, y: bbox.y },
-        { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
-        { x: bbox.x, y: bbox.y + bbox.height } // Bottom-left
-    ];
-    // Function to apply the transformation matrix to a point
-    function transformPoint(x, y, matrix) {
-        return {
-            x: matrix.a * x + matrix.c * y + matrix.e,
-            y: matrix.b * x + matrix.d * y + matrix.f
-        };
-    }
-    // Transform each corner according to the matrix
-    if (matrix) {
-        return corners.map(function (corner) {
-            return transformPoint(corner.x, corner.y, matrix);
-        });
-    }
-    else {
-        return corners;
-    }
-};
-//function returns the array of corners of the bbox of the element after applying the transformation matrix of the parent element
-var getRotatedSVGBBox = function (svgElement) {
-    var bbox = svgElement.getBBox(); // Get bounding box of the element
-    var matrix = svgElement.getCTM(); // Get the current transformation matrix of the parent element
-    // Define the four corners of the bounding box
-    var corners = [
-        { x: bbox.x, y: bbox.y },
-        { x: bbox.x + bbox.width, y: bbox.y },
-        { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
-        { x: bbox.x, y: bbox.y + bbox.height } // Bottom-left
-    ];
-    // Function to apply the transformation matrix to a point
-    function transformPoint(x, y, matrix) {
-        return {
-            x: matrix.a * x + matrix.c * y,
-            y: matrix.b * x + matrix.d * y // + matrix.f
-        };
-    }
-    // Transform each corner according to the matrix
-    if (matrix) {
-        return corners.map(function (corner) {
-            return transformPoint(corner.x, corner.y, matrix);
-        });
-    }
-    else {
-        return corners;
-    }
-};
-
 function configureLogger(_a) {
     var level = _a.level, customLogger = _a.customLogger;
     if (level !== undefined)
@@ -8541,13 +8673,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;
+    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 _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 _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);
+    var zoom = useZoomContext().zoom;
     var elementRef = React.useRef(null);
     React.useImperativeHandle(forwardedRef, function () { return elementRef.current; });
     var elementLinkStarted = React.useRef();
@@ -8628,24 +8761,39 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
             setSelectedPort(undefined);
         });
+        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]);
+    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 });
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
-                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    isChanged = true;
                     _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
-                return __assign(__assign({}, port), { position: newPosition });
+                port.position = newPosition;
+                return port;
             });
             setPorts(newPorts);
+            if (isChanged) {
+                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+            }
         });
         return function () {
-            eventListener.off();
             eleResizeListener.off();
         };
-    }, [onPortMoved]);
+    }, [onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen creating element link started, ended.
     React.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -8718,11 +8866,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
     }, []);
-    //Normalize port position
-    var normalizePortPosition = function (tempNewPosition) {
-        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
-        return newPosition || tempNewPosition;
-    };
     var handlePortMove = function (newX, newY) {
         if (!selectedPort)
             return;
@@ -8815,24 +8958,17 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 setPotentialPortPosition(undefined);
                 return;
             }
-            /* The above code is calculating the relative position of the mouse within a specific
-            element on the page. It first gets the bounding rectangle of the element using
-            `getBoundingClientRect()` and the bounding box of the element using `getBBox()`. Then,
-            it calculates the relative position of the mouse within the element by subtracting the
-            element's position from the mouse's position. The result is stored in the
-            `mousePositionOnElement` object, which contains the x and y coordinates of the mouse
-            relative to the element. */
-            var elementBounding = elementRef.current.getBoundingClientRect();
-            var elementBBox = elementRef.current.getBBox();
-            //Get relative position of mouse on element
+            var paper = windowsPositionToPaperPosition({
+                x: ev.clientX,
+                y: ev.clientY
+            }, container, zoom);
+            var elementAbsPosition_1 = getElementAbsPosition();
             var mousePositionOnElement = {
-                x: ev.clientX - (elementBounding.left - elementBBox.x),
-                y: ev.clientY - (elementBounding.top - elementBBox.y),
+                x: paper.x - elementAbsPosition_1.x,
+                y: paper.y - elementAbsPosition_1.y,
             };
             var tempPotentialPortPosition = normalizePortPosition(mousePositionOnElement);
-            //Kiểm tra điểm potential(Điểm này nằm trên portMoveableAreas) có nằm trong phạm vi bán kính của vị trí con trỏ chuột không
-            //Nếu có thì cho nó là potentialPortPosition và hiện portPlaceholderShape
-            //Nếu không thì bỏ qua hoặc xóa potentialPortPosition.
+            // Ensure the potential port position is within the element
             if (checkSamePosition(mousePositionOnElement, tempPotentialPortPosition, 5)) {
                 setPotentialPortPosition(tempPotentialPortPosition);
             }
@@ -8876,6 +9012,14 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         if (someElementLinkStarted)
             setHoveredPort(undefined);
     }, [someElementLinkStarted]);
+    //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; });
+        if (!port)
+            return;
+        onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, id, e);
+    }, [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)
@@ -8916,7 +9060,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 break;
         }
         return rotationAngle;
-    }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
+    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition]);
     var renderedShape = React.useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -8940,24 +9084,16 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 : 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, 
-                    // rotation={rotatePort(p)}
-                    calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, 
-                    // onMouseEnter={() => {
-                    //     if (someElementLinkStarted) setHoveredPort(p)
-                    // }}
-                    onMouseLeave: handlePortMouseLeave, 
-                    // onManuallyTriggerRenderHandler={p.manuallyTriggerRenderHandler?.bind(p)}
-                    renderShape: p.renderShape },
+                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 })),
+                            }, 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 })));
             }), texts === null || texts === void 0 ? void 0 :
             texts.map(function (t, index) {
                 var _a, _b;
@@ -9280,6 +9416,8 @@ var Paper = function (props) {
     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
@@ -9287,6 +9425,9 @@ 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]);
+    React.useEffect(function () {
+        zoomRef.current = zoom;
+    }, [zoom]);
     React.useEffect(function () {
         setElements(props.elements);
     }, [props.elements]);
@@ -9399,12 +9540,12 @@ var Paper = function (props) {
         updateElementsTree();
     }, [elements]);
     //Get all child elements of the deleted element
-    var getDeletedChildElements = function (deletedElement) {
-        if (!deletedElement.childrenElementsInTree)
+    var getChildOfElement = function (element) {
+        if (!element.childrenElementsInTree)
             return [];
-        var childElms = deletedElement.childrenElementsInTree;
+        var childElms = element.childrenElementsInTree;
         var childOfChildElements = childElms.reduce(function (acc, ele) {
-            return __spreadArray(__spreadArray([], acc, true), getDeletedChildElements(ele), true);
+            return __spreadArray(__spreadArray([], acc, true), getChildOfElement(ele), true);
         }, []);
         return __spreadArray(__spreadArray([], childElms, true), childOfChildElements, true);
     };
@@ -9413,7 +9554,8 @@ var Paper = function (props) {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
-                var deletedChildElements = getDeletedChildElements(selectedElement);
+                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 newElements = prevElements.filter(function (e) { return !deletedElementIds_1.includes(e.id); });
@@ -9487,11 +9629,10 @@ var Paper = function (props) {
     }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
-        var currentTarget = ev.currentTarget;
-        // Get the mouse position relative to the paper container
-        var paperRect = currentTarget.getBoundingClientRect();
-        var xPosOnPaper = ev.clientX - paperRect.left;
-        var yPosOnPaper = ev.clientY - paperRect.top;
+        var _b = windowsPositionToPaperPosition({
+            x: ev.clientX,
+            y: ev.clientY
+        }, paperContainerRef.current, zoom), xPosOnPaper = _b.x, yPosOnPaper = _b.y;
         //if there is a temp link, update the temp target point
         if (tempLink) {
             var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
@@ -9514,15 +9655,14 @@ var Paper = function (props) {
     };
     var handleMouseDownOnPaper = function (ev) {
         var _a, _b;
-        var currentTarget = ev.currentTarget;
-        // Get the mouse position relative to the paper container
-        var paperRect = currentTarget.getBoundingClientRect();
-        var xPosOnPaper = ev.clientX - paperRect.left;
-        var yPosOnPaper = ev.clientY - paperRect.top;
-        setMouseDownedOnPaper(true);
-        (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
+        var _c = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
+        }, paperContainerRef.current, zoom), xPosOnPaper = _c.x, yPosOnPaper = _c.y;
+        setMouseDownedOnPaper(true);
+        (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
         paperEventEmitter.emitPaperClicked(ev);
         //broadcast mouse moved position to parent component
@@ -9533,11 +9673,11 @@ var Paper = function (props) {
     };
     var handleMouseUpOnPaper = function (ev) {
         var _a;
-        var currentTarget = ev.currentTarget;
         // Get the mouse position relative to the paper container
-        var paperRect = currentTarget.getBoundingClientRect();
-        var xPosOnPaper = ev.clientX - paperRect.left;
-        var yPosOnPaper = ev.clientY - paperRect.top;
+        var _b = windowsPositionToPaperPosition({
+            x: ev.clientX,
+            y: ev.clientY
+        }, paperContainerRef.current, zoom), xPosOnPaper = _b.x, yPosOnPaper = _b.y;
         if (mouseDownedOnPaper) {
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
@@ -9569,17 +9709,15 @@ var Paper = function (props) {
             props.onLinksChanged(newLinks);
         }
     }, [props.onLinksChanged, links]);
-    var handlePointsOfLinkChange = React.useCallback(function (points, id) {
-        //Update path of element link, that changed
-        // const prevLinks = linksRef.current;
-        var updatedLinkIndex = links.findIndex(function (l) { return l.id === id; });
-        links[updatedLinkIndex].points = points;
-        var newLinks = __spreadArray([], links, true);
+    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);
         }
-    }, [props.onLinksChanged, links]);
+    }, [props.onLinksChanged]);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
         var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
@@ -9624,9 +9762,14 @@ var Paper = function (props) {
         var _a;
         ev.stopPropagation();
         var element = elementsRef.current.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) {
-            (_a = props.onPortMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+            (_a = props.onPortMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, port, element, paperPosition);
         }
         if (!tempLinkRef.current && element) {
             //handle create temp element link;
@@ -9659,9 +9802,13 @@ var Paper = function (props) {
         var _a;
         ev.stopPropagation();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        var paperPosition = windowsPositionToPaperPosition({
+            x: ev.clientX,
+            y: ev.clientY
+        }, 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);
+            (_a = props.onPortMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, port, element, paperPosition);
         }
         //Create new element link, if has tempLink
         if (tempLinkRef.current) {
@@ -9904,6 +10051,14 @@ 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);
+        }
+    }, [props.onPortContextMenu]);
     var handleContextMenu = React.useCallback(function (elementId, e, ref) {
         var _a;
         e.preventDefault();
@@ -9916,36 +10071,52 @@ var Paper = function (props) {
     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);
+            (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
         }
     }, [props.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);
+            (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
         }
     }, [props.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);
+            (_a = props.onElementMouseMove) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
         }
     }, [props.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);
+            (_a = props.onElementMouseLeave) === null || _a === void 0 ? void 0 : _a.call(props, ev, element, paperPosition);
         }
     }, [props.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, 
+            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 },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -9953,22 +10124,32 @@ var Paper = function (props) {
                     React.createElement(SelectionFrame, { 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, 
+                        }, 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, 
                         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
                         onMouseDown: function (ev) {
                             var _a;
                             if (selectedElement) {
-                                (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+                                var paperPosition = windowsPositionToPaperPosition({
+                                    x: ev.clientX,
+                                    y: ev.clientY
+                                }, paperContainerRef.current, zoomRef.current);
+                                (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement, paperPosition);
                             }
                         }, onMouseUp: function (ev) {
                             var _a;
                             if (selectedElement) {
-                                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+                                var paperPosition = windowsPositionToPaperPosition({
+                                    x: ev.clientX,
+                                    y: ev.clientY
+                                }, paperContainerRef.current, zoomRef.current);
+                                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement, paperPosition);
                             }
                         }, onMove: function (newX, newY) {
+                            var _a;
                             if (!selectedElement)
                                 return;
                             var oldPosition = __assign({}, selectedElement.position);
+                            // Relative position to the paper container
                             var newPosition = {
                                 x: newX,
                                 y: newY
@@ -9985,10 +10166,29 @@ var Paper = function (props) {
                             //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 = newPosition.x - oldPosition.x;
+                            var offsetY = newPosition.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;
+                            });
+                            (_a = props.onLinksChanged) === null || _a === void 0 ? void 0 : _a.call(props, newLinks);
+                            // End updating the position of links connected to the selected element
                             //Set state to re-render UI with new position
                             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
                             if (props.onElementMoved) {
-                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement);
+                                console.log('onElementMoved', selectedElement.position, newPosition);
+                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, newPosition);
                             }
                             paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
                             setMouseDownedOnPaper(false);
@@ -10010,12 +10210,12 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [handlePortsChanged, handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition]);
+    }, [handlePortsChanged, handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition, zoom]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
         });
-    }, [elementsInTree, renderElementInTree, selectedElement]);
+    }, [elementsInTree, renderElementInTree, selectedElement, zoom]);
     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 },
@@ -10043,83 +10243,6 @@ var Paper = function (props) {
 };
 var Paper$1 = React.memo(Paper);
 
-/**
- * Zoom context to manage zoom level and related state.
- * This context can be used to provide zoom functionality across the application.
- */
-var zoomContext = React.createContext(null);
-var ZoomContextProvider = function (_a) {
-    var children = _a.children;
-    var _b = React.useState(1), zoom = _b[0], setZoom = _b[1];
-    var _c = React.useState(0), scrollLeft = _c[0], setScrollLeft = _c[1];
-    var _d = React.useState(0), scrollTop = _d[0], setScrollTop = _d[1];
-    var wrapperRef = React.useRef(null);
-    var contentRef = React.useRef(null);
-    var handleWheel = function (e) {
-        // Chỉ zoom khi giữ Ctrl
-        if (!e.ctrlKey)
-            return;
-        e.preventDefault();
-        var delta = -e.deltaY;
-        var zoomFactor = 0.05;
-        var newZoom = zoom + (delta > 0 ? zoomFactor : -zoomFactor);
-        newZoom = Math.max(0.1, Math.min(newZoom, 4));
-        if (!wrapperRef.current || !contentRef.current)
-            return;
-        var wrapper = wrapperRef.current;
-        var content = contentRef.current;
-        // Get bounding rectangle of the content
-        var rect = content.getBoundingClientRect();
-        var offsetX = e.clientX - rect.left;
-        var offsetY = e.clientY - rect.top;
-        var percentX = offsetX / (content.offsetWidth);
-        var percentY = offsetY / (content.offsetHeight);
-        console.log(offsetX, offsetY, content.offsetWidth, content.offsetHeight, percentX, percentY);
-        // Old width and height of content
-        var prevWidth = content.offsetWidth * zoom;
-        var prevHeight = content.offsetHeight * zoom;
-        var newWidth = content.offsetWidth * newZoom;
-        var newHeight = content.offsetHeight * newZoom;
-        var scrollLeft = wrapper.scrollLeft + (percentX * (newWidth - prevWidth));
-        var scrollTop = wrapper.scrollTop + (percentY * (newHeight - prevHeight));
-        setZoom(newZoom);
-        setScrollLeft(scrollLeft);
-        setScrollTop(scrollTop);
-    };
-    React.useLayoutEffect(function () {
-        var _a;
-        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-            left: scrollLeft,
-            top: scrollTop,
-        });
-    }, [zoom, scrollLeft, scrollTop]);
-    var resetZoom = function () {
-        setZoom(1);
-    };
-    React.useEffect(function () {
-        var preventBrowserZoom = function (e) {
-            if (e.ctrlKey || e.metaKey) {
-                e.preventDefault();
-            }
-        };
-        window.addEventListener("wheel", preventBrowserZoom, { passive: false });
-        return function () {
-            window.removeEventListener("wheel", preventBrowserZoom);
-        };
-    }, []);
-    return (React.createElement(zoomContext.Provider, { value: { zoom: zoom, setZoom: setZoom, resetZoom: resetZoom } },
-        React.createElement("div", { ref: wrapperRef, onWheel: handleWheel, style: {
-                width: "100vw",
-                height: "92vh",
-                overflow: "auto",
-            } },
-            React.createElement("div", { ref: contentRef, style: {
-                    transform: "scale(".concat(zoom, ")"),
-                    transformOrigin: "top left",
-                    // transition: "transform 0.1s linear",
-                } }, children))));
-};
-
 var Editor = function (_a) {
     var editorContext = _a.editorContext, width = _a.width, height = _a.height;
     var _b = React.useState([]), elements = _b[0], setElements = _b[1];
@@ -10156,14 +10279,14 @@ var Editor = function (_a) {
     var handlePaperClicked = React.useCallback(function (position) {
         editorContext.onPaperClickedHandler(position);
     }, [editorContext]);
-    var handlePortMouseDown = React.useCallback(function (port, element) {
-        editorContext.onPortMouseDownHandler(port, element);
+    var handlePortMouseDown = React.useCallback(function (port, element, paperPosition) {
+        editorContext.onPortMouseDownHandler(port, element, paperPosition);
     }, [editorContext]);
-    var handlePortMouseUp = React.useCallback(function (port, element) {
-        editorContext.onPortMouseUpHandler(port, element);
+    var handlePortMouseUp = React.useCallback(function (port, element, paperPosition) {
+        editorContext.onPortMouseUpHandler(port, element, paperPosition);
     }, [editorContext]);
-    var handlePortMoved = React.useCallback(function (position, port, element) {
-        editorContext.onPortMovedHandler(position, port, element);
+    var handlePortMoved = React.useCallback(function (relativePosition, port, element) {
+        editorContext.onPortMovedHandler(relativePosition, port, element);
     }, [editorContext]);
     var handlePortSelected = React.useCallback(function (port, element) {
         editorContext.onPortSelectedHandler(port, element);
@@ -10171,11 +10294,14 @@ var Editor = function (_a) {
     var handlePortsChanged = React.useCallback(function (ports, element) {
         element.ports = ports;
     }, [editorContext]);
+    var handlePortContextMenu = React.useCallback(function (port, element, event) {
+        editorContext.onPortContextMenuHandler(port, element, event);
+    }, [editorContext]);
     var handleElementContextMenu = React.useCallback(function (element, event) {
         editorContext.onElementContextMenuHandler(element, event);
     }, [editorContext]);
-    var handleElementMoved = React.useCallback(function (position, element) {
-        editorContext.onElementMovedHandler(position, element);
+    var handleElementMoved = React.useCallback(function (relativePosition, element) {
+        editorContext.onElementMovedHandler(relativePosition, element);
     }, [editorContext]);
     var handleElementResized = React.useCallback(function (size, element) {
         editorContext.onElementResizedHandler(size, element);
@@ -10183,17 +10309,17 @@ var Editor = function (_a) {
     var handleElementSelected = React.useCallback(function (element) {
         editorContext.onElementSelectedHandler(element);
     }, [editorContext]);
-    var handleElementMouseLeave = React.useCallback(function (ev, element) {
-        editorContext.onElementMouseLeaveHandler(ev, element);
+    var handleElementMouseLeave = React.useCallback(function (ev, element, paperPosition) {
+        editorContext.onElementMouseLeaveHandler(ev, element, paperPosition);
     }, [editorContext]);
-    var handleElementMouseMove = React.useCallback(function (ev, element) {
-        editorContext.onElementMouseMoveHandler(ev, element);
+    var handleElementMouseMove = React.useCallback(function (ev, element, paperPosition) {
+        editorContext.onElementMouseMoveHandler(ev, element, paperPosition);
     }, [editorContext]);
-    var handleElementMouseDown = React.useCallback(function (ev, element) {
-        editorContext.onElementMouseDownHandler(ev, element);
+    var handleElementMouseDown = React.useCallback(function (ev, element, paperPosition) {
+        editorContext.onElementMouseDownHandler(ev, element, paperPosition);
     }, [editorContext]);
-    var handleElementMouseUp = React.useCallback(function (ev, element) {
-        editorContext.onElementMouseUpHandler(ev, element);
+    var handleElementMouseUp = React.useCallback(function (ev, element, paperPosition) {
+        editorContext.onElementMouseUpHandler(ev, element, paperPosition);
     }, [editorContext]);
     var handleElementsChanged = React.useCallback(function (elements) {
         editorContext.elements = elements;
@@ -10202,7 +10328,6 @@ var Editor = function (_a) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
     var handleLinksChanged = React.useCallback(function (links) {
-        console.log(links);
         editorContext.links = links;
     }, [editorContext]);
     var handleTextSelected = React.useCallback(function (text) {
@@ -10224,11 +10349,9 @@ var Editor = function (_a) {
         return null;
     }, [editorContext]);
     var handlePaperMouseMoved = React.useCallback(function (position) {
-        console.log("handlePaperMouseMoved", position);
         editorContext.onPaperMouseMovedHandler(position);
     }, [editorContext]);
     var handlePaperMouseDown = React.useCallback(function (position) {
-        console.log("handlePaperMouseDown", position);
         editorContext.onPaperMouseDownHandler(position);
     }, [editorContext]);
     var handlePaperMouseUp = React.useCallback(function (position) {
@@ -10236,7 +10359,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, 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) }))));
+            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) }))));
 };
 
 exports.CircleRC = Circle;
@@ -10280,7 +10403,6 @@ exports.getPointsFromPathData = getPointsFromPathData;
 exports.getPointsFromPathElement = getPointsFromPathElement;
 exports.getPortAbsolutePosition = getPortAbsolutePosition;
 exports.getRectangleCorners = getRectangleCorners;
-exports.getRelativePosition = getRelativePosition;
 exports.getRotatedRectangleCoordinates = getRotatedRectangleCoordinates;
 exports.getRotatedSVGBBox = getRotatedSVGBBox;
 exports.getSVGBBoxOutsideTransformedParent = getSVGBBoxOutsideTransformedParent;
@@ -10289,3 +10411,4 @@ exports.pathDataToD = pathDataToD;
 exports.removeDuplicatePosition = removeDuplicatePosition;
 exports.transformAbsPositionToElementRelativePosition = transformAbsPositionToElementRelativePosition;
 exports.transformAbsPositionToRelativePositionInsideElement = transformAbsPositionToRelativePositionInsideElement;
+exports.windowsPositionToPaperPosition = windowsPositionToPaperPosition;