orcasvn-react-diagrams 0.1.47 → 0.1.49

package/dist/cjs/index.js

@@ -1065,7 +1065,8 @@ var Circle = React.forwardRef(function (props, ref) {
         s.width = props.width;
     }
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height, ref: ref }),
-        React.createElement("circle", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
+        React.createElement("circle", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth }),
+        props.children));
 });
 
 var Crescent = React.forwardRef(function (props, ref) {
@@ -1084,7 +1085,8 @@ var Crescent = React.forwardRef(function (props, ref) {
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({ ref: ref, viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
         React.createElement("rect", { width: 100, height: 100, stroke: "transparent", fill: 'transparent' }),
-        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M 0 75 A 50 50 0 1 1 100 75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
+        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M 0 75 A 50 50 0 1 1 100 75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw }),
+        props.children));
 });
 
 var Rectangle = React.forwardRef(function (props, ref) {
@@ -1104,7 +1106,8 @@ var Rectangle = React.forwardRef(function (props, ref) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw })));
+        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw }),
+        props.children));
 });
 
 var RectangularFrame = React.forwardRef(function (props, ref) {
@@ -1130,7 +1133,8 @@ var RectangularFrame = React.forwardRef(function (props, ref) {
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
         React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw }),
         React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-hallway', x: vbX + scaledFw / 2, y: vbY + scaledFw / 2, width: scaledWidth - scaledFw, height: scaledHeight - scaledFw, stroke: props.frameColor || "none", strokeWidth: fw, fill: props.fill || "transparent" }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" })));
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" }),
+        props.children));
 });
 
 var createRoot;
@@ -1207,25 +1211,99 @@ var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
 var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
 var PORT_DEFAULT_SIZE = 20;
 
+var Logger = /** @class */ (function () {
+    function Logger() {
+        this.level = 'info';
+        this.customLogger = null;
+    }
+    Logger.prototype.setLevel = function (level) {
+        this.level = level;
+    };
+    Logger.prototype.setCustomLogger = function (logger) {
+        this.customLogger = logger;
+    };
+    Logger.prototype.log = function (level, message) {
+        var _a;
+        var optionalParams = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            optionalParams[_i - 2] = arguments[_i];
+        }
+        var levels = ['error', 'warn', 'info', 'debug'];
+        if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
+            if (this.customLogger) {
+                this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
+            }
+            else {
+                console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
+            }
+        }
+    };
+    Logger.prototype.error = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
+    };
+    Logger.prototype.warn = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
+    };
+    Logger.prototype.info = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
+    };
+    Logger.prototype.debug = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
+    };
+    return Logger;
+}());
+var logger = new Logger();
+
 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, 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 _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);
+        }
+    }, [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 _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,8 +1320,8 @@ 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);
         }
@@ -1259,8 +1337,8 @@ var SelectionFrame = function (props) {
             var newX = mousePosition.x + xFromMouse;
             var newY = mousePosition.y + yFromMouse;
             if (propOnMove) {
-                setX(newX);
-                setY(newY);
+                setCurX(newX);
+                setCurY(newY);
                 propOnMove(newX, newY);
                 setLastMoveTime(Date.now());
                 setStartX(mouseEvent.clientX);
@@ -1290,6 +1368,14 @@ var SelectionFrame = function (props) {
         }
     };
     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) {
@@ -1330,11 +1416,15 @@ var SelectionFrame = function (props) {
         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, 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;
@@ -1351,6 +1441,13 @@ var SelectionFrame = function (props) {
 
 var useSelectionFrame = function (props) {
     React.useEffect(function () {
+        //log selection frame rendering
+        if (props.targetSVGElement) {
+            console.debug('Rendering SelectionFrame for targetSVGElement:', props.targetSVGElement);
+        }
+        else {
+            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) {
@@ -1368,7 +1465,7 @@ var useSelectionFrame = function (props) {
                 };
             }
         }
-    }, [props.targetSVGElement, props.container]);
+    }, [props]);
 };
 
 var eventEmitter = new EventEmitter();
