@elicdavis/node-flow 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -2093,40 +2093,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);
@@ -2144,10 +2176,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
@@ -2161,11 +2194,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;
@@ -2237,6 +2278,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) {
@@ -2396,16 +2446,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 +2657,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));
   }
 };
 
@@ -8016,10 +8054,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());