orcasvn-react-diagrams 0.1.29 → 0.1.30

package/dist/cjs/index.js

@@ -7505,12 +7505,12 @@ var checkPointContainsPolygon = function (position, polygonPoints) {
  */
 var makePolygonOfElement = function (ele) {
     var polygon = new Flatten$1.Polygon();
-    var strokeWidthOffset = 1;
+    var vertexes = getFourVertexesOfBBoxFromElement(ele);
     polygon.addFace([
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
+        Flatten$1.point(vertexes[0].x, vertexes[0].y),
+        Flatten$1.point(vertexes[1].x, vertexes[1].y),
+        Flatten$1.point(vertexes[2].x, vertexes[2].y),
+        Flatten$1.point(vertexes[3].x, vertexes[3].y),
     ]);
     return polygon;
 };
@@ -7552,46 +7552,30 @@ var getFirstIntersection = function (startPosition, endPosition, elements) {
 //Find a point next to an element from a point on the element
 var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
     var translationOffset = 20;
-    var strokeWidthOffset = 1;
-    var vertex1Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex2Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex3Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
-    var vertex4Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
+    var _a = getFourVertexesOfBBoxFromElement(ele), vertex1Position = _a[0], vertex2Position = _a[1], vertex3Position = _a[2], vertex4Position = _a[3];
     var replacementPosition = null;
-    if (checkSamePosition(vertex1Position, intersectedPosition, 3)) {
+    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
         //Cut at vertex 1 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex1Position.x - translationOffset,
             y: vertex1Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex2Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
         //Cut at vertex 2 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex2Position.x + translationOffset,
             y: vertex2Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex3Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
         //Cut at vertex 3 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex3Position.x + translationOffset,
             y: vertex3Position.y + translationOffset,
         };
     }
-    else if (checkSamePosition(vertex4Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
         //Cut at vertex 4 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex4Position.x - translationOffset,
@@ -7699,6 +7683,25 @@ var getRelativePosition = function (clientPosition, relativeElement) {
         x: clientPosition.x - relativeRect.left,
         y: clientPosition.y - relativeRect.top,
     };
+};
+var getFourVertexesOfBBoxFromElement = function (element) {
+    var vertex1Position = {
+        x: element.position.x,
+        y: element.position.y
+    };
+    var vertex2Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y
+    };
+    var vertex3Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y + element.size.height
+    };
+    var vertex4Position = {
+        x: element.position.x,
+        y: element.position.y + element.size.height
+    };
+    return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
 };
 
 var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
@@ -8058,7 +8061,7 @@ var Element = function (props) {
     }, [ports]);
     React.useEffect(function () {
         var _a;
-        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id);
+        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id, props.ports);
     });
     //Listen a new port is created, after add new port to ports state
     React.useEffect(function () {
@@ -8839,7 +8842,7 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, []);
+    }, [elements]);
     //Update elements tree when length of elements change
     React.useEffect(function () {
         updateElementsTree();
@@ -8912,6 +8915,9 @@ var Paper = function (props) {
     //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,
@@ -8921,6 +8927,20 @@ var Paper = function (props) {
             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) {
@@ -8940,7 +8960,7 @@ var Paper = function (props) {
             return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
         }
         var elements = elementsRef.current;
-        var points = generatePositions(sourcePosition, targetPosition, elements);
+        var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
         return __assign(__assign({}, eleLink), { points: points });
     }, []);
     var handlePaperMouseMove = function (ev) {

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

@@ -45,3 +45,4 @@ export declare const getFirstIntersection: (startPosition: IPosition, endPositio
 } | undefined;
 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[];

package/dist/esm/index.js

@@ -7501,12 +7501,12 @@ var checkPointContainsPolygon = function (position, polygonPoints) {
  */
 var makePolygonOfElement = function (ele) {
     var polygon = new Flatten$1.Polygon();
-    var strokeWidthOffset = 1;
+    var vertexes = getFourVertexesOfBBoxFromElement(ele);
     polygon.addFace([
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
+        Flatten$1.point(vertexes[0].x, vertexes[0].y),
+        Flatten$1.point(vertexes[1].x, vertexes[1].y),
+        Flatten$1.point(vertexes[2].x, vertexes[2].y),
+        Flatten$1.point(vertexes[3].x, vertexes[3].y),
     ]);
     return polygon;
 };
@@ -7548,46 +7548,30 @@ var getFirstIntersection = function (startPosition, endPosition, elements) {
 //Find a point next to an element from a point on the element
 var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
     var translationOffset = 20;
-    var strokeWidthOffset = 1;
-    var vertex1Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex2Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex3Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
-    var vertex4Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
+    var _a = getFourVertexesOfBBoxFromElement(ele), vertex1Position = _a[0], vertex2Position = _a[1], vertex3Position = _a[2], vertex4Position = _a[3];
     var replacementPosition = null;
-    if (checkSamePosition(vertex1Position, intersectedPosition, 3)) {
+    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
         //Cut at vertex 1 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex1Position.x - translationOffset,
             y: vertex1Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex2Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
         //Cut at vertex 2 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex2Position.x + translationOffset,
             y: vertex2Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex3Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
         //Cut at vertex 3 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex3Position.x + translationOffset,
             y: vertex3Position.y + translationOffset,
         };
     }
-    else if (checkSamePosition(vertex4Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
         //Cut at vertex 4 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex4Position.x - translationOffset,
@@ -7695,6 +7679,25 @@ var getRelativePosition = function (clientPosition, relativeElement) {
         x: clientPosition.x - relativeRect.left,
         y: clientPosition.y - relativeRect.top,
     };
+};
+var getFourVertexesOfBBoxFromElement = function (element) {
+    var vertex1Position = {
+        x: element.position.x,
+        y: element.position.y
+    };
+    var vertex2Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y
+    };
+    var vertex3Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y + element.size.height
+    };
+    var vertex4Position = {
+        x: element.position.x,
+        y: element.position.y + element.size.height
+    };
+    return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
 };
 
 var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
@@ -8054,7 +8057,7 @@ var Element = function (props) {
     }, [ports]);
     useEffect(function () {
         var _a;
-        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id);
+        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id, props.ports);
     });
     //Listen a new port is created, after add new port to ports state
     useEffect(function () {
@@ -8835,7 +8838,7 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, []);
+    }, [elements]);
     //Update elements tree when length of elements change
     useEffect(function () {
         updateElementsTree();
@@ -8908,6 +8911,9 @@ var Paper = function (props) {
     //Automatically add points on the link so that the link does not cross elements, default maximum 10 points
     var automationAddPointsToLink = 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,
@@ -8917,6 +8923,20 @@ var Paper = function (props) {
             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) {
@@ -8936,7 +8956,7 @@ var Paper = function (props) {
             return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
         }
         var elements = elementsRef.current;
-        var points = generatePositions(sourcePosition, targetPosition, elements);
+        var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
         return __assign(__assign({}, eleLink), { points: points });
     }, []);
     var handlePaperMouseMove = function (ev) {