@things-factory/figure-ui 10.1.73 → 10.1.74

package/client/modeller/v3-editor.ts

@@ -7,7 +7,7 @@ import { live } from 'lit/directives/live.js'
 import { PART_LIMIT, parseV3Recipe, resolveV3Recipe, v3PartCountOf, v3RecipeIdFor } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './v3-recipes.js'
 import './figure-v3-recipe-catalog.js'
-import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation, V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
+import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation, V3ProposalStep, V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
 import { captureV3Thumbnail } from './v3-thumbnail.js'
 import { drawableV3Parts } from './v3-renderer.js'
@@ -269,6 +269,8 @@ export class FigureV3Editor extends LitElement {
   /** Reads a template's guide; given by the page. */
   @property({ attribute: false }) guideOf?: (name: string) => Promise<string>
   @property({ attribute: false }) thumbnailOf?: (name: string) => string
+  /** The 「보드에서 바꿀 수 있음」 form being filled for a row, before it is published (ADR-0096). */
+  @state() private publishing?: { part: string; label: string; min: number; max: number }
   @state() private catalogOpen = false
   /** Why the last recipe was refused, in the kernel's words. */
   @state() private recipeError = ''
@@ -1040,6 +1042,7 @@ export class FigureV3Editor extends LitElement {
             })
           : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
       </p>
+      ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
       ${asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
         ? html`<button act ?disabled=${unavailable} @click=${() => this.run(() => this.session!.command({ kind: 'remove-repeat', part: this.selected }))}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-repeat')}
@@ -1047,6 +1050,80 @@ export class FigureV3Editor extends LitElement {
         : nothing}
     </section>`
   }
