@stocksharp/diagram 1.2.1 → 1.2.2

package/dist/ssdiagram.js

@@ -1104,6 +1104,9 @@ var SSDiagram = (() => {
     const normalized = normalizePortType(type);
     return normalized === "" || normalized === "*" || normalized === "any" || normalized === "anydata" || normalized === "any data" || normalized === "object" || normalized === "system.object" || normalized.startsWith("system.object,");
   }
+  function isGrowAnchor(port) {
+    return port.isDynamic && !port.isSibling;
+  }
   function arePortTypesCompatible(fromType, toType, availableTypes) {
     if (isWildcardPortType(fromType) || isWildcardPortType(toType)) return true;
     const normalizedFrom = normalizePortType(fromType);
@@ -1311,6 +1314,8 @@ var SSDiagram = (() => {
       this.hoverPort = null;
       this.hoverNode = null;
       this.hoveredLink = null;
+      // Type feeding each wired input, keyed by node and port, rebuilt for every frame.
+      this.portFeed = /* @__PURE__ */ new Map();
       this.tipTimer = null;
       this.tipShow = false;
       this.tipTarget = null;
@@ -1353,8 +1358,20 @@ var SSDiagram = (() => {
       if (ctx === null) throw new Error("ssdiagram: 2d context unavailable");
       this.ctx = ctx;
       this.resize(this.host.clientWidth || 800, this.host.clientHeight || 480);
+      this.observeHostSize();
       this.bind();
     }
+    /// The control creates the canvas, so it keeps it the size of the element it was mounted in.
+    /// A host that lays its panels out after construction - a docking shell, a tab that opens
+    /// hidden - measures nothing at that point, and the fallback size above would then outlive
+    /// the layout: a strip of the panel that draws nothing and answers no clicks. resize()
+    /// ignores anything smaller than two pixels, so a panel switched away from keeps its view.
+    observeHostSize() {
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => this.resize(this.host.clientWidth, this.host.clientHeight));
+      observer.observe(this.host);
+      this.domDisposables.push(() => observer.disconnect());
+    }
     // ---- events -----------------------------------------------------
     on(ev, h) {
       let set = this.handlers.get(ev);
@@ -2521,8 +2538,9 @@ var SSDiagram = (() => {
       n2.h = Math.max(48, rows * PORT_ROW_H + 16);
       const off = PORT_SQ / 2;
       const place = (ports, x) => {
-        const startY = n2.y + (n2.h - ports.length * PORT_ROW_H) / 2 + PORT_ROW_H / 2;
-        ports.forEach((p, i) => {
+        const stack = ports.some(isGrowAnchor) ? [...ports.filter((p) => !isGrowAnchor(p)), ...ports.filter(isGrowAnchor)] : ports;
+        const startY = n2.y + (n2.h - stack.length * PORT_ROW_H) / 2 + PORT_ROW_H / 2;
+        stack.forEach((p, i) => {
           p.cx = x;
           p.cy = startY + i * PORT_ROW_H;
         });
@@ -2539,6 +2557,26 @@ var SSDiagram = (() => {
     toWorld(sx, sy) {
       return [(sx - this.offX) / this.scale, (sy - this.offY) / this.scale];
     }
+    /// Type of the output wired into each connected input. First link wins, which is the one
+    /// drawn first, so a socket accepting several links agrees with the wire on top.
+    feedTypes() {
+      const feed = /* @__PURE__ */ new Map();
+      for (const l of this.links) {
+        const from = this.findNode(l.from)?.outPorts.find((p) => p.id === l.fromPort);
+        if (from === void 0 || isWildcardPortType(from.type)) continue;
+        const to = this.findNode(l.to)?.inPorts.find((p) => p.id === l.toPort);
+        if (to === void 0 || feed.has(to)) continue;
+        feed.set(to, from.type);
+      }
+      return feed;
+    }
+    /// Colour type of a socket: its own, unless it is a wildcard input with something wired in.
+    /// A wildcard promises to take whatever arrives, so once something has arrived the socket
+    /// shows what that is. An untyped socket ('') promises nothing and keeps its neutral fill.
+    portFillType(p) {
+      if (p.direction !== "in" || p.type === "" || !isWildcardPortType(p.type)) return p.type;
+      return this.portFeed.get(p) ?? p.type;
+    }
     portColor(type) {
       const maxL = this.opts.linkMaxLightness;
       const light = maxL !== void 0 && maxL < 0.5;
@@ -2879,10 +2917,36 @@ var SSDiagram = (() => {
       }
       this.lpStart = null;
     }
-    // Hit-test at screen coords and emit a contextMenu event. Cancels
-    // any partial drag/rubber/link gesture that may have started — once
-    // the menu opens we don't want a half-drag racing it.
+    /// Ends a node drag the way releasing the pointer does: the whole multi-node move becomes
+    /// one undo step, and every node that actually moved is announced. Nodes are moved in place
+    /// as the pointer travels, so a caller that clears the drag without coming through here
+    /// leaves them where the drag put them with nothing in the history and the host unaware.
+    commitNodeDrag() {
+      if (this.dragNode === null) return;
+      const moves = this.dragStart.map((it) => ({ id: it.n.id, fromX: it.x, fromY: it.y, toX: it.n.x, toY: it.n.y })).filter((m) => m.fromX !== m.toX || m.fromY !== m.toY);
+      const moved = new Set(moves.map((m) => m.id));
+      for (const it of this.dragStart) {
+        if (moved.has(it.n.id)) this.emit("nodeMoved", { node: it.n });
+      }
+      this.dragNode = null;
+      this.dragStart = [];
+      if (moves.length > 0) {
+        this.record({
+          do: () => {
+            for (const m of moves) this.doMoveNode(m.id, m.toX, m.toY);
+          },
+          undo: () => {
+            for (const m of moves) this.doMoveNode(m.id, m.fromX, m.fromY);
+          },
+          label: "drag"
+        });
+      }
+    }
+    // Hit-test at screen coords and emit a contextMenu event. Ends whatever gesture was in
+    // flight — once the menu opens we don't want a half-drag racing it — and a node drag ends
+    // properly rather than being dropped, because its nodes have already moved.
     fireContextMenu(sx, sy, pageX, pageY) {
+      this.commitNodeDrag();
       const [wx, wy] = this.toWorld(sx, sy);
       const port = this.portAt(wx, wy);
       const node = port?.node ?? this.nodeAt(wx, wy);
@@ -2899,11 +2963,14 @@ var SSDiagram = (() => {
       this.dragNode = null;
       this.dragStart = [];
       this.rubber = null;
-      this.panning = false;
       this.linking = null;
       this.relinking = null;
       this.relinkCandidate = null;
       this.linkSnap = null;
+      const viewportMoved = this.panning || this.ovDragging;
+      this.panning = false;
+      this.ovDragging = false;
+      if (viewportMoved) this.emitViewChanged(false);
       this.clearHover();
       this.emit("contextMenu", { x: pageX, y: pageY, link, node, port });
     }
@@ -3145,26 +3212,7 @@ var SSDiagram = (() => {
       const finish = (e) => {
         this.cancelLongPress();
         this.relinkCandidate = null;
-        if (this.dragNode !== null) {
-          const moves = this.dragStart.map((it) => ({ id: it.n.id, fromX: it.x, fromY: it.y, toX: it.n.x, toY: it.n.y })).filter((m) => m.fromX !== m.toX || m.fromY !== m.toY);
-          const moved = new Set(moves.map((m) => m.id));
-          for (const it of this.dragStart) {
-            if (moved.has(it.n.id)) this.emit("nodeMoved", { node: it.n });
-          }
-          this.dragNode = null;
-          this.dragStart = [];
-          if (moves.length > 0) {
-            this.record({
-              do: () => {
-                for (const m of moves) this.doMoveNode(m.id, m.toX, m.toY);
-              },
-              undo: () => {
-                for (const m of moves) this.doMoveNode(m.id, m.fromX, m.fromY);
-              },
-              label: "drag"
-            });
-          }
-        }
+        this.commitNodeDrag();
         if (this.rubber !== null) {
           const rx0 = Math.min(this.rubber.x0, this.rubber.x);
           const ry0 = Math.min(this.rubber.y0, this.rubber.y);
@@ -3248,12 +3296,16 @@ var SSDiagram = (() => {
         }
         this.zoomToFit();
       });
-      this.listen(this.canvas, "contextmenu", (e) => {
+      const openContextMenu = (e) => {
         e.preventDefault();
         if (!this.permissions.inspect) return;
         const [sx, sy] = localXY(e);
         this.cancelLongPress();
         this.fireContextMenu(sx, sy, e.clientX, e.clientY);
+      };
+      this.listen(this.canvas, "contextmenu", openContextMenu);
+      this.listen(this.host, "contextmenu", (e) => {
+        if (e.target !== this.canvas) openContextMenu(e);
       });
       let pinchDist = 0;
       let pinchScale = 1;
@@ -3409,6 +3461,7 @@ var SSDiagram = (() => {
         }
       }
       if (options.transient && (this.linking !== null || this.relinking !== null)) this.drawPendingLink();
+      this.portFeed = this.feedTypes();
       for (const n2 of this.nodes) this.drawNode(n2, options.selection && this.selectedNodes.has(n2), options);
       if (options.selection && this.permissions.createLinks && this.relinking === null)
         this.drawSelectedLinkEndpoints();
@@ -3686,7 +3739,7 @@ ${runtime.error}`;
         ctx.fill();
       }
       roundRect(ctx, x, y, s, s, r);
-      ctx.fillStyle = this.portColor(p.type);
+      ctx.fillStyle = this.portColor(this.portFillType(p));
       ctx.fill();
       ctx.lineWidth = magnet ? 1.5 : 1;
       ctx.strokeStyle = magnet ? "#ffffff" : "rgba(12,12,16,0.55)";
@@ -4528,6 +4581,7 @@ ${runtime.error}`;
       });
       this.on(root, "contextmenu", (event) => {
         event.preventDefault();
+        event.stopPropagation();
       });
       this.container.appendChild(root);
       this.root = root;
@@ -5359,6 +5413,16 @@ ${runtime.error}`;
     isContextMenuEnabled() {
       return this.contextMenu !== null;
     }
+    /**
+     * Whether the built-in menu is on screen right now.
+     *
+     * The menu closes itself on Escape. A host that binds the same key - to leave a fullscreen
+     * layout, to close its own dialog - needs to know the key was already spoken for, or one
+     * press does both.
+     */
+    isContextMenuOpen() {
+      return this.contextMenu?.isOpen ?? false;
+    }
     getContextCommands() {
       const context = this.contextActionContext();
       const state = (command) => {