@things-factory/figure-ui 10.1.46 → 10.1.47

package/client/modeller/figure-v3-clips.ts

@@ -0,0 +1,253 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import type { V3Asset } from '@hatiolab/figure-model'
+
+import { clipsOf, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipTrack } from './v3-clips.js'
+import { SidePanelStyles } from './side-panel-styles.js'
+import { HelpToggles } from './v3-help.js'
+
+/**
+ * 클립 — V2's animations (parity row ⑥): controls played by keys over time. A clip is one clock; each track plays one
+ * control. Scrubbing a clip shows its pose at that moment (one batch of input changes, not saved as the default); a key
+ * is added at the scrubbed moment with the control's value there, so a pose is made with the controls' sliders and
+ * then kept as a key -- the way V2's recorder worked. Every change is one part edit.
+ */
+@customElement('figure-v3-clips')
+export class FigureV3Clips extends localize(i18next)(LitElement) {
+  private readonly help = new HelpToggles(this)
+  static styles = [SidePanelStyles, css`
+    :host {
+      display: block;
+    }
+    section[clip] {
+      display: grid;
+      gap: 8px;
+      padding: 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+    }
+    div[row] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 72px;
+      gap: 6px;
+      align-items: center;
+    }
+    div[track] {
+      display: grid;
+      gap: 4px;
+      padding-top: 6px;
+      border-top: 1px dashed var(--md-sys-color-outline-variant);
+    }
+    /*
+      The track's name on its own line, then how it repeats and the button that removes it. A flex row let the shared
+      full-width select and button squeeze the name to one letter a line (user, 2026-09-24).
+    */
+    div[track-head] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 30px;
+      gap: 4px 6px;
+      align-items: center;
+    }
+    div[track-head] strong {
+      grid-column: 1 / -1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+    div[track-head] button[act] {
+      width: 30px;
+      min-height: var(--figure-control-height);
+      margin: 0;
+      padding: 0;
+    }
+    div[keys] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    span[key] {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 0 2px 0 8px;
+      border-radius: 999em;
+      background: var(--md-sys-color-surface-container);
+      font-variant-numeric: tabular-nums;
+    }
+    span[key] button {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border: none;
+      background: none;
+    }
+    md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+  `]
+
+  @property({ attribute: false }) asset?: V3Asset
+  /** The values the editor holds now, by input id -- what a new key takes. */
+  @property({ attribute: false }) values: Record<string, number> = {}
+  @property({ type: Boolean }) locked = false
+
+  /** Where each clip is scrubbed to, in seconds. */
+  @state() private at: Record<string, number> = {}
+  @state() private adding = { state: '', clip: '', name: '', duration: 2 }
+
+  render() {
+    const asset = this.asset
+    if (!asset) return nothing
+    const clips = clipsOf(asset)
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.clips')}${this.help.button('figure.text.clips-explained')}</h3>
+        ${this.help.hint('figure.text.clips-explained')}
+        ${clips.map(clip => this.renderClip(clip))}
+      </section>
+      ${this.renderAdd(asset, clips)}
+    `
+  }
+
+  private renderClip(clip: Clip) {
+    const at = Math.min(this.at[clip.name] ?? 0, clip.duration)
+    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber
+    return html`<section clip>
+      <div form>
+        <span>${i18next.t('figure.label.clip-name')}</span>
+        <input .value=${clip.name} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, name: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.clip-duration')}</span>
+        <input type="number" min="0.1" step="any" .value=${String(clip.duration)} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, duration: number(e) })} />
+      </div>
+      <div row>
+        <input
+          type="range"
+          min="0"
+          max=${clip.duration}
+          step=${clip.duration / 100}
+          .value=${String(at)}
+          ?disabled=${this.locked}
+          aria-label=${i18next.t('figure.label.clip-time')}
+          @input=${(e: Event) => this.scrub(clip, number(e), true)}
+          @change=${(e: Event) => this.scrub(clip, number(e))}
+        />
+        <small>${at.toFixed(2)} s</small>
+      </div>
+      ${clip.tracks.map(track => this.renderTrack(clip, track, at))}
+    </section>`
+  }
+
+  private renderTrack(clip: Clip, track: ClipTrack, at: number) {
+    const current = this.values[track.state]
+    return html`<div track>
+      <div track-head>
+        <strong>${track.label} <small>(${track.unit})</small></strong>
+        <select
+          aria-label=${i18next.t('figure.label.clip-loop')}
+          ?disabled=${this.locked}
+          @change=${(e: Event) => this.edit(trackEdit(clip, track, { loop: (e.target as HTMLSelectElement).value as 'wrap' | 'hold' }))}
+        >
+          <option value="wrap" ?selected=${track.loop === 'wrap'}>${i18next.t('figure.label.clip-loop-wrap')}</option>
+          <option value="hold" ?selected=${track.loop === 'hold'}>${i18next.t('figure.label.clip-loop-hold')}</option>
+        </select>
+        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-track')} @click=${() => this.edit({ kind: 'remove-driver', state: track.state })}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+      <div keys>
+        ${track.keys.map(
+          (key, i) => html`<span key
+            >${key.seconds}s → ${key.value}
+            <button
+              ?disabled=${this.locked || !withoutKey(track.keys, i)}
+              title=${i18next.t('figure.button.remove-key')}
+              aria-label=${i18next.t('figure.button.remove-key')}
+              @click=${() => this.edit(trackEdit(clip, track, { keys: withoutKey(track.keys, i)! }))}
+            >
+              <md-icon>close</md-icon>
+            </button></span
+          >`
+        )}
+      </div>
+      <button
+        act
+        ?disabled=${this.locked || current === undefined}
+        @click=${() => this.edit(trackEdit(clip, track, { keys: withKey(track.keys, { seconds: Math.round(at * 1000) / 1000, value: current! }) }))}
+      >
+        <md-icon>add</md-icon>${i18next.t('figure.button.add-key-here', { seconds: at.toFixed(2), value: current ?? '' })}
+      </button>
+    </div>`
+  }
+
+  private renderAdd(asset: V3Asset, clips: Clip[]) {
+    const free = undrivenOf(asset)
+    if (!free.length) return clips.length ? nothing : html`<p hint>${i18next.t('figure.text.no-controls')}</p>`
+    const a = this.adding
+    const stateId = free.includes(a.state) ? a.state : free[0]!
+    const joining = clips.find(c => c.name === a.clip)
+    const name = joining ? joining.name : a.name.trim()
+    const input = asset.document.model.inputs.find(i => i.id === stateId)!
+    const duration = joining ? joining.duration : a.duration
+    const ready = !!name && duration > 0
+    return html`<section><h3>${i18next.t('figure.label.add-track')}</h3>
+      <div form>
+        <span>${i18next.t('figure.label.controls')}</span>
+        <select @change=${(e: Event) => (this.adding = { ...a, state: (e.target as HTMLSelectElement).value })}>
+          ${free.map(id => html`<option value=${id} ?selected=${id === stateId}>${asset.stateInputs?.[id]?.label ?? id}</option>`)}
+        </select>
+        <span>${i18next.t('figure.label.clip')}</span>
+        <select @change=${(e: Event) => (this.adding = { ...a, clip: (e.target as HTMLSelectElement).value })}>
+          <option value="" ?selected=${!joining}>${i18next.t('figure.label.new-clip')}</option>
+          ${clips.map(c => html`<option value=${c.name} ?selected=${c === joining}>${c.name}</option>`)}
+        </select>
+        ${joining
+          ? nothing
+          : html`<span>${i18next.t('figure.label.clip-name')}</span>
+              <input .value=${a.name} placeholder="cycle" @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })} />
+              <span>${i18next.t('figure.label.clip-duration')}</span>
+              <input type="number" min="0.1" step="any" .value=${String(a.duration)} @change=${(e: Event) => (this.adding = { ...a, duration: (e.target as HTMLInputElement).valueAsNumber })} />`}
+      </div>
+      <button
+        act
+        ?disabled=${this.locked || !ready}
+        @click=${() =>
+          this.edit({
+            kind: 'set-driver',
+            state: stateId,
+            clip: name,
+            ...(joining ? {} : { duration }),
+            keys: [
+              { seconds: 0, value: input.min },
+              { seconds: duration, value: input.max }
+            ]
+          })}
+      >
+        <md-icon>add</md-icon>${i18next.t('figure.button.add-track')}
+      </button></section>`
+  }
+
+  /** Show the clip's pose at a moment: one batch of input changes, not saved as the default. */
+  /** Show the clip's pose at a moment. While the bar is dragged the pose is live (drawn, not recorded); the release
+   * applies it as one batch of input changes. */
+  private scrub(clip: Clip, seconds: number, live = false) {
+    if (!this.asset || !Number.isFinite(seconds)) return
+    this.at = { ...this.at, [clip.name]: seconds }
+    const changes = poseAt(this.asset, clip.name, seconds)
+    if (!changes.length) return
+    if (live) {
+      const values = Object.fromEntries(changes.map(c => [c.input, c.value]))
+      this.dispatchEvent(new CustomEvent('v3-states-live', { detail: { values }, bubbles: true, composed: true }))
+      return
+    }
+    this.dispatchEvent(new CustomEvent('v3-states', { detail: { changes }, bubbles: true, composed: true }))
+  }
+
+  private edit(edit: unknown) {
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/figure-v3-controls.ts

@@ -0,0 +1,212 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import type { V3Asset } from '@hatiolab/figure-model'
+
+import { controlsOf, poseAsDefault, poseDiffers, type Control } from './v3-controls.js'
+import { dialShape } from './angle-dial.js'
+import { SidePanelStyles } from './side-panel-styles.js'
+
+/**
+ * The figure's controls (parity row ⑥, V2's parameters and its pose tools): each value a board sets to pose the figure,
+ * with a slider to try it, its name, range and travel time, and a button that keeps the pose being looked at as the
+ * pose it stands in when placed.
+ *
+ * Trying a value is an input change (`v3-state`, not saved as the default); naming, the range and the travel time are
+ * one `set-state-input` part edit each; keeping the pose is one `set-state-defaults` edit. A control is made with
+ * a motion on a part (「움직임」), which is where it gets its meaning.
+ */
+@customElement('figure-v3-controls')
+export class FigureV3Controls extends localize(i18next)(LitElement) {
+  static styles = [SidePanelStyles, css`
+    :host {
+      display: block;
+    }
+    /* One control, one line: its name, a dial for an angle, a thin slider, the value (V2's preview row). */
+    div[control] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 18px minmax(64px, 1.2fr) 58px 22px;
+      align-items: center;
+      gap: 6px;
+      min-height: 28px;
+    }
+    div[control] > span[name] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    div[control] > span[name] em {
+      font-style: normal;
+      font-size: 0.64rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    div[control] input[type='number'] {
+      min-height: 24px;
+      padding: 2px 5px;
+      font-family: var(--mono-font, monospace);
+      text-align: right;
+    }
+    svg[dial] {
+      width: 18px;
+      height: 18px;
+    }
+    svg[dial] path {
+      fill: var(--md-sys-color-surface-container-high);
+    }
+    svg[dial] circle {
+      fill: none;
+      stroke: var(--md-sys-color-outline-variant);
+    }
+    svg[dial] line {
+      stroke: var(--md-sys-color-primary);
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+    button[more] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: none;
+      color: var(--md-sys-color-on-surface-variant);
+      cursor: pointer;
+    }
+    button[more][aria-expanded='true'] {
+      color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-surface-container);
+    }
+    button[more] md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    /* The rarely changed: the name, the range, the travel time -- opened per control. */
+    div[settings] {
+      margin: 2px 0 8px;
+      padding: 6px 0 6px 8px;
+      border-left: 2px solid var(--md-sys-color-outline-variant);
+    }
+  `]
+
+  /** The asset being edited. */
+  @property({ attribute: false }) asset?: V3Asset
+  /** The values the editor holds now, by input id. */
+  @property({ attribute: false }) values: Record<string, number> = {}
+  @property({ type: Boolean }) locked = false
+
+  /** Which control's settings are open. */
+  @state() private open = ''
+  /** Values in hand while a slider is dragged: the dial and the number follow them before the release commits. */
+  @state() private live: Record<string, number> = {}
+
+  render() {
+    if (!this.asset) return nothing
+    const controls = controlsOf(this.asset, this.values)
+    return html`<section>
+      <h3>${i18next.t('figure.label.controls')}</h3>
+      ${controls.length
+        ? html`${controls.map(control => this.renderControl(control))}
+            <button act ?disabled=${this.locked || !poseDiffers(controls)} @click=${() => this.edit(poseAsDefault(controls))}>
+              <md-icon>push_pin</md-icon>${i18next.t('figure.button.keep-pose')}
+            </button>`
+        : html`<p hint>${i18next.t('figure.text.no-controls')}</p>`}
+    </section>`
+  }
+
+  private renderControl(control: Control) {
+    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber
+    const c = this.live[control.id] === undefined ? control : { ...control, value: this.live[control.id]! }
+    const open = this.open === c.id
+    return html`<div control>
+        <span name title=${c.id}>${c.label} <em>${c.unit}</em></span>
+        ${c.unit === 'deg' ? this.renderDial(c) : html`<span></span>`}
+        <input
+          type="range"
+          min=${c.min}
+          max=${c.max}
+          step=${c.step}
+          .value=${String(c.value)}
+          ?disabled=${this.locked}
+          aria-label=${c.label}
+          @input=${(e: Event) => this.drag(c, number(e))}
+          @change=${(e: Event) => this.try(c, number(e))}
+        />
+        <input type="number" step="any" .value=${String(Math.round(c.value * 100) / 100)} ?disabled=${this.locked} aria-label=${c.label} @change=${(e: Event) => this.try(c, number(e))} />
+        <button
+          more
+          aria-expanded=${String(open)}
+          title=${i18next.t('figure.button.control-settings')}
+          aria-label=${i18next.t('figure.button.control-settings')}
+          @click=${() => (this.open = open ? '' : c.id)}
+        >
+          <md-icon>tune</md-icon>
+        </button>
+      </div>
+      ${open ? this.renderSettings(c) : nothing}`
+  }
+
+  private renderDial(c: Control) {
+    const dial = dialShape(c.min, c.max, c.value)
+    const span = dial.radius * 2 + 2
+    return html`<svg dial viewBox="0 0 ${span} ${span}" aria-hidden="true">
+      <path d=${dial.sector}></path>
+      <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>
+      <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>
+    </svg>`
+  }
+
+  private renderSettings(c: Control) {
+    const policy = (patch: Partial<{ label: string; sweep: number; min: number; max: number }>) =>
+      this.edit({
+        kind: 'set-state-input',
+        input: c.id,
+        label: patch.label ?? (c.named ? c.label : undefined),
+        sweep: patch.sweep ?? c.sweep,
+        ...(patch.min !== undefined ? { min: patch.min } : {}),
+        ...(patch.max !== undefined ? { max: patch.max } : {})
+      })
+    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber
+    return html`<div settings>
+      <div form>
+        <span>${i18next.t('figure.label.control-name')}</span>
+        <input .value=${c.named ? c.label : ''} placeholder=${c.id} ?disabled=${this.locked} @change=${(e: Event) => policy({ label: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.control-range')} (${c.unit})</span>
+        <div pair>
+          <input type="number" step="any" .value=${String(c.min)} ?disabled=${this.locked} @change=${(e: Event) => policy({ min: number(e) })} />
+          <input type="number" step="any" .value=${String(c.max)} ?disabled=${this.locked} @change=${(e: Event) => policy({ max: number(e) })} />
+        </div>
+        <span>${i18next.t('figure.label.control-sweep')}</span>
+        <input type="number" min="0" step="any" .value=${String(c.sweep)} ?disabled=${this.locked} @change=${(e: Event) => policy({ sweep: number(e) })} />
+      </div>
+      <small>${i18next.t('figure.text.control-starts-at', { value: c.start, unit: c.unit })}</small>
+    </div>`
+  }
+
+  /** While dragging: the value is told as live -- the editor draws that pose at once and records nothing. */
+  private drag(c: Control, value: number) {
+    if (!Number.isFinite(value)) return
+    this.live = { ...this.live, [c.id]: value }
+    this.dispatchEvent(new CustomEvent('v3-state-live', { detail: { input: c.id, value }, bubbles: true, composed: true }))
+  }
+
+  /** Try a value: the pose being looked at, clamped to the range. Not saved as the default. The slider sends it on
+   * release, so one drag is one step of the undo history rather than one per pixel. */
+  private try(c: Control, value: number) {
+    if (!Number.isFinite(value)) return
+    const clamped = Math.min(Math.max(value, c.min), c.max)
+    const { [c.id]: _released, ...rest } = this.live
+    this.live = rest
+    this.dispatchEvent(new CustomEvent('v3-state', { detail: { input: c.id, unit: c.unit, value: clamped }, bubbles: true, composed: true }))
+  }
+
+  private edit(edit: unknown) {
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+  }
+}