@things-factory/figure-ui 10.1.204 → 10.1.206

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

@@ -2,16 +2,23 @@ import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import type { FigureFace } from '@hatiolab/figure-model'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
+import { figureAroundNormalOf, figureAroundOf, figureCaughtAngleOf, figureSurfaceAnglesOf, figureSurfacePlaceOf } from '@hatiolab/figure-model'
+import type { FigureFace, FigureSurfacePlace } from '@hatiolab/figure-model'
 
 import { alignmentAt, fastenLabelsOf, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { Alignment } from './links.js'
 
 type Axis = 'x' | 'y' | 'z'
+const AXES: Axis[] = ['x', 'y', 'z']
+type SidePlace = Extract<FigureSurfacePlace, { around: number }>
+type RoundPlace = Extract<FigureSurfacePlace, { toward: unknown }>
 
 /** A change the drawing asks of the fastening form. */
 export type FastenChange =
   | { targetFace: string }
+  | { onSurface: true }
+  | { surface: FigureSurfacePlace }
   | { mode: FastenMode }
   | { axis: Axis; how: Alignment; mm?: number }
   | { gap: number }
@@ -49,7 +56,8 @@ const WHERE_H = 200
  */
 @customElement('figure-fasten-drawing')
 export class FigureFastenDrawing extends localize(i18next)(LitElement) {
-  static styles = css`
+  /* The panel's own field rows (where along a cylinder's side), as the window's other rows are. */
+  static styles = [SidePanelStyles, css`
     :host {
       display: grid;
       gap: 8px;
@@ -90,6 +98,29 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     div[modes] button:hover:not([on]):not(:disabled) {
       background: var(--md-sys-color-surface-container);
     }
+    /* Faces beyond the box's six and a curved surface: tags as the hidden faces are drawn beside the box -- one look for every face. */
+    div[face-tags] {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 6px;
+    }
+    button[face-tag] {
+      height: 20px;
+      padding: 0 10px;
+      font: inherit;
+      font-size: var(--ui-t-small, 11.5px);
+      color: var(--md-sys-color-on-surface-variant);
+      background: transparent;
+      border: 1px dashed var(--md-sys-color-outline);
+      border-radius: 10px;
+      cursor: pointer;
+    }
+    button[face-tag][on] {
+      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container);
+      border: 1px solid var(--md-sys-color-primary);
+    }
     div[modes] button[on] {
       background: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);
@@ -105,8 +136,12 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       display: grid;
       gap: 8px;
     }
+    /* The place is drawn at its own size, never blown up past it: its words stay the window's size. */
     div[where] {
       position: relative;
+      width: 100%;
+      max-width: 360px;
+      justify-self: center;
     }
     div[where] input {
       position: absolute;
@@ -119,7 +154,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     small[off] {
       color: var(--md-sys-color-error);
     }
-  `
+  `]
 
   /** The target's name, or empty for the plane the figure stands by. */
   @property() target = ''
@@ -140,6 +175,12 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   @property({ type: Boolean }) said = false
   /** Which of its questions it draws: the face, or the way. */
   @property() show: 'face' | 'how' = 'face'
+  /** The curved surface the target offers to be fastened to at a point (ADR-0140 3.9), if any. */
+  @property() surfaceForm: 'around' | 'toward' | '' = ''
+  /** Fastened to a point of that surface: which, about which axis, and where; undefined while on a face. */
+  @property({ attribute: false }) surface?: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }
+  /** The angles while one is dragged round the surface, told to the form when let go. */
+  @state() private turning?: { around?: number; azimuth?: number; elevation?: number }
 
   /** 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>> }
@@ -156,6 +197,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
 
   render() {
     if (this.show === 'how') return this.renderModes()
+    /* A part with no face (a sphere) has only its surface: its tag above, the place across the whole width. */
+    if (this.target && !this.faces.length) return html`${this.renderTarget()}<div>${this.renderWhere()}</div>`
     return html`<div face-row>${this.target ? html`<div>${this.renderTarget()}</div>` : nothing}<div>${this.renderWhere()}</div></div>`
   }
 
