@elicdavis/node-flow 0.2.1 → 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,117 +1872,6 @@ var Port = class {
   }
 };
 
-// src/styles/stroke.ts
-function StrokeStyleWithFallback(input, fallback) {
-  return {
-    color: input?.color === void 0 ? fallback?.color : input?.color,
-    size: input?.size === void 0 ? fallback?.size : input?.size
-  };
-}
-var StrokeStyle = class {
-  #size;
-  #color;
-  constructor(config) {
-    this.#size = config?.size === void 0 ? 0.5 : config.size;
-    this.#color = config?.color === void 0 ? "black" : config.color;
-  }
-  setupStyle(ctx, scale) {
-    ctx.strokeStyle = this.#color;
-    ctx.lineWidth = scale * this.#size;
-  }
-  setColor(newColor) {
-    this.#color = newColor;
-  }
-  setSize(newSize) {
-    this.#size = newSize;
-  }
-  size() {
-    return this.#size;
-  }
-};
-
-// src/styles/box.ts
-function BoxStyleWithFallback(input, fallback) {
-  return {
-    radius: input?.radius === void 0 ? fallback?.radius : input?.radius,
-    color: input?.color === void 0 ? fallback?.color : input?.color,
-    border: StrokeStyleWithFallback(input?.border, fallback?.border)
-  };
-}
-var BoxStyle = class {
-  #border;
-  #color;
-  #radius;
-  constructor(config) {
-    this.#color = config?.color === void 0 ? "#CCCCCC" : config.color;
-    this.#border = config?.border === void 0 ? null : new StrokeStyle(config.border);
-    this.#radius = config?.radius === void 0 ? 2 : config.radius;
-  }
-  #box(ctx, box, scale, radius) {
-    ctx.fillStyle = this.#color;
-    this.#border?.setupStyle(ctx, scale);
-    ctx.beginPath();
-    ctx.roundRect(
-      box.Position.x,
-      box.Position.y,
-      box.Size.x,
-      box.Size.y,
-      radius
-    );
-    ctx.fill();
-  }
-  #draw(ctx, box, scale, radius) {
-    this.#box(ctx, box, scale, radius);
-    ctx.stroke();
-  }
-  Outline(ctx, box, scale, radius) {
-    this.#border?.setupStyle(ctx, scale);
-    ctx.beginPath();
-    ctx.roundRect(
-      box.Position.x,
-      box.Position.y,
-      box.Size.x,
-      box.Size.y,
-      radius
-    );
-    ctx.stroke();
-  }
-  Draw(ctx, box, scale) {
-    this.#draw(ctx, box, scale, this.#radius * scale);
-  }
-  DrawRoundedTopOnly(ctx, box, scale) {
-    this.#draw(ctx, box, scale, [this.#radius * scale * 2, this.#radius * scale * 2, 0, 0]);
-  }
-  DrawUnderline(ctx, box, scale) {
-    this.#box(ctx, box, scale, [this.#radius * scale * 2, this.#radius * scale * 2, 0, 0]);
-    ctx.beginPath();
-    ctx.moveTo(box.Position.x, box.Position.y + box.Size.y);
-    ctx.lineTo(box.Position.x + box.Size.x, box.Position.y + box.Size.y);
-    ctx.stroke();
-  }
-  borderSize() {
-    if (this.#border === null) {
-      return 0;
-    }
-    return this.#border.size();
-  }
-  radius() {
-    return this.#radius;
-  }
-  setColor(color) {
-    this.#color = color;
-  }
-  setBorderColor(color) {
-    if (this.#border === null) {
-      this.#border = new StrokeStyle({
-        color
-      });
-    } else {
-      this.#border.setColor(color);
-    }
-  }
-};
-
 // src/styles/cursor.ts
 var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
   CursorStyle2["Default"] = "default";
@@ -2001,97 +1893,6 @@ var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
   return CursorStyle2;
 })(CursorStyle || {});
 
