@wildwinter/expr-editor 0.5.0 → 0.7.0

package/dist/index.d.cts

@@ -279,11 +279,12 @@ interface ExpressionEditorOptions {
     /** Flat compact editor for a `set_flags(@target, +a, -b)` value whose target is
      *  implied by context (an outcome row's target column). Renders only the
      *  flag-delta pills plus an "+ flag" chip, hiding the function name and target
-     *  arg. `target` is the name-form ref of the flags property (e.g. "@quests");
-     *  it seeds the call on the first flag add. Pairs with mode:"flat", and set
-     *  requireNonEmpty so the last flag can't be removed. */
+     *  arg. `target` is the name-form ref of the flags property (e.g. "@quests"),
+     *  `flags` its declared flag names (offered by the "+ flag" picker). Pairs
+     *  with mode:"flat"; set requireNonEmpty so the last flag can't be removed. */
     flagValue?: {
         target: string;
+        flags: string[];
     };
     /** Emitted on every edit (name-form; "" when cleared). */
     onChange: (src: string) => void;

package/dist/index.d.ts

@@ -279,11 +279,12 @@ interface ExpressionEditorOptions {
     /** Flat compact editor for a `set_flags(@target, +a, -b)` value whose target is
      *  implied by context (an outcome row's target column). Renders only the
      *  flag-delta pills plus an "+ flag" chip, hiding the function name and target
-     *  arg. `target` is the name-form ref of the flags property (e.g. "@quests");
-     *  it seeds the call on the first flag add. Pairs with mode:"flat", and set
-     *  requireNonEmpty so the last flag can't be removed. */
+     *  arg. `target` is the name-form ref of the flags property (e.g. "@quests"),
+     *  `flags` its declared flag names (offered by the "+ flag" picker). Pairs
+     *  with mode:"flat"; set requireNonEmpty so the last flag can't be removed. */
     flagValue?: {
         target: string;
+        flags: string[];
     };
     /** Emitted on every edit (name-form; "" when cleared). */
     onChange: (src: string) => void;

package/dist/index.js

@@ -456,6 +456,14 @@ function renderNode(node, path, ctx, parentOp, side) {
     }
   }
 }
+function signToggle(current, onPick) {
+  const row = el("div", "exed-sign");
+  ["+", "-"].forEach((s) => {
+    const cls = `exed-signbtn${s === current ? s === "+" ? " sel-pos" : " sel-neg" : ""}`;
+    row.append(button(cls, s === "+" ? "+ set" : "\u2212 unset", () => onPick(s)));
+  });
+  return row;
+}
 var deleteOrUnwrapNot = (ctx, path, node) => (
   // clicking the NOT pill strips it (keeps the operand)
   setNodeAt(ctx.getAst(), path, node.operand)
@@ -545,14 +553,10 @@ function flagEditor(ctx, path, node, anchor) {
   ctx.openPopover(anchor, (close) => {
     const wrap = el("div", "exed-menu");
     wrap.append(el("div", "exed-menu-head", ["Flag set?"]));
-    const signRow = el("div", "exed-field-row");
-    for (const s of ["+", "-"]) {
-      signRow.append(button(`exed-opt${s === node.sign ? " sel" : ""}`, s === "+" ? "+ set" : "\u2212 unset", () => {
-        replace(ctx, path, flagDelta(s, node.name));
-        close();
-      }));
-    }
-    wrap.append(signRow);
+    wrap.append(signToggle(node.sign, (s) => {
+      replace(ctx, path, flagDelta(s, node.name));
+      close();
+    }));
     const names = (entry?.enumValues ?? []).filter((n) => !used.includes(n));
     if (names.length) {
       wrap.append(el("div", "exed-menu-head", ["Flag"]));
@@ -1143,27 +1147,46 @@ function mountExpressionEditor(host, opts) {
   }
   function flagValueBody(call) {
     const wrap = el("div", "exed-flat exed-flagvalue");
+    const ctx = buildCtx(call ?? boolLit(true));
     if (call) {
-      const ctx = buildCtx(call);
       call.args.forEach((arg, i) => {
         if (arg.kind === "flagdelta") wrap.append(renderNode(arg, ["args", i], ctx));
       });
-      wrap.append(addFlagChip(call));
-    } else {
-      wrap.append(addFlagChip(null));
     }
+    wrap.append(addFlagChip(ctx, call));
     return wrap;
   }
-  function addFlagChip(call) {
-    return button("exed-add exed-addflag", "+ flag", () => {
-      if (call) {
-        pendingFocus = ["args", call.args.length];
-        emit(toSrc({ ...call, args: [...call.args, flagDelta("+", "")] }));
-      } else {
-        const seeded = callNode("set_flags", [parseRef(opts.flagValue.target), flagDelta("+", "")]);
-        pendingFocus = ["args", 1];
-        emit(toSrc(seeded));
-      }
+  function addFlagChip(ctx, call) {
+    const flags = opts.flagValue?.flags ?? [];
+    const used = call ? call.args.filter((a) => a.kind === "flagdelta").map((a) => a.name) : [];
+    const available = flags.filter((f) => !used.includes(f));
+    return button("exed-add exed-addflag", "+ flag", (e) => {
+      const anchor = e.currentTarget;
+      ctx.openPopover(anchor, (close) => {
+        let sign = "+";
+        const wrap = el("div", "exed-menu");
+        wrap.append(el("div", "exed-menu-head", ["Add flag"]));
+        const signHost = el("div");
+        const drawSign = () => {
+          signHost.replaceChildren(signToggle(sign, (s) => {
+            sign = s;
+            drawSign();
+          }));
+        };
+        drawSign();
+        wrap.append(signHost);
+        const commit = (name) => {
+          const delta = flagDelta(sign, name);
+          emit(toSrc(call ? { ...call, args: [...call.args, delta] } : callNode("set_flags", [parseRef(opts.flagValue.target), delta])));
+          close();
+        };
+        if (available.length) {
+          for (const n of available) wrap.append(button("exed-opt", n, () => commit(n)));
+        } else {
+          wrap.append(el("div", "exed-hint", [flags.length === 0 ? "This flags property declares no flag values yet." : "All declared flags are already used."]));
+        }
+        return wrap;
+      });
     }, "add a flag");
   }
   function addTermControl(ctx) {