@html-graph/html-graph 8.18.0 → 8.19.0

package/dist/html-graph.umd.cjs

@@ -623,7 +623,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     removeNonexistentPort: (portId) => `Failed to remove port with ID ${JSON.stringify(portId)} because it does not exist`,
     accessNonexistentEdge: (edgeId) => `Failed to access edge with ID ${JSON.stringify(edgeId)} because it does not exist`,
     addEdgeWithExistingId: (edgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because an edge with this ID already exists`,
-    addEdgeWithElementInUse: (edgeId, useEdgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because its SVG element is already attached to edge with ID ${JSON.stringify(useEdgeId)}`,
+    addEdgeWithElementInUse: (edgeId, useEdgeId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} because its element is already attached to edge with ID ${JSON.stringify(useEdgeId)}`,
     addEdgeFromNonexistentPort: (edgeId, portId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} from port with ID ${JSON.stringify(portId)} because the port does not exist`,
     addEdgeToNonexistentPort: (edgeId, portId) => `Failed to add edge with ID ${JSON.stringify(edgeId)} to port with ID ${JSON.stringify(portId)} because the port does not exist`,
     updateNonexistentEdge: (edgeId) => `Failed to update edge with ID ${JSON.stringify(edgeId)} because it does not exist`,
@@ -1475,48 +1475,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     return parts.join(" ");
   };
   const createLine$1 = (from, to) => {
-    const horizontalLineDir = to.x - from.x >= 0;
+    const fromLine = from.linePoint;
+    const toLine = to.linePoint;
+    const horizontalLineDir = toLine.x - fromLine.x >= 0;
     const fromPortDir = from.dirX >= 0;
     const toPortDir = to.dirX >= 0;
     const isSameDirPorts = fromPortDir === toPortDir;
     if (isSameDirPorts) {
       const isSameDirLine = fromPortDir === horizontalLineDir;
-      const centerX = (from.x + to.x) / 2;
-      const centerY2 = (from.y + to.y) / 2;
+      const centerX = (fromLine.x + toLine.x) / 2;
+      const centerY2 = (fromLine.y + toLine.y) / 2;
       const midpoint = { x: centerX, y: centerY2 };
       if (isSameDirLine) {
         return {
           points: [
-            { x: from.x, y: from.y },
-            { x: midpoint.x, y: from.y },
-            { x: midpoint.x, y: to.y },
-            { x: to.x, y: to.y }
+            from.arrowPoint,
+            { x: midpoint.x, y: fromLine.y },
+            { x: midpoint.x, y: toLine.y },
+            to.arrowPoint
           ],
           midpoint
         };
       }
       return {
         points: [
-          { x: from.x, y: from.y },
-          { x: from.x, y: midpoint.y },
-          { x: to.x, y: midpoint.y },
-          { x: to.x, y: to.y }
+          from.arrowPoint,
+          fromLine,
+          { x: fromLine.x, y: midpoint.y },
+          { x: toLine.x, y: midpoint.y },
+          toLine,
+          to.arrowPoint
         ],
         midpoint
       };
     }
     const isSameSourceDir = fromPortDir === horizontalLineDir;
-    const centerY = (from.y + to.y) / 2;
+    const centerY = (fromLine.y + toLine.y) / 2;
     if (isSameSourceDir) {
-      const joint2 = { x: to.x, y: from.y };
+      const joint2 = { x: toLine.x, y: fromLine.y };
       return {
-        points: [{ x: from.x, y: from.y }, joint2, { x: to.x, y: to.y }],
+        points: [from.arrowPoint, joint2, toLine, to.arrowPoint],
         midpoint: { x: joint2.x, y: centerY }
       };
     }
-    const joint = { x: from.x, y: to.y };
+    const joint = { x: fromLine.x, y: toLine.y };
     return {
-      points: [{ x: from.x, y: from.y }, joint, { x: to.x, y: to.y }],
+      points: [from.arrowPoint, fromLine, joint, to.arrowPoint],
       midpoint: { x: joint.x, y: centerY }
     };
   };
