@elicdavis/node-flow 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -735,7 +735,7 @@ var ContextMenu = class _ContextMenu {
 // src/input.ts
 var LONG_PRESS_MS = 500;
 var LONG_PRESS_SLOP = 12;
-var PINCH_SENSITIVITY = 50;
+var WHEEL_ZOOM_PER_PIXEL = 5e-4;
 var SUPPRESS_MOUSE_MS = 600;
 var MouseObserver = class {
   #clicked;
@@ -833,13 +833,12 @@ var MouseObserver = class {
     } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
       dy *= this.#ele.clientHeight;
     }
-    const amount = -dy / 100;
-    if (amount === 0) {
+    if (dy === 0) {
       return;
     }
     const anchor = this.#mousePos(event);
     this.#moveCallback(anchor);
-    this.#zoomCallback(amount, anchor);
+    this.#zoomCallback(Math.exp(-dy * WHEEL_ZOOM_PER_PIXEL), anchor);
   }
   #move(event) {
     if (this.#fromTouch()) {
@@ -915,7 +914,7 @@ var MouseObserver = class {
       const anchor = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
       if (this.#pinchDist > 0) {
         this.#moveCallback(anchor);
-        this.#zoomCallback((dist - this.#pinchDist) / PINCH_SENSITIVITY, anchor);
+        this.#zoomCallback(dist / this.#pinchDist, anchor);
       }
       this.#pinchDist = dist;
       return;
@@ -1765,9 +1764,13 @@ var Port = class {
     }
   }
   /**
-   * A port asked to hide still shows while anything is connected to it.
+   * A port asked to hide still shows while anything is connected to it,
+   * and while its node is showing its hidden ports.
    */
   hidden() {
+    return this.tucked() && !(this.#node?.hiddenPortsShown() ?? false);
+  }
+  tucked() {
     return this.#hidden && this.#connections.length === 0;
   }
   addConnectionRemovedListener(callback) {
@@ -1869,6 +1872,281 @@ var Port = class {
   }
 };
 
+// src/styles/cursor.ts
+var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
+  CursorStyle2["Default"] = "default";
+  CursorStyle2["Pointer"] = "pointer";
+  CursorStyle2["Grab"] = "grab";
+  CursorStyle2["Grabbing"] = "grabbing";
+  CursorStyle2["Wait"] = "wait";
+  CursorStyle2["Help"] = "help";
+  CursorStyle2["Crosshair"] = "crosshair";
+  CursorStyle2["Cell"] = "cell";
+  CursorStyle2["Text"] = "text";
+  CursorStyle2["Move"] = "move";
+  CursorStyle2["NotAllowed"] = "not-allowed";
+  CursorStyle2["ZoomIn"] = "zoom-in";
+  CursorStyle2["ZoomOut"] = "zoom-out";
+  CursorStyle2["None"] = "none";
+  CursorStyle2["ContextMenu"] = "context-menu";
+  CursorStyle2["EWResize"] = "ew-resize";
+  return CursorStyle2;
+})(CursorStyle || {});
+
+// src/widgets/inplace.ts
+var open = /* @__PURE__ */ new Set();
+function placeEditsDuring(canvas, draw) {
+  open.forEach((edit) => {
+    if (edit.canvas === canvas) {
+      edit.placed = false;
+    }
+  });
+  draw();
+  open.forEach((edit) => {
+    if (edit.canvas === canvas && !edit.placed) {
+      edit.input.style.opacity = "0";
+      edit.input.style.pointerEvents = "none";
+    }
+  });
+}
+function editInPlace(config) {
+  const canvas = config.canvas;
+  if (canvas === null) {
+    return null;
+  }
+  const input = document.createElement("input");
+  input.type = "text";
+  input.value = config.value;
+  const edit = { canvas, input, placed: true };
+  const place = (box, scale) => {
+    const rect = canvas.getBoundingClientRect();
+    const sx = canvas.width > 0 ? rect.width / canvas.width : 1;
+    const sy = canvas.height > 0 ? rect.height / canvas.height : 1;
+    const left = rect.left + box.Position.x * sx;
+    const top = rect.top + box.Position.y * sy;
+    const width2 = box.Size.x * sx;
+    const height2 = box.Size.y * sy;
+    const clip = [
+      Math.max(0, rect.top - top),
+      Math.max(0, left + width2 - (rect.left + rect.width)),
+      Math.max(0, top + height2 - (rect.top + rect.height)),
+      Math.max(0, rect.left - left)
+    ];
+    edit.placed = true;
+    input.style.cssText = [
+      "position: fixed",
+      `left: ${left}px`,
+      `top: ${top}px`,
+      `width: ${width2}px`,
+      `height: ${height2}px`,
+      `clip-path: inset(${clip.map((c) => `${c}px`).join(" ")})`,
+      "box-sizing: border-box",
+      "margin: 0",
+      `padding: 0 ${Theme.Widget.Padding * scale}px`,
+      `font: ${Theme.Widget.FontSize * scale * sy}px ${Theme.FontFamily}`,
+      `color: ${Theme.Widget.FontColor}`,
+      `background: ${Theme.Widget.Hover.BackgroundColor}`,
+      `border: ${Theme.Widget.Border.Size * scale}px solid ${Theme.Widget.Border.Color}`,
+      `border-radius: ${Theme.Widget.Border.Radius * scale}px`,
+      "outline: none",
+      "z-index: 1000"
+    ].join(";");
+  };
+  place(config.box, config.scale);
+  let done = false;
+  const finish = (keep) => {
+    if (done) {
+      return;
+    }
+    done = true;
+    open.delete(edit);
+    input.remove();
+    if (keep) {
+      config.onCommit(input.value);
+    }
+    requestRender();
+  };
+  input.addEventListener("keydown", (event) => {
+    event.stopPropagation();
+    if (event.key === "Enter") {
+      event.preventDefault();
+      finish(true);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      finish(false);
+    }
+  });
+  input.addEventListener("blur", () => finish(true));
+  open.add(edit);
+  document.body.appendChild(input);
+  input.focus();
+  input.select();
+  return { input, place };
+}
+
+// src/widgets/widget.ts
+var width = 150;
+var height = 25;
+var WidgetBase = class {
+  #hidden = false;
+  #disabled = false;
+  #hovered = false;
+  #pressed = false;
+  #box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+  #canvas = null;
+  #scale = 1;
+  #editing = null;
+  Draw(ctx, box, scale, mousePosition) {
+    this.#box = { Position: { x: box.Position.x, y: box.Position.y }, Size: { x: box.Size.x, y: box.Size.y } };
+    this.#canvas = ctx.canvas ?? null;
+    this.#scale = scale;
+    this.#hovered = !this.#disabled && mousePosition !== void 0 && InBox(box, mousePosition);
+    if (this.#editing !== null) {
+      if (this.#editing.input.isConnected) {
+        this.#editing.place(this.#box, scale);
+      } else {
+        this.#editing = null;
+      }
+    }
+    ctx.save();
+    if (this.#disabled) {
+      ctx.globalAlpha *= 0.4;
+    }
+    this.render(ctx, box, scale);
+    ctx.restore();
+  }
+  PointerDown(pointer) {
+    if (this.#disabled) {
+      return;
+    }
+    this.#pressed = true;
+    this.onPointerDown(pointer);
+    requestRender();
+  }
+  PointerMove(pointer) {
+    if (!this.#pressed) {
+      return;
+    }
+    this.onPointerMove(pointer);
+    requestRender();
+  }
+  PointerUp(pointer) {
+    if (!this.#pressed) {
+      return;
+    }
+    this.#pressed = false;
+    this.onPointerUp(pointer);
+    if (pointer.inside) {
+      this.onClick(pointer);
+    }
+    requestRender();
+  }
+  Cursor() {
+    return "pointer" /* Pointer */;
+  }
+  Hidden() {
+    return this.#hidden;
+  }
+  setHidden(hidden) {
+    this.#hidden = hidden;
+    requestRender();
+  }
+  Disabled() {
+    return this.#disabled;
+  }
+  setDisabled(disabled) {
+    this.#disabled = disabled;
+    if (disabled) {
+      this.#pressed = false;
+    }
+    requestRender();
+  }
+  hovered() {
+    return this.#hovered;
+  }
+  pressed() {
+    return this.#pressed;
+  }
+  /**
+   * Where the widget was last drawn, in canvas pixels.
+   */
+  box() {
+    return this.#box;
+  }
+  canvas() {
+    return this.#canvas;
+  }
+  scale() {
+    return this.#scale;
+  }
+  editText(value, onCommit) {
+    this.#editing = editInPlace({
+      canvas: this.#canvas,
+      box: this.#box,
+      scale: this.#scale,
+      value,
+      onCommit
+    });
+  }
+  onPointerDown(pointer) {
+  }
+  onPointerMove(pointer) {
+  }
+  onPointerUp(pointer) {
+  }
+  /**
+   * A press and release that both landed on the widget.
+   */
+  onClick(pointer) {
+  }
+};
+function startingWidgetValue(node, property, configured, fallback) {
+  if (configured !== void 0) {
+    return configured;
+  }
+  if (property !== void 0 && property !== null) {
+    const existing = node.getProperty(property);
+    if (existing !== void 0 && existing !== null) {
+      return existing;
+    }
+  }
+  return fallback;
+}
+
+// src/widgets/hidden_ports.ts
+var HiddenPortsToggle = class extends WidgetBase {
+  constructor(owner) {
+    super();
+    this.owner = owner;
+  }
+  Size() {
+    return { x: 150, y: 16 };
+  }
+  render(ctx, box, scale) {
+    const label = this.owner.hiddenPortsShown() ? "\u25B4 less" : `\u25BE ${this.owner.hiddenPortCount()} more`;
+    const midY = box.Position.y + box.Size.y / 2;
+    const centerX = box.Position.x + box.Size.x / 2;
+    ctx.font = `${11 * scale}px ${Theme.FontFamily}`;
+    const half = ctx.measureText(label).width / 2 + 6 * scale;
+    ctx.globalAlpha = this.hovered() ? 1 : 0.5;
+    ctx.strokeStyle = Theme.Widget.FontColor;
+    ctx.fillStyle = Theme.Widget.FontColor;
+    ctx.lineWidth = Math.max(1, scale);
+    ctx.beginPath();
+    ctx.moveTo(box.Position.x, midY);
+    ctx.lineTo(centerX - half, midY);
+    ctx.moveTo(centerX + half, midY);
+    ctx.lineTo(box.Position.x + box.Size.x, midY);
+    ctx.stroke();
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(label, centerX, midY);
+  }
+  onClick() {
+    this.owner.setHiddenPortsShown(!this.owner.hiddenPortsShown());
+  }
+};
+
 // src/styles/stroke.ts
 function StrokeStyleWithFallback(input, fallback) {
   return {
@@ -1980,27 +2258,6 @@ var BoxStyle = class {
   }
 };
 
-// src/styles/cursor.ts
-var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
-  CursorStyle2["Default"] = "default";
-  CursorStyle2["Pointer"] = "pointer";
-  CursorStyle2["Grab"] = "grab";
-  CursorStyle2["Grabbing"] = "grabbing";
-  CursorStyle2["Wait"] = "wait";
-  CursorStyle2["Help"] = "help";
-  CursorStyle2["Crosshair"] = "crosshair";
-  CursorStyle2["Cell"] = "cell";
-  CursorStyle2["Text"] = "text";
-  CursorStyle2["Move"] = "move";
-  CursorStyle2["NotAllowed"] = "not-allowed";
-  CursorStyle2["ZoomIn"] = "zoom-in";
-  CursorStyle2["ZoomOut"] = "zoom-out";
-  CursorStyle2["None"] = "none";
-  CursorStyle2["ContextMenu"] = "context-menu";
-  CursorStyle2["EWResize"] = "ew-resize";
-  return CursorStyle2;
-})(CursorStyle || {});
-
 // src/styles/bevel.ts
 function drawBevel(ctx, box, scale, colors, sunken) {
   const width2 = Math.max(1, 2 * scale);
@@ -2092,176 +2349,6 @@ function drawFieldText(ctx, box, scale, look) {
   );
 }
 
