@ngroznykh/papirus 0.1.0 → 0.2.0

package/dist/papirus.js

@@ -1968,11 +1968,25 @@ class TextLabel {
     return this._maxWidth;
   }
   set maxWidth(value) {
+    if (this._maxWidth === value) {
+      return;
+    }
     this._maxWidth = value;
     this._lines = [];
     this._measureDirty = true;
     this._onChange?.();
   }
+  /**
+   * Internal max width used for automatic wrapping by container elements.
+   */
+  setAutoMaxWidth(value) {
+    if (this._autoMaxWidth === value) {
+      return;
+    }
+    this._autoMaxWidth = value;
+    this._lines = [];
+    this._measureDirty = true;
+  }
   /**
    * Label padding
    */
@@ -2022,8 +2036,9 @@ class TextLabel {
     }
     this.applyStyle(ctx);
     const lineHeight = (this._style.fontSize ?? 14) * 1.2;
-    if (this._maxWidth !== void 0) {
-      const maxWidth = Math.max(0, this._maxWidth - this._margin * 2);
+    const effectiveMaxWidth = this._maxWidth ?? this._autoMaxWidth;
+    if (effectiveMaxWidth !== void 0) {
+      const maxWidth = Math.max(0, effectiveMaxWidth - this._margin * 2);
       this._lines = this.wrapText(ctx, this._text, Math.max(0, maxWidth - this._padding * 2));
     } else {
       this._lines = this._text.split("\n");
@@ -3508,6 +3523,19 @@ class Edge extends Element {
     }
     return this.getPolylineMidpoint(path);
   }
+  /**
+   * Get world position of label center along path.
+   */
+  getLabelPosition() {
+    if (this._path.length < 2) {
+      return null;
+    }
+    const midpoint = this.getPathMidpoint();
+    return {
+      x: midpoint.x,
+      y: midpoint.y + this._labelOffset
+    };
+  }
   getPolylineMidpoint(path) {
     if (path.length === 0) {
       return { x: 0, y: 0 };
@@ -3578,6 +3606,7 @@ class InteractionManager {
     this.clipboard = null;
     this.pendingPropertyChanges = /* @__PURE__ */ new Map();
     this.propertyChangeDebounceMs = 350;
+    this.activeLabelEditor = null;
     this.renderer = options.renderer;
     this.inputHandler = new InputHandler({
       canvas: this.renderer.getCanvas(),
@@ -3704,6 +3733,7 @@ class InteractionManager {
     }
   }
   destroy() {
+    this.finishInlineLabelEdit(false);
     this.inputHandler.destroy();
     this.overlayCleanup?.();
     this.overlayCleanup = null;
@@ -3724,6 +3754,7 @@ class InteractionManager {
     this.inputHandler.on("mousemove", (event) => this.handleMouseMove(event));
     this.inputHandler.on("mouseup", (event) => this.handleMouseUp(event));
     this.inputHandler.on("click", (event) => this.handleClick(event));
+    this.inputHandler.on("dblclick", (event) => this.handleDoubleClick(event));
     this.inputHandler.on("wheel", (event) => this.handleWheel(event));
     this.inputHandler.on("pan", (event) => this.handlePan(event));
     this.inputHandler.on("pinch", (event) => this.handlePinch(event));
@@ -3861,6 +3892,56 @@ class InteractionManager {
     }
     this.selectionManager.handleClick(event);
   }
+  handleDoubleClick(event) {
+    if (this.dragManager.handledMouseDown || this.resizeManager.handledMouseDown || this.connectionManager.connecting) {
+      return;
+    }
+    const point = { x: event.worldX, y: event.worldY };
+    const edgeByLabel = this.getEdgeLabelAtPoint(point);
+    if (edgeByLabel) {
+      const labelPosition = edgeByLabel.getLabelPosition() ?? point;
+      this.startInlineLabelEdit("edge", edgeByLabel.id, edgeByLabel.label?.text ?? "", labelPosition);
+      return;
+    }
+    const hitElement = this.renderer.getElementAtPoint(point);
+    if (!hitElement) {
+      this.finishInlineLabelEdit(true);
+      return;
+    }
+    if ("typeName" in hitElement) {
+      this.startInlineLabelEdit("node", hitElement.id, hitElement.label?.text ?? "", hitElement.getLabelPosition());
+      return;
+    }
+    if ("from" in hitElement && "to" in hitElement) {
+      const labelPosition = hitElement.getLabelPosition() ?? point;
+      this.startInlineLabelEdit("edge", hitElement.id, hitElement.label?.text ?? "", labelPosition);
+    }
+  }
+  getEdgeLabelAtPoint(point) {
+    const zoom = Math.max(this.renderer.zoom, 1e-4);
+    const maxDistance = 28 / zoom;
+    const maxDistanceSq = maxDistance * maxDistance;
+    let closestEdge = null;
+    let closestDistanceSq = Infinity;
+    for (const edge of this.renderer.edges.values()) {
+      if (!edge.visible || !edge.label) {
+        continue;
+      }
+      const labelPosition = edge.getLabelPosition();
+      if (!labelPosition) {
+        continue;
+      }
+      const dx = point.x - labelPosition.x;
+      const dy = point.y - labelPosition.y;
+      const distanceSq = dx * dx + dy * dy;
+      if (distanceSq > maxDistanceSq || distanceSq >= closestDistanceSq) {
+        continue;
+      }
+      closestDistanceSq = distanceSq;
+      closestEdge = edge;
+    }
+    return closestEdge;
+  }
   handleWheel(event) {
     this.navigationManager.handleWheel(event);
   }
@@ -3899,6 +3980,109 @@ class InteractionManager {
   handleKeyUp(event) {
     this.navigationManager.handleKeyUp(event);
   }
+  startInlineLabelEdit(kind, id, text, worldPosition) {
+    this.finishInlineLabelEdit(true);
+    const screenPoint = this.renderer.worldToScreen(worldPosition.x, worldPosition.y);
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.rows = 1;
+    textarea.spellcheck = false;
+    textarea.setAttribute("aria-label", "Edit label");
+    textarea.style.position = "fixed";
+    textarea.style.left = `${screenPoint.x}px`;
+    textarea.style.top = `${screenPoint.y}px`;
+    textarea.style.transform = "translate(-50%, -50%)";
+    textarea.style.zIndex = "10001";
+    textarea.style.minWidth = "120px";
+    textarea.style.maxWidth = "420px";
+    textarea.style.minHeight = "30px";
+    textarea.style.padding = "6px 8px";
+    textarea.style.border = "1px solid #6366f1";
+    textarea.style.borderRadius = "6px";
+    textarea.style.boxShadow = "0 8px 18px rgba(15, 23, 42, 0.15)";
+    textarea.style.background = "#ffffff";
+    textarea.style.color = "#0f172a";
+    textarea.style.font = "14px sans-serif";
+    textarea.style.lineHeight = "1.4";
+    textarea.style.resize = "none";
+    textarea.style.overflow = "hidden";
+    const resizeTextarea = () => {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.max(30, textarea.scrollHeight)}px`;
+    };
+    resizeTextarea();
+    const commitAndClose = () => this.finishInlineLabelEdit(true);
+    const cancelAndClose = () => this.finishInlineLabelEdit(false);
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelAndClose();
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        commitAndClose();
+      }
+    };
+    const onBlur = () => commitAndClose();
+    const onInput = () => resizeTextarea();
+    textarea.addEventListener("keydown", onKeyDown);
+    textarea.addEventListener("blur", onBlur);
+    textarea.addEventListener("input", onInput);
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    this.activeLabelEditor = {
+      kind,
+      id,
+      textarea,
+      cleanup: () => {
+        textarea.removeEventListener("keydown", onKeyDown);
+        textarea.removeEventListener("blur", onBlur);
+        textarea.removeEventListener("input", onInput);
+        textarea.remove();
+      }
+    };
+  }
+  finishInlineLabelEdit(commit) {
+    if (!this.activeLabelEditor) {
+      return;
+    }
+    const { kind, id, textarea, cleanup } = this.activeLabelEditor;
+    this.activeLabelEditor = null;
+    const nextValue = textarea.value;
+    cleanup();
+    if (!commit) {
+      return;
+    }
+    if (kind === "node") {
+      this.changeNodeProperties(id, (node) => {
+        const value = nextValue.trim();
+        if (value.length === 0) {
+          node.label = void 0;
+          return;
+        }
+        if (!node.label) {
+          node.label = value;
+          return;
+        }
+        node.label.text = value;
+      });
+      return;
+    }
+    this.changeEdgeProperties(id, (edge) => {
+      const value = nextValue.trim();
+      if (value.length === 0) {
+        edge.label = void 0;
+        return;
+      }
+      if (!edge.label) {
+        edge.label = value;
+        return;
+      }
+      edge.label.text = value;
+    });
+  }
   queuePropertyChange(kind, id, before, after) {
     const key = `${kind}:${id}`;
     const existing = this.pendingPropertyChanges.get(key);
@@ -6163,6 +6347,25 @@ class Node extends Element {
     this._label.render(ctx, bounds);
     ctx.globalAlpha = 1;
   }
+  /**
+   * Get world position of label center.
+   */
+  getLabelPosition() {
+    const bounds = this.getBounds();
+    const placement = this._labelPlacement === "auto" ? "center" : this._labelPlacement;
+    switch (placement) {
+      case "top":
+        return { x: bounds.x + bounds.width / 2, y: bounds.y };
+      case "bottom":
+        return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height };
+      case "left":
+        return { x: bounds.x, y: bounds.y + bounds.height / 2 };
+      case "right":
+        return { x: bounds.x + bounds.width, y: bounds.y + bounds.height / 2 };
+      default:
+        return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+    }
+  }
   /**
    * Render icon, label, and ports
    */
@@ -6170,14 +6373,22 @@ class Node extends Element {
     ctx.setLineDash([]);
     ctx.lineDashOffset = 0;
     let bounds = this.getBounds();
-    const labelSize = this._label ? this._label.measure(ctx) : void 0;
-    const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
+    let iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
+    if (this._label) {
+      this._label.setAutoMaxWidth(this.getAutoLabelBounds(bounds, iconBoxSize).width);
+    }
+    let labelSize = this._label ? this._label.measure(ctx) : void 0;
     if (labelSize || iconBoxSize) {
       this.ensureContentsFit(labelSize, iconBoxSize);
       bounds = this.getBounds();
+      iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
+      if (this._label) {
+        this._label.setAutoMaxWidth(this.getAutoLabelBounds(bounds, iconBoxSize).width);
+        labelSize = this._label.measure(ctx);
+      }
     }
     let iconBounds = bounds;
-    let labelBounds = bounds;
+    let labelBounds = this.getLabelContainerBounds(bounds);
     if (this._icon && iconBoxSize) {
       iconBounds = this.getIconBounds(bounds, iconBoxSize, this._icon.placement);
     }
@@ -6186,8 +6397,9 @@ class Node extends Element {
       const placement = this._icon.placement;
       if (isCornerPlacement(placement)) {
         iconBounds = this.getIconBounds(bounds, iconBoxSize, placement);
-        labelBounds = bounds;
+        labelBounds = this.getLabelContainerBounds(bounds);
       } else {
+        const contentBounds = this.getLabelContainerBounds(bounds);
         switch (placement) {
           case "top":
             iconBounds = {
@@ -6197,10 +6409,10 @@ class Node extends Element {
               height: iconBoxSize.height
             };
             labelBounds = {
-              x: bounds.x,
-              y: bounds.y + iconBoxSize.height + gap,
-              width: bounds.width,
-              height: Math.max(0, bounds.height - iconBoxSize.height - gap)
+              x: contentBounds.x,
+              y: contentBounds.y + iconBoxSize.height + gap,
+              width: contentBounds.width,
+              height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
             };
             break;
           case "bottom":
@@ -6211,10 +6423,10 @@ class Node extends Element {
               height: iconBoxSize.height
             };
             labelBounds = {
-              x: bounds.x,
-              y: bounds.y,
-              width: bounds.width,
-              height: Math.max(0, bounds.height - iconBoxSize.height - gap)
+              x: contentBounds.x,
+              y: contentBounds.y,
+              width: contentBounds.width,
+              height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
             };
             break;
           case "left":
@@ -6225,10 +6437,10 @@ class Node extends Element {
               height: bounds.height
             };
             labelBounds = {
-              x: bounds.x + iconBoxSize.width + gap,
-              y: bounds.y,
-              width: Math.max(0, bounds.width - iconBoxSize.width - gap),
-              height: bounds.height
+              x: contentBounds.x + iconBoxSize.width + gap,
+              y: contentBounds.y,
+              width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
+              height: contentBounds.height
             };
             break;
           case "right":
@@ -6239,16 +6451,16 @@ class Node extends Element {
               height: bounds.height
             };
             labelBounds = {
-              x: bounds.x,
-              y: bounds.y,
-              width: Math.max(0, bounds.width - iconBoxSize.width - gap),
-              height: bounds.height
+              x: contentBounds.x,
+              y: contentBounds.y,
+              width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
+              height: contentBounds.height
             };
             break;
         }
       }
     } else if (this._label && labelSize) {
-      labelBounds = this.getLabelBounds(bounds, labelSize, this._labelPlacement);
+      labelBounds = this.getLabelBounds(this.getAutoLabelBounds(bounds, iconBoxSize), labelSize, this._labelPlacement);
     }
     if (this._icon) {
       this._icon.render(ctx, iconBounds);
@@ -6260,9 +6472,10 @@ class Node extends Element {
    * Minimal size required to fit current contents
    */
   getContentMinSize(ctx) {
+    const bounds = this.getBounds();
     const labelSize = this._label ? this._label.measure(ctx) : void 0;
     const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
-    return this.calculateContentMinSize(labelSize, iconBoxSize);
+    return this.calculateContentMinSize(labelSize, iconBoxSize, bounds);
   }
   /**
    * Render resize handles when selected
@@ -6429,7 +6642,7 @@ class Node extends Element {
   }
   ensureContentsFit(labelSize, iconBoxSize) {
     const bounds = this.getBounds();
-    const minSize = this.calculateContentMinSize(labelSize, iconBoxSize);
+    const minSize = this.calculateContentMinSize(labelSize, iconBoxSize, bounds);
     if (minSize.width > bounds.width) {
       this.width = minSize.width;
     }
@@ -6437,12 +6650,15 @@ class Node extends Element {
       this.height = minSize.height;
     }
   }
-  calculateContentMinSize(labelSize, iconBoxSize) {
+  calculateContentMinSize(labelSize, iconBoxSize, bounds) {
     let minWidth = 0;
     let minHeight = 0;
+    const labelContainer = this.getLabelContainerBounds(bounds);
+    const widthFactor = labelContainer.width > 0 ? bounds.width / labelContainer.width : 1;
+    const heightFactor = labelContainer.height > 0 ? bounds.height / labelContainer.height : 1;
     if (labelSize) {
-      minWidth = Math.max(minWidth, labelSize.width);
-      minHeight = Math.max(minHeight, labelSize.height);
+      minWidth = Math.max(minWidth, labelSize.width * widthFactor);
+      minHeight = Math.max(minHeight, labelSize.height * heightFactor);
     }
     if (iconBoxSize) {
       minWidth = Math.max(minWidth, iconBoxSize.width);
@@ -6468,16 +6684,70 @@ class Node extends Element {
         const labelVertical = labelPlacement === "top" || labelPlacement === "bottom";
         const iconHorizontal = iconPlacement === "left" || iconPlacement === "right";
         const iconVertical = iconPlacement === "top" || iconPlacement === "bottom";
+        const labelSharesIconAxis = iconHorizontal && (labelPlacement === "center" || labelPlacement === iconPlacement) || iconVertical && (labelPlacement === "center" || labelPlacement === iconPlacement);
         if (labelHorizontal && iconHorizontal && labelPlacement !== iconPlacement) {
           minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
         }
         if (labelVertical && iconVertical && labelPlacement !== iconPlacement) {
           minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
         }
+        if (labelSharesIconAxis) {
+          if (iconHorizontal) {
+            minWidth = Math.max(minWidth, iconBoxSize.width + gap + labelSize.width);
+          }
+          if (iconVertical) {
+            minHeight = Math.max(minHeight, iconBoxSize.height + gap + labelSize.height);
+          }
+        }
       }
     }
     return { width: minWidth, height: minHeight };
   }
+  getLabelContainerBounds(bounds) {
+    return bounds;
+  }
+  getAutoLabelBounds(bounds, iconBoxSize) {
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    if (!this._icon || !iconBoxSize || this._icon.placement === "center") {
+      return contentBounds;
+    }
+    const gap = this._icon.gap;
+    if (isCornerPlacement(this._icon.placement)) {
+      return contentBounds;
+    }
+    switch (this._icon.placement) {
+      case "left":
+        return {
+          x: contentBounds.x + iconBoxSize.width + gap,
+          y: contentBounds.y,
+          width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
+          height: contentBounds.height
+        };
+      case "right":
+        return {
+          x: contentBounds.x,
+          y: contentBounds.y,
+          width: Math.max(0, contentBounds.width - iconBoxSize.width - gap),
+          height: contentBounds.height
+        };
+      case "top":
+        return {
+          x: contentBounds.x,
+          y: contentBounds.y + iconBoxSize.height + gap,
+          width: contentBounds.width,
+          height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
+        };
+      case "bottom":
+        return {
+          x: contentBounds.x,
+          y: contentBounds.y,
+          width: contentBounds.width,
+          height: Math.max(0, contentBounds.height - iconBoxSize.height - gap)
+        };
+      default:
+        return contentBounds;
+    }
+  }
   getLabelBounds(bounds, labelSize, placement) {
     const normalizedPlacement = placement === "auto" ? "center" : placement;
     const width = Math.min(labelSize.width, bounds.width);
@@ -6901,6 +7171,16 @@ class CircleNode extends Node {
       y: center.y + dy * scale
     };
   }
+  getLabelContainerBounds(bounds) {
+    const width = bounds.width / Math.SQRT2;
+    const height = bounds.height / Math.SQRT2;
+    return {
+      x: bounds.x + (bounds.width - width) / 2,
+      y: bounds.y + (bounds.height - height) / 2,
+      width,
+      height
+    };
+  }
   render(ctx) {
     const center = this.getCenter();
     const rx = this._width / 2;
@@ -6952,6 +7232,16 @@ class DiamondNode extends Node {
       y: center.y + dy * t
     };
   }
+  getLabelContainerBounds(bounds) {
+    const width = bounds.width / 2;
+    const height = bounds.height / 2;
+    return {
+      x: bounds.x + (bounds.width - width) / 2,
+      y: bounds.y + (bounds.height - height) / 2,
+      width,
+      height
+    };
+  }
   render(ctx) {
     const center = this.getCenter();
     const hw = this._width / 2;