@things-factory/figure-ui 10.1.203 → 10.1.205

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-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.
@@ -115,6 +115,17 @@ 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/links.ts

@@ -1,6 +1,6 @@
-import { FIGURE_FACES, figureShapeFaces, figurePartsExtentOf, compileFigureAsset, figureFollowOf, proposeFigureProportion, defaultInstanceSizeRange, foldInstanceSizeRange, figureAttachmentsOf, figureBindingsOf, figureInstanceSizeLimitsOf, figureFollowableAxesOf, figureShapeProviderOf, figureMimicTermsOf, figureFastenKeptPlaceOf, figureFastenAxesOf, figureJointAsFixed, figureJointWithMotion } from '@hatiolab/figure-model'
+import { FIGURE_FACES, figureShapeFaces, figurePartsExtentOf, compileFigureAsset, figureFollowOf, proposeFigureProportion, defaultInstanceSizeRange, foldInstanceSizeRange, figureAttachmentsOf, figureBindingsOf, figureInstanceSizeLimitsOf, figureFollowableAxesOf, figureShapeProviderOf, figureMimicTermsOf, figureFastenKeptPlaceOf, figureFastenAxesOf, figureJointAsFixed, figureJointWithMotion, figureSurfaceOf } from '@hatiolab/figure-model'
 import type { FigureFollow, FigureSizeRange } from '@hatiolab/figure-model'
-import type { FigureAsset, FigureAuthoringAction, FigureBindingPlace, FigureDimensionSource, FigureFace, FigureFacing, FigureJoint } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureBindingPlace, FigureDimensionSource, FigureFace, FigureFacing, FigureJoint, FigureSurfacePlace } from '@hatiolab/figure-model'
 import { startingShapeKindOf } from './starting-shape.js'
 import { boxOf } from './align.js'
 import { graphValuesOf, type FigureRevision } from './revision.js'
@@ -35,6 +35,23 @@ export function followOf(asset: FigureAsset, part: string, axis: Axis): Follow {
   return figureFollowOf(asset, part, axis)
 }
 
+/**
+ * The parts whose size follows the figure's size on some axis, in the model's order: the ones that change when the
+ * figure is resized on a drawing. Read by figure-model's own follow (`figureFollowOf`), not worked out again here.
+ */
+export function sizeFollowersOf(asset: FigureAsset): string[] {
+  const parts = (modelOf(asset).nodes as Array<{ id: string; op: string }>).filter(n => n.op === 'place@1').map(n => n.id)
+  return parts.filter(part =>
+    AXES.some(axis => {
+      try {
+        return figureFollowOf(asset, part, axis).of === 'instance'
+      } catch {
+        return false
+      }
+    })
+  )
+}
+
 /** Whether the asset declares an instance size on an axis — only then can a dimension follow it. */
 export const hasInstanceSize = (asset: FigureAsset, axis: Axis) => modelOf(asset).inputs.some(i => i.id === `size.${axis}` && i.role === 'design')
 
@@ -224,7 +241,14 @@ export function measureNow(revision: FigureRevision, part: string, axis: Axis):
  */
 export function facesOf(asset: FigureAsset, part: string): string[] {
   const shape = modelOf(asset).nodes.find(n => n.id === `${part}.shape`)
-  return inScreenOrder(Object.keys((shape && figureShapeFaces(shape as never)) ?? {}))
+  const faces = (shape && figureShapeFaces(shape as never)) ?? {}
+  /* A cylinder's curved side is no face: a part is fastened to a point on it (ADR-0140 3.9, `surfaceOf`). */
+  return inScreenOrder(Object.keys(faces).filter(f => faces[f]!.contact !== 'line'))
+}
+
+/** The curved surface a part offers to be fastened to at a point: a cylinder's side or a sphere's round (ADR-0140 3.9). */
+export function surfaceOf(asset: FigureAsset, part: string): { form: 'around' | 'toward'; axis: Axis } | undefined {
+  return figureSurfaceOf(asset, part)
 }
 
 /** Faces in the order the screen lists them: the six outer ones left to front, then the rest as the shape gives them. */
@@ -242,7 +266,7 @@ export function faceAxisOf(asset: FigureAsset, part: string, face: string): Axis
 
 /** Whether `attach` can take this part: any part whose shape has a flat face. */
 export function canFasten(asset: FigureAsset, part: string): boolean {
-  return facesOf(asset, part).length > 0
+  return facesOf(asset, part).length > 0 || !!surfaceOf(asset, part)
 }
 
 const OUTER: Record<Axis, [string, string]> = { x: ['left', 'right'], y: ['bottom', 'top'], z: ['back', 'front'] }
