@ngroznykh/papirus 0.4.0 → 0.5.1

package/dist/papirus.js

@@ -570,6 +570,14 @@ class SelectionManager extends EventEmitter {
       }
       return;
     }
+    const node = element;
+    if (typeof node.getBadgeAtPoint === "function") {
+      const badge = node.getBadgeAtPoint(point);
+      if (badge !== null) {
+        this.renderer.emit("nodeBadgeClick", element.id, badge.id);
+        return;
+      }
+    }
     if (event.ctrlKey || event.metaKey) {
       this.toggleSelection(element.id);
     } else {
@@ -5002,6 +5010,7 @@ class InteractionManager {
     this.overlayDragSession = null;
     this.handledOverlayMouseDown = false;
     this.renderer = options.renderer;
+    this.navigationOnly = options.navigationOnly ?? false;
     this.inputHandler = new InputHandler({
       canvas: this.renderer.getCanvas(),
       screenToWorld: (x, y) => this.renderer.screenToWorld(x, y)
@@ -5153,13 +5162,15 @@ class InteractionManager {
   setupEvents(options) {
     this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => {
       this.selectionManager.renderSelectionRect(ctx);
-      this.dragManager.renderAlignmentGuides(ctx);
-      this.connectionManager.renderPreview(ctx);
-      this.connectionManager.renderHoverAnchors(ctx);
-      for (const id of this.selectionManager.selectedIds) {
-        const node = this.renderer.getNode(id);
-        if (node) {
-          node.renderResizeHandles(ctx);
+      if (!this.navigationOnly) {
+        this.dragManager.renderAlignmentGuides(ctx);
+        this.connectionManager.renderPreview(ctx);
+        this.connectionManager.renderHoverAnchors(ctx);
+        for (const id of this.selectionManager.selectedIds) {
+          const node = this.renderer.getNode(id);
+          if (node) {
+            node.renderResizeHandles(ctx);
+          }
         }
       }
     });
@@ -5173,68 +5184,70 @@ class InteractionManager {
     this.inputHandler.on("pinch", (event) => this.handlePinch(event));
     this.inputHandler.on("keydown", (event) => this.handleKeyDown(event, options));
     this.inputHandler.on("keyup", (event) => this.handleKeyUp(event));
-    this.dragManager.on("dragstart", (nodeIds) => {
-      this.connectionManager.disableHover();
-      this.dragStartPositions.clear();
-      for (const id of nodeIds) {
-        const node = this.renderer.getNode(id);
-        if (node) {
-          this.dragStartPositions.set(id, { x: node.x, y: node.y });
-        }
-      }
-    });
-    this.dragManager.on("dragend", (nodeIds) => {
-      this.connectionManager.enableHover();
-      const nodePositions = /* @__PURE__ */ new Map();
-      for (const id of nodeIds) {
-        const node = this.renderer.getNode(id);
-        const before = this.dragStartPositions.get(id);
-        if (!node || !before) continue;
-        const after = { x: node.x, y: node.y };
-        if (before.x !== after.x || before.y !== after.y) {
-          nodePositions.set(id, { before, after });
-        }
-      }
-      if (nodePositions.size > 0) {
-        this.historyManager.execute(
-          new MoveNodesCommand((id) => this.renderer.getNode(id), nodePositions)
-        );
-      }
-    });
-    this.connectionManager.on("edgeReconnectStart", (edge, endpoint, original) => {
-      this.reconnectOrigins.set(edge.id, { endpoint, original: { ...original } });
-    });
-    this.connectionManager.on("edgeReconnect", (edge, endpoint) => {
-      const origin = this.reconnectOrigins.get(edge.id);
-      if (!origin || origin.endpoint !== endpoint) {
-        return;
-      }
-      const before = origin.original;
-      const after = endpoint === "start" ? edge.from : edge.to;
-      if (this.endpointsEqual(before, after)) {
-        this.reconnectOrigins.delete(edge.id);
-        return;
-      }
-      this.historyManager.execute({
-        execute: () => {
-          if (endpoint === "start") {
-            edge.from = { ...after };
-          } else {
-            edge.to = { ...after };
+    if (!this.navigationOnly) {
+      this.dragManager.on("dragstart", (nodeIds) => {
+        this.connectionManager.disableHover();
+        this.dragStartPositions.clear();
+        for (const id of nodeIds) {
+          const node = this.renderer.getNode(id);
+          if (node) {
+            this.dragStartPositions.set(id, { x: node.x, y: node.y });
           }
-          this.renderer.markDirty();
-        },
-        undo: () => {
-          if (endpoint === "start") {
-            edge.from = { ...before };
-          } else {
-            edge.to = { ...before };
+        }
+      });
+      this.dragManager.on("dragend", (nodeIds) => {
+        this.connectionManager.enableHover();
+        const nodePositions = /* @__PURE__ */ new Map();
+        for (const id of nodeIds) {
+          const node = this.renderer.getNode(id);
+          const before = this.dragStartPositions.get(id);
+          if (!node || !before) continue;
+          const after = { x: node.x, y: node.y };
+          if (before.x !== after.x || before.y !== after.y) {
+            nodePositions.set(id, { before, after });
           }
-          this.renderer.markDirty();
+        }
+        if (nodePositions.size > 0) {
+          this.historyManager.execute(
+            new MoveNodesCommand((id) => this.renderer.getNode(id), nodePositions)
+          );
         }
       });
-      this.reconnectOrigins.delete(edge.id);
-    });
+      this.connectionManager.on("edgeReconnectStart", (edge, endpoint, original) => {
+        this.reconnectOrigins.set(edge.id, { endpoint, original: { ...original } });
+      });
+      this.connectionManager.on("edgeReconnect", (edge, endpoint) => {
+        const origin = this.reconnectOrigins.get(edge.id);
+        if (!origin || origin.endpoint !== endpoint) {
+          return;
+        }
+        const before = origin.original;
+        const after = endpoint === "start" ? edge.from : edge.to;
+        if (this.endpointsEqual(before, after)) {
+          this.reconnectOrigins.delete(edge.id);
+          return;
+        }
+        this.historyManager.execute({
+          execute: () => {
+            if (endpoint === "start") {
+              edge.from = { ...after };
+            } else {
+              edge.to = { ...after };
+            }
+            this.renderer.markDirty();
+          },
+          undo: () => {
+            if (endpoint === "start") {
+              edge.from = { ...before };
+            } else {
+              edge.to = { ...before };
+            }
+            this.renderer.markDirty();
+          }
+        });
+        this.reconnectOrigins.delete(edge.id);
+      });
+    }
     this.historyManager.on("change", () => {
       this.renderer.markDirty();
     });
@@ -5242,14 +5255,16 @@ class InteractionManager {
   handleMouseDown(event) {
     this.handledScrollbarMouseDown = false;
     this.handledOverlayMouseDown = false;
-    if (this.resizeManager.handleMouseDown(event)) {
-      return;
-    }
-    if (this.connectionManager.tryStartReconnection(event)) {
-      return;
-    }
-    if (this.connectionManager.tryStartConnectionAtPoint(event)) {
-      return;
+    if (!this.navigationOnly) {
+      if (this.resizeManager.handleMouseDown(event)) {
+        return;
+      }
+      if (this.connectionManager.tryStartReconnection(event)) {
+        return;
+      }
+      if (this.connectionManager.tryStartConnectionAtPoint(event)) {
+        return;
+      }
     }
     const overlayDrag = this.renderer.beginOverlayDrag(event.screenX, event.screenY);
     if (overlayDrag) {
@@ -5283,6 +5298,9 @@ class InteractionManager {
     if (this.navigationManager.handleMouseDown(event)) {
       return;
     }
+    if (this.navigationOnly) {
+      return;
+    }
     if (this.dragManager.handleMouseDown(event)) {
       return;
     }
@@ -5302,6 +5320,9 @@ class InteractionManager {
       }
     }
     const overScrollbar = this.renderer.updateScrollbarHover(event.screenX, event.screenY);
+    this.renderer.updateBadgeHover(
+      overScrollbar ? { x: -1e9, y: -1e9 } : { x: event.worldX, y: event.worldY }
+    );
     if (this.overlayDragSession) {
       const moved = this.renderer.updateOverlayDrag(
         this.overlayDragSession,
@@ -5330,14 +5351,16 @@ class InteractionManager {
     if (overScrollbar) {
       return;
     }
-    if (this.resizeManager.handleMouseMove(event)) {
-      return;
-    }
-    if (this.connectionManager.handleMouseMove(event)) {
-      return;
-    }
-    if (this.dragManager.handleMouseMove(event)) {
-      return;
+    if (!this.navigationOnly) {
+      if (this.resizeManager.handleMouseMove(event)) {
+        return;
+      }
+      if (this.connectionManager.handleMouseMove(event)) {
+        return;
+      }
+      if (this.dragManager.handleMouseMove(event)) {
+        return;
+      }
     }
     if (this.selectionManager.selectionRectangle !== null) {
       this.selectionManager.updateSelectionRect({ x: event.worldX, y: event.worldY });
@@ -5356,14 +5379,16 @@ class InteractionManager {
       this.renderer.setScrollbarActiveAxis(null);
       return;
     }
-    if (this.resizeManager.handleMouseUp()) {
-      return;
-    }
-    if (this.connectionManager.handleMouseUp(event)) {
-      return;
-    }
-    if (this.dragManager.handleMouseUp(event)) {
-      return;
+    if (!this.navigationOnly) {
+      if (this.resizeManager.handleMouseUp()) {
+        return;
+      }
+      if (this.connectionManager.handleMouseUp(event)) {
+        return;
+      }
+      if (this.dragManager.handleMouseUp(event)) {
+        return;
+      }
     }
     if (this.selectionManager.selectionRectangle !== null) {
       this.selectionManager.endSelectionRect();
@@ -5389,6 +5414,9 @@ class InteractionManager {
     if (this.dragManager.handledMouseDown || this.resizeManager.handledMouseDown || this.connectionManager.connecting) {
       return;
     }
+    if (this.navigationOnly) {
+      return;
+    }
     if (this.connectionManager.handleDoubleClick(event)) {
       return;
     }
@@ -5451,16 +5479,19 @@ class InteractionManager {
   handleKeyDown(event, options) {
     const isCtrlOrMeta = event.ctrlKey || event.metaKey;
     const key = event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : event.key.toLowerCase();
+    this.navigationManager.handleKeyDown(event);
+    if (this.handleViewportNavigationKey(event)) {
+      return;
+    }
+    if (this.navigationOnly) {
+      return;
+    }
     if (isCtrlOrMeta && (key === "z" || key === "y")) {
       this.flushPendingPropertyChanges();
     }
     if (this.historyManager.handleKeyDown(event)) {
       return;
     }
-    this.navigationManager.handleKeyDown(event);
-    if (this.handleViewportNavigationKey(event)) {
-      return;
-    }
     if (this.keymap.deleteKeys.includes(event.key)) {
       event.preventDefault();
       this.deleteSelection();
@@ -6164,6 +6195,7 @@ class ContextMenuManager extends EventEmitter {
     iconEl.style.alignItems = "center";
     iconEl.style.justifyContent = "center";
     iconEl.style.textAlign = "center";
+    iconEl.style.flexShrink = "0";
     if (!icon) {
       iconEl.textContent = "";
       return iconEl;
@@ -6171,6 +6203,14 @@ class ContextMenuManager extends EventEmitter {
     if (typeof icon === "string") {
       if (this.isSvgString(icon)) {
         iconEl.innerHTML = icon;
+      } else if (this.options.iconToUrl) {
+        const img = document.createElement("img");
+        img.src = this.options.iconToUrl(icon);
+        img.alt = "";
+        img.style.width = "16px";
+        img.style.height = "16px";
+        img.style.objectFit = "contain";
+        iconEl.appendChild(img);
       } else {
         iconEl.classList.add("material-symbols-outlined");
         iconEl.style.fontSize = "16px";
@@ -6180,6 +6220,14 @@ class ContextMenuManager extends EventEmitter {
     }
     if (icon.type === "svg" || icon.type === "html") {
       iconEl.innerHTML = icon.value;
+    } else if (this.options.iconToUrl) {
+      const img = document.createElement("img");
+      img.src = this.options.iconToUrl(icon.value);
+      img.alt = "";
+      img.style.width = "16px";
+      img.style.height = "16px";
+      img.style.objectFit = "contain";
+      iconEl.appendChild(img);
     } else {
       iconEl.classList.add("material-symbols-outlined");
       iconEl.style.fontSize = "16px";
@@ -6713,6 +6761,30 @@ class DiagramRenderer extends EventEmitter {
     }
     return void 0;
   }
+  /**
+   * Update badge hover state and canvas cursor based on pointer position.
+   * Call from mousemove to show hover highlight and pointer cursor over badges.
+   */
+  updateBadgeHover(worldPoint) {
+    const element = this.getElementAtPoint(worldPoint);
+    let hoveredNodeId = null;
+    let hoveredIndex = -1;
+    const node = element;
+    if (element && typeof node.getBadgeAtPoint === "function") {
+      const badge = node.getBadgeAtPoint(worldPoint);
+      if (badge !== null) {
+        hoveredNodeId = node.id;
+        hoveredIndex = badge.index;
+      }
+    }
+    const cursor = hoveredNodeId !== null ? "pointer" : "";
+    if (this.canvas.style.cursor !== cursor) {
+      this.canvas.style.cursor = cursor;
+    }
+    for (const n of this._nodes.values()) {
+      n.setBadgeHover(n.id === hoveredNodeId ? hoveredIndex : -1);
+    }
+  }
   /**
    * Mark the diagram as needing re-render
    */
@@ -8025,11 +8097,11 @@ function tintSvg(svgText, strokeColor, fillColor) {
   const all = [root, ...Array.from(root.querySelectorAll("*"))];
   for (const el of all) {
     const stroke = el.getAttribute("stroke");
-    if (strokeColor && stroke !== null && stroke.toLowerCase() !== "none") {
+    const fill = el.getAttribute("fill");
+    if (strokeColor && (stroke === null || stroke.toLowerCase() !== "none")) {
       el.setAttribute("stroke", strokeColor);
     }
-    const fill = el.getAttribute("fill");
-    if (fillColor && fill !== null && fill.toLowerCase() !== "none") {
+    if (fillColor && (fill === null || fill.toLowerCase() !== "none")) {
       el.setAttribute("fill", fillColor);
     }
     const style = el.getAttribute("style");
@@ -8196,6 +8268,9 @@ class NodeImage {
     };
   }
 }
+const BADGE_SIZE = 15;
+const BADGE_OFFSET = 4;
+const BADGE_GAP = 4;
 function isValidAnchorId(id) {
   return /^(top|right|bottom|left):\d+$/.test(id);
 }
@@ -8217,7 +8292,10 @@ class Node extends Element {
       styleClass: options.styleClass
     });
     this._ports = [];
+    this._badges = [];
     this._anchorCache = null;
+    this._badgeImageCache = /* @__PURE__ */ new Map();
+    this._hoveredBadgeIndex = -1;
     this._defaultSize = { width: options.width, height: options.height };
     this._nodeStyle = { ...DEFAULT_NODE_STYLE, ...options.style };
     this._showPortsAlways = options.showPortsAlways ?? false;
@@ -8242,6 +8320,10 @@ class Node extends Element {
         this.addPort(portOptions);
       }
     }
+    if (options.badges !== void 0 && options.badges.length > 0) {
+      this._badges = options.badges.map((b) => ({ id: b.id, iconUrl: b.iconUrl }));
+      this.ensureBadgeImagesLoaded();
+    }
   }
   /**
    * Node style
@@ -8307,6 +8389,46 @@ class Node extends Element {
     }
     this.markDirty();
   }
+  /**
+   * Badges shown in top-left corner of node (e.g. interactive property icons)
+   */
+  get badges() {
+    return this._badges;
+  }
+  set badges(value) {
+    this._badges = Array.isArray(value) ? value.map((b) => ({ id: b.id, iconUrl: b.iconUrl })) : [];
+    this.ensureBadgeImagesLoaded();
+    this.markDirty();
+  }
+  /**
+   * Set which badge index is under the pointer (-1 for none). Used for hover highlight and cursor.
+   */
+  setBadgeHover(index) {
+    if (this._hoveredBadgeIndex === index) return;
+    this._hoveredBadgeIndex = index;
+    this.markDirty();
+  }
+  /**
+   * Return badge at world point, or null if point is not over a badge.
+   */
+  getBadgeAtPoint(worldPoint) {
+    if (this._badges.length === 0) {
+      return null;
+    }
+    const bounds = this.getBounds();
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    const localX = worldPoint.x - (contentBounds.x + BADGE_OFFSET);
+    const localY = worldPoint.y - (contentBounds.y + BADGE_OFFSET);
+    for (let i = 0; i < this._badges.length; i++) {
+      const badge = this._badges[i];
+      if (badge === void 0) continue;
+      const x = i * (BADGE_SIZE + BADGE_GAP);
+      if (localX >= x && localX <= x + BADGE_SIZE && localY >= 0 && localY <= BADGE_SIZE) {
+        return { id: badge.id, index: i };
+      }
+    }
+    return null;
+  }
   /**
    * Add a port to this node
    */
@@ -8526,6 +8648,7 @@ class Node extends Element {
     ctx.setLineDash([]);
     ctx.lineDashOffset = 0;
     let bounds = this.getBounds();
+    this.renderBadges(ctx, bounds);
     const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
     if (this._label) {
       this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
@@ -8549,6 +8672,67 @@ class Node extends Element {
     this.renderLabel(ctx, labelBounds);
     this.renderPorts(ctx);
   }
+  ensureBadgeImagesLoaded() {
+    for (const badge of this._badges) {
+      const url = badge.iconUrl;
+      if (!url || this._badgeImageCache.has(url)) {
+        continue;
+      }
+      const img = new Image();
+      img.decoding = "async";
+      this._badgeImageCache.set(url, { img, loaded: false });
+      img.onload = () => {
+        const entry = this._badgeImageCache.get(url);
+        if (entry) {
+          entry.loaded = true;
+          this.markDirty();
+        }
+      };
+      img.onerror = () => {
+        this.markDirty();
+      };
+      img.src = url;
+    }
+  }
+  renderBadges(ctx, bounds) {
+    if (this._badges.length === 0) {
+      return;
+    }
+    const contentBounds = this.getLabelContainerBounds(bounds);
+    const x0 = contentBounds.x + BADGE_OFFSET;
+    const y0 = contentBounds.y + BADGE_OFFSET;
+    const radius = 2;
+    for (let i = 0; i < this._badges.length; i++) {
+      const badge = this._badges[i];
+      if (badge === void 0) continue;
+      const x = x0 + i * (BADGE_SIZE + BADGE_GAP);
+      const isHovered = this._hoveredBadgeIndex === i;
+      if (isHovered) {
+        ctx.save();
+        ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
+        ctx.beginPath();
+        ctx.roundRect(x, y0, BADGE_SIZE, BADGE_SIZE, radius);
+        ctx.fill();
+        ctx.restore();
+      }
+      const entry = this._badgeImageCache.get(badge.iconUrl);
+      if (entry?.loaded && entry.img.naturalWidth > 0) {
+        ctx.save();
+        const img = entry.img;
+        const sw = img.naturalWidth;
+        const sh = img.naturalHeight;
+        const scale = Math.min(BADGE_SIZE / sw, BADGE_SIZE / sh, 1);
+        const dw = sw * scale;
+        const dh = sh * scale;
+        const dx = x + (BADGE_SIZE - dw) / 2;
+        const dy = y0 + (BADGE_SIZE - dh) / 2;
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
+        ctx.drawImage(img, 0, 0, sw, sh, dx, dy, dw, dh);
+        ctx.restore();
+      }
+    }
+  }
   /**
    * Minimal size required to fit current contents
    */