orcasvn-react-diagrams 0.1.38 → 0.1.40

package/dist/cjs/index.js

@@ -7331,13 +7331,13 @@ var getElementRotationInfo = function (element) {
 //     //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}`);
+//     logger.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}`);
+//     logger.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 };        
@@ -7378,6 +7378,65 @@ 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
@@ -7658,12 +7717,42 @@ var getFourVertexesOfBBoxFromElement = function (element) {
 //get absolute position of element
 var getAbsolutePosition = function (element) {
     var parentElement = element.parentElement;
+    var elemenetPositionWithTopLeftAnchor = {
+        x: element.position.x,
+        y: element.position.y,
+    };
+    if (element.positionAnchor === exports.PositioningAnchor.Center) {
+        elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
+        elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
+    }
+    if (!parentElement) {
+        return __assign({}, elemenetPositionWithTopLeftAnchor);
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    var x = elemenetPositionWithTopLeftAnchor.x + absoluteParentElement.x;
+    var y = elemenetPositionWithTopLeftAnchor.y + absoluteParentElement.y;
+    return {
+        x: x,
+        y: y,
+    };
+};
+//get absolute position of element
+var getAnchorAdjustedAbsolutePosition = function (element) {
+    var parentElement = element.parentElement;
+    var elemenetPositionWithTopLeftAnchor = {
+        x: element.position.x,
+        y: element.position.y,
+    };
+    if (element.positionAnchor === exports.PositioningAnchor.Center) {
+        elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
+        elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
+    }
     if (!parentElement) {
-        return __assign({}, element.position);
+        return __assign({}, elemenetPositionWithTopLeftAnchor);
     }
     var absoluteParentElement = getAbsolutePosition(parentElement);
-    var x = element.position.x + absoluteParentElement.x;
-    var y = element.position.y + absoluteParentElement.y;
+    var x = elemenetPositionWithTopLeftAnchor.x + absoluteParentElement.x;
+    var y = elemenetPositionWithTopLeftAnchor.y + absoluteParentElement.y;
     return {
         x: x,
         y: y,
@@ -7751,7 +7840,7 @@ var correctPortPositionInElement = function (elementRelativePosition, elementWid
                 [c, d],
                 [d, a]
             ];
-            console.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
+            logger.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
             var newPosition_3 = normalizePortPositionOnMoveableAreas(moveableAreas, position);
             if (newPosition_3) {
                 moveTo = newPosition_3;
@@ -8257,65 +8346,6 @@ var getRotatedSVGBBox = function (svgElement) {
     }
 };
 
-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)
@@ -9042,14 +9072,21 @@ var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
     return eleLink;
 };
 
-function adjustElementPositionOnParentPortArea(element, toBeAdjustedRelativePosition) {
+function adjustElementPositionOnParentPortArea(element, toBeAdjustedPosition, isAbsolutePosition) {
     var _a;
+    if (isAbsolutePosition === void 0) { isAbsolutePosition = false; }
     if (element.moveAsPortOnParent && element.parentElement) {
         var parentDOM = (_a = element.parentElementInTree) === null || _a === void 0 ? void 0 : _a.DOM;
-        var newRelativePosition = transformAbsPositionToElementRelativePosition(toBeAdjustedRelativePosition, element);
+        var newRelativePosition = {
+            x: toBeAdjustedPosition.x,
+            y: toBeAdjustedPosition.y
+        };
+        if (isAbsolutePosition) {
+            newRelativePosition = transformAbsPositionToElementRelativePosition(toBeAdjustedPosition, element);
+        }
         return correctPortPositionInElement(newRelativePosition, element.size.width, element.size.height, element.parentElement.portMoveableAreas, element.parentElement.portSlideRailSVGClassName, parentDOM);
     }
-    return toBeAdjustedRelativePosition;
+    return toBeAdjustedPosition;
 }
 function convertElementsToTree(elements) {
     //Find child elements in the child elements, that is possible child of element, then return element with child of it.
@@ -9603,10 +9640,10 @@ var Paper = function (props) {
                 x: newX,
                 y: newY
             };
-            console.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
+            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(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);
+                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
                 updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
             }
             else {
@@ -9614,7 +9651,7 @@ var Paper = function (props) {
             }
             //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)));
+            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) {
@@ -9798,16 +9835,16 @@ var Paper = function (props) {
                 if (!link.targetElement || !link.targetPort)
                     return null;
                 return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
-                        x: getAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
-                        y: getAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
+                        x: getAnchorAdjustedAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
+                        y: getAnchorAdjustedAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
                     }, targetPosition: {
-                        x: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
-                        y: getAbsolutePosition(link.targetElement).y + link.targetPort.position.y
+                        x: getAnchorAdjustedAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
+                        y: getAnchorAdjustedAbsolutePosition(link.targetElement).y + link.targetPort.position.y
                     }, points: link.points, onPathChanged: handlePathChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
             }),
             (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
-                    x: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
-                    y: getAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
+                    x: getAnchorAdjustedAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
+                    y: getAnchorAdjustedAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
                 }, targetPosition: tempLink.tempTargetPosition, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
             texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
                     setSelectedText(text);
@@ -9957,6 +9994,7 @@ exports.findNearestProjectedPoint = findNearestProjectedPoint;
 exports.generateSubstitutePosition = generateSubstitutePosition;
 exports.generateUniqueId = generateUniqueId;
 exports.getAbsolutePosition = getAbsolutePosition;
+exports.getAnchorAdjustedAbsolutePosition = getAnchorAdjustedAbsolutePosition;
 exports.getCurvePathData = getCurvePathData;
 exports.getElementRotationInfo = getElementRotationInfo;
 exports.getFirstIntersection = getFirstIntersection;

package/dist/cjs/types/utils/positionUtil.d.ts

@@ -48,6 +48,7 @@ export declare const generateSubstitutePosition: (intersectedPosition: IPosition
 export declare const getRelativePosition: (clientPosition: IPosition, relativeElement: Element) => IPosition;
 export declare const getFourVertexesOfBBoxFromElement: (element: IElement) => IPosition[];
 export declare const getAbsolutePosition: (element: IElement) => IPosition;
+export declare const getAnchorAdjustedAbsolutePosition: (element: IElement) => IPosition;
 export declare const getPortAbsolutePosition: (port: IPort, element: IElement) => IPosition;
 export declare const transformAbsPositionToElementRelativePosition: (position: IPosition, element: IElement) => IPosition;
 export declare const transformAbsPositionToRelativePositionInsideElement: (absolutePosition: IPosition, parentAbsolutePosition?: IPosition) => IPosition;

package/dist/esm/index.js

@@ -7327,13 +7327,13 @@ var getElementRotationInfo = function (element) {
 //     //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}`);
+//     logger.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}`);
+//     logger.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 };        
@@ -7374,6 +7374,65 @@ 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
@@ -7654,12 +7713,42 @@ var getFourVertexesOfBBoxFromElement = function (element) {
 //get absolute position of element
 var getAbsolutePosition = function (element) {
     var parentElement = element.parentElement;
+    var elemenetPositionWithTopLeftAnchor = {
+        x: element.position.x,
+        y: element.position.y,
+    };
+    if (element.positionAnchor === PositioningAnchor.Center) {
+        elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
+        elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
+    }
+    if (!parentElement) {
+        return __assign({}, elemenetPositionWithTopLeftAnchor);
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    var x = elemenetPositionWithTopLeftAnchor.x + absoluteParentElement.x;
+    var y = elemenetPositionWithTopLeftAnchor.y + absoluteParentElement.y;
+    return {
+        x: x,
+        y: y,
+    };
+};
+//get absolute position of element
+var getAnchorAdjustedAbsolutePosition = function (element) {
+    var parentElement = element.parentElement;
+    var elemenetPositionWithTopLeftAnchor = {
+        x: element.position.x,
+        y: element.position.y,
+    };
+    if (element.positionAnchor === PositioningAnchor.Center) {
+        elemenetPositionWithTopLeftAnchor.x -= element.size.width / 2;
+        elemenetPositionWithTopLeftAnchor.y -= element.size.height / 2;
+    }
     if (!parentElement) {
-        return __assign({}, element.position);
+        return __assign({}, elemenetPositionWithTopLeftAnchor);
     }
     var absoluteParentElement = getAbsolutePosition(parentElement);
-    var x = element.position.x + absoluteParentElement.x;
-    var y = element.position.y + absoluteParentElement.y;
+    var x = elemenetPositionWithTopLeftAnchor.x + absoluteParentElement.x;
+    var y = elemenetPositionWithTopLeftAnchor.y + absoluteParentElement.y;
     return {
         x: x,
         y: y,
@@ -7747,7 +7836,7 @@ var correctPortPositionInElement = function (elementRelativePosition, elementWid
                 [c, d],
                 [d, a]
             ];
-            console.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
+            logger.info("Port's moveable areas parsed from svg ".concat(portSlideRailSVGClassName), moveableAreas);
             var newPosition_3 = normalizePortPositionOnMoveableAreas(moveableAreas, position);
             if (newPosition_3) {
                 moveTo = newPosition_3;
@@ -8253,65 +8342,6 @@ var getRotatedSVGBBox = function (svgElement) {
     }
 };
 
-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)
@@ -9038,14 +9068,21 @@ var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
     return eleLink;
 };
 
-function adjustElementPositionOnParentPortArea(element, toBeAdjustedRelativePosition) {
+function adjustElementPositionOnParentPortArea(element, toBeAdjustedPosition, isAbsolutePosition) {
     var _a;
+    if (isAbsolutePosition === void 0) { isAbsolutePosition = false; }
     if (element.moveAsPortOnParent && element.parentElement) {
         var parentDOM = (_a = element.parentElementInTree) === null || _a === void 0 ? void 0 : _a.DOM;
-        var newRelativePosition = transformAbsPositionToElementRelativePosition(toBeAdjustedRelativePosition, element);
+        var newRelativePosition = {
+            x: toBeAdjustedPosition.x,
+            y: toBeAdjustedPosition.y
+        };
+        if (isAbsolutePosition) {
+            newRelativePosition = transformAbsPositionToElementRelativePosition(toBeAdjustedPosition, element);
+        }
         return correctPortPositionInElement(newRelativePosition, element.size.width, element.size.height, element.parentElement.portMoveableAreas, element.parentElement.portSlideRailSVGClassName, parentDOM);
     }
-    return toBeAdjustedRelativePosition;
+    return toBeAdjustedPosition;
 }
 function convertElementsToTree(elements) {
     //Find child elements in the child elements, that is possible child of element, then return element with child of it.
@@ -9599,10 +9636,10 @@ var Paper = function (props) {
                 x: newX,
                 y: newY
             };
-            console.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
+            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(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);
+                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
                 updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
             }
             else {
@@ -9610,7 +9647,7 @@ var Paper = function (props) {
             }
             //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)));
+            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) {
@@ -9794,16 +9831,16 @@ var Paper = function (props) {
                 if (!link.targetElement || !link.targetPort)
                     return null;
                 return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
-                        x: getAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
-                        y: getAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
+                        x: getAnchorAdjustedAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
+                        y: getAnchorAdjustedAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
                     }, targetPosition: {
-                        x: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
-                        y: getAbsolutePosition(link.targetElement).y + link.targetPort.position.y
+                        x: getAnchorAdjustedAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
+                        y: getAnchorAdjustedAbsolutePosition(link.targetElement).y + link.targetPort.position.y
                     }, points: link.points, onPathChanged: handlePathChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
             }),
             (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
-                    x: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
-                    y: getAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
+                    x: getAnchorAdjustedAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
+                    y: getAnchorAdjustedAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
                 }, targetPosition: tempLink.tempTargetPosition, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
             texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
                     setSelectedText(text);
@@ -9921,5 +9958,5 @@ var Editor = function (_a) {
     return (React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
 };
 
-export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, addPointToList, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPortAbsolutePosition, getRectangleCorners, getRelativePosition, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement };
+export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, addPointToList, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getAnchorAdjustedAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPortAbsolutePosition, getRectangleCorners, getRelativePosition, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement };
 //# sourceMappingURL=index.js.map