@@ -1684,8 +1781,8 @@ var Text = React.forwardRef(function (_a, ref) {
         onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
     };
     useSelectionFrame({
-        x: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.x,
-        y: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.y,
+        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: {
@@ -7387,65 +7484,6 @@ function calculateAngleWithOx(pStart, pEnd) {
     return angleInDegrees;
 }
 
-var Logger = /** @class */ (function () {
-    function Logger() {
-        this.level = 'info';
-        this.customLogger = null;
-    }
-    Logger.prototype.setLevel = function (level) {
-        this.level = level;
-    };
-    Logger.prototype.setCustomLogger = function (logger) {
-        this.customLogger = logger;
-    };
-    Logger.prototype.log = function (level, message) {
-        var _a;
-        var optionalParams = [];
-        for (var _i = 2; _i < arguments.length; _i++) {
-            optionalParams[_i - 2] = arguments[_i];
-        }
-        var levels = ['error', 'warn', 'info', 'debug'];
-        if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
-            if (this.customLogger) {
-                this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
-            }
-            else {
-                console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
-            }
-        }
-    };
-    Logger.prototype.error = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
-    };
-    Logger.prototype.warn = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
-    };
-    Logger.prototype.info = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
-    };
-    Logger.prototype.debug = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
-    };
-    return Logger;
-}());
-var logger = new Logger();
-
 /**
  * Check if position 1 is within the radius r of position 2
  * @returns boolean
@@ -7868,7 +7906,7 @@ var correctPortPositionInElement = function (elementRelativePosition, elementWid
 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;
+    renderShape = props.renderShape, children = props.children;
     var textRef = React.useRef(null);
     var rotationAngle = React.useMemo(function () {
         if (!calculateRotationAngle)
@@ -7890,10 +7928,10 @@ var Port1 = React.forwardRef(function (props, ref) {
     var renderedShape = React.useMemo(function () {
         if (renderShape) {
             var RenderShape = renderShape;
-            return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
+            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" });
+            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,
@@ -8027,7 +8065,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" }),
@@ -8389,13 +8427,12 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
 });
 
 var Element = React.forwardRef(function (props, forwardedRef) {
-    var _a, _b;
-    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; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var 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 _c = React.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
-    var _d = React.useState(), hoveredPort = _d[0], setHoveredPort = _d[1];
-    var _e = React.useState([]), ports = _e[0], setPorts = _e[1];
-    var _f = React.useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
-    var _g = React.useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
+    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 _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 elementRef = React.useRef(null);
     React.useImperativeHandle(forwardedRef, function () { return elementRef.current; });
@@ -8773,51 +8810,40 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             setPorts(function (prev) { return __spreadArray([], prev, true); });
         }
     }, []);
-    //use selection frame
-    useSelectionFrame({
-        container: container,
-        targetSVGElement: ((_a = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _a === void 0 ? void 0 : _a.current) || undefined,
-        resizability: {
-            enabled: false,
-            keepRatio: false
-        },
-        x: selectedPort ? elementAbsPosition.x + selectedPort.position.x : undefined,
-        y: selectedPort ? elementAbsPosition.y + selectedPort.position.y : undefined,
-        // width: selectedPort?.size.width,
-        // height: selectedPort?.size.height,
-        // movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
-        onMove: handlePortMove
-    });
-    useSelectionFrame({
-        container: container,
-        targetSVGElement: ((_b = hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref) === null || _b === void 0 ? void 0 : _b.current) || undefined,
-        resizability: {
-            enabled: false,
-            keepRatio: false
-        },
-    });
-    return (React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
-        renderedShape,
-        potentialPortPosition && (portPlaceholderShape
-            ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
-            : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
-        ports.map(function (p, index) {
-            var _a, _b, _c, _d, _e, _f;
-            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 });
-        }), texts === null || texts === void 0 ? void 0 :
-        texts.map(function (t, index) {
-            var _a, _b;
-            return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: ((_a = t.position) === null || _a === void 0 ? void 0 : _a.x) || 0, y: ((_b = t.position) === null || _b === void 0 ? void 0 : _b.y) || 0, width: t.size.width, height: t.size.height, editable: t.editable, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, parentAbsolutePosition: elementAbsPosition, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(id, t.id, newContent); } });
-        }),
-        children));
+    //log element render
+    logger.debug('Rendering Element', id, x, y, width, height, cssClass, portPlaceholderShape, children, container, parentAbsolutePosition, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
+            renderedShape,
+            potentialPortPosition && (portPlaceholderShape
+                ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
+                : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
+            ports.map(function (p, index) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, 
+                    // 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 },
+                    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 })),
+                    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
+                        } })));
+            }), texts === null || texts === void 0 ? void 0 :
+            texts.map(function (t, index) {
+                var _a, _b;
+                return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: ((_a = t.position) === null || _a === void 0 ? void 0 : _a.x) || 0, y: ((_b = t.position) === null || _b === void 0 ? void 0 : _b.y) || 0, width: t.size.width, height: t.size.height, editable: t.editable, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, parentAbsolutePosition: elementAbsPosition, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(id, t.id, newContent); } });
+            }),
+            children)));
 });
 var Element$1 = React.memo(Element);
 
@@ -9140,7 +9166,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]);
@@ -9160,7 +9186,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;
@@ -9625,78 +9651,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,
-        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);
-        }
-    });
     /*
        Cache to avoid re-initializing the function when the component re-renders to
        avoid causing the components using it to re-render unnecessarily
@@ -9845,13 +9799,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
+                        }, 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, 
+                        //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;