orcasvn-react-diagrams 0.1.46 → 0.1.48

package/dist/cjs/index.js

@@ -1208,24 +1208,39 @@ var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
 var PORT_DEFAULT_SIZE = 20;
 
 var SelectionFrame = function (props) {
-    var _a, _b;
-    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, 
+    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, x = props.x, y = props.y, 
     // movingOffsetThreshold: propMovingOffsetThreshold,
-    propMovingRate = props.movingRate, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor;
+    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 _c = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _c[0], setWidth = _c[1];
-    var _d = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _d[0], setHeight = _d[1];
-    var _e = React.useState((_a = props.x) !== null && _a !== void 0 ? _a : 0), x = _e[0], setX = _e[1];
-    var _f = React.useState((_b = props.y) !== null && _b !== void 0 ? _b : 0), y = _f[0], setY = _f[1];
+    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);
+        }
+    }, [x]);
+    var _c = React.useState(x !== null && x !== void 0 ? x : 0), curX = _c[0], setX = _c[1];
+    var _d = React.useState(y !== null && y !== void 0 ? y : 0), curY = _d[0], setY = _d[1];
+    React.useEffect(function () {
+        if (x) {
+            setX(x);
+        }
+    }, [x]);
+    React.useEffect(function () {
+        if (y) {
+            setY(y);
+        }
+    }, [y]);
     var framePadding = propFramePadding || 0;
     var r = 5;
-    var _g = React.useState(false), draggingRect = _g[0], setDraggingRect = _g[1];
-    var _h = React.useState(false), draggingCircle = _h[0], setDraggingCircle = _h[1];
-    var _j = React.useState(0), startX = _j[0], setStartX = _j[1];
-    var _k = React.useState(0), startY = _k[0], setStartY = _k[1];
-    var _l = React.useState(0), xFromMouse = _l[0], setXFromMouse = _l[1];
-    var _m = React.useState(0), yFromMouse = _m[0], setYFromMouse = _m[1];
-    var _o = React.useState(0), lastMoveTime = _o[0], setLastMoveTime = _o[1];
+    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. 
@@ -1242,11 +1257,14 @@ var SelectionFrame = function (props) {
             setStartX(event.clientX);
             setStartY(event.clientY);
             var mousePosition = getMousePosition(event);
-            var xFromMouse_1 = x - mousePosition.x;
-            var yFromMouse_1 = y - mousePosition.y;
+            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;
@@ -1331,7 +1349,7 @@ var SelectionFrame = function (props) {
             container.removeEventListener('mousemove', circleHandleMouseMove);
             container.removeEventListener('mouseup', circleHandleMouseUp);
         };
-    }, [draggingCircle, width, height, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
+    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
@@ -1341,7 +1359,7 @@ var SelectionFrame = function (props) {
     }
     return (React.createElement(React.Fragment, null,
         PropDragDropHandlerElement && React.createElement(PropDragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
+        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));
 };
@@ -1365,7 +1383,7 @@ var useSelectionFrame = function (props) {
                 };
             }
         }
-    }, [props.targetSVGElement, props.container]);
+    }, [props]);
 };
 
 var eventEmitter = new EventEmitter();
@@ -8024,7 +8042,7 @@ function CloseIcon(_a) {
     return (React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 24.00 24.00", xmlns: "http://www.w3.org/2000/svg", fill: "#ff0000", transform: "rotate(0)", onMouseDown: function (ev) { ev.stopPropagation(); }, onClick: onClick, cursor: 'pointer' },
         React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0", transform: "translate(3.84,3.84), scale(0.68)" },
             React.createElement("rect", { x: "0", y: "0", width: "24.00", height: "24.00", rx: "12", fill: "#ffffff", strokeWidth: "0" })),
-        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#CCCCCC", "stroke-width": "0.048" }),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#CCCCCC", strokeWidth: "0.048" }),
         React.createElement("g", { id: "SVGRepo_iconCarrier" },
             React.createElement("g", null,
                 React.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
@@ -9137,7 +9155,7 @@ var Paper = function (props) {
     var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
-    var selectedElementAbsPosition = React.useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement]);
+    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 () {
         setElements(props.elements);
     }, [props.elements]);
@@ -9157,7 +9175,7 @@ var Paper = function (props) {
         return function () {
             off();
         };
-    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements]);
+    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements, selectedElement]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
@@ -9622,66 +9640,6 @@ var Paper = function (props) {
         }
         return element;
     };