-// src/styles/bevel.ts
-function drawBevel(ctx, box, scale, colors, sunken) {
-  const width2 = Math.max(1, 2 * scale);
-  const half = width2 / 2;
-  const left = box.Position.x + half;
-  const top = box.Position.y + half;
-  const right = box.Position.x + box.Size.x - half;
-  const bottom = box.Position.y + box.Size.y - half;
-  ctx.save();
-  ctx.lineWidth = width2;
-  ctx.lineCap = "square";
-  ctx.strokeStyle = sunken ? colors.Dark : colors.Light;
-  ctx.beginPath();
-  ctx.moveTo(left, bottom);
-  ctx.lineTo(left, top);
-  ctx.lineTo(right, top);
-  ctx.stroke();
-  ctx.strokeStyle = sunken ? colors.Light : colors.Dark;
-  ctx.beginPath();
-  ctx.moveTo(right, top);
-  ctx.lineTo(right, bottom);
-  ctx.lineTo(left, bottom);
-  ctx.stroke();
-  ctx.restore();
-}
-
-// src/widgets/field.ts
-function widgetFont(scale) {
-  return `${Theme.Widget.FontSize * scale}px ${Theme.FontFamily}`;
-}
-function fieldBackground(look) {
-  if (look.background !== void 0) {
-    return look.background;
-  }
-  if (look.input) {
-    return look.hovered ? Theme.Widget.Input.HoverBackgroundColor : Theme.Widget.Input.BackgroundColor;
-  }
-  if (look.pressed) {
-    return Theme.Widget.Button.Click.BackgroundColor;
-  }
-  return look.hovered ? Theme.Widget.Hover.BackgroundColor : Theme.Widget.BackgroundColor;
-}
-function drawFieldBox(ctx, box, scale, look) {
-  ctx.fillStyle = fieldBackground(look);
-  ctx.beginPath();
-  ctx.roundRect(box.Position.x, box.Position.y, box.Size.x, box.Size.y, Theme.Widget.Border.Radius * scale);
-  ctx.fill();
-  if (Theme.Widget.Border.Size > 0) {
-    ctx.strokeStyle = look.border ?? Theme.Widget.Border.Color;
-    ctx.lineWidth = Theme.Widget.Border.Size * scale;
-    ctx.stroke();
-  }
-  if (Theme.Widget.Bevel !== null) {
-    drawBevel(ctx, box, scale, Theme.Widget.Bevel, look.input === true || look.pressed === true);
-  }
-}
-function drawField(ctx, box, scale, look) {
-  drawFieldBox(ctx, box, scale, look);
-  drawFieldText(ctx, box, scale, look);
-}
-function drawFieldText(ctx, box, scale, look) {
-  const padding = Theme.Widget.Padding * scale;
-  const middle = box.Position.y + box.Size.y / 2;
-  const textColor = look.textColor ?? (look.input ? Theme.Widget.Input.FontColor : Theme.Widget.FontColor);
-  ctx.font = widgetFont(scale);
-  ctx.textBaseline = "middle";
-  if (look.label === void 0 || look.label === "") {
-    ctx.textAlign = "center";
-    ctx.fillStyle = textColor;
-    ctx.fillText(
-      fitString(ctx, look.value, box.Size.x - padding * 2),
-      box.Position.x + box.Size.x / 2,
-      middle
-    );
-    return;
-  }
-  const room = box.Size.x - padding * 2;
-  const label = fitString(ctx, look.label, room / 2);
-  const labelWidth = ctx.measureText(label).width;
-  ctx.textAlign = "left";
-  ctx.fillStyle = look.textColor ?? Theme.Widget.LabelColor;
-  ctx.fillText(label, box.Position.x + padding, middle);
-  ctx.textAlign = "right";
-  ctx.fillStyle = textColor;
-  ctx.fillText(
-    fitString(ctx, look.value, room - labelWidth - padding),
-    box.Position.x + box.Size.x - padding,
-    middle
-  );
-}
-
 // src/widgets/inplace.ts
 var open = /* @__PURE__ */ new Set();
 function placeEditsDuring(canvas, draw) {
@@ -2312,6 +2113,242 @@ function startingWidgetValue(node, property, configured, fallback) {
   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 {
+    color: input?.color === void 0 ? fallback?.color : input?.color,
+    size: input?.size === void 0 ? fallback?.size : input?.size
+  };
+}
+var StrokeStyle = class {
+  #size;
+  #color;
+  constructor(config) {
+    this.#size = config?.size === void 0 ? 0.5 : config.size;
+    this.#color = config?.color === void 0 ? "black" : config.color;
+  }
+  setupStyle(ctx, scale) {
+    ctx.strokeStyle = this.#color;
+    ctx.lineWidth = scale * this.#size;
+  }
+  setColor(newColor) {
+    this.#color = newColor;
+  }
+  setSize(newSize) {
+    this.#size = newSize;
+  }
+  size() {
+    return this.#size;
+  }
+};
+
+// src/styles/box.ts
+function BoxStyleWithFallback(input, fallback) {
+  return {
+    radius: input?.radius === void 0 ? fallback?.radius : input?.radius,
+    color: input?.color === void 0 ? fallback?.color : input?.color,
+    border: StrokeStyleWithFallback(input?.border, fallback?.border)
+  };
+}
+var BoxStyle = class {
+  #border;
+  #color;
+  #radius;
+  constructor(config) {
+    this.#color = config?.color === void 0 ? "#CCCCCC" : config.color;
+    this.#border = config?.border === void 0 ? null : new StrokeStyle(config.border);
+    this.#radius = config?.radius === void 0 ? 2 : config.radius;
+  }
+  #box(ctx, box, scale, radius) {
+    ctx.fillStyle = this.#color;
+    this.#border?.setupStyle(ctx, scale);
+    ctx.beginPath();
+    ctx.roundRect(
+      box.Position.x,
+      box.Position.y,
+      box.Size.x,
+      box.Size.y,
+      radius
+    );
+    ctx.fill();
+  }
+  #draw(ctx, box, scale, radius) {
+    this.#box(ctx, box, scale, radius);
+    ctx.stroke();
+  }
+  Outline(ctx, box, scale, radius) {
+    this.#border?.setupStyle(ctx, scale);
+    ctx.beginPath();
+    ctx.roundRect(
+      box.Position.x,
+      box.Position.y,
+      box.Size.x,
+      box.Size.y,
+      radius
+    );
+    ctx.stroke();
+  }
+  Draw(ctx, box, scale) {
+    this.#draw(ctx, box, scale, this.#radius * scale);
+  }
+  DrawRoundedTopOnly(ctx, box, scale) {
+    this.#draw(ctx, box, scale, [this.#radius * scale * 2, this.#radius * scale * 2, 0, 0]);
+  }
+  DrawUnderline(ctx, box, scale) {
+    this.#box(ctx, box, scale, [this.#radius * scale * 2, this.#radius * scale * 2, 0, 0]);
+    ctx.beginPath();
+    ctx.moveTo(box.Position.x, box.Position.y + box.Size.y);
+    ctx.lineTo(box.Position.x + box.Size.x, box.Position.y + box.Size.y);
+    ctx.stroke();
+  }
+  borderSize() {
+    if (this.#border === null) {
+      return 0;
+    }
+    return this.#border.size();
+  }
+  radius() {
+    return this.#radius;
+  }
+  setColor(color) {
+    this.#color = color;
+  }
+  setBorderColor(color) {
+    if (this.#border === null) {
+      this.#border = new StrokeStyle({
+        color
+      });
+    } else {
+      this.#border.setColor(color);
+    }
+  }
+};
+
+// src/styles/bevel.ts
+function drawBevel(ctx, box, scale, colors, sunken) {
+  const width2 = Math.max(1, 2 * scale);
+  const half = width2 / 2;
+  const left = box.Position.x + half;
+  const top = box.Position.y + half;
+  const right = box.Position.x + box.Size.x - half;
+  const bottom = box.Position.y + box.Size.y - half;
+  ctx.save();
+  ctx.lineWidth = width2;
+  ctx.lineCap = "square";
+  ctx.strokeStyle = sunken ? colors.Dark : colors.Light;
+  ctx.beginPath();
+  ctx.moveTo(left, bottom);
+  ctx.lineTo(left, top);
+  ctx.lineTo(right, top);
+  ctx.stroke();
+  ctx.strokeStyle = sunken ? colors.Light : colors.Dark;
+  ctx.beginPath();
+  ctx.moveTo(right, top);
+  ctx.lineTo(right, bottom);
+  ctx.lineTo(left, bottom);
+  ctx.stroke();
+  ctx.restore();
+}
+
+// src/widgets/field.ts
+function widgetFont(scale) {
+  return `${Theme.Widget.FontSize * scale}px ${Theme.FontFamily}`;
+}
+function fieldBackground(look) {
+  if (look.background !== void 0) {
+    return look.background;
+  }
+  if (look.input) {
+    return look.hovered ? Theme.Widget.Input.HoverBackgroundColor : Theme.Widget.Input.BackgroundColor;
+  }
+  if (look.pressed) {
+    return Theme.Widget.Button.Click.BackgroundColor;
+  }
+  return look.hovered ? Theme.Widget.Hover.BackgroundColor : Theme.Widget.BackgroundColor;
+}
+function drawFieldBox(ctx, box, scale, look) {
+  ctx.fillStyle = fieldBackground(look);
+  ctx.beginPath();
+  ctx.roundRect(box.Position.x, box.Position.y, box.Size.x, box.Size.y, Theme.Widget.Border.Radius * scale);
+  ctx.fill();
+  if (Theme.Widget.Border.Size > 0) {
+    ctx.strokeStyle = look.border ?? Theme.Widget.Border.Color;
+    ctx.lineWidth = Theme.Widget.Border.Size * scale;
+    ctx.stroke();
+  }
+  if (Theme.Widget.Bevel !== null) {
+    drawBevel(ctx, box, scale, Theme.Widget.Bevel, look.input === true || look.pressed === true);
+  }
+}
+function drawField(ctx, box, scale, look) {
+  drawFieldBox(ctx, box, scale, look);
+  drawFieldText(ctx, box, scale, look);
+}
+function drawFieldText(ctx, box, scale, look) {
+  const padding = Theme.Widget.Padding * scale;
+  const middle = box.Position.y + box.Size.y / 2;
+  const textColor = look.textColor ?? (look.input ? Theme.Widget.Input.FontColor : Theme.Widget.FontColor);
+  ctx.font = widgetFont(scale);
+  ctx.textBaseline = "middle";
+  if (look.label === void 0 || look.label === "") {
+    ctx.textAlign = "center";
+    ctx.fillStyle = textColor;
+    ctx.fillText(
+      fitString(ctx, look.value, box.Size.x - padding * 2),
+      box.Position.x + box.Size.x / 2,
+      middle
+    );
+    return;
+  }
+  const room = box.Size.x - padding * 2;
+  const label = fitString(ctx, look.label, room / 2);
+  const labelWidth = ctx.measureText(label).width;
+  ctx.textAlign = "left";
+  ctx.fillStyle = look.textColor ?? Theme.Widget.LabelColor;
+  ctx.fillText(label, box.Position.x + padding, middle);
+  ctx.textAlign = "right";
+  ctx.fillStyle = textColor;
+  ctx.fillText(
+    fitString(ctx, look.value, room - labelWidth - padding),
+    box.Position.x + box.Size.x - padding,
+    middle
+  );
+}
+
 // src/widgets/value.ts
 var ValueWidget = class extends WidgetBase {
   #node;
@@ -5568,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;
       }
@@ -5594,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();
@@ -5672,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)) {
@@ -5941,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?.()) {
@@ -5995,6 +6073,7 @@ var FlowNode = class {
       return false;
     }
     this.#widgetPositions.Clear();
+    this.#hiddenPortsTogglePosition = null;
     return true;
   }
   placePorts(bounds, zoom) {
@@ -7655,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(
@@ -7784,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;
     }