@@ -1540,14 +1544,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         fromDir,
         from
       ) : from;
-      const endArrow = hasTargetArrow ? createRotatedPoint(
-        {
-          x: to.x - arrowLength,
-          y: to.y
-        },
-        toDir,
-        to
-      ) : to;
+      const endArrow = hasTargetArrow ? createRotatedPoint({ x: to.x - arrowLength, y: to.y }, toDir, to) : to;
       const gap = arrowLength + arrowOffset;
       const beginLine = createRotatedPoint(
         { x: from.x + gap, y: from.y },
@@ -1556,21 +1553,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       );
       const endLine = createRotatedPoint({ x: to.x - gap, y: to.y }, toDir, to);
       const line = createLine$1(
-        {
-          x: beginLine.x,
-          y: beginLine.y,
-          dirX: fromDir.x
-        },
-        {
-          x: endLine.x,
-          y: endLine.y,
-          dirX: toDir.x
-        }
-      );
-      this.path = createRoundedPath(
-        [beginArrow, ...line.points, endArrow],
-        roundness
+        { arrowPoint: beginArrow, linePoint: beginLine, dirX: fromDir.x },
+        { arrowPoint: endArrow, linePoint: endLine, dirX: toDir.x }
       );
+      this.path = createRoundedPath(line.points, roundness);
       this.midpoint = line.midpoint;
     }
   }
@@ -1687,48 +1673,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   const createLine = (from, to) => {
-    const verticalLineDir = to.y - from.y >= 0;
+    const fromLine = from.linePoint;
+    const toLine = to.linePoint;
+    const verticalLineDir = toLine.y - fromLine.y >= 0;
     const fromPortDir = from.dirY >= 0;
     const toPortDir = to.dirY >= 0;
     const isSameDirPorts = fromPortDir === toPortDir;
     if (isSameDirPorts) {
       const isSameDirLine = fromPortDir === verticalLineDir;
-      const centerX2 = (from.x + to.x) / 2;
-      const centerY = (from.y + to.y) / 2;
+      const centerX2 = (fromLine.x + toLine.x) / 2;
+      const centerY = (fromLine.y + toLine.y) / 2;
       const midpoint = { x: centerX2, y: centerY };
       if (isSameDirLine) {
         return {
           points: [
-            { x: from.x, y: from.y },
-            { x: from.x, y: midpoint.y },
-            { x: to.x, y: midpoint.y },
-            { x: to.x, y: to.y }
+            from.arrowPoint,
+            { x: fromLine.x, y: midpoint.y },
+            { x: toLine.x, y: midpoint.y },
+            to.arrowPoint
           ],
           midpoint
         };
       }
       return {
         points: [
-          { x: from.x, y: from.y },
-          { x: midpoint.x, y: from.y },
-          { x: midpoint.x, y: to.y },
-          { x: to.x, y: to.y }
+          from.arrowPoint,
+          fromLine,
+          { x: midpoint.x, y: fromLine.y },
+          { x: midpoint.x, y: toLine.y },
+          toLine,
+          to.arrowPoint
         ],
         midpoint
       };
     }
     const isSameSourceDir = fromPortDir === verticalLineDir;
-    const centerX = (from.x + to.x) / 2;
+    const centerX = (fromLine.x + toLine.x) / 2;
     if (isSameSourceDir) {
-      const joint2 = { x: from.x, y: to.y };
+      const joint2 = { x: fromLine.x, y: toLine.y };
       return {
-        points: [{ x: from.x, y: from.y }, joint2, { x: to.x, y: to.y }],
+        points: [from.arrowPoint, joint2, toLine, to.arrowPoint],
         midpoint: { x: centerX, y: joint2.y }
       };
     }
-    const joint = { x: to.x, y: from.y };
+    const joint = { x: toLine.x, y: fromLine.y };
     return {
-      points: [{ x: from.x, y: from.y }, joint, { x: to.x, y: to.y }],
+      points: [from.arrowPoint, fromLine, joint, to.arrowPoint],
       midpoint: { x: centerX, y: joint.y }
     };
   };
