@things-factory/figure-ui 10.1.49 → 10.1.50

package/client/graphql/v3-store.ts

@@ -13,13 +13,14 @@ export const v3ProductStore: V3ProductStore = {
   async save(request) {
     const response = await client.mutate({
       mutation: gql`
-        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String) {
+        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String, $type: String) {
           saveFigureV3(
             source: $source
             id: $id
             expectedSource: $expectedSource
             creationId: $creationId
             thumbnail: $thumbnail
+            type: $type
           ) {
             id
             source

package/client/modeller/figure-history-panel.ts

@@ -9,6 +9,7 @@ import { ScrollbarStyles } from '@operato/styles'
 
 import { fetchFigureVersions, inspectFigure, releaseFigure, revertFigureVersion } from '../graphql/index.js'
 import type { FigureGateFinding, FigureGateFix, FigureGateFixPlan, FigureInspection, FigureVersion } from '../types.js'
+import { OxPrompt } from '@operato/popup'
 
 /**
  * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
@@ -558,7 +559,14 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
 
   private async revert(version: number) {
     /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
-    if (!confirm(i18next.t('figure.text.revert-to-version-confirm', { version }))) {
+    const agreed = await OxPrompt.open({
+      type: 'warning',
+      title: i18next.t('figure.button.revert'),
+      text: i18next.t('figure.text.revert-to-version-confirm', { version }),
+      confirmButton: { text: i18next.t('figure.button.revert') },
+      cancelButton: { text: i18next.t('figure.button.keep-editing') }
+    })
+    if (!agreed) {
       return
     }
 

package/client/modeller/figure-v3-first-save.ts

@@ -0,0 +1,98 @@
+import { LitElement, html, css, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import '@operato/popup/ox-popup-actions.js'
+import { CommonPopupStyles, FormFieldStyles } from '@operato/styles'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+import { firstSaveRefusalOf, releasableType, typeOf, type FirstSave } from './v3-first-save.js'
+
+/**
+ * The first save of a new figure: its type and its name, asked once (V2's save dialog, in the suite's popup look).
+ * Closes with the answer, or with nothing when cancelled -- then nothing is saved.
+ */
+@customElement('figure-v3-first-save')
+export class FigureV3FirstSave extends LitElement {
+  static styles = [
+    FormFieldStyles,
+    CommonPopupStyles,
+    css`
+      /* The popup's height is a share of the window (small is 40%): on a low window the buttons must still be reached. */
+      :host {
+        overflow-y: auto;
+      }
+      div[field] {
+        display: grid;
+        gap: 4px;
+      }
+      div[field] label {
+        font-size: var(--popup-font-size-small);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[field] input {
+        box-sizing: border-box;
+        width: 100%;
+      }
+      input[type-field] {
+        font-family: var(--mono-font, monospace);
+      }
+    `
+  ]
+
+  /** The type the figure has so far -- empty for a temporary one, which is not offered. */
+  @property() type = ''
+  @property() name = ''
+  /** Type names already used in this domain. */
+  @property({ attribute: false }) taken: string[] = []
+  @state() private refusal: { key: string; type?: string } | null = null
+
+  render() {
+    return html`
+      <div class="what">${i18next.t('figure.text.save-new-figure-desc')}</div>
+      <div field>
+        <label for="type">${i18next.t('figure.label.figure-type')}</label>
+        <input
+          id="type"
+          type-field
+          autofocus
+          .value=${this.type}
+          placeholder=${i18next.t('figure.text.figure-type-example')}
+          @input=${(e: Event) => {
+            this.type = typeOf((e.target as HTMLInputElement).value)
+            ;(e.target as HTMLInputElement).value = this.type
+            this.refusal = null
+          }}
+          @keydown=${this.onKey}
+        />
+        ${this.type && !releasableType(this.type) ? html`<div class="note">${i18next.t('figure.text.type-name-will-not-release')}</div>` : nothing}
+      </div>
+      <div field>
+        <label for="name">${i18next.t('figure.label.name')}</label>
+        <input
+          id="name"
+          .value=${this.name}
+          placeholder=${i18next.t('figure.text.figure-name-example')}
+          @input=${(e: Event) => (this.name = (e.target as HTMLInputElement).value)}
+          @keydown=${this.onKey}
+        />
+      </div>
+      ${this.refusal ? html`<div class="failure" role="alert">${i18next.t(this.refusal.key, { type: this.refusal.type })}</div>` : nothing}
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${!this.type} @click=${this.confirm}>${i18next.t('figure.button.save')}</md-filled-button>
+      </ox-popup-actions>
+    `
+  }
+
+  private onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.isComposing) this.confirm()
+  }
+
+  private confirm = () => {
+    this.refusal = firstSaveRefusalOf(this.type, this.taken)
+    if (this.refusal) return
+    closePopup(this, { type: this.type, name: this.name.trim() || this.type } satisfies FirstSave)
+  }
+}

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

@@ -9,6 +9,8 @@ import type { V3Asset, V3AuthoringAction, V3DimensionSource, V3Face } from '@hat
 
 import {
   acceptsOf,
+  alignAxesOf,
+  alignOf,
   AXES,
   canFasten,
   canFollow,
@@ -20,13 +22,17 @@ import {
   followOf,
   hasInstanceSize,
   holdsThings,
+  leadersFor,
   motionOf,
+  motionJoint,
   placeFacesOf,
   placeIdFor,
   placesOn,
   positionsWorkedOut,
+  type Alignment,
   type Axis,
-  type Follow
+  type Follow,
+  type MotionForm
 } from './v3-links.js'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { HelpToggles } from './v3-help.js'
@@ -78,8 +84,8 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
   @property() section: 'shape' | 'places' | 'motion' = 'shape'
 
-  @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0 }
-  @state() private motion = { kind: 'slide' as 'slide' | 'turn', axis: 'x' as Axis, id: '', min: 0, max: 500 }
+  @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0, align: {} as Partial<Record<Axis, Alignment>>, alignMm: {} as Partial<Record<Axis, number>> }
+  @state() private motion: MotionForm = { kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0 }
   @state() private place = { role: 'grip' as 'seat' | 'grip', face: 'top' as V3Face, label: '', accepts: '', capacity: 1 }
 
   render() {
@@ -290,6 +296,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
               <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
             </select>
           </div>`}
+      ${this.renderAlignment()}
       <div form>
         <span>${i18next.t('figure.label.gap')}</span>
         <input type="number" step="any" .value=${String(f.gap)} @change=${(e: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
@@ -305,6 +312,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
             to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: f.targetFace },
             ...(f.toPlane ? {} : { facing: f.facing }),
             ...(f.gap ? { gap: f.gap } : {}),
+            ...(alignOf(f.toPlane ? 'plane' : f.targetFace, f.align, f.alignMm) ? { align: alignOf(f.toPlane ? 'plane' : f.targetFace, f.align, f.alignMm) } : {}),
             replace: !!to
           } as V3AuthoringAction)}
       >
@@ -313,58 +321,113 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     `
   }
 
+  /**
+   * Where on the target face the part sits, on the two axes across it: centred, level with the target's edge on
+   * either side, or a distance off centre. A door hung level with the frame's front edge turns about that edge.
+   */
+  private renderAlignment() {
+    const f = this.fasten
+    const set = (axis: Axis, how: Alignment) => (this.fasten = { ...f, align: { ...f.align, [axis]: how } })
+    const setMm = (axis: Axis, mm: number) => (this.fasten = { ...f, alignMm: { ...f.alignMm, [axis]: mm } })
+    return html`<div form>
+      ${alignAxesOf(f.toPlane ? 'plane' : f.targetFace).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}
+            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
+          </select>
+          ${how === 'mm'
+            ? 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 renderMotion(asset: V3Asset) {
     const now = motionOf(asset, this.partId)
+    const joint = asset.joints?.find(j => j.body1.part === this.partId)
     if (now) {
       return html`<div pair>
         <span>
           ${i18next.t('figure.label.motion-' + now.kind)} · ${String(now.axis).toUpperCase()}
-          ${now.control ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>` : nothing}
+          ${now.follows
+            ? html`<small>${i18next.t('figure.label.motion-follows', { joint: now.follows.joint, multiplier: now.follows.multiplier, offset: now.follows.offset ?? 0 })}</small>`
+            : now.control
+              ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>`
+              : nothing}
         </span>
-        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-motion', part: this.partId })}>
+        <button
+          act
+          ?disabled=${this.locked || !joint}
+          @click=${() => joint && this.command({ kind: 'set-joint', joint: { id: joint.id, type: 'fixed', body0: joint.body0, body1: joint.body1, ...(joint.origin ? { origin: joint.origin } : {}) } })}
+        >
           <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
         </button>
       </div>`
     }
+    /* A joint needs a parent (URDF): a part fastened to nothing is fastened first. */
+    if (!joint) return html`<p hint>${i18next.t('figure.text.fasten-before-moving')}</p>`
     const m = this.motion
-    const unit = m.kind === 'turn' ? 'deg' : 'mm'
+    const unit = m.kind === 'slide' ? 'mm' : 'deg'
+    /* A follower follows a joint that moves the same way; a choice the kind no longer allows is dropped. */
+    const leaders = leadersFor(asset, this.partId, m.kind)
+    const follow = leaders.some(j => j.id === m.follow) ? m.follow : ''
     return html`
       <div pair>
-        <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn')}>
+        <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn' | 'continuous')}>
           <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>
           <option value="turn" ?selected=${m.kind === 'turn'}>${i18next.t('figure.label.motion-turn')}</option>
+          <option value="continuous" ?selected=${m.kind === 'continuous'}>${i18next.t('figure.label.motion-continuous')}</option>
         </select>
         <select @change=${(e: Event) => (this.motion = { ...m, axis: (e.target as HTMLSelectElement).value as Axis })}>
           ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
         </select>
       </div>
-      <div form>
-        <span>${i18next.t('figure.label.control-id')}</span>
-        <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
-        <span>${i18next.t('figure.label.control-range')} (${unit})</span>
-        <div pair>
-          <input type="number" step="any" .value=${String(m.min)} @change=${(e: Event) => (this.motion = { ...m, min: Number((e.target as HTMLInputElement).value) })} />
-          <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
-        </div>
-      </div>
+      ${leaders.length
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
+              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.body1.part}${j.state ? ` · ${j.state.id}` : ''}</option>`)}
+            </select>
+          </div>`
+        : nothing}
+      ${follow
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-multiplier')}</span>
+            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : html`<div form>
+            <span>${i18next.t('figure.label.control-id')}</span>
+            <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
+            ${m.kind === 'continuous'
+              ? nothing
+              : html`<span>${i18next.t('figure.label.control-range')} (${unit})</span>
+                  <div pair>
+                    <input type="number" step="any" .value=${String(m.min)} @change=${(e: Event) => (this.motion = { ...m, min: Number((e.target as HTMLInputElement).value) })} />
+                    <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
+                  </div>`}
+          </div>`}
       <button
         act
-        ?disabled=${this.locked || !(m.max > m.min)}
-        @click=${() =>
-          this.command({
-            kind: 'add-motion',
-            part: this.partId,
-            motion: { kind: m.kind, axis: m.axis },
-            state: { id: m.id || `${this.partId}-${m.kind}`, unit, min: m.min, max: m.max, start: m.min }
-          })}
+        ?disabled=${this.locked || (follow ? !(Number.isFinite(m.multiplier) && m.multiplier !== 0) : m.kind !== 'continuous' && !(m.max > m.min && m.min <= 0 && 0 <= m.max))}
+        title=${!follow && m.kind !== 'continuous' && !(m.min <= 0 && 0 <= m.max) ? i18next.t('figure.text.joint-range-holds-zero') : ''}
+        @click=${() => this.command({ kind: 'set-joint', joint: motionJoint(joint, { ...m, follow }, this.partId) })}
       >
         <md-icon>animation</md-icon>${i18next.t('figure.button.add-motion')}
       </button>
     `
   }
 
-  private setKind(kind: 'slide' | 'turn') {
-    this.motion = kind === 'turn' ? { ...this.motion, kind, min: -90, max: 90 } : { ...this.motion, kind, min: 0, max: 500 }
+  private setKind(kind: 'slide' | 'turn' | 'continuous') {
+    this.motion = kind === 'slide' ? { ...this.motion, kind, min: 0, max: 500 } : { ...this.motion, kind, min: -90, max: 90 }
   }
 
   private command(action: V3AuthoringAction) {

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

@@ -420,6 +420,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
       <select
         id="detail-level"
         title=${i18next.t('figure.text.detail-level-explained')}
+        .value=${b.level ?? ''}
         ?disabled=${this.locked}
         @change=${(e: Event) => {
           const value = (e.target as HTMLSelectElement).value

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

@@ -10,6 +10,7 @@ import type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'
 import { occupancyFromParts } from './v3-occupancy.js'
 import { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'
 import { SidePanelStyles } from './side-panel-styles.js'
+import { ScrollbarStyles } from '@operato/styles'
 
 const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']
 const FACES = Object.keys(V3_FACES) as V3Face[]
@@ -32,7 +33,7 @@ const FACES = Object.keys(V3_FACES) as V3Face[]
  */
 @customElement('figure-v3-properties')
 export class FigureV3Properties extends localize(i18next)(LitElement) {
-  static styles = [SidePanelStyles, css`
+  static styles = [ScrollbarStyles, SidePanelStyles, css`
     :host {
       display: block;
       /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */

package/client/modeller/v3-canvas.ts

@@ -37,6 +37,7 @@ interface SceneLayer extends SceneComponent {
   removeComponent?: (component: SceneComponent) => void
   invalidate?: () => void
   fitCameraToModel?: () => void
+  setGizmoMode?: (mode: 'translate' | 'rotate' | 'scale') => void
   app?: unknown
 }
 interface SceneHandle {
@@ -153,6 +154,11 @@ export class FigureV3Canvas extends LitElement {
     this.scene?.root?.fitCameraToModel?.()
   }
 
+  /** The gizmo in a mode on the selected part, as W, E and R do with the canvas focused -- the scene's toggle. */
+  gizmo(mode: 'translate' | 'rotate' | 'scale') {
+    this.scene?.root?.setGizmoMode?.(mode)
+  }
+
   /**
    * Stand the board up for this figure, or bring the one standing up to date. A new board only for another figure or
    * one that has outgrown it -- standing up again loses the selection and the camera.
@@ -276,18 +282,61 @@ export class FigureV3Canvas extends LitElement {
       A change comes up to the board with the component in the last argument's `origin` (the scene appends
       { origin, name, deliverer } as it bubbles). Reading the first argument as the component does nothing (V2).
     */
+    /*
+      A drag is written once, when it ends. The scene's gizmo writes the component on every move -- a size anchored on
+      the opposite face, from the scale it captured when the drag began -- and writing each move back through the
+      editor (and the evaluation back onto the component) fought it: the scale gizmo did not work (user, 2026-09-24).
+      While a pointer is down the changes are only kept; on release the last one is told, and the board is brought to
+      the evaluation. A change with no pointer down (the arrow keys) is told after a short pause.
+    */
     layer.on?.('change', (...args: unknown[]) => {
       if (this.writing) return
       const origin = (args[args.length - 1] as { origin?: SceneComponent } | undefined)?.origin
       const name = origin?.state?.name
-      const part = typeof name === 'string' ? this.parts.find(p => p.id === name) : undefined
-      if (!part || !this.board) return
-      const result = gizmoResultOf(part, origin!.state, this.board)
-      if (!result.position && !result.rotation && !result.scale) return
-      this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }))
-      /* After the editor has applied (or refused) it: a refused change springs back to where the inputs put it. */
-      setTimeout(() => this.sync())
+      if (typeof name !== 'string' || !this.parts.some(p => p.id === name)) return
+      this.pending.set(name, origin!)
+      if (!this.pointerDown) this.commitSoon(80)
     })
+    this.stage.addEventListener('pointerdown', this.onPointerDown, true)
+    window.addEventListener('pointerup', this.onPointerUp, true)
+    window.addEventListener('pointercancel', this.onPointerUp, true)
+  }
+
+  /** Components the gizmo changed since the last commit, by part name. */
+  private pending = new Map<string, SceneComponent>()
+  private pointerDown = false
+  private commitTimer?: ReturnType<typeof setTimeout>
+  private onPointerDown = () => {
+    this.pointerDown = true
+  }
+  private onPointerUp = () => {
+    if (!this.pointerDown) return
+    this.pointerDown = false
+    /* After the scene's own drag end (it settles the depth and rebuilds the geometry on release). */
+    this.commitSoon(0)
+  }
+  private commitSoon(delay: number) {
+    clearTimeout(this.commitTimer)
+    this.commitTimer = setTimeout(() => this.commit(), delay)
+  }
+  /** Tell each changed part once, in the inputs' terms; then put the board where the inputs say (a refusal springs back). */
+  private commit() {
+    /*
+      Not while a pointer is down: a pause set by a change just before the press (the arrow keys, the scene settling
+      the pick) fired in the middle of the drag and wrote where the part was then -- a drag on a converted part became
+      two steps, the first one a few millimetres in (browser check, 2026-09-25). What is pending waits for the release.
+    */
+    if (this.pointerDown || !this.board || !this.pending.size) return
+    const changed = [...this.pending]
+    this.pending.clear()
+    for (const [name, component] of changed) {
+      const part = this.parts.find(p => p.id === name)
+      if (!part) continue
+      const result = gizmoResultOf(part, component.state, this.board)
+      if (!result.position && !result.rotation && !result.scale) continue
+      this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }))
+    }
+    setTimeout(() => this.sync())
   }
 
   private showSelected() {
@@ -311,6 +360,11 @@ export class FigureV3Canvas extends LitElement {
   }
 
   private teardown() {
+    clearTimeout(this.commitTimer)
+    this.pending.clear()
+    this.stage?.removeEventListener('pointerdown', this.onPointerDown, true)
+    window.removeEventListener('pointerup', this.onPointerUp, true)
+    window.removeEventListener('pointercancel', this.onPointerUp, true)
     this.scene?.dispose?.()
     this.scene = undefined
     this.standingFor = undefined