-    //use selection frame
-    useSelectionFrame({
-        container: paperContainerRef.current,
-        targetSVGElement: selectedElementSVG || undefined,
-        resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
-            enabled: true,
-            keepRatio: true
-        },
-        x: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x,
-        y: 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,
-        //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
-        onMove: function (newX, newY) {
-            if (!selectedElement)
-                return;
-            var oldPosition = __assign({}, selectedElement.position);
-            var newPosition = {
-                x: newX,
-                y: newY
-            };
-            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
-            //Adjust position of element if it should move as a port on parent port area
-            if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
-                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
-                updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
-            }
-            else {
-                updateElementPosition(selectedElement, newPosition.x, newPosition.y, false);
-            }
-            //let newElementPosition = updateElementPosition(selectedElement, newPosition.x, newPosition.y, true)
-            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
-            logger.info("Element ".concat(selectedElement.id, " is moving to relative position ").concat(JSON.stringify(selectedElement.position)));
-            //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);
-            }
-            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
-            setMouseDownedOnPaper(false);
-        },
-        onResize: function (width, height) {
-            if (!selectedElement)
-                return;
-            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
-            var oldSize = selectedElement.size;
-            var newSize = { width: width, height: height };
-            elements[indexSelectedElement].size = newSize;
-            var newElements = __spreadArray([], elements, true);
-            setElements(newElements);
-            if (props.onElementsChanged) {
-                props.onElementsChanged(newElements);
-            }
-            if (props.onElementResized) {
-                props.onElementResized(newSize, selectedElement, indexSelectedElement);
-            }
-            paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
-            setMouseDownedOnPaper(false);
-        }
-    });
     /*
        Cache to avoid re-initializing the function when the component re-renders to
        avoid causing the components using it to re-render unnecessarily
@@ -9830,13 +9788,75 @@ var Paper = function (props) {
         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, 
                 // 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))));
-    }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
+                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),
+                !!paperContainerRef.current && !!selectedElement && selectedElement.id === element.id &&
+                    React.createElement(SelectionFrame, { container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
+                            enabled: true,
+                            keepRatio: true
+                        }, x: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, y: 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, 
+                        //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);
+                            }
+                        }, onMouseUp: function (ev) {
+                            var _a;
+                            if (selectedElement) {
+                                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+                            }
+                        }, onMove: function (newX, newY) {
+                            if (!selectedElement)
+                                return;
+                            var oldPosition = __assign({}, selectedElement.position);
+                            var newPosition = {
+                                x: newX,
+                                y: newY
+                            };
+                            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
+                            //Adjust position of element if it should move as a port on parent port area
+                            if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
+                                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
+                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
+                            }
+                            else {
+                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, false);
+                            }
+                            //let newElementPosition = updateElementPosition(selectedElement, newPosition.x, newPosition.y, true)
+                            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
+                            logger.info("Element ".concat(selectedElement.id, " is moving to relative position ").concat(JSON.stringify(selectedElement.position)));
+                            //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);
+                            }
+                            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
+                            setMouseDownedOnPaper(false);
+                        }, onResize: function (width, height) {
+                            if (!selectedElement)
+                                return;
+                            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
+                            var oldSize = selectedElement.size;
+                            var newSize = { width: width, height: height };
+                            elements[indexSelectedElement].size = newSize;
+                            var newElements = __spreadArray([], elements, true);
+                            setElements(newElements);
+                            if (props.onElementsChanged) {
+                                props.onElementsChanged(newElements);
+                            }
+                            if (props.onElementResized) {
+                                props.onElementResized(newSize, selectedElement, indexSelectedElement);
+                            }
+                            paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
+                            setMouseDownedOnPaper(false);
+                        } }))));
+    }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
         });
-    }, [elementsInTree, renderElementInTree]);
+    }, [elementsInTree, renderElementInTree, selectedElement]);
     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 },

package/dist/cjs/types/mocks/editorContextSingleElementTestEvents.d.ts

@@ -0,0 +1,2 @@
+import { EditorContext } from "../models/implementations/EditorContext";
+export declare const editorContext: EditorContext;

package/dist/cjs/types/models/IElementSelectorProps.d.ts

@@ -8,6 +8,8 @@ interface ISelectionFrameProps {
     width?: number;
     height?: number;
     targetSVGElement?: SVGSVGElement;
+    onMouseDown?: (event: React.MouseEvent<SVGRectElement>) => void;
+    onMouseUp?: (event: React.MouseEvent<SVGRectElement>) => void;
     onMove?: (x: number, y: number) => void;
     onResize?: (width: number, height: number) => void;
     resizability: IResizability;

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo, useState, useCallback, useEffect, createContext, useRef, useContext, memo, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useMemo, useEffect, useState, useCallback, createContext, useRef, useContext, memo, useLayoutEffect, useImperativeHandle } from 'react';
 import require$$0 from 'react-dom';
 
 var PositioningAnchor;
@@ -1204,24 +1204,39 @@ var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
 var PORT_DEFAULT_SIZE = 20;
 
 var SelectionFrame = function (props) {
-    var _a, _b;
-    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, 
+    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, x = props.x, y = props.y, 
     // movingOffsetThreshold: propMovingOffsetThreshold,
-    propMovingRate = props.movingRate, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor;
+    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 _c = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _c[0], setWidth = _c[1];
-    var _d = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _d[0], setHeight = _d[1];
-    var _e = React.useState((_a = props.x) !== null && _a !== void 0 ? _a : 0), x = _e[0], setX = _e[1];
-    var _f = React.useState((_b = props.y) !== null && _b !== void 0 ? _b : 0), y = _f[0], setY = _f[1];
+    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];
+    useEffect(function () {
+        if (propWidth) {
+            setWidth(propWidth);
+        }
+    }, [x]);
+    var _c = React.useState(x !== null && x !== void 0 ? x : 0), curX = _c[0], setX = _c[1];
+    var _d = React.useState(y !== null && y !== void 0 ? y : 0), curY = _d[0], setY = _d[1];
+    useEffect(function () {
+        if (x) {
+            setX(x);
+        }
+    }, [x]);
+    useEffect(function () {
+        if (y) {
+            setY(y);
+        }
+    }, [y]);
     var framePadding = propFramePadding || 0;
     var r = 5;
-    var _g = React.useState(false), draggingRect = _g[0], setDraggingRect = _g[1];
-    var _h = React.useState(false), draggingCircle = _h[0], setDraggingCircle = _h[1];
-    var _j = React.useState(0), startX = _j[0], setStartX = _j[1];
-    var _k = React.useState(0), startY = _k[0], setStartY = _k[1];
-    var _l = useState(0), xFromMouse = _l[0], setXFromMouse = _l[1];
-    var _m = useState(0), yFromMouse = _m[0], setYFromMouse = _m[1];
-    var _o = React.useState(0), lastMoveTime = _o[0], setLastMoveTime = _o[1];
+    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 = useState(0), xFromMouse = _j[0], setXFromMouse = _j[1];
+    var _k = 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. 
@@ -1238,11 +1253,14 @@ var SelectionFrame = function (props) {
             setStartX(event.clientX);
             setStartY(event.clientY);
             var mousePosition = getMousePosition(event);
-            var xFromMouse_1 = x - mousePosition.x;
-            var yFromMouse_1 = y - mousePosition.y;
+            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 = useCallback(function (event) {
         var mouseEvent = event;
@@ -1327,7 +1345,7 @@ var SelectionFrame = function (props) {
             container.removeEventListener('mousemove', circleHandleMouseMove);
             container.removeEventListener('mouseup', circleHandleMouseUp);
         };
-    }, [draggingCircle, width, height, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
+    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
@@ -1337,7 +1355,7 @@ var SelectionFrame = function (props) {
     }
     return (React.createElement(React.Fragment, null,
         PropDragDropHandlerElement && React.createElement(PropDragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
+        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));
 };
@@ -1361,7 +1379,7 @@ var useSelectionFrame = function (props) {
                 };
             }
         }
-    }, [props.targetSVGElement, props.container]);
+    }, [props]);
 };
 
 var eventEmitter = new EventEmitter();
@@ -8020,7 +8038,7 @@ function CloseIcon(_a) {
     return (React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 24.00 24.00", xmlns: "http://www.w3.org/2000/svg", fill: "#ff0000", transform: "rotate(0)", onMouseDown: function (ev) { ev.stopPropagation(); }, onClick: onClick, cursor: 'pointer' },
         React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0", transform: "translate(3.84,3.84), scale(0.68)" },
             React.createElement("rect", { x: "0", y: "0", width: "24.00", height: "24.00", rx: "12", fill: "#ffffff", strokeWidth: "0" })),
-        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#CCCCCC", "stroke-width": "0.048" }),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#CCCCCC", strokeWidth: "0.048" }),
         React.createElement("g", { id: "SVGRepo_iconCarrier" },
             React.createElement("g", null,
                 React.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
@@ -9133,7 +9151,7 @@ var Paper = function (props) {
     var linksRef = useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
-    var selectedElementAbsPosition = useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement]);
+    var selectedElementAbsPosition = 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]);
     useEffect(function () {
         setElements(props.elements);
     }, [props.elements]);
@@ -9153,7 +9171,7 @@ var Paper = function (props) {
         return function () {
             off();
         };
-    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements]);
+    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements, selectedElement]);
     //Cache elements to avoid re-render when elements changed
     useEffect(function () {
         elementsRef.current = elements;
@@ -9618,66 +9636,6 @@ var Paper = function (props) {
         }
         return element;
     };
-    //use selection frame
-    useSelectionFrame({
-        container: paperContainerRef.current,
-        targetSVGElement: selectedElementSVG || undefined,
-        resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
-            enabled: true,
-            keepRatio: true
-        },
-        x: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x,
-        y: 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,
-        //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
-        onMove: function (newX, newY) {
-            if (!selectedElement)
-                return;
-            var oldPosition = __assign({}, selectedElement.position);
-            var newPosition = {
-                x: newX,
-                y: newY
-            };
-            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
-            //Adjust position of element if it should move as a port on parent port area
-            if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
-                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
-                updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
-            }
-            else {
-                updateElementPosition(selectedElement, newPosition.x, newPosition.y, false);
-            }
-            //let newElementPosition = updateElementPosition(selectedElement, newPosition.x, newPosition.y, true)
-            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
-            logger.info("Element ".concat(selectedElement.id, " is moving to relative position ").concat(JSON.stringify(selectedElement.position)));
-            //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);
-            }
-            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
-            setMouseDownedOnPaper(false);
-        },
-        onResize: function (width, height) {
-            if (!selectedElement)
-                return;
-            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
-            var oldSize = selectedElement.size;
-            var newSize = { width: width, height: height };
-            elements[indexSelectedElement].size = newSize;
-            var newElements = __spreadArray([], elements, true);
-            setElements(newElements);
-            if (props.onElementsChanged) {
-                props.onElementsChanged(newElements);
-            }
-            if (props.onElementResized) {
-                props.onElementResized(newSize, selectedElement, indexSelectedElement);
-            }
-            paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
-            setMouseDownedOnPaper(false);
-        }
-    });
     /*
        Cache to avoid re-initializing the function when the component re-renders to
        avoid causing the components using it to re-render unnecessarily
@@ -9826,13 +9784,75 @@ var Paper = function (props) {
         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 === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, 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, 
                 // 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))));
-    }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
+                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),
+                !!paperContainerRef.current && !!selectedElement && selectedElement.id === element.id &&
+                    React.createElement(SelectionFrame, { container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
+                            enabled: true,
+                            keepRatio: true
+                        }, x: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, y: 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, 
+                        //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);
+                            }
+                        }, onMouseUp: function (ev) {
+                            var _a;
+                            if (selectedElement) {
+                                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+                            }
+                        }, onMove: function (newX, newY) {
+                            if (!selectedElement)
+                                return;
+                            var oldPosition = __assign({}, selectedElement.position);
+                            var newPosition = {
+                                x: newX,
+                                y: newY
+                            };
+                            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
+                            //Adjust position of element if it should move as a port on parent port area
+                            if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
+                                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
+                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
+                            }
+                            else {
+                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, false);
+                            }
+                            //let newElementPosition = updateElementPosition(selectedElement, newPosition.x, newPosition.y, true)
+                            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
+                            logger.info("Element ".concat(selectedElement.id, " is moving to relative position ").concat(JSON.stringify(selectedElement.position)));
+                            //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);
+                            }
+                            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
+                            setMouseDownedOnPaper(false);
+                        }, onResize: function (width, height) {
+                            if (!selectedElement)
+                                return;
+                            var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
+                            var oldSize = selectedElement.size;
+                            var newSize = { width: width, height: height };
+                            elements[indexSelectedElement].size = newSize;
+                            var newElements = __spreadArray([], elements, true);
+                            setElements(newElements);
+                            if (props.onElementsChanged) {
+                                props.onElementsChanged(newElements);
+                            }
+                            if (props.onElementResized) {
+                                props.onElementResized(newSize, selectedElement, indexSelectedElement);
+                            }
+                            paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
+                            setMouseDownedOnPaper(false);
+                        } }))));
+    }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition]);
     var ElementsInTree = useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
         });
-    }, [elementsInTree, renderElementInTree]);
+    }, [elementsInTree, renderElementInTree, selectedElement]);
     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 },