@things-factory/figure-ui 10.1.181 → 10.1.185

package/client/modeller/figure-fasten-dialog.ts

@@ -0,0 +1,457 @@
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import '@operato/input/ox-input-select-buttons.js'
+import '@operato/popup/ox-popup-actions.js'
+import { CommonPopupStyles } from '@operato/styles'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
+
+import './figure-fasten-drawing.js'
+import type { FastenChange } from './figure-fasten-drawing.js'
+import { turnsInPlace, type FastenMode } from './fasten-geometry.js'
+import {
+  aimFasten,
+  fastenChanged,
+  fastenDetailWordsOf,
+  fastenFormOf,
+  fastenPlanOf,
+  fastenSentenceOf,
+  fastenTargetsOf,
+  type FastenForm
+} from './fasten-form.js'
+import { fieldWordsOf, hasInstanceSize, heldBy, type Alignment, type Axis } from './links.js'
+import type { FigureRevision } from './revision.js'
+
+/** The target list's entry for the plane the figure stands by. */
+const PLANE = '__plane'
+
+/**
+ * 붙이기 창: what the selected part is fastened to, on which face, how -- chosen with room to see it, in the standard
+ * popup the editor opens (`openPopup`: its title, its close, moved by its head) (user 2026-10-17: 「속성에는 심플하고
+ * 직관적인 결과 위주로, 편집은 팝업에서 넓은 공간을 써서」; 2026-10-18: the standard popup, not a window of its own).
+ *
+ * Everything chosen here is tried, not done: the command it comes to is told to the editor as it changes
+ * (`preview-command`), and the canvas draws it. 「적용」 sends it once (`fasten-apply`), one step of the history;
+ * 「취소」 and Esc close it with nothing written (`fasten-cancel`). A row of the target list under the pointer or the
+ * arrows asks the canvas to light that part (`fasten-hover`). The window is the only one telling the preview while it
+ * is open; the editor keeps the panel quiet.
+ */
+@customElement('figure-fasten-dialog')
+export class FigureFastenDialog extends localize(i18next)(LitElement) {
+  static styles = [
+    SidePanelStyles,
+    CommonPopupStyles,
+    css`
+      :host {
+        display: grid;
+        gap: 16px;
+        padding: var(--popup-padding, 16px);
+        overflow: auto;
+      }
+      /* The result in one line, at the top: it changes with every choice below it. */
+      p[fasten-sentence] {
+        margin: 0;
+        font-size: var(--ui-t-body, 13px);
+        font-weight: 600;
+      }
+      div[question] {
+        display: grid;
+        align-content: start;
+        gap: 6px;
+      }
+      h4 {
+        margin: 0;
+        font-size: var(--ui-t-small, 11.5px);
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      /* The chips are part names, identifiers: shown as they are written, not capitalized as filter words are. */
+      ox-input-select-buttons {
+        --ox-input-select-buttons-label-text-transform: none;
+      }
+      p[loops] {
+        margin: 0;
+      }
+      details[fasten-detail] {
+        margin: 0;
+      }
+      details[fasten-detail] > div[form] {
+        margin-top: 8px;
+        max-width: 320px;
+      }
+      span[fasten-summary] {
+        opacity: 0.8;
+      }
+      ul[preview-words] {
+        margin: 0;
+        padding: 8px 12px 8px 26px;
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container, #8881);
+        display: grid;
+        gap: 4px;
+      }
+      p[preview-words] {
+        margin: 0;
+        padding: 8px 12px;
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container, #8881);
+      }
+      p[error] {
+        margin: 0;
+        color: var(--md-sys-color-error);
+      }
+    `
+  ]
+
+  /** The figure at the version on screen. */
+  @property({ attribute: false }) revision?: FigureRevision
+  /** The part being fastened. */
+  @property() partId = ''
+  @property({ type: Boolean }) locked = false
+  /** What the command would do, in words (the editor works it out: `command-preview.ts`). */
+  @property({ attribute: false }) previewWords: string[] = []
+  /** Why the last 「적용」 was refused, in the editor's words. */
+  @property() error = ''
+
+  @state() private form?: FastenForm
+  /** The command the part's own fastening comes to, as opened: tried unchanged, nothing new is said of it. */
+  private opened?: string
+  private told = ''
+  private loadedFor?: string
+  private hovered: string | null = null
+
+  willUpdate() {
+    /* Opened on what the part has now; another part is another window's. */
+    if (this.revision && this.partId && this.partId !== this.loadedFor) {
+      this.loadedFor = this.partId
+      this.form = fastenFormOf(this.revision, this.partId)
+      this.opened = JSON.stringify(fastenPlanOf(this.revision, this.partId, this.form).action ?? null)
+    }
+  }
+
+  async firstUpdated() {
+    /* Into the list, on what is chosen, so the arrows go from there. */
+    const list = this.renderRoot.querySelector<HTMLElement & { updateComplete?: Promise<unknown> }>(
+      'ox-input-select-buttons'
+    )
+    await list?.updateComplete
+    const chips = list?.shadowRoot?.querySelectorAll<HTMLElement>('md-filter-chip')
+    ;([...(chips ?? [])].find(c => c.hasAttribute('selected')) ?? chips?.[0])?.focus()
+  }
+
+  updated() {
+    const plan = this.revision && this.form ? fastenPlanOf(this.revision, this.partId, this.form) : undefined
+    const candidate = plan?.action ? { action: plan.action, ...(plan.face ? { face: plan.face } : {}) } : null
+    const said = JSON.stringify(candidate)
+    if (said === this.told) return
+    this.told = said
+    this.dispatchEvent(new CustomEvent('preview-command', { detail: candidate, bubbles: true, composed: true }))
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    /* Closed: what it showed goes with it. */
+    if (this.told && this.told !== 'null')
+      this.dispatchEvent(new CustomEvent('preview-command', { detail: null, bubbles: true, composed: true }))
+    this.told = ''
+    this.hover(null)
+  }
+
+  render() {
+    const revision = this.revision
+    const f = this.form
+    if (!revision || !f) return nothing
+    const asset = revision.asset
+    const held = !!heldBy(asset, this.partId)
+    const plan = fastenPlanOf(revision, this.partId, f)
+    const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'))
+    const modes: FastenMode[] = f.toPlane
+      ? ['meet']
+      : ['meet', 'flush', ...(turnsInPlace(asset, this.partId) ? (['centre'] as FastenMode[]) : [])]
+    const detail = fastenDetailWordsOf(f, (key, params) => i18next.t(key, params))
+    const drawing = (show: 'face' | 'how') =>
+      html`<figure-fasten-drawing
+        show=${show}
+        .target=${f.toPlane ? '' : f.target}
+        .planeWord=${planeWord}
+        .faces=${plan.theirFaces}
+        .face=${plan.targetFace}
+        .modes=${modes}
+        .mode=${plan.mode}
+        .view=${plan.view}
+        .align=${f.align}
+        .alignMm=${f.alignMm}
+        .gap=${f.gap}
+        .partName=${this.partId}
+        ?locked=${this.locked}
+        @fasten-change=${(e: CustomEvent<FastenChange>) => (this.form = fastenChanged(revision, this.partId, this.form!, e.detail))}
+      ></figure-fasten-drawing>`
+    return html`
+      ${
+        plan.aim
+          ? html`<p fasten-sentence role="status">
+              ${fastenSentenceOf(this.partId, f, plan, planeWord, (key, params) => i18next.t(key, params))}
+            </p>`
+          : html`<p hint fasten-sentence>${i18next.t('figure.text.fasten-target-first')}</p>`
+      }
+      <div question="what">
+        <h4 id="what">${i18next.t('figure.label.fasten-what')}</h4>
+        ${this.renderTargets(revision, f, planeWord)}
+      </div>
+      ${
+        plan.aim
+          ? html`<div question="face">
+                <h4>
+                  ${
+                    /* The face asked is the target's, named: the part's own face follows from it. */ f.toPlane
+                      ? i18next.t('figure.label.fasten-face-on-plane', { plane: planeWord })
+                      : i18next.t('figure.label.fasten-face-on-part', { part: f.target })
+                  }
+                </h4>
+                ${drawing('face')}
+              </div>
+              ${
+                modes.length > 1
+                  ? html`<div question="how">
+                      <h4>${i18next.t('figure.label.fasten-how')}</h4>
+                      ${drawing('how')}
+                    </div>`
+                  : nothing
+              }
+              <div question="detail">
+                <details fasten-detail>
+                  <summary>
+                    ${i18next.t('figure.label.fasten-detail')}${detail.length ? html` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}
+                  </summary>
+                  ${plan.alignRows.length ? this.renderAlignment(plan.alignRows) : nothing}
+                  <div form>
+                    <span>${i18next.t('figure.label.gap')}</span>
+                    <input
+                      gap
+                      type="number"
+                      step="any"
+                      .value=${f.gapKept !== undefined ? '' : String(f.gap)}
+                      placeholder=${f.gapKept !== undefined ? i18next.t('figure.label.follows-expression') : ''}
+                      @change=${(e: Event) => this.set({ gap: Number((e.target as HTMLInputElement).value) || 0, gapKept: undefined })}
+                    />
+                    <span>${i18next.t('figure.label.twist')}</span>
+                    <input
+                      twist
+                      type="number"
+                      step="any"
+                      .value=${String(f.twist)}
+                      @change=${(e: Event) => this.set({ twist: Number((e.target as HTMLInputElement).value) || 0 })}
+                    />
+                  </div>
+                </details>
+              </div>
+              ${/* The one it has, tried unchanged: that it stays where it is goes without saying. */ JSON.stringify(plan.action ?? null) === this.opened ? nothing : this.renderPreviewWords()}`
+          : nothing
+      }
+      ${this.error ? html`<p error role="alert">${this.error}</p>` : nothing}
+      <ox-popup-actions>
+        <md-text-button slot="cancel" cancel @click=${this.cancel}>${i18next.t('figure.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" apply ?disabled=${this.locked || !plan.action} @click=${this.apply}>
+          ${i18next.t(held ? 'figure.button.apply' : 'figure.button.fasten')}
+        </md-filled-button>
+      </ox-popup-actions>
+    `
+  }
+
+  /**
+   * What to fasten to: the plane and the other parts, as the standard choice chips. The arrows move among them and
+   * the canvas lights the part under the focus or the pointer; a part hanging from this one is not offered, and why is
+   * said under them.
+   */
+  private renderTargets(revision: FigureRevision, f: FastenForm, planeWord: string) {
+    const chosen = f.toPlane ? PLANE : f.target
+    const targets = fastenTargetsOf(revision, this.partId)
+    const chipOf = (e: Event) =>
+      (e.composedPath().find(n => (n as Element).localName === 'md-filter-chip') as Element | undefined)?.getAttribute(
+        'data-value'
+      ) ?? null
+    return html`<ox-input-select-buttons
+        targets
+        aria-labelledby="what"
+        .options=${[{ value: PLANE, display: planeWord }, ...targets.filter(t => !t.loops).map(t => ({ value: t.part, display: t.part }))]}
+        .value=${chosen || undefined}
+        ?disabled=${this.locked}
+        @change=${(e: CustomEvent) => {
+          /* A chip pressed again lets go of it; what to fasten to is always one thing once chosen. */
+          if (e.detail) this.aim(e.detail)
+          else (e.target as HTMLElement & { value?: string }).value = chosen || undefined
+        }}
+        @pointerover=${(e: Event) => this.hover(chipOf(e))}
+        @pointerleave=${() => this.hover(null)}
+        @focusin=${(e: Event) => this.hover(chipOf(e))}
+        @keyup=${(e: KeyboardEvent) => {
+          /* The arrows move the focus among the chips inside the list, which tells nothing outside it: read where it is. */
+          const at = (e.currentTarget as Element).shadowRoot?.activeElement
+          if (at?.localName === 'md-filter-chip') this.hover(at.getAttribute('data-value'))
+        }}
+      ></ox-input-select-buttons>
+      ${this.renderLoops(targets.filter(t => t.loops).map(t => t.part))}`
+  }
+
+  /**
+   * The parts that hang from this one, in one line: a line each made a list longer than the chips (2026-10-18, :3300,
+   * the robot arm's forearm and the six parts it carries).
+   */
+  private renderLoops(parts: string[]) {
+    if (!parts.length) return nothing
+    return html`<p hint loops targets=${parts.join(',')}>
+      ${i18next.t('figure.text.target-would-loop', { part: parts.join(', '), mine: this.partId })}
+    </p>`
+  }
+
+  private aim(part: string) {
+    if (this.locked || !this.revision || !this.form) return
+    const chosen = this.form.toPlane ? PLANE : this.form.target
+    if (part === chosen) return
+    this.form = aimFasten(this.revision, this.partId, this.form, part === PLANE ? { plane: true } : { part })
+  }
+
+  /** The part under the pointer or the focus in the list, for the canvas to light; the plane lights nothing. */
+  private hover(part: string | null) {
+    const lit = part && part !== PLANE ? part : null
+    if (lit === this.hovered) return
+    this.hovered = lit
+    const face =
+      lit && this.revision && this.form
+        ? fastenPlanOf(this.revision, this.partId, aimFasten(this.revision, this.partId, this.form, { part: lit }))
+            .targetFace
+        : undefined
+    this.dispatchEvent(
+      new CustomEvent('fasten-hover', { detail: lit ? { part: lit, face } : null, bubbles: true, composed: true })
+    )
+  }
+
+  private set(change: Partial<FastenForm>) {
+    this.form = { ...this.form!, ...change }
+  }
+
+  /**
+   * Where on the target face the part sits, on the axes the drawing cannot set: centred, level with the target's edge on
+   * either side, a distance off centre, a share of the figure's size, or the position field it follows.
+   */
+  private renderAlignment(axes: { axis: Axis; edges: boolean }[]) {
+    const f = this.form!
+    const set = (axis: Axis, how: Alignment) => this.set({ align: { ...f.align, [axis]: how } })
+    const setMm = (axis: Axis, mm: number) => this.set({ alignMm: { ...f.alignMm, [axis]: mm } })
+    return html`<div form>
+      ${axes.map(({ axis, edges }) => {
+        const how =
+          f.align[axis] === 'min' || f.align[axis] === 'max'
+            ? edges
+              ? f.align[axis]!
+              : 'centre'
+            : (f.align[axis] ?? 'centre')
+        return html`<span>${i18next.t('figure.label.align-' + axis)}</span>
+          <select @change=${(e: Event) => set(axis, (e.target as HTMLSelectElement).value as Alignment)}>
+            <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
+            ${
+              edges
+                ? html`<option value="min" ?selected=${how === 'min'}>
+                      ${i18next.t(`figure.label.align-${axis}-min`)}
+                    </option>
+                    <option value="max" ?selected=${how === 'max'}>
+                      ${i18next.t(`figure.label.align-${axis}-max`)}
+                    </option>`
+                : nothing
+            }
+            ${
+              f.alignInput?.[axis]
+                ? html`<option value="input" ?selected=${how === 'input'}>
+                    ${i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis]!, key => i18next.t(key)) })}
+                  </option>`
+                : nothing
+            }
+            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
+            ${
+              this.revision && hasInstanceSize(this.revision.asset, axis)
+                ? html`<option value="share" ?selected=${how === 'share'}>
+                    ${i18next.t('figure.label.align-share')}
+                  </option>`
+                : nothing
+            }
+          </select>
+          ${
+            how === 'mm' || how === 'share'
+              ? html`<span></span
+                  ><input
+                    type="number"
+                    step="any"
+                    aria-label=${i18next.t('figure.label.align-mm')}
+                    .value=${String(f.alignMm[axis] ?? 0)}
+                    @change=${(e: Event) => setMm(axis, Number((e.target as HTMLInputElement).value) || 0)}
+                  />`
+              : nothing
+          }`
+      })}
+    </div>`
+  }
+
+  private renderPreviewWords() {
+    if (this.previewWords.length === 1) return html`<p preview-words role="status">${this.previewWords[0]}</p>`
+    return this.previewWords.length
+      ? html`<ul preview-words role="status">
+          ${this.previewWords.map(line => html`<li>${line}</li>`)}
+        </ul>`
+      : nothing
+  }
+
+  /** Enter applies what is chosen, Esc closes with nothing written; a key the window does not take goes on. */
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('role', 'dialog')
+    this.setAttribute('aria-label', i18next.t('figure.label.fastening'))
+    this.addEventListener('keydown', this.onKey)
+    /* The popup's fitting width is the overlay's own setting; the window asks it for room for the face and the way side by side. */
+    this.closest<HTMLElement>('ox-floating-overlay')?.style.setProperty('--overlay-center-fit-width', '640px')
+  }
+
+  private onKey = async (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+      e.preventDefault()
+      this.cancel()
+      return
+    }
+    if (e.key !== 'Enter' || e.isComposing) return
+    const path = e.composedPath() as Element[]
+    const target = path[0] as HTMLElement
+    /* On a chip of the list Enter applies, as it does anywhere in the window; a chip is chosen by Space or a press. */
+    const onChip = path.some(n => n.localName === 'ox-input-select-buttons')
+    /* A button, a fold or a list of options does what Enter does to it. */
+    if (
+      !onChip &&
+      (target.localName === 'button' ||
+        target.localName === 'summary' ||
+        target.localName === 'select' ||
+        /^md-.*button$/.test(target.localName))
+    )
+      return
+    e.preventDefault()
+    e.stopPropagation()
+    /* A number typed and Enter: the number first, as leaving the field would take it. */
+    if (target.localName === 'input') target.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
+    await this.updateComplete
+    this.apply()
+  }
+
+  private apply = () => {
+    const plan = this.revision && this.form ? fastenPlanOf(this.revision, this.partId, this.form) : undefined
+    if (this.locked || !plan?.action) return
+    this.dispatchEvent(
+      new CustomEvent('fasten-apply', { detail: { action: plan.action }, bubbles: true, composed: true })
+    )
+  }
+
+  private cancel = () => {
+    this.dispatchEvent(new CustomEvent('fasten-cancel', { bubbles: true, composed: true }))
+  }
+}

package/client/modeller/figure-fasten-drawing.ts

@@ -29,6 +29,9 @@ const HIDDEN: Array<[FigureFace, number, number]> = [
   ['back', 236, 14]
 ]
 const PANEL_W = 300
+/* The face seen from above, beside the box in the fastening window: taller than the panel's was, for a long face's parts. */
+const WHERE_W = 360
+const WHERE_H = 200
 
 
 /**
@@ -41,7 +44,8 @@ const PANEL_W = 300
  * footprint on it: dragged, caught at the centre and at the edges from inside and outside, a guide drawn where it is
  * caught and a dimension where it is not, which is pressed to type the number. It may go past the edges: the part that
  * does is shaded, and a part off the face altogether is said so. Nothing is decided here: every change goes to the form
- * (`fasten-change`), and a press or a drag let go says so (`fasten-release`), for the form to apply a fastening it holds.
+ * (`fasten-change`), and a press or a drag let go says so (`fasten-release`). The window draws it twice, under its own
+ * questions: the face (`show="face"`: the box and the face seen from above, side by side) and the way (`show="how"`).
  */
 @customElement('figure-fasten-drawing')
 export class FigureFastenDrawing extends localize(i18next)(LitElement) {
@@ -62,31 +66,45 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     }
     div[modes] {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
       gap: 6px;
     }
     div[modes] svg {
-      width: 64px;
-      height: 44px;
+      width: 48px;
+      height: 33px;
     }
+    /* A choice drawn, not a box to press (the side's rule: no boxed buttons): the chosen one on the primary's ground. */
     div[modes] button {
       display: grid;
       justify-items: center;
       align-content: center;
       gap: 2px;
-      padding: 2px 4px 4px;
+      padding: 4px 4px 6px;
       font: inherit;
       color: var(--md-sys-color-on-surface);
       background: none;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 8px;
+      border: none;
+      border-radius: 6px;
       cursor: pointer;
     }
+    div[modes] button:hover:not([on]):not(:disabled) {
+      background: var(--md-sys-color-surface-container);
+    }
     div[modes] button[on] {
-      border: 1.5px solid var(--md-sys-color-primary);
       background: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
     }
+    /* The box and the face seen from above side by side, one under the other where the window is narrow. */
+    div[face-row] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 12px;
+      align-items: start;
+    }
+    div[face-row] > div {
+      display: grid;
+      gap: 8px;
+    }
     div[where] {
       position: relative;
     }
@@ -120,6 +138,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   @property({ type: Boolean }) locked = false
   /** The form already says how the fastening it has lies on the face: the drawing says it only while dragging. */
   @property({ type: Boolean }) said = false
+  /** Which of its questions it draws: the face, or the way. */
+  @property() show: 'face' | 'how' = 'face'
 
   /** Where the footprint is while dragging, and what it is caught by; undefined when nothing is dragged. */
   @state() private dragged?: { at: Record<Axis, number>; caught: Partial<Record<Axis, string>> }
@@ -135,7 +155,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   }
 
   render() {
-    return html`${this.renderTarget()}${this.renderModes()}${this.renderWhere()}`
+    if (this.show === 'how') return this.renderModes()
+    return html`<div face-row>${this.target ? html`<div>${this.renderTarget()}</div>` : nothing}<div>${this.renderWhere()}</div></div>`
   }
 
   /** The target box, its faces pressed; or the plane. */
@@ -248,8 +269,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const view = this.view
     if (!view) return nothing
     const { h, v, sign } = screenOf(view.axes)
-    const W = PANEL_W,
-      H = 180
+    const W = WHERE_W,
+      H = WHERE_H
     /* Room around the face for the part to go past its edges by about half itself; a plane with no size, three parts wide. */
     const span = (a: Axis) => (view.face[a] !== undefined ? view.face[a]! + view.part[a] : view.part[a] * 3)
     const k = Math.min((W - 40) / span(h), (H - 40) / span(v))