orcasvn-react-diagrams 0.1.39 → 0.1.41

package/dist/cjs/index.js

@@ -7717,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,
@@ -9313,9 +9343,10 @@ var Paper = function (props) {
             var rect = currentTarget.getBoundingClientRect();
             var offsetX = ev.clientX - rect.left;
             var offsetY = ev.clientY - rect.top;
+            var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
             var sourcePosition = {
-                x: tempLink.sourceElement.position.x + tempLink.sourcePort.position.x,
-                y: tempLink.sourceElement.position.y + tempLink.sourcePort.position.y
+                x: sourceElementAbsPosition.x + tempLink.sourcePort.position.x,
+                y: sourceElementAbsPosition.y + tempLink.sourcePort.position.y
             };
             //reduce the position of offset to the direction of the source point 1 unit to avoid the link to reach the current mouse position
             var tempTargetPosition_1 = {
@@ -9805,16 +9836,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);
@@ -9964,6 +9995,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

@@ -7713,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,
@@ -9309,9 +9339,10 @@ var Paper = function (props) {
             var rect = currentTarget.getBoundingClientRect();
             var offsetX = ev.clientX - rect.left;
             var offsetY = ev.clientY - rect.top;
+            var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
             var sourcePosition = {
-                x: tempLink.sourceElement.position.x + tempLink.sourcePort.position.x,
-                y: tempLink.sourceElement.position.y + tempLink.sourcePort.position.y
+                x: sourceElementAbsPosition.x + tempLink.sourcePort.position.x,
+                y: sourceElementAbsPosition.y + tempLink.sourcePort.position.y
             };
             //reduce the position of offset to the direction of the source point 1 unit to avoid the link to reach the current mouse position
             var tempTargetPosition_1 = {
@@ -9801,16 +9832,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);
@@ -9928,5 +9959,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