orcasvn-react-diagrams 0.1.32 → 0.1.34

package/dist/cjs/index.js

@@ -7621,13 +7621,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the left of vertex 1
             var leftPosition = {
-                x: ele.position.x - translationOffset,
-                y: ele.position.y,
+                x: vertex1Position.x - translationOffset,
+                y: vertex1Position.y,
             };
+            //Translate to the right of vertex 2
             var rightPosition = {
-                x: ele.position.x + ele.size.width + translationOffset,
-                y: ele.position.y,
+                x: vertex2Position.x + translationOffset,
+                y: vertex2Position.y,
             };
             replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
         }
@@ -7644,13 +7646,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the left of vertex 4
             var leftPosition = {
-                x: ele.position.x - translationOffset,
-                y: ele.position.y + ele.size.height,
+                x: vertex4Position.x - translationOffset,
+                y: vertex4Position.y,
             };
+            //Translate to the right of vertex 3
             var rightPosition = {
-                x: ele.position.x + ele.size.width + translationOffset,
-                y: ele.position.y + ele.size.height,
+                x: vertex3Position.x + translationOffset,
+                y: vertex3Position.y,
             };
             replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
         }
@@ -7667,13 +7671,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the top of vertex 1
             var topPosition = {
-                x: ele.position.x,
-                y: ele.position.y - translationOffset,
+                x: vertex1Position.x,
+                y: vertex1Position.y - translationOffset,
             };
+            //Translate to the bottom of vertex 4
             var bottomPosition = {
-                x: ele.position.x,
-                y: ele.position.y + ele.size.height + translationOffset,
+                x: vertex4Position.x,
+                y: vertex4Position.y + translationOffset,
             };
             replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
         }
@@ -7690,13 +7696,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the top of vertex 2
             var topPosition = {
-                x: ele.position.x + ele.size.width,
-                y: ele.position.y - translationOffset,
+                x: vertex2Position.x,
+                y: vertex2Position.y - translationOffset,
             };
+            //Translate to the bottom of vertex 3
             var bottomPosition = {
-                x: ele.position.x + ele.size.width,
-                y: ele.position.y + ele.size.height + translationOffset,
+                x: vertex3Position.x,
+                y: vertex3Position.y + translationOffset,
             };
             replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
         }
@@ -7711,23 +7719,38 @@ var getRelativePosition = function (clientPosition, relativeElement) {
     };
 };
 var getFourVertexesOfBBoxFromElement = function (element) {
+    var absolutePosition = getAbsolutePosition(element);
     var vertex1Position = {
-        x: element.position.x,
-        y: element.position.y
+        x: absolutePosition.x,
+        y: absolutePosition.y
     };
     var vertex2Position = {
-        x: element.position.x + element.size.width,
-        y: element.position.y
+        x: absolutePosition.x + element.size.width,
+        y: absolutePosition.y
     };
     var vertex3Position = {
-        x: element.position.x + element.size.width,
-        y: element.position.y + element.size.height
+        x: absolutePosition.x + element.size.width,
+        y: absolutePosition.y + element.size.height
     };
     var vertex4Position = {
-        x: element.position.x,
-        y: element.position.y + element.size.height
+        x: absolutePosition.x,
+        y: absolutePosition.y + element.size.height
     };
     return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
+};
+//get absolute position of element
+var getAbsolutePosition = function (element) {
+    var parentElement = element.parentElement;
+    if (!parentElement) {
+        return __assign({}, element.position);
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    var x = element.position.x + absoluteParentElement.x;
+    var y = element.position.y + absoluteParentElement.y;
+    return {
+        x: x,
+        y: y,
+    };
 };
 
 var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
@@ -8728,6 +8751,59 @@ function useKeyboardCommands(_a) {
     }, [element]);
 }
 