-// src/widgets/inplace.ts
-function editInPlace(config) {
-  const canvas = config.canvas;
-  if (canvas === null) {
-    return null;
-  }
-  const rect = canvas.getBoundingClientRect();
-  const sx = canvas.width > 0 ? rect.width / canvas.width : 1;
-  const sy = canvas.height > 0 ? rect.height / canvas.height : 1;
-  const input = document.createElement("input");
-  input.type = "text";
-  input.value = config.value;
-  input.style.cssText = [
-    "position: fixed",
-    `left: ${rect.left + config.box.Position.x * sx}px`,
-    `top: ${rect.top + config.box.Position.y * sy}px`,
-    `width: ${config.box.Size.x * sx}px`,
-    `height: ${config.box.Size.y * sy}px`,
-    "box-sizing: border-box",
-    "margin: 0",
-    `padding: 0 ${Theme.Widget.Padding * config.scale}px`,
-    `font: ${Theme.Widget.FontSize * config.scale * sy}px ${Theme.FontFamily}`,
-    `color: ${Theme.Widget.FontColor}`,
-    `background: ${Theme.Widget.Hover.BackgroundColor}`,
-    `border: ${Theme.Widget.Border.Size * config.scale}px solid ${Theme.Widget.Border.Color}`,
-    `border-radius: ${Theme.Widget.Border.Radius * config.scale}px`,
-    "outline: none",
-    "z-index: 1000"
-  ].join(";");
-  let done = false;
-  const finish = (keep) => {
-    if (done) {
-      return;
-    }
-    done = true;
-    input.remove();
-    if (keep) {
-      config.onCommit(input.value);
-    }
-    requestRender();
-  };
-  input.addEventListener("keydown", (event) => {
-    event.stopPropagation();
-    if (event.key === "Enter") {
-      event.preventDefault();
-      finish(true);
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      finish(false);
-    }
-  });
-  input.addEventListener("blur", () => finish(true));
-  document.body.appendChild(input);
-  input.focus();
-  input.select();
-  return input;
-}
-
-// src/widgets/widget.ts
-var width = 150;
-var height = 25;
-var WidgetBase = class {
-  #hidden = false;
-  #disabled = false;
-  #hovered = false;
-  #pressed = false;
-  #box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
-  #canvas = null;
-  #scale = 1;
-  Draw(ctx, box, scale, mousePosition) {
-    this.#box = { Position: { x: box.Position.x, y: box.Position.y }, Size: { x: box.Size.x, y: box.Size.y } };
-    this.#canvas = ctx.canvas ?? null;
-    this.#scale = scale;
-    this.#hovered = !this.#disabled && mousePosition !== void 0 && InBox(box, mousePosition);
-    ctx.save();
-    if (this.#disabled) {
-      ctx.globalAlpha *= 0.4;
-    }
-    this.render(ctx, box, scale);
-    ctx.restore();
-  }
-  PointerDown(pointer) {
-    if (this.#disabled) {
-      return;
-    }
-    this.#pressed = true;
-    this.onPointerDown(pointer);
-    requestRender();
-  }
-  PointerMove(pointer) {
-    if (!this.#pressed) {
-      return;
-    }
-    this.onPointerMove(pointer);
-    requestRender();
-  }
-  PointerUp(pointer) {
-    if (!this.#pressed) {
-      return;
-    }
-    this.#pressed = false;
-    this.onPointerUp(pointer);
-    if (pointer.inside) {
-      this.onClick(pointer);
-    }
-    requestRender();
-  }
-  Cursor() {
-    return "pointer" /* Pointer */;
-  }
-  Hidden() {
-    return this.#hidden;
-  }
-  setHidden(hidden) {
-    this.#hidden = hidden;
-    requestRender();
-  }
-  Disabled() {
-    return this.#disabled;
-  }
-  setDisabled(disabled) {
-    this.#disabled = disabled;
-    if (disabled) {
-      this.#pressed = false;
-    }
-    requestRender();
-  }
-  hovered() {
-    return this.#hovered;
-  }
-  pressed() {
-    return this.#pressed;
-  }
-  /**
-   * Where the widget was last drawn, in canvas pixels.
-   */
-  box() {
-    return this.#box;
-  }
-  canvas() {
-    return this.#canvas;
-  }
-  scale() {
-    return this.#scale;
-  }
-  onPointerDown(pointer) {
-  }
-  onPointerMove(pointer) {
-  }
-  onPointerUp(pointer) {
-  }
-  /**
-   * A press and release that both landed on the widget.
-   */
-  onClick(pointer) {
-  }
-};
-function startingWidgetValue(node, property, configured, fallback) {
-  if (configured !== void 0) {
-    return configured;
-  }
-  if (property !== void 0 && property !== null) {
-    const existing = node.getProperty(property);
-    if (existing !== void 0 && existing !== null) {
-      return existing;
-    }
-  }
-  return fallback;
-}
-
 // src/widgets/value.ts
 var ValueWidget = class extends WidgetBase {
   #node;
@@ -2396,16 +2483,10 @@ var NumberWidget = class extends ValueWidget {
       return;
     }
     const before = this.value();
-    editInPlace({
-      canvas: this.canvas(),
-      box: this.box(),
-      scale: this.scale(),
-      value: String(before),
-      onCommit: (text) => {
-        const parsed = Number.parseFloat(text);
-        if (Number.isFinite(parsed)) {
-          this.commit(this.#clean(parsed), before);
-        }
+    this.editText(String(before), (text) => {
+      const parsed = Number.parseFloat(text);
+      if (Number.isFinite(parsed)) {
+        this.commit(this.#clean(parsed), before);
       }
     });
   }
@@ -2613,13 +2694,7 @@ var StringWidget = class extends ValueWidget {
   }
   onClick() {
     const before = this.value();
-    editInPlace({
-      canvas: this.canvas(),
-      box: this.box(),
-      scale: this.scale(),
-      value: before,
-      onCommit: (text) => this.commit(text, before)
-    });
+    this.editText(before, (text) => this.commit(text, before));
   }
 };
 
@@ -5530,7 +5605,8 @@ var FlowNode = class {
       size.y += this.#portRowHeight(port, tempMeasurement.y) + this.#elementSpacing;
       size.x = Math.max(size.x, tempMeasurement.x + doublePadding);
     }
-    for (const widget of this.#widgets) {
+    const widgets = this.#hasHiddenPortsToggle() ? [this.#hiddenPortsToggle, ...this.#widgets] : this.#widgets;
+    for (const widget of widgets) {
       if (widget.Hidden?.()) {
         continue;
       }
@@ -5556,6 +5632,31 @@ var FlowNode = class {
     this.#output.push(port);
     return port;
   }
+  #hiddenPortsShown = false;
+  #hiddenPortsToggle = new HiddenPortsToggle(this);
+  #hiddenPortsTogglePosition = null;
+  hiddenPortsShown() {
+    return this.#hiddenPortsShown;
+  }
+  setHiddenPortsShown(shown) {
+    if (shown === this.#hiddenPortsShown) {
+      return;
+    }
+    this.#hiddenPortsShown = shown;
+    this.invalidateLayout();
+  }
+  hiddenPortCount() {
+    let count = 0;
+    for (const port of [...this.#input, ...this.#output]) {
+      if (port.tucked()) {
+        count++;
+      }
+    }
+    return count;
+  }
+  #hasHiddenPortsToggle() {
+    return this.hiddenPortCount() > 0;
+  }
   addWidget(widget) {
     this.#widgets.push(widget);
     requestRender();
@@ -5634,6 +5735,11 @@ var FlowNode = class {
         intersection.Port = this.#output[i];
       }
     }
+    if (this.#hiddenPortsTogglePosition !== null && InBox(this.#hiddenPortsTogglePosition, position)) {
+      intersection.Node = this;
+      intersection.Widget = this.#hiddenPortsToggle;
+      intersection.WidgetBox = this.#hiddenPortsTogglePosition;
+    }
     for (let i = 0; i < this.#widgetPositions.Count(); i++) {
       const widget = this.#widgets[i];
       if (widget !== void 0 && !widget.Hidden?.() && InBox(this.#widgetPositions.At(i), position)) {
@@ -5903,6 +6009,16 @@ var FlowNode = class {
         this.#outputPortPositions.Push(port.render(ctx, position, camera, mousePosition, postProcess));
         startY += portHeight + scaledElementSpacing;
       }
+      this.#hiddenPortsTogglePosition = null;
+      if (this.#hasHiddenPortsToggle()) {
+        const box = {
+          Position: { x: nodeBounds.Position.x + scaledPadding, y: startY },
+          Size: { x: nodeBounds.Size.x - scaledPadding * 2, y: this.#hiddenPortsToggle.Size().y * camera.zoom }
+        };
+        this.#hiddenPortsToggle.Draw(ctx, box, camera.zoom, mousePosition);
+        this.#hiddenPortsTogglePosition = box;
+        startY += box.Size.y + scaledElementSpacing;
+      }
       for (let i = 0; i < this.#widgets.length; i++) {
         const widget = this.#widgets[i];
         if (widget.Hidden?.()) {
@@ -5957,6 +6073,7 @@ var FlowNode = class {
       return false;
     }
     this.#widgetPositions.Clear();
+    this.#hiddenPortsTogglePosition = null;
     return true;
   }
   placePorts(bounds, zoom) {
@@ -7617,8 +7734,8 @@ var NodeFlowGraph = class {
       this.#clickEnd.bind(this),
       this.#openContextMenu.bind(this),
       this.#fileDrop.bind(this),
-      (amount, anchor) => {
-        this.zoom(amount, anchor);
+      (factor, anchor) => {
+        this.#zoomBy(factor, anchor);
       }
     );
     document.addEventListener(
@@ -7746,12 +7863,15 @@ var NodeFlowGraph = class {
     this.#mainNoteSubsystem.addNoteDragStopListener(callback);
   }
   zoom(amount, anchor) {
+    this.#zoomBy(1 + amount * 0.05, anchor);
+  }
+  #zoomBy(factor, anchor) {
     const anchorPos = anchor ?? this.#mousePosition;
     let oldPos = void 0;
     if (anchorPos !== void 0) {
       oldPos = this.#sceenPositionToGraphPosition(anchorPos);
     }
-    this.#camera.zoom += amount * this.#camera.zoom * 0.05;
+    this.#camera.zoom *= factor;
     if (!oldPos || anchorPos === void 0) {
       return;
     }
@@ -8016,10 +8136,12 @@ var NodeFlowGraph = class {
     this.#cursor = "default" /* Default */;
     TimeExecution("Render_Background", this.#renderBackground.bind(this));
     TimeExecution("Render_View_" + this.#currentView, () => {
-      let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
-      if (results?.cursorStyle) {
-        this.#cursor = results?.cursorStyle;
-      }
+      placeEditsDuring(this.#canvas, () => {
+        let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
+        if (results?.cursorStyle) {
+          this.#cursor = results?.cursorStyle;
+        }
+      });
     });
     TimeExecution("Render_Minimap", () => {
       this.#minimap.render(this.#ctx, this.#canvas, this.#camera, this.#mainNodeSubsystem.getNodes());