+  /** The design input a row's pitch is read from, when it is read from one (ADR-0096). */
+  private pitchInputOf(asset: V3Asset, part: string): string | undefined {
+    const pitch = asset.joints?.find(j => j.body1.part === part && j.repeat)?.repeat?.pitch as { from?: { of?: string; input?: string } } | number | undefined
+    return typeof pitch === 'object' && pitch?.from?.of === 'input' ? pitch.from.input : undefined
+  }
+  /**
+   * 「보드에서 바꿀 수 있음」 (ADR-0096): the row's pitch made a design input the figure publishes -- a name on the board and
+   * a range the board's value is held to -- in one step; changed or withdrawn the same way. Only a row with a record.
+   */
+  private renderPublicPitch(asset: V3Asset, pitch: number, unavailable: boolean) {
+    const part = this.selected
+    if (!asset.joints?.some(j => j.body1.part === part && j.repeat)) return nothing
+    const from = this.pitchInputOf(asset, part)
+    const listed = from ? asset.publicInputs?.find(p => p.input === from) : undefined
+    const input = from ? asset.document.model.inputs.find(i => i.id === from) : undefined
+    const form =
+      this.publishing?.part === part
+        ? this.publishing
+        : listed && input
+          ? { part, label: listed.label, min: input.min, max: input.max }
+          : undefined
+    const open = !!form
+    const edit = (key: 'label' | 'min' | 'max') => (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const base = form ?? { part, label: '', min: 0, max: 0 }
+      this.publishing = { ...base, [key]: key === 'label' ? target.value : target.valueAsNumber }
+    }
+    const steps = (): V3ProposalStep[] => {
+      const f = form!
+      const id = from ?? `${part}.pitch`
+      if (listed) return [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }, { kind: 'publish-input', input: id, label: f.label }] as V3ProposalStep[]
+      const exists = asset.document.model.inputs.some(i => i.id === id)
+      return [
+        ...(exists ? [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }] : [{ kind: 'add-design-input', id, unit: 'mm', min: f.min, max: f.max, value: pitch }]),
+        ...(from ? [] : [{ kind: 'set-repeat', part, pitch: { from: { of: 'input', input: id } } }]),
+        { kind: 'publish-input', input: id, label: f.label }
+      ] as V3ProposalStep[]
+    }
+    const run = (list: V3ProposalStep[]) => {
+      try {
+        this.session!.applyRecipe(list)
+        this.publishing = undefined
+        this.error = ''
+        this.changed()
+      } catch (error) {
+        this.error = error instanceof Error ? error.message : String(error)
+      }
+    }
+    return html`<div public-pitch>
+      <label toggle>
+        <input
+          type="checkbox"
+          aria-label="figure.label.board-sets"
+          .checked=${open}
+          ?disabled=${unavailable}
+          @change=${(e: Event) =>
+            (e.target as HTMLInputElement).checked
+              ? (this.publishing = { part, label: i18next.t('figure.label.repeat-gap'), min: Math.max(1, Math.round(pitch / 2)), max: Math.round(pitch * 2) })
+              : listed
+                ? run([{ kind: 'unpublish-input', input: from }, { kind: 'set-repeat', part, pitch }] as V3ProposalStep[])
+                : (this.publishing = undefined)}
+        />
+        ${i18next.t('figure.label.board-sets')}
+      </label>
+      ${open
+        ? html`<div inline-field><label>${i18next.t('figure.label.board-name')}</label><input aria-label="figure.label.board-name" .value=${form!.label} @change=${edit('label')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form!.min)} @change=${edit('min')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form!.max)} @change=${edit('max')} /></div>
+            <button act publish-pitch ?disabled=${unavailable || !form!.label.trim()} @click=${() => run(steps())}>
+              <md-icon>${listed ? 'check' : 'ios_share'}</md-icon>${i18next.t(listed ? 'figure.button.apply' : 'figure.button.publish-input')}
+            </button>`
+        : nothing}
+    </div>`
+  }
   /**
    * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
    * which a plain input edit would not. Refused only when the authored length would already hold more copies than
@@ -1056,6 +1133,13 @@ export class FigureV3Editor extends LitElement {
     const input = event.target as HTMLInputElement
     const pitch = input.valueAsNumber
     if (!Number.isFinite(pitch) || pitch === field.value) return
+    /* Read from a design input the board may set: the input's value changes, the row keeps reading it (ADR-0096). */
+    const from = this.pitchInputOf(JSON.parse(this.session!.source()) as V3Asset, this.selected)
+    if (from) {
+      this.run(() => this.session!.apply([{ kind: 'set-design', input: from, unit: 'mm', value: pitch }]))
+      input.value = String(this.session!.read().fields.find(i => i.id === from)?.value ?? field.value)
+      return
+    }
     try {
       this.session!.command({ kind: 'set-repeat', part: this.selected, pitch })
       this.error = ''

package/dist-client/modeller/v3-editor.d.ts

@@ -23,6 +23,8 @@ export declare class FigureV3Editor extends LitElement {
     /** Reads a template's guide; given by the page. */
     guideOf?: (name: string) => Promise<string>;
     thumbnailOf?: (name: string) => string;
+    /** The 「보드에서 바꿀 수 있음」 form being filled for a row, before it is published (ADR-0096). */
+    private publishing?;
     private catalogOpen;
     /** Why the last recipe was refused, in the kernel's words. */
     private recipeError;
@@ -168,6 +170,13 @@ export declare class FigureV3Editor extends LitElement {
      * time); a row of a fixed count says its pitch cannot be set yet (figure-model refuses it the same way).
      */
     private renderRepeat;
+    /** The design input a row's pitch is read from, when it is read from one (ADR-0096). */
+    private pitchInputOf;
+    /**
+     * 「보드에서 바꿀 수 있음」 (ADR-0096): the row's pitch made a design input the figure publishes -- a name on the board and
+     * a range the board's value is held to -- in one step; changed or withdrawn the same way. Only a row with a record.
+     */
+    private renderPublicPitch;
     /**
      * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
      * which a plain input edit would not. Refused only when the authored length would already hold more copies than

package/dist-client/modeller/v3-editor.js

@@ -1049,6 +1049,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             })
             : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
       </p>
+      ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
       ${asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
             ? html `<button act ?disabled=${unavailable} @click=${() => this.run(() => this.session.command({ kind: 'remove-repeat', part: this.selected }))}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-repeat')}
@@ -1056,6 +1057,81 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             : nothing}
     </section>`;
     }
+    /** The design input a row's pitch is read from, when it is read from one (ADR-0096). */
+    pitchInputOf(asset, part) {
+        const pitch = asset.joints?.find(j => j.body1.part === part && j.repeat)?.repeat?.pitch;
+        return typeof pitch === 'object' && pitch?.from?.of === 'input' ? pitch.from.input : undefined;
+    }
+    /**
+     * 「보드에서 바꿀 수 있음」 (ADR-0096): the row's pitch made a design input the figure publishes -- a name on the board and
+     * a range the board's value is held to -- in one step; changed or withdrawn the same way. Only a row with a record.
+     */
+    renderPublicPitch(asset, pitch, unavailable) {
+        const part = this.selected;
+        if (!asset.joints?.some(j => j.body1.part === part && j.repeat))
+            return nothing;
+        const from = this.pitchInputOf(asset, part);
+        const listed = from ? asset.publicInputs?.find(p => p.input === from) : undefined;
+        const input = from ? asset.document.model.inputs.find(i => i.id === from) : undefined;
+        const form = this.publishing?.part === part
+            ? this.publishing
+            : listed && input
+                ? { part, label: listed.label, min: input.min, max: input.max }
+                : undefined;
+        const open = !!form;
+        const edit = (key) => (e) => {
+            const target = e.target;
+            const base = form ?? { part, label: '', min: 0, max: 0 };
+            this.publishing = { ...base, [key]: key === 'label' ? target.value : target.valueAsNumber };
+        };
+        const steps = () => {
+            const f = form;
+            const id = from ?? `${part}.pitch`;
+            if (listed)
+                return [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }, { kind: 'publish-input', input: id, label: f.label }];
+            const exists = asset.document.model.inputs.some(i => i.id === id);
+            return [
+                ...(exists ? [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }] : [{ kind: 'add-design-input', id, unit: 'mm', min: f.min, max: f.max, value: pitch }]),
+                ...(from ? [] : [{ kind: 'set-repeat', part, pitch: { from: { of: 'input', input: id } } }]),
+                { kind: 'publish-input', input: id, label: f.label }
+            ];
+        };
+        const run = (list) => {
+            try {
+                this.session.applyRecipe(list);
+                this.publishing = undefined;
+                this.error = '';
+                this.changed();
+            }
+            catch (error) {
+                this.error = error instanceof Error ? error.message : String(error);
+            }
+        };
+        return html `<div public-pitch>
+      <label toggle>
+        <input
+          type="checkbox"
+          aria-label="figure.label.board-sets"
+          .checked=${open}
+          ?disabled=${unavailable}
+          @change=${(e) => e.target.checked
+            ? (this.publishing = { part, label: i18next.t('figure.label.repeat-gap'), min: Math.max(1, Math.round(pitch / 2)), max: Math.round(pitch * 2) })
+            : listed
+                ? run([{ kind: 'unpublish-input', input: from }, { kind: 'set-repeat', part, pitch }])
+                : (this.publishing = undefined)}
+        />
+        ${i18next.t('figure.label.board-sets')}
+      </label>
+      ${open
+            ? html `<div inline-field><label>${i18next.t('figure.label.board-name')}</label><input aria-label="figure.label.board-name" .value=${form.label} @change=${edit('label')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form.min)} @change=${edit('min')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form.max)} @change=${edit('max')} /></div>
+            <button act publish-pitch ?disabled=${unavailable || !form.label.trim()} @click=${() => run(steps())}>
+              <md-icon>${listed ? 'check' : 'ios_share'}</md-icon>${i18next.t(listed ? 'figure.button.apply' : 'figure.button.publish-input')}
+            </button>`
+            : nothing}
+    </div>`;
+    }
     /**
      * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
      * which a plain input edit would not. Refused only when the authored length would already hold more copies than
@@ -1066,6 +1142,13 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         const pitch = input.valueAsNumber;
         if (!Number.isFinite(pitch) || pitch === field.value)
             return;
+        /* Read from a design input the board may set: the input's value changes, the row keeps reading it (ADR-0096). */
+        const from = this.pitchInputOf(JSON.parse(this.session.source()), this.selected);
+        if (from) {
+            this.run(() => this.session.apply([{ kind: 'set-design', input: from, unit: 'mm', value: pitch }]));
+            input.value = String(this.session.read().fields.find(i => i.id === from)?.value ?? field.value);
+            return;
+        }
         try {
             this.session.command({ kind: 'set-repeat', part: this.selected, pitch });
             this.error = '';
@@ -1353,6 +1436,10 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
 ], FigureV3Editor.prototype, "thumbnailOf", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "publishing", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)