@html-graph/html-graph 8.18.0 → 8.19.0

package/dist/html-graph.d.ts

@@ -413,7 +413,12 @@ export declare interface DraggableNodesConfig {
 
 export declare type DraggingEdgeResolver = (portId: Identifier) => Identifier | null;
 
-declare type DraggingPortDirectionConfig = number | undefined | "closest-connectable-port";
+export declare type DraggingPortDirectionConfig = number | undefined
+/**
+* @deprecated
+* use "nearest-connectable-port" instead
+*/
+| "closest-connectable-port" | "nearest-connectable-port";
 
 export declare interface EdgeCreationInProgressParams {
     readonly staticPortId: Identifier;
@@ -729,7 +734,7 @@ export declare class InteractiveEdgeShape implements StructuredEdgeShape {
     readonly targetArrow: SVGPathElement | null;
     /**
      * @deprecated
-     * do use shape.svg instead
+     * use shape.svg instead
      */
     readonly handle: SVGGElement;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
@@ -776,7 +781,7 @@ export declare interface LayoutAlgorithmParams {
     readonly viewport: Viewport;
 }
 
-export declare type LayoutApplyOn = TopologyChangeMacrotask | TopologyChangeMicrotask | EventSubject<void>;
+export declare type LayoutApplyOn = TopologyChangeMacrotask | TopologyChangeMicrotask | "topologyChangeMicrotask" | EventSubject<void>;
 
 export declare interface LayoutConfig {
     readonly algorithm?: LayoutAlgorithmConfig | undefined;
@@ -949,7 +954,7 @@ export declare interface StructuredEdgeShape extends EdgeShape {
 
 /**
  * @deprecated
- * use topologyChangeMicrotask instead
+ * use "topologyChangeMicrotask" instead
  */
 declare type TopologyChangeMacrotask = {
     type: "topologyChangeMacrotask";
@@ -1037,7 +1042,7 @@ declare interface UpdateNodeRequest_2 {
 }
 
 export declare interface UpdatePortRequest {
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 }
 
 declare interface UpdatePortRequest_2 {

package/dist/html-graph.js

@@ -619,7 +619,7 @@ const canvasErrorText = Object.freeze({
   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`,
@@ -1471,48 +1471,52 @@ const createRoundedPath = (path, roundness) => {
   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 }
   };
 };
@@ -1536,14 +1540,7 @@ class HorizontalEdgePath {
       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 },
@@ -1552,21 +1549,10 @@ class HorizontalEdgePath {
     );
     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;
   }
 }
@@ -1683,48 +1669,52 @@ class StraightEdgePath {
   }
 }
 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 }
   };
 };
@@ -1748,14 +1738,7 @@ class VerticalEdgePath {
       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 },
@@ -1764,21 +1747,10 @@ class VerticalEdgePath {
     );
     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;
   }
 }
@@ -2293,6 +2265,9 @@ class BezierEdgeShape {
     this.pathShape.render(params);
   }
 }
+const horizontalizeDirection = (direction) => {
+  return Math.cos(direction) > 0 ? 0 : Math.PI;
+};
 class HorizontalEdgeShape {
   constructor(params) {
     __publicField(this, "svg");
@@ -2373,7 +2348,18 @@ class HorizontalEdgeShape {
     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 {
@@ -2462,6 +2448,10 @@ class StraightEdgeShape {
     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");
@@ -2542,7 +2532,18 @@ class VerticalEdgeShape {
     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 {
@@ -2690,7 +2691,7 @@ class InteractiveEdgeShape {
     // TODO: make private
     /**
      * @deprecated
-     * do use shape.svg instead
+     * use shape.svg instead
      */
     __publicField(this, "handle", createEdgeGroup());
     __publicField(this, "onAfterRender");
@@ -3229,13 +3230,11 @@ class ViewportController {
         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);
       }
@@ -3591,7 +3590,7 @@ const resolveCreateEdgeRequest = (params, targetPortId) => {
     to: params.isDirect ? targetPortId : params.staticPortId
   };
 };
-class ClosestConnectablePortDraggingPortDirectionResolver {
+class NearestConnectablePortDraggingPortDirectionResolver {
   constructor(graph, connectionAllowedVerifier) {
     this.graph = graph;
     this.connectionAllowedVerifier = connectionAllowedVerifier;
@@ -4432,13 +4431,16 @@ class UserConnectablePortsConfigurator {
       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));
@@ -4592,14 +4594,16 @@ class UserDraggableEdgesConfigurator {
       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));
@@ -5046,7 +5050,13 @@ const noopFn = () => {
 };
 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
     );
@@ -6417,6 +6427,7 @@ const resolveAnimatedLayoutAlgorithm = (config) => {
         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,
@@ -6446,6 +6457,12 @@ const resolveLayoutApplyOn = (applyOn) => {
       trigger: applyOn
     };
   }
+  if (applyOn === "topologyChangeMicrotask") {
+    return {
+      type: "topologyChangeSchedule",
+      schedule: microtaskScheduleFn
+    };
+  }
   if ((applyOn == null ? void 0 : applyOn.type) === "topologyChangeMacrotask") {
     return {
       type: "topologyChangeSchedule",