@ngroznykh/papirus 0.3.3 → 0.3.5

package/dist/papirus.js

@@ -1524,13 +1524,6 @@ class ConnectionManager extends EventEmitter {
     this.renderer.markDirty();
     return true;
   }
-  /**
-   * Get the node ID at the other end of the reconnecting edge
-   */
-  getOtherNodeId() {
-    if (!this.reconnectingEdge) return null;
-    return this.reconnectingEndpoint === "start" ? this.reconnectingEdge.to.nodeId : this.reconnectingEdge.from.nodeId;
-  }
   /**
    * Handle mouse up to complete or cancel connection
    */
@@ -1576,14 +1569,15 @@ class ConnectionManager extends EventEmitter {
     if (targetNode) {
       const allowed = !this._connectionValidator || this._connectionValidator(this.sourceNode.id, targetNode.id);
       if (allowed) {
-        const targetAnchor = targetNode.getNearestAnchor(point);
+        const nearestTargetAnchor = targetNode.getNearestAnchor(point);
+        const sourceAnchorId = this.sourceAnchorId;
         const from = {
           nodeId: this.sourceNode.id,
-          portId: this.sourceAnchorId ? `${ANCHOR_PORT_PREFIX}${this.sourceAnchorId}` : void 0
+          portId: sourceAnchorId ? `${ANCHOR_PORT_PREFIX}${sourceAnchorId}` : void 0
         };
         const to = {
           nodeId: targetNode.id,
-          portId: targetAnchor ? `${ANCHOR_PORT_PREFIX}${targetAnchor.id}` : void 0
+          portId: nearestTargetAnchor ? `${ANCHOR_PORT_PREFIX}${nearestTargetAnchor.id}` : void 0
         };
         createdEdge = this.createEdge(from, to);
         this.addEdge(createdEdge);
@@ -1691,8 +1685,8 @@ class ConnectionManager extends EventEmitter {
     }
     ctx.stroke();
   }
-  isCompatibleTarget(node) {
-    return node.id !== this.sourceNode?.id;
+  isCompatibleTarget(_node) {
+    return true;
   }
   setCursor(cursor) {
     const canvas = this.renderer.getCanvas();
@@ -1814,10 +1808,6 @@ class ConnectionManager extends EventEmitter {
         continue;
       }
       if (reconnecting) {
-        const otherId = this.getOtherNodeId();
-        if (otherId && node.id === otherId) {
-          continue;
-        }
         return node;
       }
       if (this.isCompatibleTarget(node)) {
@@ -1912,6 +1902,7 @@ class TextLabel {
     this._measuredHeight = 0;
     this._measureDirty = true;
     this._text = options.text;
+    this._editableText = options.editableText;
     this._localStyle = { ...options.style };
     this._style = { ...DEFAULT_STYLE, ...options.style };
     this._maxWidth = options.maxWidth;
@@ -1934,6 +1925,19 @@ class TextLabel {
       this._onChange?.();
     }
   }
+  /**
+   * Editable text shown in inline editor instead of display text.
+   * When set, double-click editing will use this value.
+   */
+  get editableText() {
+    return this._editableText;
+  }
+  set editableText(value) {
+    if (this._editableText !== value) {
+      this._editableText = value;
+      this._onChange?.();
+    }
+  }
   /**
    * Text style
    */
@@ -2171,6 +2175,7 @@ const snapshotLabel = (label) => {
   }
   return {
     text: label.text,
+    editableText: label.editableText,
     style: cloneValue(label.style),
     styleClass: label.styleClass,
     maxWidth: label.maxWidth
@@ -2182,6 +2187,7 @@ const applyLabelSnapshot = (current, snapshot) => {
   }
   if (current) {
     current.text = snapshot.text;
+    current.editableText = snapshot.editableText;
     current.style = snapshot.style ?? {};
     current.styleClass = snapshot.styleClass;
     current.maxWidth = snapshot.maxWidth;
@@ -2189,6 +2195,7 @@ const applyLabelSnapshot = (current, snapshot) => {
   }
   return new TextLabel({
     text: snapshot.text,
+    editableText: snapshot.editableText,
     style: snapshot.style,
     styleClass: snapshot.styleClass,
     maxWidth: snapshot.maxWidth
@@ -2739,8 +2746,339 @@ class StraightPathStrategy {
   }
 }
 const MIN_SEGMENT_LENGTH = 20;
+const SELF_LOOP_MIN_DISTANCE$1 = 1;
+const SELF_LOOP_OFFSET$1 = 42;
+const SELF_LOOP_SPREAD$1 = 20;
+const CORNER_BYPASS_DISTANCE$1 = 220;
+const CORNER_BYPASS_CLEARANCE$1 = 34;
+const OPPOSITE_BYPASS_DISTANCE$1 = 280;
+const OPPOSITE_BYPASS_CLEARANCE$1 = 36;
+const OPPOSITE_BYPASS_ARC$1 = 48;
+const OBSTACLE_ROUTING_DISTANCE = 1200;
+const OBSTACLE_MARGIN = 12;
+const ROUTE_EXIT_DISTANCE = 32;
+const TURN_PENALTY = 70;
+const FIRST_VERTICAL_PENALTY = 28;
+function isHorizontal$1(dir) {
+  return dir === "left" || dir === "right";
+}
+function isVertical$1(dir) {
+  return dir === "top" || dir === "bottom";
+}
+function isOppositeDirections$1(fromDir, toDir) {
+  return fromDir === "left" && toDir === "right" || fromDir === "right" && toDir === "left" || fromDir === "top" && toDir === "bottom" || fromDir === "bottom" && toDir === "top";
+}
+function expandObstacles(obstacles, margin) {
+  return obstacles.map((obstacle) => ({
+    ...obstacle,
+    x: obstacle.x - margin,
+    y: obstacle.y - margin,
+    width: obstacle.width + margin * 2,
+    height: obstacle.height + margin * 2
+  }));
+}
+function pointInsideObstacle(point, obstacle) {
+  return point.x >= obstacle.x && point.x <= obstacle.x + obstacle.width && point.y >= obstacle.y && point.y <= obstacle.y + obstacle.height;
+}
+function segmentIntersectsExpandedObstacle(a, b, obstacle) {
+  const minX = obstacle.x;
+  const maxX = obstacle.x + obstacle.width;
+  const minY = obstacle.y;
+  const maxY = obstacle.y + obstacle.height;
+  if (Math.abs(a.x - b.x) < 1e-3) {
+    const x = a.x;
+    const y1 = Math.min(a.y, b.y);
+    const y2 = Math.max(a.y, b.y);
+    return x >= minX && x <= maxX && y2 >= minY && y1 <= maxY;
+  }
+  if (Math.abs(a.y - b.y) < 1e-3) {
+    const y = a.y;
+    const x1 = Math.min(a.x, b.x);
+    const x2 = Math.max(a.x, b.x);
+    return y >= minY && y <= maxY && x2 >= minX && x1 <= maxX;
+  }
+  return false;
+}
+function simplifyPath(path) {
+  const out = [];
+  for (const point of path) {
+    const prev = out[out.length - 1];
+    if (!prev || Math.abs(prev.x - point.x) > 1e-3 || Math.abs(prev.y - point.y) > 1e-3) {
+      out.push(point);
+    }
+  }
+  return out;
+}
+function manhattan(a, b) {
+  return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+}
+function moveByDir(point, dir, distance2) {
+  switch (dir) {
+    case "top":
+      return { x: point.x, y: point.y - distance2 };
+    case "bottom":
+      return { x: point.x, y: point.y + distance2 };
+    case "left":
+      return { x: point.x - distance2, y: point.y };
+    case "right":
+      return { x: point.x + distance2, y: point.y };
+    default:
+      return point;
+  }
+}
+function inferDir(from, to) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return dx >= 0 ? "right" : "left";
+  }
+  return dy >= 0 ? "bottom" : "top";
+}
+function oppositeDir(dir) {
+  switch (dir) {
+    case "left":
+      return "right";
+    case "right":
+      return "left";
+    case "top":
+      return "bottom";
+    case "bottom":
+      return "top";
+    default:
+      return dir;
+  }
+}
+function buildRoutedPolyline(from, to, fromDir, toDir, obstacles) {
+  if (obstacles.length === 0) {
+    return null;
+  }
+  const effectiveFromDir = fromDir ?? inferDir(from, to);
+  const effectiveToDir = toDir ?? oppositeDir(effectiveFromDir);
+  const startExit = moveByDir(from, effectiveFromDir, ROUTE_EXIT_DISTANCE);
+  const endEntry = moveByDir(to, effectiveToDir, ROUTE_EXIT_DISTANCE);
+  const expanded = expandObstacles(obstacles, OBSTACLE_MARGIN);
+  const xs = /* @__PURE__ */ new Set([startExit.x, endEntry.x]);
+  const ys = /* @__PURE__ */ new Set([startExit.y, endEntry.y]);
+  for (const obstacle of expanded) {
+    xs.add(obstacle.x - 1);
+    xs.add(obstacle.x + obstacle.width + 1);
+    ys.add(obstacle.y - 1);
+    ys.add(obstacle.y + obstacle.height + 1);
+  }
+  const nodes = [];
+  const nodeIndex = /* @__PURE__ */ new Map();
+  const nodeKey = (x, y) => `${x}|${y}`;
+  const addNode = (x, y) => {
+    const key = nodeKey(x, y);
+    if (nodeIndex.has(key)) return;
+    const point = { x, y };
+    if (expanded.some((obstacle) => pointInsideObstacle(point, obstacle))) {
+      return;
+    }
+    nodeIndex.set(key, nodes.length);
+    nodes.push(point);
+  };
+  for (const x of xs) {
+    for (const y of ys) {
+      addNode(x, y);
+    }
+  }
+  addNode(startExit.x, startExit.y);
+  addNode(endEntry.x, endEntry.y);
+  const startIdx = nodeIndex.get(nodeKey(startExit.x, startExit.y));
+  const goalIdx = nodeIndex.get(nodeKey(endEntry.x, endEntry.y));
+  if (startIdx == null || goalIdx == null) {
+    return null;
+  }
+  const edges = /* @__PURE__ */ new Map();
+  const pushEdge = (a, b, dir, length) => {
+    const list = edges.get(a) ?? [];
+    list.push({ to: b, dir, length });
+    edges.set(a, list);
+  };
+  const byX = /* @__PURE__ */ new Map();
+  const byY = /* @__PURE__ */ new Map();
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const xsList = byX.get(node.x) ?? [];
+    xsList.push(i);
+    byX.set(node.x, xsList);
+    const ysList = byY.get(node.y) ?? [];
+    ysList.push(i);
+    byY.set(node.y, ysList);
+  }
+  for (const list of byX.values()) {
+    list.sort((a, b) => nodes[a].y - nodes[b].y);
+    for (let i = 1; i < list.length; i++) {
+      const a = nodes[list[i - 1]];
+      const b = nodes[list[i]];
+      if (!expanded.some((obstacle) => segmentIntersectsExpandedObstacle(a, b, obstacle))) {
+        const length = manhattan(a, b);
+        pushEdge(list[i - 1], list[i], "v", length);
+        pushEdge(list[i], list[i - 1], "v", length);
+      }
+    }
+  }
+  for (const list of byY.values()) {
+    list.sort((a, b) => nodes[a].x - nodes[b].x);
+    for (let i = 1; i < list.length; i++) {
+      const a = nodes[list[i - 1]];
+      const b = nodes[list[i]];
+      if (!expanded.some((obstacle) => segmentIntersectsExpandedObstacle(a, b, obstacle))) {
+        const length = manhattan(a, b);
+        pushEdge(list[i - 1], list[i], "h", length);
+        pushEdge(list[i], list[i - 1], "h", length);
+      }
+    }
+  }
+  const makeStateKey = (node, dir) => `${node}:${dir}`;
+  const open = [];
+  const best = /* @__PURE__ */ new Map();
+  const prev = /* @__PURE__ */ new Map();
+  const startKey = makeStateKey(startIdx, "s");
+  best.set(startKey, 0);
+  open.push({
+    node: startIdx,
+    dir: "s",
+    g: 0,
+    f: manhattan(nodes[startIdx], nodes[goalIdx]),
+    key: startKey
+  });
+  let goalKey = null;
+  while (open.length > 0) {
+    let bestIdx = 0;
+    for (let i = 1; i < open.length; i++) {
+      if (open[i].f < open[bestIdx].f) bestIdx = i;
+    }
+    const current = open.splice(bestIdx, 1)[0];
+    if (current.node === goalIdx) {
+      goalKey = current.key;
+      break;
+    }
+    for (const edge of edges.get(current.node) ?? []) {
+      const nextDir = edge.dir;
+      let stepCost = edge.length;
+      if (current.dir !== "s" && current.dir !== nextDir) {
+        stepCost += TURN_PENALTY;
+      }
+      if (current.dir === "s" && nextDir === "v") {
+        stepCost += FIRST_VERTICAL_PENALTY;
+      }
+      const nextG = current.g + stepCost;
+      const nextKey = makeStateKey(edge.to, nextDir);
+      if (nextG >= (best.get(nextKey) ?? Infinity)) {
+        continue;
+      }
+      best.set(nextKey, nextG);
+      prev.set(nextKey, current.key);
+      const h = manhattan(nodes[edge.to], nodes[goalIdx]);
+      open.push({ node: edge.to, dir: nextDir, g: nextG, f: nextG + h, key: nextKey });
+    }
+  }
+  if (!goalKey) {
+    return null;
+  }
+  const routed = [];
+  let cursor = goalKey;
+  while (cursor) {
+    const [nodePart] = cursor.split(":");
+    const node = nodes[Number(nodePart)];
+    routed.push({ x: node.x, y: node.y });
+    cursor = prev.get(cursor);
+  }
+  routed.reverse();
+  const internal = simplifyPath(routed).filter((_, idx, arr) => idx !== 0 && idx !== arr.length - 1);
+  return simplifyPath([from, startExit, ...internal, endEntry, to]);
+}
 class PolylinePathStrategy {
   calculatePath(from, to, fromDir, toDir, _options) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const distance2 = Math.sqrt(dx * dx + dy * dy);
+    const selfLoop = _options?.selfLoop ?? false;
+    const obstacles = _options?.obstacles ?? [];
+    if (!selfLoop && distance2 < OBSTACLE_ROUTING_DISTANCE) {
+      const routed = buildRoutedPolyline(from, to, fromDir, toDir, obstacles);
+      if (routed) {
+        return routed;
+      }
+    }
+    if (selfLoop && distance2 < SELF_LOOP_MIN_DISTANCE$1 && (fromDir || toDir)) {
+      const dir = fromDir ?? toDir;
+      switch (dir) {
+        case "bottom":
+          return [
+            from,
+            { x: from.x - SELF_LOOP_SPREAD$1, y: from.y + SELF_LOOP_OFFSET$1 },
+            { x: from.x + SELF_LOOP_SPREAD$1, y: from.y + SELF_LOOP_OFFSET$1 },
+            to
+          ];
+        case "left":
+          return [
+            from,
+            { x: from.x - SELF_LOOP_OFFSET$1, y: from.y + SELF_LOOP_SPREAD$1 },
+            { x: from.x - SELF_LOOP_OFFSET$1, y: from.y - SELF_LOOP_SPREAD$1 },
+            to
+          ];
+        case "right":
+          return [
+            from,
+            { x: from.x + SELF_LOOP_OFFSET$1, y: from.y - SELF_LOOP_SPREAD$1 },
+            { x: from.x + SELF_LOOP_OFFSET$1, y: from.y + SELF_LOOP_SPREAD$1 },
+            to
+          ];
+        case "top":
+        default:
+          return [
+            from,
+            { x: from.x + SELF_LOOP_SPREAD$1, y: from.y - SELF_LOOP_OFFSET$1 },
+            { x: from.x - SELF_LOOP_SPREAD$1, y: from.y - SELF_LOOP_OFFSET$1 },
+            to
+          ];
+      }
+    }
+    if (selfLoop && distance2 < OPPOSITE_BYPASS_DISTANCE$1 && fromDir && toDir && isOppositeDirections$1(fromDir, toDir)) {
+      if (isHorizontal$1(fromDir) && isHorizontal$1(toDir)) {
+        const fromStepX = fromDir === "left" ? -OPPOSITE_BYPASS_CLEARANCE$1 : OPPOSITE_BYPASS_CLEARANCE$1;
+        const toStepX = toDir === "left" ? -OPPOSITE_BYPASS_CLEARANCE$1 : OPPOSITE_BYPASS_CLEARANCE$1;
+        const sideY = from.x <= to.x ? -1 : 1;
+        const outerY = from.y + sideY * OPPOSITE_BYPASS_ARC$1;
+        return [
+          from,
+          { x: from.x + fromStepX, y: from.y },
+          { x: from.x + fromStepX, y: outerY },
+          { x: to.x + toStepX, y: outerY },
+          { x: to.x + toStepX, y: to.y },
+          to
+        ];
+      }
+      if (isVertical$1(fromDir) && isVertical$1(toDir)) {
+        const fromStepY = fromDir === "top" ? -OPPOSITE_BYPASS_CLEARANCE$1 : OPPOSITE_BYPASS_CLEARANCE$1;
+        const toStepY = toDir === "top" ? -OPPOSITE_BYPASS_CLEARANCE$1 : OPPOSITE_BYPASS_CLEARANCE$1;
+        const sideX = from.y <= to.y ? 1 : -1;
+        const outerX = from.x + sideX * OPPOSITE_BYPASS_ARC$1;
+        return [
+          from,
+          { x: from.x, y: from.y + fromStepY },
+          { x: outerX, y: from.y + fromStepY },
+          { x: outerX, y: to.y + toStepY },
+          { x: to.x, y: to.y + toStepY },
+          to
+        ];
+      }
+    }
+    if (selfLoop && distance2 < CORNER_BYPASS_DISTANCE$1 && fromDir && toDir && (isHorizontal$1(fromDir) && isVertical$1(toDir) || isVertical$1(fromDir) && isHorizontal$1(toDir))) {
+      const fromOuter = {
+        x: from.x + (fromDir === "left" ? -CORNER_BYPASS_CLEARANCE$1 : fromDir === "right" ? CORNER_BYPASS_CLEARANCE$1 : 0),
+        y: from.y + (fromDir === "top" ? -CORNER_BYPASS_CLEARANCE$1 : fromDir === "bottom" ? CORNER_BYPASS_CLEARANCE$1 : 0)
+      };
+      const toOuter = {
+        x: to.x + (toDir === "left" ? -CORNER_BYPASS_CLEARANCE$1 : toDir === "right" ? CORNER_BYPASS_CLEARANCE$1 : 0),
+        y: to.y + (toDir === "top" ? -CORNER_BYPASS_CLEARANCE$1 : toDir === "bottom" ? CORNER_BYPASS_CLEARANCE$1 : 0)
+      };
+      const corner = isHorizontal$1(fromDir) ? { x: fromOuter.x, y: toOuter.y } : { x: toOuter.x, y: fromOuter.y };
+      return [from, fromOuter, corner, toOuter, to];
+    }
     if (fromDir || toDir) {
       return this.calculateDirectedPath(from, to, fromDir, toDir);
     }
@@ -2800,6 +3138,14 @@ class PolylinePathStrategy {
     return false;
   }
 }
+const SELF_LOOP_MIN_DISTANCE = 1;
+const SELF_LOOP_OFFSET = 90;
+const SELF_LOOP_SPREAD = 50;
+const CORNER_BYPASS_DISTANCE = 220;
+const CORNER_BYPASS_CLEARANCE = 80;
+const OPPOSITE_BYPASS_DISTANCE = 280;
+const OPPOSITE_BYPASS_CLEARANCE = 90;
+const OPPOSITE_BYPASS_ARC = 120;
 function getDirectionOffset(dir, distance2) {
   const offset = Math.min(distance2 * 0.5, BEZIER_MAX_OFFSET);
   switch (dir) {
@@ -2815,11 +3161,138 @@ function getDirectionOffset(dir, distance2) {
       return { x: 0, y: 0 };
   }
 }
+function createSelfLoopPath(point, dir) {
+  switch (dir) {
+    case "bottom":
+      return [
+        point,
+        { x: point.x - SELF_LOOP_SPREAD, y: point.y + SELF_LOOP_OFFSET },
+        { x: point.x + SELF_LOOP_SPREAD, y: point.y + SELF_LOOP_OFFSET },
+        point
+      ];
+    case "left":
+      return [
+        point,
+        { x: point.x - SELF_LOOP_OFFSET, y: point.y + SELF_LOOP_SPREAD },
+        { x: point.x - SELF_LOOP_OFFSET, y: point.y - SELF_LOOP_SPREAD },
+        point
+      ];
+    case "right":
+      return [
+        point,
+        { x: point.x + SELF_LOOP_OFFSET, y: point.y - SELF_LOOP_SPREAD },
+        { x: point.x + SELF_LOOP_OFFSET, y: point.y + SELF_LOOP_SPREAD },
+        point
+      ];
+    case "top":
+    default:
+      return [
+        point,
+        { x: point.x + SELF_LOOP_SPREAD, y: point.y - SELF_LOOP_OFFSET },
+        { x: point.x - SELF_LOOP_SPREAD, y: point.y - SELF_LOOP_OFFSET },
+        point
+      ];
+  }
+}
+function isHorizontal(dir) {
+  return dir === "left" || dir === "right";
+}
+function isVertical(dir) {
+  return dir === "top" || dir === "bottom";
+}
+function isOppositeDirections(fromDir, toDir) {
+  return fromDir === "left" && toDir === "right" || fromDir === "right" && toDir === "left" || fromDir === "top" && toDir === "bottom" || fromDir === "bottom" && toDir === "top";
+}
+function dirToVector(dir) {
+  switch (dir) {
+    case "top":
+      return { x: 0, y: -1 };
+    case "bottom":
+      return { x: 0, y: 1 };
+    case "left":
+      return { x: -1, y: 0 };
+    case "right":
+      return { x: 1, y: 0 };
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+function createOppositeBypassPath(from, to, fromDir, toDir) {
+  if (!fromDir || !toDir || !isOppositeDirections(fromDir, toDir)) {
+    return null;
+  }
+  const fromOut = dirToVector(fromDir);
+  const toOut = dirToVector(toDir);
+  if (isHorizontal(fromDir) && isHorizontal(toDir)) {
+    const sideY = from.x <= to.x ? -1 : 1;
+    return [
+      from,
+      {
+        x: from.x + fromOut.x * OPPOSITE_BYPASS_CLEARANCE,
+        y: from.y + sideY * OPPOSITE_BYPASS_ARC
+      },
+      {
+        x: to.x + toOut.x * OPPOSITE_BYPASS_CLEARANCE,
+        y: to.y + sideY * OPPOSITE_BYPASS_ARC
+      },
+      to
+    ];
+  }
+  if (isVertical(fromDir) && isVertical(toDir)) {
+    const sideX = from.y <= to.y ? 1 : -1;
+    return [
+      from,
+      {
+        x: from.x + sideX * OPPOSITE_BYPASS_ARC,
+        y: from.y + fromOut.y * OPPOSITE_BYPASS_CLEARANCE
+      },
+      {
+        x: to.x + sideX * OPPOSITE_BYPASS_ARC,
+        y: to.y + toOut.y * OPPOSITE_BYPASS_CLEARANCE
+      },
+      to
+    ];
+  }
+  return null;
+}
+function createCornerBypassPath(from, to, fromDir, toDir) {
+  if (!fromDir || !toDir) return null;
+  const orthogonal = isHorizontal(fromDir) && isVertical(toDir) || isVertical(fromDir) && isHorizontal(toDir);
+  if (!orthogonal) return null;
+  const fromOut = dirToVector(fromDir);
+  const toOut = dirToVector(toDir);
+  const fromOuter = {
+    x: from.x + fromOut.x * CORNER_BYPASS_CLEARANCE,
+    y: from.y + fromOut.y * CORNER_BYPASS_CLEARANCE
+  };
+  const toOuter = {
+    x: to.x + toOut.x * CORNER_BYPASS_CLEARANCE,
+    y: to.y + toOut.y * CORNER_BYPASS_CLEARANCE
+  };
+  return [from, fromOuter, toOuter, to];
+}
 class BezierPathStrategy {
   calculatePath(from, to, fromDir, toDir, options) {
     const dx = to.x - from.x;
     const dy = to.y - from.y;
     const distance2 = Math.sqrt(dx * dx + dy * dy);
+    const loopDir = fromDir ?? toDir;
+    const selfLoop = options?.selfLoop ?? false;
+    if (selfLoop && distance2 < SELF_LOOP_MIN_DISTANCE && loopDir) {
+      return createSelfLoopPath(from, loopDir);
+    }
+    if (selfLoop && distance2 < OPPOSITE_BYPASS_DISTANCE) {
+      const oppositeBypass = createOppositeBypassPath(from, to, fromDir, toDir);
+      if (oppositeBypass) {
+        return oppositeBypass;
+      }
+    }
+    if (selfLoop && distance2 < CORNER_BYPASS_DISTANCE) {
+      const cornerBypass = createCornerBypassPath(from, to, fromDir, toDir);
+      if (cornerBypass) {
+        return cornerBypass;
+      }
+    }
     const controlPoints = options?.controlPoints;
     if (controlPoints && controlPoints.length > 0) {
       if (controlPoints.length >= 3 && controlPoints.length % 3 === 0) {
@@ -3119,11 +3592,12 @@ class Edge extends Element {
    * @param fromDir Direction at start point (top, right, bottom, left)
    * @param toDir Direction at end point (top, right, bottom, left)
    */
-  updateEndpoints(fromPoint, toPoint, fromDir, toDir) {
+  updateEndpoints(fromPoint, toPoint, fromDir, toDir, options) {
     this._fromPoint = fromPoint;
     this._toPoint = toPoint;
     this._fromDir = fromDir;
     this._toDir = toDir;
+    this._pathOptions = options;
     this.recalculatePath();
   }
   /**
@@ -3136,7 +3610,9 @@ class Edge extends Element {
       this._fromDir,
       this._toDir,
       {
-        controlPoints: this._controlPoints
+        ...this._pathOptions,
+        controlPoints: this._controlPoints,
+        selfLoop: this._from.nodeId === this._to.nodeId
       }
     );
     this.updateBounds();
@@ -3927,7 +4403,8 @@ class InteractionManager {
       return;
     }
     if ("typeName" in hitElement) {
-      this.startInlineLabelEdit("node", hitElement.id, hitElement.label?.text ?? "", hitElement.getLabelPosition());
+      const editText = hitElement.label?.editableText ?? hitElement.label?.text ?? "";
+      this.startInlineLabelEdit("node", hitElement.id, editText, hitElement.getLabelPosition());
       return;
     }
     if ("from" in hitElement && "to" in hitElement) {
@@ -4084,7 +4561,12 @@ class InteractionManager {
           node.label = value;
           return;
         }
-        node.label.text = value;
+        if (node.label.editableText !== void 0) {
+          node.label.editableText = value;
+          node.label.text = value;
+        } else {
+          node.label.text = value;
+        }
       });
       return;
     }
@@ -5332,18 +5814,18 @@ class DiagramRenderer extends EventEmitter {
       }
     }
     this.updateEdgeEndpoints();
-    for (const edge of this._edges.values()) {
-      if (edge.visible) {
-        this.renderElementWithAnimation(ctx, edge, () => edge.render(ctx));
-        edge.clearDirty();
-      }
-    }
     for (const node of this._nodes.values()) {
       if (node.visible) {
         this.renderElementWithAnimation(ctx, node, () => node.render(ctx));
         node.clearDirty();
       }
     }
+    for (const edge of this._edges.values()) {
+      if (edge.visible) {
+        this.renderElementWithAnimation(ctx, edge, () => edge.render(ctx));
+        edge.clearDirty();
+      }
+    }
     for (const edge of this._edges.values()) {
       if (edge.visible) {
         edge.renderHandles(ctx);
@@ -5425,7 +5907,14 @@ class DiagramRenderer extends EventEmitter {
           toDir = anchorId.split(":")[0];
         }
       }
-      edge.updateEndpoints(fromPoint, toPoint, fromDir, toDir);
+      const obstacles = Array.from(this._nodes.values()).map((node) => ({
+        x: node.x - 8,
+        y: node.y - 8,
+        width: node.width + 16,
+        height: node.height + 16,
+        role: node.id === edge.from.nodeId ? "source" : node.id === edge.to.nodeId ? "target" : "other"
+      }));
+      edge.updateEndpoints(fromPoint, toPoint, fromDir, toDir, { obstacles });
     }
   }
   renderScrollbars(ctx) {