+//Automatically add points on the link so that the link does not cross elements, default maximum 10 points
+var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
+    if (!eleLink.targetElement || !eleLink.targetPort) {
+        throw new Error("Target element is not found in element link");
+    }
+    var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
+    var absolutePositionOfSourceEle = getAbsolutePosition(sourceElement);
+    var absolutePositionOfTargetEle = getAbsolutePosition(targetElement);
+    var sourcePosition = {
+        x: absolutePositionOfSourceEle.x + sourcePort.position.x,
+        y: absolutePositionOfSourceEle.y + sourcePort.position.y
+    };
+    var targetPosition = {
+        x: absolutePositionOfTargetEle.x + targetPort.position.x,
+        y: absolutePositionOfTargetEle.y + targetPort.position.y
+    };
+    var fourVertexesOfSourceEleBBox = getFourVertexesOfBBoxFromElement(sourceElement);
+    var fourVertexesOfTargetEleBBox = getFourVertexesOfBBoxFromElement(targetElement);
+    var projectedSourcePositionOnBBox = findNearestProjectedPoint(sourcePosition, [
+        [fourVertexesOfSourceEleBBox[0], fourVertexesOfSourceEleBBox[1]],
+        [fourVertexesOfSourceEleBBox[1], fourVertexesOfSourceEleBBox[2]],
+        [fourVertexesOfSourceEleBBox[2], fourVertexesOfSourceEleBBox[3]],
+        [fourVertexesOfSourceEleBBox[3], fourVertexesOfSourceEleBBox[0]],
+    ]);
+    var projectedTargetPositionOnBBox = findNearestProjectedPoint(targetPosition, [
+        [fourVertexesOfTargetEleBBox[0], fourVertexesOfTargetEleBBox[1]],
+        [fourVertexesOfTargetEleBBox[1], fourVertexesOfTargetEleBBox[2]],
+        [fourVertexesOfTargetEleBBox[2], fourVertexesOfTargetEleBBox[3]],
+        [fourVertexesOfTargetEleBBox[3], fourVertexesOfTargetEleBBox[0]],
+    ]);
+    var numberOfPoints = 0;
+    //create points between the start and end points, to create a line segment that passes through the points without intersecting the elements
+    function generatePositions(sourcePosition, targetPosition, elements) {
+        var firstIntersection = getFirstIntersection(sourcePosition, targetPosition, elements);
+        //If there is no intersection point, then the line connecting the two points does not intersect any element.
+        if (!firstIntersection || limitPoint === numberOfPoints)
+            return [];
+        var nearestIntersection = firstIntersection.nearestIntersection; firstIntersection.intersectionPointsList; var intersectedElement = firstIntersection.element;
+        //Calculate to create a replacement point
+        var replacementPosition = generateSubstitutePosition(nearestIntersection, targetPosition, intersectedElement);
+        //Increases the number of points found by 1 
+        numberOfPoints += 1;
+        //Create points with the starting point being the sourcePosition and the ending point being the newly created point
+        var prependedPoints = generatePositions(sourcePosition, replacementPosition, elements);
+        //Create points with the starting point being the new newly created point and the ending point being the targetPosition
+        var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
+        return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
+    }
+    var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
+    eleLink.points = points;
+    return eleLink;
+};
+
 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) {
@@ -8738,11 +8814,11 @@ function convertElementsToTree(elements) {
         var foundChildElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) === elementNodeInTree.id; });
         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 relativePosition = {
-                x: _elementNodeInTree.position.x - elementNodeInTree.position.x,
-                y: _elementNodeInTree.position.y - elementNodeInTree.position.y,
-            };
-            _elementNodeInTree.relativePosition = relativePosition;
+            // const relativePosition = {
+            //     x: _elementNodeInTree.position.x - elementNodeInTree.position.x,
+            //     y: _elementNodeInTree.position.y - elementNodeInTree.position.y,
+            // }
+            // _elementNodeInTree.relativePosition = relativePosition;
             var newNode = findChildElementsOfNode(_elementNodeInTree, orphanedElements);
             return newNode;
         });
