orcasvn-react-diagrams 0.1.36 → 0.1.38

package/dist/cjs/index.js

@@ -486,6 +486,7 @@ function generateUniqueId() {
 var Element$2 = /** @class */ (function () {
     function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
+        this.positionAnchor = exports.PositioningAnchor.TopLeft;
         this._childrenElements = [];
         this.resizability = {
             enabled: true,
@@ -7284,6 +7285,99 @@ var checkPositionOnLine = function (position, line) {
     return _line.contains(point);
 };
 
+// Calculate the position of the 4 vertices of a rectangle relative to its parent svg
+var getRectangleCorners = function (rectSVG) {
+    var ownerSVG = rectSVG.ownerSVGElement;
+    var rectStrokeWidth = Number(rectSVG.getAttribute('stroke-width')) || 0;
+    var strokeWidthOffset = rectStrokeWidth / 2;
+    if (!ownerSVG) {
+        throw new Error('Rectangle does not wrapper by svg.');
+    }
+    var ownerX = ownerSVG.x.baseVal.value;
+    var ownerY = ownerSVG.y.baseVal.value;
+    var ownerWidth = ownerSVG.width.baseVal.value;
+    var ownerHeight = ownerSVG.height.baseVal.value;
+    var a = { x: ownerX + strokeWidthOffset, y: ownerY + strokeWidthOffset };
+    var b = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + strokeWidthOffset };
+    var c = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
+    var d = { x: ownerX + strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
+    return [a, b, c, d];
+};
+//find rotation angle of svg element on g element
+var getElementRotationInfo = function (element) {
+    var gElement = element;
+    var rotationAngle = 0;
+    while (!(gElement instanceof SVGGElement)) {
+        gElement = gElement.parentElement;
+    }
+    var transform = gElement.getAttribute('transform');
+    if (transform) {
+        // Match the rotation value using a regular expression
+        var rotateMatch = transform.match(/rotate\(([-\d.]+)(?:\s+[-\d.]+\s+[-\d.]+)?\)/);
+        if (rotateMatch) {
+            // The first capture group is the rotation angle
+            rotationAngle = parseFloat(rotateMatch[1]);
+        }
+    }
+    return rotationAngle;
+};
+
+// const topLeftOffsetOfSquareHoldingRect = (x: number, y: number, rectWidth: number, rectHeight: number, rotation?: number): IPosition => {
+//     rotation = rotation || 0;
+//     const rotationInRadians = rotation * Math.PI / 180;
+//     //calculate the bouding edge of the square that holds the rectangle with the given width and height and rotation, knowing that the square is always parallel to the x and y axis
+//     //calculate a1 equal sin of rotation * height
+//     const a1 = Math.abs(Math.sin(rotationInRadians) * rectHeight);
+//     //calculate a2 equal cos of rotation * width
+//     const a2 = Math.abs(Math.cos(rotationInRadians) * rectWidth);
+//     const a = a1 + a2;
+//     console.info(`a1: ${a1}, a2: ${a2}, a: ${a}`);
+//     //calculate b1 equal cos of rotation * height
+//     const b1 = Math.abs(Math.cos(rotationInRadians) * rectHeight);
+//     //calculate b2 equal sin of rotation * width
+//     const b2 = Math.abs(Math.sin(rotationInRadians) * rectWidth);
+//     const b = b1 + b2;
+//     console.info(`b1: ${b1}, b2: ${b2}, b: ${b}`);
+//     //const squareEdge = Math.max(rectWidth, rectHeight);
+//     return {x, y};
+//     return { x: x - (b - rectWidth) / 2, y: y - (a - rectHeight) / 2 };        
+// }
+var diamondEdgeInsideSquare = function (squareEdgeSize) {
+    return (squareEdgeSize / 2) * Math.sqrt(2);
+};
+function degreeToRadian(degree) {
+    return degree * (Math.PI / 180);
+}
+//rotate the four vertices of the rectangle
+function getRotatedRectangleCoordinates(actualPoints, centerX, centerY, angle) {
+    var coordinatesAfterRotation = [];
+    for (var i = 0; i < 4; i++) {
+        var point = actualPoints[i];
+        var tempX = point.x - centerX;
+        var tempY = point.y - centerY;
+        var rotatedX = tempX * Math.cos(degreeToRadian(angle)) - tempY * Math.sin(degreeToRadian(angle));
+        var rotatedY = tempX * Math.sin(degreeToRadian(angle)) + tempY * Math.cos(degreeToRadian(angle));
+        point.x = rotatedX + centerX;
+        point.y = rotatedY + centerY;
+        coordinatesAfterRotation.push({ x: point.x, y: point.y });
+    }
+    return coordinatesAfterRotation;
+}
+//Calculate the angle between 2 points relative to the OX axis
+function calculateAngleWithOx(pStart, pEnd) {
+    var deltaX = pEnd.x - pStart.x;
+    var deltaY = pEnd.y - pStart.y;
+    // Calculate the angle in radians
+    var angleInRadians = Math.atan2(deltaY, deltaX);
+    // Convert to degrees (optional)
+    var angleInDegrees = angleInRadians * (180 / Math.PI);
+    // Ensure the angle is positive (optional, depending on use case)
+    if (angleInDegrees < 0) {
+        angleInDegrees += 360;
+    }
+    return angleInDegrees;
+}
+
 /**
  * Check if position 1 is within the radius r of position 2
  * @returns boolean
@@ -7575,6 +7669,14 @@ var getAbsolutePosition = function (element) {
         y: y,
     };
 };
+//get absolute position of element
+var getPortAbsolutePosition = function (port, element) {
+    var elementAbsolutePosition = getAbsolutePosition(element);
+    return {
+        x: elementAbsolutePosition.x + port.position.x,
+        y: elementAbsolutePosition.y + port.position.y,
+    };
+};
 var transformAbsPositionToElementRelativePosition = function (position, element) {
     var parentElement = element.parentElement;
     if (!parentElement) {
@@ -7593,6 +7695,91 @@ var transformAbsPositionToRelativePositionInsideElement = function (absolutePosi
         y: absolutePosition.y - ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0),
     };
     return position;
+};
+var correctPortPositionInElement = function (elementRelativePosition, elementWidth, elementHeight, portMoveableAreas, portSlideRailSVGClassName, element) {
+    //Normalize a point so that it can lie exactly on an area
+    var normalizePortPositionOnMoveableAreas = function (moveableAreas, position) {
+        var lines = moveableAreas.filter(function (area) { return area.length === 2; });
+        var polygons = moveableAreas.filter(function (area) { return area.length >= 3; });
+        var normalizedPosition;
+        //If moveableAreas is lines
+        if (lines.length > 0) {
+            var newPosition_1 = findNearestProjectedPoint({ x: position.x, y: position.y }, lines);
+            if (newPosition_1) {
+                normalizedPosition = newPosition_1;
+            }
+        }
+        //If moveableAreas is polygons
+        else if (polygons.length > 0) {
+            var newPosition_2 = { x: position.x, y: position.y };
+            var isContainsInPolygons = polygons.some(function (p) { return checkPointContainsPolygon(newPosition_2, p); });
+            if (isContainsInPolygons) {
+                normalizedPosition = newPosition_2;
+            }
+        }
+        return normalizedPosition;
+    };
+    var getSlideRailSVG = function (portSlideRailSVGClassName) {
+        if (!element)
+            return;
+        var slideRailSVG = element.querySelector(".".concat(portSlideRailSVGClassName));
+        return slideRailSVG;
+    };
+    //Calculate the position of the 4 vertices of a rectangle relative to element
+    var calculateSlideRailRectSVGPositions = function (slideRailSVG) {
+        var coordinates = getRectangleCorners(slideRailSVG);
+        var ownerSVG = slideRailSVG.ownerSVGElement;
+        var rotationAngle = getElementRotationInfo(ownerSVG);
+        if (rotationAngle !== 0) {
+            var rotationCenterX = elementWidth / 2;
+            var rotationCenterY = elementHeight / 2;
+            coordinates = getRotatedRectangleCoordinates(coordinates, rotationCenterX, rotationCenterY, rotationAngle);
+        }
+        return coordinates;
+    };
+    var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
+        var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
+        if (!slideRailSVG)
+            return;
+        var moveTo;
+        //check and get new position if Rect element
+        if (slideRailSVG instanceof SVGRectElement) {
+            var _a = calculateSlideRailRectSVGPositions(slideRailSVG), a = _a[0], b = _a[1], c = _a[2], d = _a[3]; //Get 4 vertices of rect element
+            var moveableAreas = [
+                [a, b],
+                [b, c],
+                [c, d],
+                [d, a]
+            ];
+            console.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
+            var newPosition_3 = normalizePortPositionOnMoveableAreas(moveableAreas, position);
+            if (newPosition_3) {
+                moveTo = newPosition_3;
+            }
+        }
+        else if (slideRailSVG instanceof SVGCircleElement) { //check and get new position if circle element
+            var cx = Number(slideRailSVG.getAttribute('cx'));
+            var cy = Number(slideRailSVG.getAttribute('cy'));
+            var r = Number(slideRailSVG.getAttribute('r'));
+            var circle = Flatten$1.circle(Flatten$1.point(cx, cy), r);
+            var _b = circle.distanceTo(Flatten$1.point(position.x, position.y)), num = _b[0], segment = _b[1];
+            if (num <= r) {
+                moveTo = {
+                    x: segment.ps.x,
+                    y: segment.ps.y,
+                };
+            }
+        }
+        return moveTo;
+    };
+    var newPosition;
+    if (portMoveableAreas && portMoveableAreas.length > 0) { //If moveable areas is defined
+        newPosition = normalizePortPositionOnMoveableAreas(portMoveableAreas, elementRelativePosition);
+    }
+    else if (portSlideRailSVGClassName) { //If port slide rail svg classname is defined
+        newPosition = normalizePortPositionOnSlideRailSVG(portSlideRailSVGClassName, elementRelativePosition);
+    }
+    return newPosition || elementRelativePosition;
 };
 
 var Port1 = React.forwardRef(function (props, ref) {
@@ -7635,6 +7822,10 @@ var Port = React.memo(Port1);
 // Render the svg <path> element
 function getCurvePathData(points, smoothing, closed) {
     if (smoothing === void 0) { smoothing = 0.2; }
+    // append first 2 points for closed paths
+    if (closed) {
+        points = points.concat(points.slice(0, 2));
+    }
     // Properties of a line
     var line = function (pointA, pointB) {
         var lengthX = pointB.x - pointA.x;
@@ -7667,6 +7858,18 @@ function getCurvePathData(points, smoothing, closed) {
         };
         pathData.push(command);
     }
+    // copy last commands 1st controlpoint to first curveto
+    if (closed) {
+        var comLast = pathData[pathData.length - 1];
+        var valuesLastC = comLast.values;
+        var valuesFirstC = pathData[1].values;
+        pathData[1] = {
+            type: "C",
+            values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
+        };
+        // delete last curveto
+        pathData = pathData.slice(0, pathData.length - 1);
+    }
     return pathData;
 }
 // convert pathdata to d attribute string
@@ -7680,7 +7883,7 @@ function pathDataToD(pathData, decimals) {
     return d;
 }
 function createSmoothPathString(points, smoothing, close) {
-    var pathData = getCurvePathData(points, smoothing);
+    var pathData = getCurvePathData(points, smoothing, close);
     var pathString = pathDataToD(pathData);
     return pathString;
 }
@@ -7735,59 +7938,6 @@ function addPointToList(point, listPoints, path) {
     return __spreadArray([], listPoints, true);
 }
 
-// const topLeftOffsetOfSquareHoldingRect = (x: number, y: number, rectWidth: number, rectHeight: number, rotation?: number): IPosition => {
-//     rotation = rotation || 0;
-//     const rotationInRadians = rotation * Math.PI / 180;
-//     //calculate the bouding edge of the square that holds the rectangle with the given width and height and rotation, knowing that the square is always parallel to the x and y axis
-//     //calculate a1 equal sin of rotation * height
-//     const a1 = Math.abs(Math.sin(rotationInRadians) * rectHeight);
-//     //calculate a2 equal cos of rotation * width
-//     const a2 = Math.abs(Math.cos(rotationInRadians) * rectWidth);
-//     const a = a1 + a2;
-//     console.info(`a1: ${a1}, a2: ${a2}, a: ${a}`);
-//     //calculate b1 equal cos of rotation * height
-//     const b1 = Math.abs(Math.cos(rotationInRadians) * rectHeight);
-//     //calculate b2 equal sin of rotation * width
-//     const b2 = Math.abs(Math.sin(rotationInRadians) * rectWidth);
-//     const b = b1 + b2;
-//     console.info(`b1: ${b1}, b2: ${b2}, b: ${b}`);
-//     //const squareEdge = Math.max(rectWidth, rectHeight);
-//     return {x, y};
-//     return { x: x - (b - rectWidth) / 2, y: y - (a - rectHeight) / 2 };        
-// }
-function degreeToRadian(degree) {
-    return degree * (Math.PI / 180);
-}
-//rotate the four vertices of the rectangle
-function getRotatedRectangleCoordinates(actualPoints, centerX, centerY, angle) {
-    var coordinatesAfterRotation = [];
-    for (var i = 0; i < 4; i++) {
-        var point = actualPoints[i];
-        var tempX = point.x - centerX;
-        var tempY = point.y - centerY;
-        var rotatedX = tempX * Math.cos(degreeToRadian(angle)) - tempY * Math.sin(degreeToRadian(angle));
-        var rotatedY = tempX * Math.sin(degreeToRadian(angle)) + tempY * Math.cos(degreeToRadian(angle));
-        point.x = rotatedX + centerX;
-        point.y = rotatedY + centerY;
-        coordinatesAfterRotation.push({ x: point.x, y: point.y });
-    }
-    return coordinatesAfterRotation;
-}
-//Calculate the angle between 2 points relative to the OX axis
-function calculateAngleWithOx(pStart, pEnd) {
-    var deltaX = pEnd.x - pStart.x;
-    var deltaY = pEnd.y - pStart.y;
-    // Calculate the angle in radians
-    var angleInRadians = Math.atan2(deltaY, deltaX);
-    // Convert to degrees (optional)
-    var angleInDegrees = angleInRadians * (180 / Math.PI);
-    // Ensure the angle is positive (optional, depending on use case)
-    if (angleInDegrees < 0) {
-        angleInDegrees += 360;
-    }
-    return angleInDegrees;
-}
-
 //Defined remove icon for element link, shown when element link is selected.
 function CloseIcon(_a) {
     var onClick = _a.onClick;
@@ -7850,7 +8000,7 @@ var IElementLink = function (_a) {
     }, []);
     React.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
-        var _pathStr = createSmoothPathString(pointsList, undefined);
+        var _pathStr = createSmoothPathString(pointsList, undefined, false);
         setPathStr(_pathStr);
     }, [sourcePosition, points, targetPosition]);
     React.useEffect(function () {
@@ -8051,6 +8201,129 @@ var IElementLink = function (_a) {
 };
 var ElementLink = React.memo(IElementLink);
 
+var getSVGBBoxOutsideTransformedParent = function (svgElement) {
+    var bbox = svgElement.getBBox(); // Get bounding box of the element
+    var matrix = svgElement.getCTM(); // Get the current transformation matrix of the parent element
+    // Define the four corners of the bounding box
+    var corners = [
+        { x: bbox.x, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
+        { x: bbox.x, y: bbox.y + bbox.height } // Bottom-left
+    ];
+    // Function to apply the transformation matrix to a point
+    function transformPoint(x, y, matrix) {
+        return {
+            x: matrix.a * x + matrix.c * y + matrix.e,
+            y: matrix.b * x + matrix.d * y + matrix.f
+        };
+    }
+    // Transform each corner according to the matrix
+    if (matrix) {
+        return corners.map(function (corner) {
+            return transformPoint(corner.x, corner.y, matrix);
+        });
+    }
+    else {
+        return corners;
+    }
+};
+//function returns the array of corners of the bbox of the element after applying the transformation matrix of the parent element
+var getRotatedSVGBBox = function (svgElement) {
+    var bbox = svgElement.getBBox(); // Get bounding box of the element
+    var matrix = svgElement.getCTM(); // Get the current transformation matrix of the parent element
+    // Define the four corners of the bounding box
+    var corners = [
+        { x: bbox.x, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y },
+        { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
+        { x: bbox.x, y: bbox.y + bbox.height } // Bottom-left
+    ];
+    // Function to apply the transformation matrix to a point
+    function transformPoint(x, y, matrix) {
+        return {
+            x: matrix.a * x + matrix.c * y,
+            y: matrix.b * x + matrix.d * y // + matrix.f
+        };
+    }
+    // Transform each corner according to the matrix
+    if (matrix) {
+        return corners.map(function (corner) {
+            return transformPoint(corner.x, corner.y, matrix);
+        });
+    }
+    else {
+        return corners;
+    }
+};
+
+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();
+
+function configureLogger(_a) {
+    var level = _a.level, customLogger = _a.customLogger;
+    if (level !== undefined)
+        logger.setLevel(level);
+    if (customLogger)
+        logger.setCustomLogger(customLogger);
+}
+
 var Ruler = function (_a) {
     var squareSize = _a.squareSize, border = _a.border;
     var numColumns = Math.ceil(3000 / squareSize);
@@ -8090,44 +8363,7 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
     return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
-// Calculate the position of the 4 vertices of a rectangle relative to its parent svg
-var getRectangleCorners = function (rectSVG) {
-    var ownerSVG = rectSVG.ownerSVGElement;
-    var rectStrokeWidth = Number(rectSVG.getAttribute('stroke-width')) || 0;
-    var strokeWidthOffset = rectStrokeWidth / 2;
-    if (!ownerSVG) {
-        throw new Error('Rectangle does not wrapper by svg.');
-    }
-    var ownerX = ownerSVG.x.baseVal.value;
-    var ownerY = ownerSVG.y.baseVal.value;
-    var ownerWidth = ownerSVG.width.baseVal.value;
-    var ownerHeight = ownerSVG.height.baseVal.value;
-    var a = { x: ownerX + strokeWidthOffset, y: ownerY + strokeWidthOffset };
-    var b = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + strokeWidthOffset };
-    var c = { x: ownerX + ownerWidth - strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
-    var d = { x: ownerX + strokeWidthOffset, y: ownerY + ownerHeight - strokeWidthOffset };
-    return [a, b, c, d];
-};
-//find rotation angle of svg element on g element
-var getElementRotationInfo = function (element) {
-    var gElement = element;
-    var rotationAngle = 0;
-    while (!(gElement instanceof SVGGElement)) {
-        gElement = gElement.parentElement;
-    }
-    var transform = gElement.getAttribute('transform');
-    if (transform) {
-        // Match the rotation value using a regular expression
-        var rotateMatch = transform.match(/rotate\(([-\d.]+)(?:\s+[-\d.]+\s+[-\d.]+)?\)/);
-        if (rotateMatch) {
-            // The first capture group is the rotation angle
-            rotationAngle = parseFloat(rotateMatch[1]);
-        }
-    }
-    return rotationAngle;
-};
-
-var Element = function (props) {
+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, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = React.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
@@ -8137,6 +8373,7 @@ var Element = function (props) {
     var _g = React.useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
     var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
     var elementRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, function () { return elementRef.current; });
     var elementLinkStarted = React.useRef();
     var portsRef = React.useRef(ports);
     var getElementAbsPosition = React.useCallback(function () {
@@ -8157,6 +8394,7 @@ var Element = function (props) {
         var off = (_a = props.onManuallyTriggerRenderPort) === null || _a === void 0 ? void 0 : _a.call(props, function (portId, elementId) {
             if (elementId !== id)
                 return;
+            logger.info('onManuallyTriggerRenderPort', id);
             setPorts(function (prev) { return __spreadArray([], prev, true); });
         });
         return function () {
@@ -8169,6 +8407,7 @@ var Element = function (props) {
     }, [ports]);
     //Listen a new port is created, after add new port to ports state
     React.useEffect(function () {
+        logger.info('Ports changed', props.ports);
         setPorts(function (prev) {
             var _a, _b;
             return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
@@ -8282,28 +8521,6 @@ var Element = function (props) {
         setSelectedPort(port);
         _paperEventEmitterContext.emitPortSelected(port, id);
     }, [_paperEventEmitterContext]);
-    //Normalize a point so that it can lie exactly on an area
-    var normalizePortPositionOnMoveableAreas = function (moveableAreas, position) {
-        var lines = moveableAreas.filter(function (area) { return area.length === 2; });
-        var polygons = moveableAreas.filter(function (area) { return area.length >= 3; });
-        var normalizedPosition;
-        //If moveableAreas is lines
-        if (lines.length > 0) {
-            var newPosition = findNearestProjectedPoint({ x: position.x, y: position.y }, lines);
-            if (newPosition) {
-                normalizedPosition = newPosition;
-            }
-        }
-        //If moveableAreas is polygons
-        else if (polygons.length > 0) {
-            var newPosition_1 = { x: position.x, y: position.y };
-            var isContainsInPolygons = polygons.some(function (p) { return checkPointContainsPolygon(newPosition_1, p); });
-            if (isContainsInPolygons) {
-                normalizedPosition = newPosition_1;
-            }
-        }
-        return normalizedPosition;
-    };
     //Calculate the position of the 4 vertices of a rectangle relative to element
     var calculateSlideRailRectSVGPositions = function (slideRailSVG) {
         var coordinates = getRectangleCorners(slideRailSVG);
@@ -8320,50 +8537,10 @@ var Element = function (props) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
-    }, [elementRef.current]);
-    var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
-        var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
-        if (!slideRailSVG)
-            return;
-        var moveTo;
-        //check and get new position if Rect element
-        if (slideRailSVG instanceof SVGRectElement) {
-            var _a = calculateSlideRailRectSVGPositions(slideRailSVG), a = _a[0], b = _a[1], c = _a[2], d = _a[3]; //Get 4 vertices of rect element
-            var moveableAreas = [
-                [a, b],
-                [b, c],
-                [c, d],
-                [d, a]
-            ];
-            var newPosition = normalizePortPositionOnMoveableAreas(moveableAreas, position);
-            if (newPosition) {
-                moveTo = newPosition;
-            }
-        }
-        else if (slideRailSVG instanceof SVGCircleElement) { //check and get new position if circle element
-            var cx = Number(slideRailSVG.getAttribute('cx'));
-            var cy = Number(slideRailSVG.getAttribute('cy'));
-            var r = Number(slideRailSVG.getAttribute('r'));
-            var circle = Flatten$1.circle(Flatten$1.point(cx, cy), r);
-            var _b = circle.distanceTo(Flatten$1.point(position.x, position.y)), num = _b[0], segment = _b[1];
-            if (num <= r) {
-                moveTo = {
-                    x: segment.ps.x,
-                    y: segment.ps.y,
-                };
-            }
-        }
-        return moveTo;
-    };
+    }, []);
     //Normalize port position
     var normalizePortPosition = function (tempNewPosition) {
-        var newPosition;
-        if (portMoveableAreas && portMoveableAreas.length > 0) { //If moveable areas is defined
-            newPosition = normalizePortPositionOnMoveableAreas(portMoveableAreas, tempNewPosition);
-        }
-        else if (portSlideRailSVGClassName) { //If port slide rail svg classname is defined
-            newPosition = normalizePortPositionOnSlideRailSVG(portSlideRailSVGClassName, tempNewPosition);
-        }
+        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
         return newPosition || tempNewPosition;
     };
     var handlePortMove = function (newX, newY) {
@@ -8515,7 +8692,7 @@ var Element = function (props) {
     }, [someElementLinkStarted]);
     //Get rotate angle of port by port direction is defined.
     var rotatePort = React.useCallback(function (x, y) {
-        // console.info('calculating port rotation', x, y)
+        // logger.info('calculating port rotation', x, y)
         if (!portSlideRailSVGClassName)
             return 0;
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
@@ -8612,7 +8789,7 @@ var Element = function (props) {
             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);
 
 var createRect = function (x, y, width, height, strokeWidth, transformOrigin, transform) {
@@ -8865,6 +9042,15 @@ var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
     return eleLink;
 };
 
+function adjustElementPositionOnParentPortArea(element, toBeAdjustedRelativePosition) {
+    var _a;
+    if (element.moveAsPortOnParent && element.parentElement) {
+        var parentDOM = (_a = element.parentElementInTree) === null || _a === void 0 ? void 0 : _a.DOM;
+        var newRelativePosition = transformAbsPositionToElementRelativePosition(toBeAdjustedRelativePosition, element);
+        return correctPortPositionInElement(newRelativePosition, element.size.width, element.size.height, element.parentElement.portMoveableAreas, element.parentElement.portSlideRailSVGClassName, parentDOM);
+    }
+    return toBeAdjustedRelativePosition;
+}
 function convertElementsToTree(elements) {
     //Find child elements in the child elements, that is possible child of element, then return element with child of it.
     function findChildElementsOfNode(elementNodeInTree, possibleChildElements) {
@@ -8876,6 +9062,11 @@ function convertElementsToTree(elements) {
         var orphanedElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) !== elementNodeInTree.id; });
         var childElementsWithChild = foundChildElements.map(function (_elementNodeInTree) {
             var newNode = findChildElementsOfNode(_elementNodeInTree, orphanedElements);
+            newNode.parentElementInTree = elementNodeInTree;
+            //Adjust position of element if it should move as a port on parent port area
+            if (newNode.moveAsPortOnParent && newNode.parentElementInTree) {
+                newNode.position = adjustElementPositionOnParentPortArea(newNode, newNode.position);
+            }
             return newNode;
         });
         elementNodeInTree.childrenElementsInTree = childElementsWithChild;
@@ -8987,6 +9178,7 @@ var Paper = function (props) {
         var parentChangedCancelers = elementsRef.current.map(function (element) {
             var _a;
             return (_a = element.onParentChanged) === null || _a === void 0 ? void 0 : _a.call(element, function (newPa, oldPa) {
+                logger.info('onParentChanged');
                 updateElementsTree();
             });
         });
@@ -8994,7 +9186,7 @@ var Paper = function (props) {
         var addedPortCancelers = elementsRef.current.map(function (element) {
             var _a;
             return (_a = element.onAddedPort) === null || _a === void 0 ? void 0 : _a.call(element, function (newPort) {
-                console.log("A new port has been added to element ".concat(element.id));
+                logger.info("A new port has been added to element ".concat(element.id));
                 var prevElements = elementsRef.current;
                 var newElements = prevElements.map(function (ele) {
                     if (ele.id === element.id) {
@@ -9378,10 +9570,16 @@ var Paper = function (props) {
         setSelectedLink(undefined);
     };
     //update absolute position of element and absolute position of children elements
-    var updateElementPosition = function (element, x, y) {
-        var relativePosition = transformAbsPositionToElementRelativePosition({ x: x, y: y }, element);
-        element.position.x = relativePosition.x;
-        element.position.y = relativePosition.y;
+    var updateElementPosition = function (element, x, y, isRelativePosition) {
+        if (isRelativePosition) {
+            element.position.x = x;
+            element.position.y = y;
+        }
+        else {
+            var relativePosition = transformAbsPositionToElementRelativePosition({ x: x, y: y }, element);
+            element.position.x = relativePosition.x;
+            element.position.y = relativePosition.y;
+        }
         return element;
     };
     //use selection frame
@@ -9401,14 +9599,28 @@ var Paper = function (props) {
             if (!selectedElement)
                 return;
             var oldPosition = __assign({}, selectedElement.position);
-            var newElementPosition = updateElementPosition(selectedElement, newX, newY);
+            var newPosition = {
+                x: newX,
+                y: newY
+            };
+            console.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);
+                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; });
+            console.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(newElementPosition.position, selectedElement, indexSelectedElement);
+                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement);
             }
-            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, newElementPosition.position);
+            paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
             setMouseDownedOnPaper(false);
         },
         onResize: function (width, height) {
@@ -9472,7 +9684,7 @@ var Paper = function (props) {
         var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
         if (!targetElement)
             return;
-        console.info("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
+        logger.info("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
         if (props.onCreatingPortByLinking) {
             var sourcePort = link.sourcePort, sourceElement = link.sourceElement;
             //Handle create port via onCreatingPortByLinking prop
@@ -9569,7 +9781,7 @@ var Paper = function (props) {
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
-            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: element.position.x, y: element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, 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, 
+            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, 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]);
@@ -9630,6 +9842,7 @@ var Editor = function (_a) {
         var offs = [];
         if (editorContext) {
             offs.push(editorContext.onEditorContextUpdated(function () {
+                logger.info("onEditorContextUpdated");
                 setEditorStates(editorContext);
             }));
         }
@@ -9726,4 +9939,37 @@ exports.RectangularFrameRC = RectangularFrame;
 exports.ShapeWrapperRC = ShapeWrapper;
 exports.Text = Text$2;
 exports.TextRC = Text$1;
+exports.addPointToList = addPointToList;
+exports.calculateAngleWithOx = calculateAngleWithOx;
+exports.checkPointContainsPolygon = checkPointContainsPolygon;
+exports.checkPositionOnLine = checkPositionOnLine;
+exports.checkSamePosition = checkSamePosition;
+exports.configureLogger = configureLogger;
+exports.correctPortPositionInElement = correctPortPositionInElement;
+exports.createSmoothPathString = createSmoothPathString;
 exports.default = Editor;
+exports.degreeToRadian = degreeToRadian;
+exports.diamondEdgeInsideSquare = diamondEdgeInsideSquare;
+exports.dist = dist;
+exports.findNearestPointOnSegment = findNearestPointOnSegment;
+exports.findNearestPosition = findNearestPosition;
+exports.findNearestProjectedPoint = findNearestProjectedPoint;
+exports.generateSubstitutePosition = generateSubstitutePosition;
+exports.generateUniqueId = generateUniqueId;
+exports.getAbsolutePosition = getAbsolutePosition;
+exports.getCurvePathData = getCurvePathData;
+exports.getElementRotationInfo = getElementRotationInfo;
+exports.getFirstIntersection = getFirstIntersection;
+exports.getFourVertexesOfBBoxFromElement = getFourVertexesOfBBoxFromElement;
+exports.getIntersectionPositions = getIntersectionPositions;
+exports.getPortAbsolutePosition = getPortAbsolutePosition;
+exports.getRectangleCorners = getRectangleCorners;
+exports.getRelativePosition = getRelativePosition;
+exports.getRotatedRectangleCoordinates = getRotatedRectangleCoordinates;
+exports.getRotatedSVGBBox = getRotatedSVGBBox;
+exports.getSVGBBoxOutsideTransformedParent = getSVGBBoxOutsideTransformedParent;
+exports.makePolygonOfElement = makePolygonOfElement;
+exports.pathDataToD = pathDataToD;
+exports.removeDuplicatePosition = removeDuplicatePosition;
+exports.transformAbsPositionToElementRelativePosition = transformAbsPositionToElementRelativePosition;
+exports.transformAbsPositionToRelativePositionInsideElement = transformAbsPositionToRelativePositionInsideElement;