@@ -166,18 +209,18 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const has = (f: string) => this.faces.includes(f)
     /* A press is a whole change, as a drag let go is: the form applies a fastening the part already has. */
     const pick = (f: string) => () => {
-      if (this.locked || !has(f) || f === this.face) return
+      if (this.locked || !has(f) || (!this.surface && f === this.face)) return
       this.change({ targetFace: f })
       this.released()
     }
     const seen = SEEN.map(([f, d]) => {
-      const on = this.face === f
+      const on = !this.surface && this.face === f
       return svg`<path face=${f} d=${d} @click=${pick(f)}
         style=${`cursor:${has(f) ? 'pointer' : 'default'};fill:${on ? 'var(--md-sys-color-primary-container)' : 'var(--md-sys-color-surface-container)'};fill-opacity:${has(f) ? 1 : 0.4};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-width:${on ? 2 : 1}`}>
         <title>${i18next.t('figure.label.face-' + f)}</title></path>`
     })
     const hidden = HIDDEN.map(([f, x, y]) => {
-      const on = this.face === f
+      const on = !this.surface && this.face === f
       return svg`<g face=${f} @click=${pick(f)} style=${`cursor:${has(f) ? 'pointer' : 'default'};opacity:${has(f) ? 1 : 0.35}`}>
         <rect x=${x - 26} y=${y - 10} width="52" height="20" rx="10"
           style=${`fill:${on ? 'var(--md-sys-color-primary-container)' : 'transparent'};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-dasharray:${on ? '' : '3 2'}`} />
@@ -186,14 +229,25 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     })
     /* A shape's faces beyond its six outer ones -- a door frame's opening -- are tags of their own under the box. */
     const others = this.faces.filter(f => !SEEN.some(([s]) => s === f) && !HIDDEN.some(([h]) => h === f))
-    return html`${svg`<svg viewBox="-20 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>
+    /* A sphere has no face: no box of faces it has not, only its surface. */
+    return html`${this.faces.length
+        ? svg`<svg viewBox="-20 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>
         ${seen}
         <text x="110" y="70" text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-surface)">${this.target}</text>
         ${hidden}
-      </svg>`}
-      ${others.length
-        ? html`<div modes>
-            ${others.map(f => html`<button ?on=${f === this.face} ?disabled=${this.locked} @click=${pick(f)}>${i18next.t('figure.label.face-' + f, { defaultValue: f })}</button>`)}
+      </svg>`
+        : nothing}
+      ${others.length || this.surfaceForm
+        ? html`<div face-tags>
+            ${others.map(f => html`<button face-tag ?on=${!this.surface && f === this.face} ?disabled=${this.locked} @click=${pick(f)}>${i18next.t('figure.label.face-' + f, { defaultValue: f })}</button>`)}
+            ${this.surfaceForm
+              ? html`<button face-tag surface ?on=${!!this.surface} ?disabled=${this.locked}
+                  @click=${() => {
+                    if (this.locked || this.surface) return
+                    this.change({ onSurface: true })
+                    this.released()
+                  }}>${i18next.t('figure.label.surface-' + this.surfaceForm)}</button>`
+              : nothing}
           </div>`
         : nothing}`
   }
@@ -266,6 +320,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   }
 
   private renderWhere() {
+    if (this.surface) return this.renderSurfaceWhere(this.surface)
     const view = this.view
     if (!view) return nothing
     const { h, v, sign } = screenOf(view.axes)
@@ -286,6 +341,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const px = cx + sign[h] * at[h] * k - pw / 2,
       py = cy + sign[v] * at[v] * k - ph / 2
     const faceSized = view.face[h] !== undefined && view.face[v] !== undefined
+    /* An end disc is drawn as the disc it is: its overhang is measured on it (ADR-0140 3.9). */
+    const disc = !!view.measure.disc
     const fx = cx - fw / 2,
       fy = cy - fh / 2
     const ix = Math.max(fx, px),
@@ -326,7 +383,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
             @pointermove=${(ev: PointerEvent) => this.drag(ev, view, cx, cy)}
             @pointerup=${() => this.drop()} @pointercancel=${() => this.drop()}>
           ${faceSized
-            ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx="4" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`
+            ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx=${disc ? fw / 2 : 4} ry=${disc ? fh / 2 : 4} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`
             : svg`<rect x="1" y="1" width=${W - 2} height=${H - 2} rx="8" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`}
           <text face-name x=${labels.face.x} y=${labels.face.y} font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${faceName}${sizeWords}</text>
           ${guide(h)}${guide(v)}
@@ -429,4 +486,168 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     })
     this.released()
   }
+
+  /**
+   * Where on a curved surface (ADR-0140 3.9). A cylinder's side is seen from its end: its section a circle, the point
+   * on its rim at the angle `around`, dragged round it -- caught at every 45°, where the faces it had are named -- and
+   * along its length chosen below it. A sphere is seen from above and from the side: its point dragged round the
+   * first for the direction across its axis, along the second for how high. Nothing is told the form until let go.
+   */
+  private renderSurfaceWhere(surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }) {
+    const R = 56
+    const axis = surface.axis
+    const across = (['x', 'y', 'z'] as Axis[]).filter(a => a !== axis) as [Axis, Axis]
+    const { h, v, sign } = screenOf(across)
+    const deg = (r: number) => (r * 180) / Math.PI
+    const rad = (d: number) => (d * Math.PI) / 180
+    /* A direction across the axis on the circle drawn at (cx, cy): its point there, and the way back from a pointer. */
+    const onCircle = (n: number[], cx: number, cy: number, r = R) => ({ x: cx + sign[h] * n[AXES.indexOf(h)]! * r, y: cy + sign[v] * n[AXES.indexOf(v)]! * r })
+    const angleAt = (p: { x: number; y: number }, cx: number, cy: number) => {
+      const d = [0, 0, 0]
+      d[AXES.indexOf(h)] = sign[h] * (p.x - cx)
+      d[AXES.indexOf(v)] = sign[v] * (p.y - cy)
+      return figureAroundOf(axis, d)
+    }
+    const caught = (a: number) => figureCaughtAngleOf(a) % 360
+    /* The faces the four quarters were named by, round the circle: where a part fastened to one of them now stands. */
+    const FACE_AT: Record<Axis, [string, string]> = { x: ['left', 'right'], y: ['bottom', 'top'], z: ['back', 'front'] }
+    const ticks = (cx: number, cy: number) =>
+      [0, 90, 180, 270].map(t => {
+        const n = figureAroundNormalOf(axis, t)
+        const k = n.findIndex(c => Math.abs(c) > 0.5)
+        const word = i18next.t('figure.label.face-' + FACE_AT[AXES[k]!][n[k]! > 0 ? 1 : 0])
+        const p = onCircle(n, cx, cy, R + 16)
+        return svg`<text x=${p.x} y=${p.y + 4} text-anchor="middle" font-size="10" pointer-events="none" style="fill:var(--md-sys-color-on-surface-variant)">${word}</text>`
+      })
+    const marker = (p: { x: number; y: number }, cx: number, cy: number, label: string) => svg`
+      <line x1=${cx} y1=${cy} x2=${p.x} y2=${p.y} style="stroke:var(--md-sys-color-primary);stroke-dasharray:3 2" />
+      <circle marker cx=${p.x} cy=${p.y} r="8" style=${`fill:var(--md-sys-color-tertiary-container);stroke:var(--md-sys-color-on-surface);cursor:${this.locked ? 'default' : 'grab'}`} />
+      <text x=${cx} y=${Math.hypot(p.x - cx, p.y - cy) < 16 ? cy - 14 : cy + 4} text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${label}</text>`
+    const drag = (on: (p: { x: number; y: number }) => void) => ({
+      down: (ev: PointerEvent) => {
+        if (this.locked) return
+        ;(ev.currentTarget as Element).setPointerCapture(ev.pointerId)
+        on(this.pointIn(ev))
+      },
+      move: (ev: PointerEvent) => {
+        if (!this.turning || !(ev.currentTarget as Element).hasPointerCapture?.(ev.pointerId)) return
+        on(this.pointIn(ev))
+      },
+      up: () => this.letGo(surface)
+    })
+    if (surface.form === 'around') {
+      const place = surface.place as SidePlace
+      const around = this.turning?.around ?? place.around
+      /* The section in the middle under its name, the ticks clear of both. */
+      const cx = WHERE_W / 2,
+        cy = 110
+      const d = drag(p => (this.turning = { around: caught(angleAt(p, cx, cy)) }))
+      return html`<div where surface tabindex="0" @keydown=${(ev: KeyboardEvent) => this.turnKeys(ev, surface)}>
+          ${svg`<svg viewBox="0 0 ${WHERE_W} ${WHERE_H}" role="img" aria-label=${i18next.t('figure.label.surface-seen-end', { part: this.target })}
+              @pointerdown=${d.down} @pointermove=${d.move} @pointerup=${d.up} @pointercancel=${d.up}>
+            <text x=${WHERE_W / 2} y="14" text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${i18next.t('figure.label.surface-seen-end', { part: this.target })}</text>
+            <circle cx=${cx} cy=${cy} r=${R} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />
+            ${ticks(cx, cy)}
+            ${marker(onCircle(figureAroundNormalOf(axis, around), cx, cy), cx, cy, `${Math.round(around)}°`)}
+          </svg>`}
+        </div>
+        ${this.renderAlong(surface.axis, place.along)}`
+    }
+    /* A sphere: its direction across its axis (the azimuth, by the same rule as a cylinder's around) and how high. */
+    const now = figureSurfaceAnglesOf(surface, surface.place) as { azimuth: number; elevation: number }
+    const azimuth = this.turning?.azimuth ?? now.azimuth
+    const elevation = this.turning?.elevation ?? now.elevation
+    const ax = 110,
+      ay = 110,
+      sx = 250,
+      sy = 110
+    const aboveAt = onCircle(figureAroundNormalOf(axis, azimuth), ax, ay, R * Math.cos(rad(elevation)) || 0)
+    const sideAt = { x: sx + R * Math.cos(rad(elevation)), y: sy - R * Math.sin(rad(elevation)) }
+    const d = drag(p => {
+      const above = Math.hypot(p.x - ax, p.y - ay) <= R + 16 && p.x < (ax + sx) / 2
+      this.turning = above
+        ? { azimuth: caught(angleAt(p, ax, ay)), elevation }
+        : { azimuth, elevation: Math.max(-90, Math.min(90, figureCaughtAngleOf(deg(Math.atan2(sy - p.y, Math.max(0, p.x - sx)))))) }
+    })
+    return html`<div where surface tabindex="0" @keydown=${(ev: KeyboardEvent) => this.turnKeys(ev, surface)}>
+      ${svg`<svg viewBox="0 0 ${WHERE_W} ${WHERE_H}" role="img" aria-label=${i18next.t('figure.label.surface-toward')}
+          @pointerdown=${d.down} @pointermove=${d.move} @pointerup=${d.up} @pointercancel=${d.up}>
+        <text x=${ax} y="14" text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${i18next.t('figure.label.surface-seen-above')}</text>
+        <circle cx=${ax} cy=${ay} r=${R} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />
+        ${ticks(ax, ay)}
+        ${marker(aboveAt, ax, ay, `${Math.round(azimuth)}°`)}
+        <text x=${sx + R / 2} y="14" text-anchor="middle" font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${i18next.t('figure.label.surface-seen-side')}</text>
+        <path d=${`M ${sx} ${sy - R} A ${R} ${R} 0 0 1 ${sx} ${sy + R}`} style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />
+        <line x1=${sx} y1=${sy - R} x2=${sx} y2=${sy + R} style="stroke:var(--md-sys-color-primary)" />
+        ${marker(sideAt, sx, sy, `${Math.round(elevation)}°`)}
+      </svg>`}
+    </div>`
+  }
+
+  /** Where along a cylinder's side: centred, level with an end, or a distance from the middle -- its alignment words. */
+  private renderAlong(axis: Axis, along: unknown) {
+    const how = along === 'min' || along === 'max' ? along : along && typeof along === 'object' ? 'mm' : 'centre'
+    const mm = how === 'mm' ? Number((along as { mm: number }).mm) || 0 : 0
+    const place = this.surface!.place as SidePlace
+    const tell = (next: unknown) => {
+      this.change({ surface: { around: place.around, along: next as never } })
+      this.released()
+    }
+    return html`<div form along>
+      <span>${i18next.t('figure.label.align-' + axis)}</span>
+      <select ?disabled=${this.locked} @change=${(e: Event) => {
+        const v = (e.target as HTMLSelectElement).value
+        tell(v === 'mm' ? { mm } : v)
+      }}>
+        <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
+        <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>
+        <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(mm)}
+            ?disabled=${this.locked} @change=${(e: Event) => tell({ mm: Number((e.target as HTMLInputElement).value) || 0 })} />`
+        : nothing}
+    </div>`
+  }
+
+  /** A pointer's place in the drawing's own units. */
+  private pointIn(ev: PointerEvent) {
+    const svgEl = (ev.currentTarget as Element).closest('svg') as SVGSVGElement
+    const pt = svgEl.createSVGPoint()
+    pt.x = ev.clientX
+    pt.y = ev.clientY
+    return pt.matrixTransform(svgEl.getScreenCTM()!.inverse())
+  }
+
+  /** Let go: the angles dragged become the place, told to the form once. */
+  private letGo(surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }) {
+    const t = this.turning
+    if (!t) return
+    this.turning = undefined
+    this.change({ surface: this.placeOf(surface, t) })
+    this.released()
+  }
+
+  /** The place the angles come to: the kernel's (`figureSurfacePlaceOf`), along a side kept. */
+  private placeOf(surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }, t: { around?: number; azimuth?: number; elevation?: number }): FigureSurfacePlace {
+    const now = figureSurfaceAnglesOf(surface, surface.place) as { around?: number; azimuth?: number; elevation?: number }
+    const angles = surface.form === 'around' ? { around: t.around ?? now.around! } : { azimuth: t.azimuth ?? now.azimuth!, elevation: t.elevation ?? now.elevation! }
+    return figureSurfacePlaceOf(surface, surface.place, angles)
+  }
+
+  /** Arrows turn it a degree, fifteen with Shift: round the side, or round and up and down a sphere. */
+  private turnKeys(ev: KeyboardEvent, surface: { form: 'around' | 'toward'; axis: Axis; place: FigureSurfacePlace }) {
+    const step = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] }[ev.key]
+    if (!step || this.locked) return
+    ev.preventDefault()
+    ev.stopPropagation()
+    const by = ev.shiftKey ? 15 : 1
+    const now = figureSurfaceAnglesOf(surface, surface.place) as { around?: number; azimuth?: number; elevation?: number }
+    if (surface.form === 'around') {
+      if (!step[0]) return
+      this.change({ surface: this.placeOf(surface, { around: now.around! + step[0] * by }) })
+    } else this.change({ surface: this.placeOf(surface, { azimuth: now.azimuth! + step[0] * by, elevation: Math.max(-90, Math.min(90, now.elevation! + step[1] * by)) }) })
+    this.released()
+  }
 }

