@elicdavis/node-flow 0.2.0 → 0.2.1

package/dist/index.d.mts

@@ -289,6 +289,7 @@ declare abstract class WidgetBase implements Widget {
     protected box(): Box;
     protected canvas(): HTMLCanvasElement | null;
     protected scale(): number;
+    protected editText(value: string, onCommit: (text: string) => void): void;
     protected onPointerDown(pointer: WidgetPointer): void;
     protected onPointerMove(pointer: WidgetPointer): void;
     protected onPointerUp(pointer: WidgetPointer): void;
@@ -1136,10 +1137,17 @@ interface InPlaceEditConfig {
     value: string;
     onCommit: (text: string) => void;
 }
+interface InPlaceEdit {
+    input: HTMLInputElement;
+    /**
+     * Moves the input over where the widget was just drawn, in canvas pixels.
+     */
+    place(box: Box, scale: number): void;
+}
 /**
  * Lays a text input over a widget. Enter or clicking away keeps what was
  * typed; Escape throws it away.
  */
-declare function editInPlace(config: InPlaceEditConfig): HTMLInputElement | null;
+declare function editInPlace(config: InPlaceEditConfig): InPlaceEdit | null;
 
-export { type BevelColors, type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, CursorStyle, type DanglingConnection, DefaultConnectionRenderer, DefaultTheme, type FieldLook, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, GraphView, ImageWidget, type ImageWidgetConfig, InBox, type InPlaceEditConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, RowWidget, type RowWidgetConfig, type RowWidgetFactoryConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ThemeConfig, type ThemeValues, ToggleWidget, type ToggleWidgetConfig, ValueWidget, type ValueWidgetConfig, type Vector2, type Widget, WidgetBase, type WidgetBuilder, type WidgetConfig, type WidgetConfigs, WidgetFactory, type WidgetPointer, type WidgetTypes, drawField, drawFieldBox, drawFieldText, editInPlace, formatNumber, onThemeChange, portConfigTypes, portsCompatible, renderContinuously, requestRender, setTheme, themeVersion, typeSetsCompatible, widgetFont };
+export { type BevelColors, type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, CursorStyle, type DanglingConnection, DefaultConnectionRenderer, DefaultTheme, type FieldLook, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, GraphView, ImageWidget, type ImageWidgetConfig, InBox, type InPlaceEdit, type InPlaceEditConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, RowWidget, type RowWidgetConfig, type RowWidgetFactoryConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ThemeConfig, type ThemeValues, ToggleWidget, type ToggleWidgetConfig, ValueWidget, type ValueWidgetConfig, type Vector2, type Widget, WidgetBase, type WidgetBuilder, type WidgetConfig, type WidgetConfigs, WidgetFactory, type WidgetPointer, type WidgetTypes, drawField, drawFieldBox, drawFieldText, editInPlace, formatNumber, onThemeChange, portConfigTypes, portsCompatible, renderContinuously, requestRender, setTheme, themeVersion, typeSetsCompatible, widgetFont };

package/dist/index.d.ts

@@ -289,6 +289,7 @@ declare abstract class WidgetBase implements Widget {
     protected box(): Box;
     protected canvas(): HTMLCanvasElement | null;
     protected scale(): number;
+    protected editText(value: string, onCommit: (text: string) => void): void;
     protected onPointerDown(pointer: WidgetPointer): void;
     protected onPointerMove(pointer: WidgetPointer): void;
     protected onPointerUp(pointer: WidgetPointer): void;
@@ -1136,10 +1137,17 @@ interface InPlaceEditConfig {
     value: string;
     onCommit: (text: string) => void;
 }
+interface InPlaceEdit {
+    input: HTMLInputElement;
+    /**
+     * Moves the input over where the widget was just drawn, in canvas pixels.
+     */
+    place(box: Box, scale: number): void;
+}
 /**
  * Lays a text input over a widget. Enter or clicking away keeps what was
  * typed; Escape throws it away.
  */
-declare function editInPlace(config: InPlaceEditConfig): HTMLInputElement | null;
+declare function editInPlace(config: InPlaceEditConfig): InPlaceEdit | null;
 
-export { type BevelColors, type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, CursorStyle, type DanglingConnection, DefaultConnectionRenderer, DefaultTheme, type FieldLook, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, GraphView, ImageWidget, type ImageWidgetConfig, InBox, type InPlaceEditConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, RowWidget, type RowWidgetConfig, type RowWidgetFactoryConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ThemeConfig, type ThemeValues, ToggleWidget, type ToggleWidgetConfig, ValueWidget, type ValueWidgetConfig, type Vector2, type Widget, WidgetBase, type WidgetBuilder, type WidgetConfig, type WidgetConfigs, WidgetFactory, type WidgetPointer, type WidgetTypes, drawField, drawFieldBox, drawFieldText, editInPlace, formatNumber, onThemeChange, portConfigTypes, portsCompatible, renderContinuously, requestRender, setTheme, themeVersion, typeSetsCompatible, widgetFont };
+export { type BevelColors, type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, CursorStyle, type DanglingConnection, DefaultConnectionRenderer, DefaultTheme, type FieldLook, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, GraphView, ImageWidget, type ImageWidgetConfig, InBox, type InPlaceEdit, type InPlaceEditConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, RowWidget, type RowWidgetConfig, type RowWidgetFactoryConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ThemeConfig, type ThemeValues, ToggleWidget, type ToggleWidgetConfig, ValueWidget, type ValueWidgetConfig, type Vector2, type Widget, WidgetBase, type WidgetBuilder, type WidgetConfig, type WidgetConfigs, WidgetFactory, type WidgetPointer, type WidgetTypes, drawField, drawFieldBox, drawFieldText, editInPlace, formatNumber, onThemeChange, portConfigTypes, portsCompatible, renderContinuously, requestRender, setTheme, themeVersion, typeSetsCompatible, widgetFont };

package/dist/index.js

@@ -2163,40 +2163,72 @@ function drawFieldText(ctx, box, scale, look) {
 }
 
 // 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 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(";");
+  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);
@@ -2214,10 +2246,11 @@ function editInPlace(config) {
     }
   });
   input.addEventListener("blur", () => finish(true));
+  open.add(edit);
   document.body.appendChild(input);
   input.focus();
   input.select();
-  return input;
+  return { input, place };
 }
 
 // src/widgets/widget.ts
@@ -2231,11 +2264,19 @@ var WidgetBase = class {
   #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;
@@ -2307,6 +2348,15 @@ var WidgetBase = class {
   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) {
@@ -2466,16 +2516,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);
       }
     });
   }
@@ -2683,13 +2727,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));
   }
 };
 
@@ -8086,10 +8124,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());