@@ -1752,14 +1742,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         fromDir,
         from
       ) : from;
-      const endArrow = hasTargetArrow ? createRotatedPoint(
-        {
-          x: to.x - arrowLength,
-          y: to.y
-        },
-        toDir,
-        to
-      ) : to;
+      const endArrow = hasTargetArrow ? createRotatedPoint({ x: to.x - arrowLength, y: to.y }, toDir, to) : to;
       const gap = arrowLength + arrowOffset;
       const beginLine = createRotatedPoint(
         { x: from.x + gap, y: from.y },
@@ -1768,21 +1751,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       );
       const endLine = createRotatedPoint({ x: to.x - gap, y: to.y }, toDir, to);
       const line = createLine(
-        {
-          x: beginLine.x,
-          y: beginLine.y,
-          dirY: fromDir.y
-        },
-        {
-          x: endLine.x,
-          y: endLine.y,
-          dirY: toDir.y
-        }
-      );
-      this.path = createRoundedPath(
-        [beginArrow, ...line.points, endArrow],
-        roundness
+        { arrowPoint: beginArrow, linePoint: beginLine, dirY: fromDir.y },
+        { arrowPoint: endArrow, linePoint: endLine, dirY: toDir.y }
       );
+      this.path = createRoundedPath(line.points, roundness);
       this.midpoint = line.midpoint;
     }
   }
@@ -2297,6 +2269,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.pathShape.render(params);
     }
   }
+  const horizontalizeDirection = (direction) => {
+    return Math.cos(direction) > 0 ? 0 : Math.PI;
+  };
   class HorizontalEdgeShape {
     constructor(params) {
       __publicField(this, "svg");
@@ -2377,7 +2352,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.onAfterRender = this.pathShape.onAfterRender;
     }
     render(params) {
-      this.pathShape.render(params);
+      const { from, to, category } = params;
+      this.pathShape.render({
+        category,
+        from: {
+          ...from,
+          direction: horizontalizeDirection(from.direction)
+        },
+        to: {
+          ...to,
+          direction: horizontalizeDirection(to.direction)
+        }
+      });
     }
   }
   class StraightEdgeShape {
@@ -2466,6 +2452,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.pathShape.render(params);
     }
   }
+  const pi2 = Math.PI / 2;
+  const verticalizeDirection = (direction) => {
+    return Math.sin(direction) > 0 ? pi2 : -pi2;
+  };
   class VerticalEdgeShape {
     constructor(params) {
       __publicField(this, "svg");
@@ -2546,7 +2536,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.onAfterRender = this.pathShape.onAfterRender;
     }
     render(params) {
-      this.pathShape.render(params);
+      const { from, to, category } = params;
+      this.pathShape.render({
+        category,
+        from: {
+          ...from,
+          direction: verticalizeDirection(from.direction)
+        },
+        to: {
+          ...to,
+          direction: verticalizeDirection(to.direction)
+        }
+      });
     }
   }
   class DirectEdgeShape {
@@ -2694,7 +2695,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       // TODO: make private
       /**
        * @deprecated
-       * do use shape.svg instead
+       * use shape.svg instead
        */
       __publicField(this, "handle", createEdgeGroup());
       __publicField(this, "onAfterRender");
@@ -3233,13 +3234,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           start = timestamp;
         }
         const progress = Math.min((timestamp - start) / duration, 1);
-        if (progress <= 1) {
-          this.viewportStore.patchViewportMatrix({
-            scale: previousViewportMatrix.scale + progress * deltaMatrix.scale,
-            x: previousViewportMatrix.x + progress * deltaMatrix.x,
-            y: previousViewportMatrix.y + progress * deltaMatrix.y
-          });
-        }
+        this.viewportStore.patchViewportMatrix({
+          scale: previousViewportMatrix.scale + progress * deltaMatrix.scale,
+          x: previousViewportMatrix.x + progress * deltaMatrix.x,
+          y: previousViewportMatrix.y + progress * deltaMatrix.y
+        });
         if (progress < 1) {
           this.win.requestAnimationFrame(step);
         }
