@stocksharp/diagram 1.2.0 → 1.2.2

package/dist/ssdiagram-headless.js

@@ -348,6 +348,69 @@ var SSDiagramHeadless = (() => {
     }
   };
 
+  // src/color.ts
+  var CSS_COLOR_KEYWORDS = {
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    transparent: [255, 255, 255]
+  };
+  function parseRgb(color) {
+    const value = color.trim().toLowerCase();
+    if (value === "")
+      return null;
+    const keyword = CSS_COLOR_KEYWORDS[value];
+    if (keyword !== void 0)
+      return [...keyword];
+    const long = value.match(/^#?([0-9a-f]{6})$/);
+    if (long !== null) {
+      const n2 = parseInt(long[1], 16);
+      return [n2 >> 16 & 255, n2 >> 8 & 255, n2 & 255];
+    }
+    const short = value.match(/^#?([0-9a-f]{3})([0-9a-f])?$/);
+    if (short !== null) {
+      const [r, g, b] = [...short[1]].map((digit) => parseInt(digit + digit, 16));
+      return [r, g, b];
+    }
+    const long8 = value.match(/^#?([0-9a-f]{6})[0-9a-f]{2}$/);
+    if (long8 !== null) {
+      const n2 = parseInt(long8[1], 16);
+      return [n2 >> 16 & 255, n2 >> 8 & 255, n2 & 255];
+    }
+    const rgb = value.match(/^rgba?\(([^)]+)\)$/);
+    if (rgb !== null) {
+      const parts = rgb[1].split(/[\s,/]+/).filter((part) => part !== "");
+      if (parts.length >= 3) {
+        const [r, g, b] = parts.slice(0, 3).map((part) => part.endsWith("%") ? parseFloat(part) / 100 * 255 : parseFloat(part));
+        if ([r, g, b].every((channel) => Number.isFinite(channel)))
+          return [r, g, b];
+      }
+    }
+    return null;
+  }
+  var DARK_TEXT = "#1b1b1b";
+  var LIGHT_TEXT = "#f5f5f5";
+  function toLinear(channel) {
+    const v = channel / 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  }
+  function relativeLuminance(color) {
+    const rgb = parseRgb(color);
+    if (rgb === null)
+      return -1;
+    const [r, g, b] = rgb;
+    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  }
+  function contrast(a, b) {
+    const [lighter, darker] = a > b ? [a, b] : [b, a];
+    return (lighter + 0.05) / (darker + 0.05);
+  }
+  function readableTextOn(fill) {
+    const background = relativeLuminance(fill);
+    if (background < 0)
+      return DARK_TEXT;
+    return contrast(background, relativeLuminance(LIGHT_TEXT)) > contrast(background, relativeLuminance(DARK_TEXT)) ? LIGHT_TEXT : DARK_TEXT;
+  }
+
   // src/core/json.ts
   function setJsonKey(target, key, value) {
     if (key === "__proto__") {
@@ -980,6 +1043,9 @@ var SSDiagramHeadless = (() => {
     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);
@@ -1187,6 +1253,8 @@ var SSDiagramHeadless = (() => {
       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;
@@ -1229,8 +1297,20 @@ var SSDiagramHeadless = (() => {
       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);
@@ -2397,8 +2477,9 @@ var SSDiagramHeadless = (() => {
       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;
         });
@@ -2415,6 +2496,26 @@ var SSDiagramHeadless = (() => {
     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;
@@ -2755,10 +2856,36 @@ var SSDiagramHeadless = (() => {
       }
       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);
@@ -2775,11 +2902,14 @@ var SSDiagramHeadless = (() => {
       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 });
     }
@@ -3021,26 +3151,7 @@ var SSDiagramHeadless = (() => {
       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);
@@ -3124,12 +3235,16 @@ var SSDiagramHeadless = (() => {
         }
         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;
@@ -3285,6 +3400,7 @@ var SSDiagramHeadless = (() => {
         }
       }
       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();
@@ -3539,7 +3655,7 @@ ${runtime.error}`;
         }
       }
       const titleShift = n2.icon ? iconW + 4 : 0;
-      ctx.fillStyle = hasLoadError ? "#ffffff" : "#1b1b1b";
+      ctx.fillStyle = hasLoadError ? "#ffffff" : readableTextOn(active ? "#ffd1dc" : n2.color);
       ctx.font = "600 12px Segoe UI, Tahoma, sans-serif";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
@@ -3562,7 +3678,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)";