@@ -267,13 +291,15 @@ export function rowAxesOf(asset: FigureAsset, part: string): Axis[] {
  * Why a part cannot be made into a row here, in the terms `rowAxesOf` refuses it: said, not hidden (ADR-0097 §5.5).
  * Nothing when it can, or when it already is a row (that row is shown where it stands).
  */
-export function rowBlockOf(asset: FigureAsset, part: string): 'unfastened' | 'on-plane' | 'holds-parts' | 'at-origin' | undefined {
+export function rowBlockOf(asset: FigureAsset, part: string): 'unfastened' | 'on-plane' | 'holds-parts' | 'at-origin' | 'on-surface' | undefined {
   const joints = asset.joints ?? []
   const j = joints.find(o => o.body1.part === part)
   if (!j) return 'unfastened'
   if (j.repeat) return undefined
   if (!('part' in j.body0)) return 'on-plane'
   if (joints.some(o => 'part' in o.body0 && o.body0.part === part)) return 'holds-parts'
+  /* On a point of a curved surface a row has no face to run across (ADR-0140 3.9): the kernel refuses it. */
+  if ('surface' in j.body0) return 'on-surface'
   if (!('face' in j.body0) || 'at' in j.body1) return 'at-origin'
   return undefined
 }
@@ -372,13 +398,29 @@ export function fasteningOf(
   alignMm: Partial<Record<Axis, number>>
   /** Placed by a part's origin (ADR-0107 decision 4): no face to fasten by, and the form does not write it. */
   atOrigin?: true
+  /** On a point of the target's curved surface (ADR-0140 3.9), as the record says it. */
+  surface?: FigureSurfacePlace
 } | null {
   const record = revision.asset.joints?.find(j => j.body1.part === part)
   if (!record) return null
   const toPlane = 'plane' in record.body0
   const target = 'part' in record.body0 ? record.body0.part : ''
+  const surface = 'surface' in record.body0 ? record.body0.surface : undefined
   const targetFace = 'face' in record.body0 ? record.body0.face : 'top'
-  const atOrigin = !('plane' in record.body0) && (!('face' in record.body0) || 'at' in record.body1)
+  const atOrigin = !('plane' in record.body0) && ((!('face' in record.body0) && !surface) || 'at' in record.body1)
+  if (surface)
+    return {
+      toPlane,
+      target,
+      targetFace,
+      facing: record.origin?.facing ?? 'meet',
+      gap: typeof record.origin?.gap === 'number' ? record.origin.gap : 0,
+      ...(record.origin?.gap !== undefined && typeof record.origin.gap !== 'number' ? { gapKept: record.origin.gap } : {}),
+      align: {},
+      alignMm: {},
+      surface,
+      ...(atOrigin ? { atOrigin: true as const } : {})
+    }
   /* Where across the face: as the record says it, and where it says nothing, where the part stands now. */
   const kept = placeKeptOf(revision, part, toPlane ? 'plane' : { part: target, face: targetFace })
   for (const [axis, how] of Object.entries(record.origin?.align ?? {}) as Array<[Axis, unknown]>) {

package/client/modeller/section-drawing.ts

@@ -1,6 +1,5 @@
 import { FIGURE_SECTION_PLANE, FIGURE_SECTION_POINT_LIMIT, checkFigureSection, figureExtrusionFeaturesOf, figureSectionSidesOf } from '@hatiolab/figure-model'
 import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape, FigureSection, FigureSectionIssue, FigureSectionMeasure, FigureSectionPoint } from '@hatiolab/figure-model'
-import { END_FACE } from './section-controls.js'
 
 /*
  * What the section editor does to a drawn section's points, and how it says what is wrong with them (ADR-0100 §3.2).
@@ -218,14 +217,15 @@ export function sectionActionOf(part: string, kind: FigureSection['kind'] | unde
 }
 
 /**
- * What a measure's field says under it: that it follows another value, or -- given where along the push a length
- * change keeps the part (1 its start, -1 its end, 0 its centre) -- the face it keeps; null when there is nothing to say.
+ * What a measure's field says under it: that it follows another value, or what a measure typed keeps -- the part's
+ * middle, or its fastening (ADR-0140 4.1, figure-model's `figureSizeEditOf`); null when there is nothing to say.
  */
-export function measureNoteOf(measure: FigureSectionMeasure | undefined, kept: -1 | 0 | 1 | undefined, axis: Axis): { key: string; face?: string } | null {
+export function measureNoteOf(measure: FigureSectionMeasure | undefined, kept: 'centre' | 'relation' | 'none' | undefined): { key: string } | null {
   if (measure === 'linked') return { key: 'figure.text.section-editor-linked' }
-  if (kept === undefined) return null
-  if (kept === 0) return { key: 'figure.text.section-editor-keeps-centre' }
-  return { key: 'figure.text.section-editor-keeps', face: END_FACE(axis, kept === 1 ? 'start' : 'end') }
+  if (kept === 'centre') return { key: 'figure.text.size-keeps-centre' }
+  if (kept === 'relation') return { key: 'figure.text.size-keeps-fastening' }
+  if (kept === 'none') return { key: 'figure.text.size-keeps-none' }
+  return null
 }
 
 /** The words beside a drawn section's edit button: how many points it has, and the apex when its end is one point. */