@@ -3595,7 +3594,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       to: params.isDirect ? targetPortId : params.staticPortId
     };
   };
-  class ClosestConnectablePortDraggingPortDirectionResolver {
+  class NearestConnectablePortDraggingPortDirectionResolver {
     constructor(graph, connectionAllowedVerifier) {
       this.graph = graph;
       this.connectionAllowedVerifier = connectionAllowedVerifier;
@@ -4436,13 +4435,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         staticPortId,
         isDirect
       };
+      const resolvedDirection = this.params.draggingPortDirectionResolver.resolve(
+        {
+          cursor,
+          ...this.edgeInProgress
+        }
+      );
       const draggingParams = {
         overlayNodeId: OverlayId.DraggingNodeId,
         portCoords: cursorPoint,
-        portDirection: this.params.draggingPortDirectionResolver.resolve({
-          cursor,
-          ...this.edgeInProgress
-        }) ?? port.direction
+        portDirection: resolvedDirection ?? port.direction
       };
       const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
       this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
@@ -4596,14 +4598,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         portCoords: staticPoint,
         portDirection: staticPort.direction
       };
-      const direction = this.params.draggingPortDirectionResolver.resolve({
-        cursor,
-        ...this.edgeInProgress
-      });
+      const resolvedDirection = this.params.draggingPortDirectionResolver.resolve(
+        {
+          cursor,
+          ...this.edgeInProgress
+        }
+      );
       const draggingParams = {
         overlayNodeId: OverlayId.DraggingNodeId,
         portCoords: draggingPoint,
-        portDirection: direction ?? draggingPort.direction
+        portDirection: resolvedDirection ?? draggingPort.direction
       };
       const [sourceParams, targetParams] = isDirect ? [staticParams, draggingParams] : [draggingParams, staticParams];
       this.overlayCanvas.addNode(createAddNodeOverlayRequest(sourceParams));
@@ -5050,7 +5054,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const resolveDraggingPortDirectionResolver = (config, graph, connectionAllowedVerifier) => {
     if (config === "closest-connectable-port") {
-      return new ClosestConnectablePortDraggingPortDirectionResolver(
+      return new NearestConnectablePortDraggingPortDirectionResolver(
+        graph,
+        connectionAllowedVerifier
+      );
+    }
+    if (config === "nearest-connectable-port") {
+      return new NearestConnectablePortDraggingPortDirectionResolver(
         graph,
         connectionAllowedVerifier
       );
@@ -6421,6 +6431,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           nodeMass: (config == null ? void 0 : config.nodeMass) ?? forceDirectedDefaults.nodeMass,
           edgeEquilibriumLength: (config == null ? void 0 : config.edgeEquilibriumLength) ?? forceDirectedDefaults.edgeEquilibriumLength,
           edgeStiffness: (config == null ? void 0 : config.edgeStiffness) ?? forceDirectedDefaults.edgeStiffness,
+          // TODO: rename no `minVelocity`
           convergenceVelocity: (config == null ? void 0 : config.convergenceVelocity) ?? forceDirectedDefaults.convergenceVelocity,
           maxForce: (config == null ? void 0 : config.maxForce) ?? forceDirectedDefaults.maxForce,
           nodeForceCoefficient: (config == null ? void 0 : config.nodeForceCoefficient) ?? forceDirectedDefaults.nodeForceCoefficient,
@@ -6450,6 +6461,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         trigger: applyOn
       };
     }
+    if (applyOn === "topologyChangeMicrotask") {
+      return {
+        type: "topologyChangeSchedule",
+        schedule: microtaskScheduleFn
+      };
+    }
     if ((applyOn == null ? void 0 : applyOn.type) === "topologyChangeMacrotask") {
       return {
         type: "topologyChangeSchedule",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "8.18.0",
+  "version": "8.19.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",