package/client/modeller/figure-links.ts

@@ -278,7 +278,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         <section size-response>
           <h3>${i18next.t('figure.label.group-size')}</h3>
           <p group-question>${i18next.t('figure.label.resize-intent')}</p>
-          ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+          ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.part-cannot-follow')}</p>`}
         </section>
         ${positions.length
           ? html`<section position-response>
@@ -302,7 +302,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           ${groupMenu([{ label: i18next.t('figure.button.detach'), icon: 'link_off', disabled: this.locked || !held, run: () => this.command({ kind: 'detach', part: this.partId }) }])}
         </h3>${this.help.hint('figure.text.fastening-explained')}
         <slot name="place"></slot>
-        ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+        ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.part-cannot-fasten')}</p>`}
       </section>
     `
     this.candidate = this.fastenCandidate

package/client/modeller/figure-preview.ts

@@ -3,14 +3,14 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { compileFigureAsset } from '@hatiolab/figure-model'
-import type { FigureAsset, FigureDataRow, FigureDataValue } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureDataRow, FigureDataValue, FigureGraphStateInput } from '@hatiolab/figure-model'
 import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
 
 import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 import { dialShape } from './angle-dial.js'
 import { domainOf, motionWrittenByData, typedValueOf, valueRowsOf } from './data-interface.js'
 import { derivedOf, type FigureRevision } from './revision.js'
-import { authoredSizeOf, occupancyAtSize, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewOneInstance, previewTypeOf, setupPartOf, sizeRangeOf, sizeWithinRange } from '@things-factory/figure-viewer/dist-client/preview-model.js'
+import { authoredSizeOf, occupancyAtSize, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewOneInstance, previewTypeOf, setupPartOf, sizeSpanOf, sizeWithinRange } from '@things-factory/figure-viewer/dist-client/preview-model.js'
 import { previewSizeWordsOf } from './preview-size.js'
 
 /**
@@ -335,7 +335,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     if (!asset.occupancy) return html`<div sizes><p said>${i18next.t('figure.text.preview-needs-space')}</p></div>`
     return html`<div sizes>
       ${(['x', 'y', 'z'] as const).map(axis => {
-        const range = sizeRangeOf(asset, axis)
+        const range = sizeSpanOf(asset, axis)
         if (!range) return nothing
         return html`<label>
           <span>${i18next.t(`figure.label.measure-${axis}`)}</span>
@@ -377,7 +377,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     this.scene?.root?.fitCameraToModel?.()
   }
 
-  private renderDrivers(asset: FigureAsset, controls: FigureAsset['document']['model']['inputs'], clips: string[]) {
+  private renderDrivers(asset: FigureAsset, controls: FigureGraphStateInput[], clips: string[]) {
     const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id])
     return html`<div clips>
       ${changed.length
@@ -609,8 +609,8 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         type: 'model-layer',
         width: board.width,
         height: board.height,
-        /* As tall as the figure may grow: twice for the eight, the declared height range's top for the one. */
-        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, this.way === 'one' ? Math.max(1, (sizeRangeOf(asset, 'y')?.max ?? size.y) / size.y) : PREVIEW_FACTOR),
+        /* As tall as the figure may grow: twice for the eight, the top of the height slider for the one. */
+        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, this.way === 'one' ? Math.max(1, (sizeSpanOf(asset, 'y')?.max ?? size.y) / size.y) : PREVIEW_FACTOR),
         threed: true,
         sky: 'color',
         ...sceneLook(view),

package/client/modeller/figure-section-editor.ts

@@ -267,8 +267,8 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
   @property({ attribute: false }) body?: { id: string; shape: FigureEvaluatedShape }
   /** Which of its measures can be set (figure-model's `figureSectionMeasuresOf`). */
   @property({ attribute: false }) measures?: { measures: Record<Axis, FigureSectionMeasure>; round: boolean }
-  /** Along the push, the face a length change keeps: 1 its start, -1 its end, 0 its centre; undefined when it cannot be said. */
-  @property({ attribute: false }) kept?: -1 | 0 | 1
+  /** What a length typed keeps: the part's middle, or its fastening (ADR-0140 4.1); undefined when it keeps no point. */
+  @property({ attribute: false }) kept?: 'centre' | 'relation' | 'none'
   /** Why a push's end cannot be drawn to a point now, in the kernel's words (what is fastened to it); empty when it can. */
   @property({ attribute: false }) pointBlocked = ''
   /** The figure's revision now; the editor remembers the one it opened at. */
@@ -490,10 +490,10 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     return { h: Math.round(p.x), v: Math.round(p.y) }
   }
 
-  /** What a measure's field says under it: following another value, or for the length the face it keeps. */
-  private noteWords(axis: Axis, kept?: -1 | 0 | 1): string {
-    const note = measureNoteOf(this.measures?.measures[axis], kept, axis)
-    return note ? i18next.t(note.key, note.face ? { face: i18next.t('figure.label.face-' + note.face) } : {}) : ''
+  /** What a measure's field says under it: following another value, or for the length what it keeps. */
+  private noteWords(axis: Axis, kept?: 'centre' | 'relation' | 'none'): string {
+    const note = measureNoteOf(this.measures?.measures[axis], kept)
+    return note ? i18next.t(note.key) : ''
   }
 
   render() {

package/client/modeller/figure-slot-layout-panel.ts

@@ -169,7 +169,7 @@ export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
     const anchorFaces = anchorFacesOf(form.anchors, geometry)
     const value = {
       canUseDefault: false,
-      presets: slotPresetsOf(form.anchors, key => i18next.t(key)),
+      presets: slotPresetsOf(form.anchors),
       /* The first anchor's face is the size a preset is laid out over; the slot height is the author's. */
       presetSize: anchorFaces[form.anchors[0]?.id ?? ''] ?? {},
       anchors: form.anchors.map(a => ({ id: a.id, label: `${a.id} · ${a.part} ${i18next.t('figure.label.face-' + a.face)}` })),

package/client/modeller/gizmo.ts

@@ -1,5 +1,5 @@
 import { figureAttachmentsOf, figureShapeProviderOf } from '@hatiolab/figure-model'
-import type { FigureAsset, FigureInputChange } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureInputChange, FigureSizeKeep } from '@hatiolab/figure-model'
 
 /**
  * What the gizmo may write for a part: move · turn · size, on a asset.
@@ -111,10 +111,31 @@ export function gizmoReachOf(asset: AssetLike, part: string): GizmoReach {
 }
 
 /** Where a drag left the part, in the asset frame: millimetres, degrees and per-axis scale. */
+/**
+ * The size handles that change one measure (ADR-0140 4.1): a round part's radius across is one value, so its X and Z
+ * handles are the same diameter, and a sphere's three are one. Said on the canvas while the size tool is on, to see how
+ * it handles before deciding to show fewer. Nothing for a part whose handles each change their own measure.
+ */
+export function sameMeasureAxesOf(reach: GizmoReach): Array<'x' | 'y' | 'z'> | undefined {
+  if (!reach.scale || !reach.round) return undefined
+  return reach.round.along.length ? ['x', 'z'] : ['x', 'y', 'z']
+}
+
 export interface GizmoResult {
   position?: [number, number, number]
   rotation?: [number, number, number]
   scale?: [number, number, number]
+  /** The handle a size drag held, per own axis -1 · 0 · 1 (the scene's `scaleGrab`): what figure-model keeps from. */
+  grab?: { x: number; y: number; z: number }
+}
+
+/**
+ * What a size drag keeps (ADR-0140 4.1): the side opposite a handle on one axis; the middle for the uniform handle, or
+ * when no handle is known -- figure-model's own words for it, so the drag and its commit ask the same.
+ */
+export function sizeKeepOf(grab: GizmoResult['grab']): FigureSizeKeep {
+  const held = (['x', 'y', 'z'] as const).filter(axis => grab?.[axis])
+  return held.length === 1 ? { keep: 'opposite', axis: held[0]!, side: grab![held[0]!]! > 0 ? 1 : -1 } : { keep: 'centre' }
 }
 
 /**

package/client/modeller/keys.ts

@@ -5,7 +5,13 @@
  * Typing is never taken: a key pressed in a field belongs to the field -- Backspace in a name box deletes a letter,
  * not the part.
  */
-export type KeyAction = 'undo' | 'redo' | 'duplicate' | 'remove' | 'deselect' | GizmoKey
+/*
+ * `copy` · `paste` are the modeller's own: a part copied and pasted is the kernel's duplicate, with a name of its own.
+ * Left to the scene, Ctrl+C / Ctrl+V copied the canvas object with the part's name -- two objects of one name, the copy
+ * moving the original (user 2026-10-21). `hold` is a key kept from the scene that the modeller has no use for: the
+ * scene's cut and bulk paste act on canvas objects alone and leave the figure out of step with them.
+ */
+export type KeyAction = 'undo' | 'redo' | 'duplicate' | 'remove' | 'deselect' | 'copy' | 'paste' | 'hold' | GizmoKey
 
 /** The gizmo's modes on W, E and R, as the scene has them. */
 export type GizmoKey = 'translate' | 'rotate' | 'scale'
@@ -36,6 +42,9 @@ export function keyActionOf(e: KeyLike, selected: string): KeyAction | null {
   const key = e.key.toLowerCase()
   if (mod && key === 'z') return e.shiftKey ? 'redo' : 'undo'
   if (mod && key === 'y') return 'redo'
+  if (mod && key === 'c') return selected ? 'copy' : 'hold'
+  if (mod && key === 'v') return e.shiftKey ? 'hold' : 'paste'
+  if (mod && key === 'x') return 'hold'
   if (!selected) return null
   if (mod && key === 'd') return 'duplicate'
   if (!mod && (key === 'delete' || key === 'backspace')) return 'remove'