@@ -8752,7 +8828,7 @@ function convertElementsToTree(elements) {
     var parentElms = elements.filter(function (e) { return !e.parentElement; });
     var childElms = elements.filter(function (e) { return e.parentElement; });
     var parsedElementsInTree = parentElms.map(function (ele) {
-        ele.relativePosition = ele.position;
+        // ele.relativePosition = ele.position;
         var eleWithChild = findChildElementsOfNode(ele, childElms);
         return eleWithChild;
     });
@@ -8938,57 +9014,6 @@ var Paper = function (props) {
             listener.off();
         };
     }, [selectedText]);
-    //Automatically add points on the link so that the link does not cross elements, default maximum 10 points
-    var automationAddPointsToLink = React.useCallback(function (eleLink, limitPoint) {
-        if (limitPoint === void 0) { limitPoint = 10; }
-        if (!eleLink.targetElement) {
-            throw new Error("Target element is not found in element link");
-        }
-        var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
-        var sourcePosition = {
-            x: sourceElement.position.x + sourcePort.position.x,
-            y: sourceElement.position.y + sourcePort.position.y
-        };
-        var targetPosition = {
-            x: targetElement.position.x + targetPort.position.x,
-            y: targetElement.position.y + targetPort.position.y
-        };
-        var fourVertexesOfSourceEleBBox = getFourVertexesOfBBoxFromElement(sourceElement);
-        var fourVertexesOfTargetEleBBox = getFourVertexesOfBBoxFromElement(targetElement);
-        var projectedSourcePositionOnBBox = findNearestProjectedPoint(sourcePosition, [
-            [fourVertexesOfSourceEleBBox[0], fourVertexesOfSourceEleBBox[1]],
-            [fourVertexesOfSourceEleBBox[1], fourVertexesOfSourceEleBBox[2]],
-            [fourVertexesOfSourceEleBBox[2], fourVertexesOfSourceEleBBox[3]],
-            [fourVertexesOfSourceEleBBox[3], fourVertexesOfSourceEleBBox[0]],
-        ]);
-        var projectedTargetPositionOnBBox = findNearestProjectedPoint(targetPosition, [
-            [fourVertexesOfTargetEleBBox[0], fourVertexesOfTargetEleBBox[1]],
-            [fourVertexesOfTargetEleBBox[1], fourVertexesOfTargetEleBBox[2]],
-            [fourVertexesOfTargetEleBBox[2], fourVertexesOfTargetEleBBox[3]],
-            [fourVertexesOfTargetEleBBox[3], fourVertexesOfTargetEleBBox[0]],
-        ]);
-        var numberOfPoints = 0;
-        //create points between the start and end points, to create a line segment that passes through the points without intersecting the elements
-        function generatePositions(sourcePosition, targetPosition, elements) {
-            var firstIntersection = getFirstIntersection(sourcePosition, targetPosition, elements);
-            //If there is no intersection point, then the line connecting the two points does not intersect any element.
-            if (!firstIntersection || limitPoint === numberOfPoints)
-                return [];
-            var nearestIntersection = firstIntersection.nearestIntersection; firstIntersection.intersectionPointsList; var intersectedElement = firstIntersection.element;
-            //Calculate to create a replacement point
-            var replacementPosition = generateSubstitutePosition(nearestIntersection, targetPosition, intersectedElement);
-            //Increases the number of points found by 1 
-            numberOfPoints += 1;
-            //Create points with the starting point being the sourcePosition and the ending point being the newly created point
-            var prependedPoints = generatePositions(sourcePosition, replacementPosition, elements);
-            //Create points with the starting point being the new newly created point and the ending point being the targetPosition
-            var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
-            return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
-        }
-        var elements = elementsRef.current;
-        var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
-        return __assign(__assign({}, eleLink), { points: points });
-    }, []);
     var handlePaperMouseMove = function (ev) {
         var _a;
         //if there is a temp link, update the temp target point
@@ -9121,10 +9146,11 @@ var Paper = function (props) {
             return null;
         //Automatic bending, if is not defined points
         if (!newElementLink.points || newElementLink.points.length === 0) {
-            newElementLink = automationAddPointsToLink(newElementLink, MAX_LINK_KNOT_COUNT);
+            var elements_1 = elementsRef.current;
+            newElementLink = automationAddPointsToLink(newElementLink, elements_1, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
-    }, [props.onCreatingLink, automationAddPointsToLink]);
+    }, [props.onCreatingLink]);
     var handlePortMouseUp = React.useCallback(function (ev, port, elementId) {
         var _a;
         ev.stopPropagation();
@@ -9253,9 +9279,9 @@ var Paper = function (props) {
     var updateElementPosition = function (element, movementX, movementY) {
         element.position.x += movementX;
         element.position.y += movementY;
-        if (element.childrenElementsInTree && element.childrenElementsInTree.length > 0) {
-            element.childrenElementsInTree = element.childrenElementsInTree.map(function (child) { return updateElementPosition(child, movementX, movementY); });
-        }
+        // if (element.childrenElementsInTree && element.childrenElementsInTree.length > 0) {
+        //     element.childrenElementsInTree = element.childrenElementsInTree.map(child => updateElementPosition(child, movementX, movementY));
+        // }
         return element;
     };
     //use selection frame
@@ -9274,10 +9300,10 @@ var Paper = function (props) {
                 return;
             var oldPosition = __assign({}, selectedElement.position);
             var newElementPosition = updateElementPosition(selectedElement, offsetX, offsetY);
-            newElementPosition.relativePosition = {
-                x: newElementPosition.relativePosition.x + offsetX,
-                y: newElementPosition.relativePosition.y + offsetY
-            };
+            // newElementPosition.relativePosition = {
+            //     x: newElementPosition.relativePosition!.x + offsetX,
+            //     y: newElementPosition.relativePosition!.y + offsetY
+            // }
             var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
             //Set state to re-render UI with new position
             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
@@ -9428,11 +9454,10 @@ var Paper = function (props) {
         }
     }, [props.onElementMouseLeave]);
     var renderElementInTree = React.useCallback(function (element) {
-        var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
-        return (React.createElement("g", { key: element.id },
-            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.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, 
+        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, 
                 // 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 }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
@@ -9452,18 +9477,19 @@ var Paper = function (props) {
         React.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
             paperContainerRef.current ? ElementsInTree : "",
             links && links.map(function (link, index) {
-                var _a, _b, _c, _d;
+                if (!link.targetElement || !link.targetPort)
+                    return null;
                 return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
-                        x: link.sourceElement.position.x + link.sourcePort.position.x,
-                        y: link.sourceElement.position.y + link.sourcePort.position.y
+                        x: getAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
+                        y: getAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
                     }, targetPosition: {
-                        x: ((_a = link.targetElement) === null || _a === void 0 ? void 0 : _a.position.x) + ((_b = link.targetPort) === null || _b === void 0 ? void 0 : _b.position.x),
-                        y: ((_c = link.targetElement) === null || _c === void 0 ? void 0 : _c.position.y) + ((_d = link.targetPort) === null || _d === void 0 ? void 0 : _d.position.y)
+                        x: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
+                        y: getAbsolutePosition(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: tempLink.sourceElement.position.x + tempLink.sourcePort.position.x,
-                    y: tempLink.sourceElement.position.y + tempLink.sourcePort.position.y
+                    x: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
+                    y: getAbsolutePosition(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);

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

@@ -0,0 +1,2 @@
+import { IElement, IElementLink } from "../models";
+export declare const automationAddPointsToLink: (eleLink: IElementLink, elements: IElement[], limitPoint?: number) => IElementLink;

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

@@ -46,3 +46,4 @@ export declare const getFirstIntersection: (startPosition: IPosition, endPositio
 export declare const generateSubstitutePosition: (intersectedPosition: IPosition, targetPosition: IPosition, ele: IElement) => IPosition;
 export declare const getRelativePosition: (clientPosition: IPosition, relativeElement: Element) => IPosition;
 export declare const getFourVertexesOfBBoxFromElement: (element: IElement) => IPosition[];
+export declare const getAbsolutePosition: (element: IElement) => IPosition;