@things-factory/figure-ui 10.1.92 → 10.1.93

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

@@ -0,0 +1,406 @@
+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 { alignmentAt, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
+import type { Alignment } from './links.js'
+
+type Axis = 'x' | 'y' | 'z'
+
+/** A change the drawing asks of the fastening form. */
+export type FastenChange =
+  | { targetFace: string }
+  | { mode: FastenMode }
+  | { axis: Axis; how: Alignment; mm?: number }
+  | { gap: number }
+
+const SEEN: Array<[FigureFace, string]> = [
+  ['top', 'M60 30 L100 10 L200 10 L160 30 Z'],
+  ['front', 'M60 30 L160 30 L160 100 L60 100 Z'],
+  ['right', 'M160 30 L200 10 L200 80 L160 100 Z']
+]
+/** The faces the drawing cannot show on the box, as tags beside it where they are. */
+const HIDDEN: Array<[FigureFace, number, number]> = [
+  ['bottom', 30, 114],
+  ['left', 24, 62],
+  ['back', 236, 14]
+]
+const PANEL_W = 300
+
+
+/**
+ * 붙이기 그림 (user 2026-10-01) — which face of what the part is fastened to, how, and where on it; each of them chosen
+ * by pressing or dragging the drawing, none by a list of faces.
+ *
+ * The target is drawn as a box whose faces are pressed (the three it hides as tags beside it), or as the one plane the
+ * figure stands by. How is three small side views -- set on it, flush with it, its centre on it (only for a part that
+ * turns about a joint) -- and the chosen one's gap is dragged. Where is the face seen from above with the part's
+ * footprint on it: dragged, caught at the centre and at the edges from inside and outside, a guide drawn where it is
+ * caught and a dimension where it is not, which is pressed to type the number. It may go past the edges: the part that
+ * does is shaded, and a part off the face altogether is said so. Nothing is decided here: every change goes to the form
+ * (`fasten-change`), and a press or a drag let go says so (`fasten-release`), for the form to apply a fastening it holds.
+ */
+@customElement('figure-fasten-drawing')
+export class FigureFastenDrawing extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 8px;
+      outline: none;
+    }
+    svg {
+      width: 100%;
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+    svg text {
+      font: inherit;
+    }
+    div[modes] {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
+      gap: 6px;
+    }
+    div[modes] button {
+      display: grid;
+      justify-items: center;
+      padding: 2px 4px 4px;
+      font: inherit;
+      font-size: 0.72rem;
+      color: var(--md-sys-color-on-surface);
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    div[modes] button[on] {
+      border: 1.5px solid var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+    div[where] {
+      position: relative;
+    }
+    div[where] input {
+      position: absolute;
+      width: 72px;
+      font: inherit;
+      font-size: 0.75rem;
+    }
+    small[warn] {
+      color: var(--md-sys-color-tertiary);
+    }
+    small[off] {
+      color: var(--md-sys-color-error);
+    }
+  `
+
+  /** The target's name, or empty for the plane the figure stands by. */
+  @property() target = ''
+  /** The plane's name by the figure's placement: 바닥 · 천장 · 벽 · 중심. */
+  @property() planeWord = ''
+  @property({ attribute: false }) faces: string[] = []
+  @property() face = ''
+  @property({ attribute: false }) modes: FastenMode[] = ['meet', 'flush']
+  @property() mode: FastenMode = 'meet'
+  @property({ attribute: false }) view?: FaceView
+  @property({ attribute: false }) align: Partial<Record<Axis, Alignment>> = {}
+  @property({ attribute: false }) alignMm: Partial<Record<Axis, number>> = {}
+  @property({ type: Number }) gap = 0
+  /** The part being fastened (not `part`: that is every element's own). */
+  @property() partName = ''
+  @property({ type: Boolean }) locked = false
+  /** The form already says how the fastening it has lies on the face: the drawing says it only while dragging. */
+  @property({ type: Boolean }) said = false
+
+  /** 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>> }
+  @state() private typing?: Axis
+  private scale = 1
+  private gapFrom?: { y: number; gap: number }
+
+  private change(detail: FastenChange) {
+    this.dispatchEvent(new CustomEvent('fasten-change', { detail, bubbles: true, composed: true }))
+  }
+  private released() {
+    this.dispatchEvent(new CustomEvent('fasten-release', { bubbles: true, composed: true }))
+  }
+
+  render() {
+    return html`${this.renderTarget()}${this.renderModes()}${this.renderWhere()}`
+  }
+
+  /** The target box, its faces pressed; or the plane. */
+  private renderTarget() {
+    if (!this.target)
+      return svg`<svg viewBox="0 0 ${PANEL_W} 90" role="img" aria-label=${this.planeWord}>
+        <path d="M30 80 L110 30 L270 30 L190 80 Z" style="fill:var(--md-sys-color-primary);fill-opacity:.35;stroke:var(--md-sys-color-primary);stroke-width:1.5" />
+        <text x="150" y="62" text-anchor="middle" font-size="12" style="fill:var(--md-sys-color-on-primary-container)">${this.planeWord}</text>
+      </svg>`
+    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
+      this.change({ targetFace: f })
+      this.released()
+    }
+    const seen = SEEN.map(([f, d]) => {
+      const on = 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)' : 'var(--md-sys-color-primary-container)'};fill-opacity:${on ? 0.55 : has(f) ? 1 : 0.35};stroke:var(--md-sys-color-primary);stroke-width:1.5`}>
+        <title>${i18next.t('figure.label.face-' + f)}</title></path>`
+    })
+    const hidden = HIDDEN.map(([f, x, y]) => {
+      const on = 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'}`} />
+        <text x=${x} y=${y + 4} text-anchor="middle" font-size="11" style=${`fill:${on ? 'var(--md-sys-color-on-primary-container)' : 'var(--md-sys-color-on-surface-variant)'}`}>${i18next.t('figure.label.face-' + f)}</text>
+      </g>`
+    })
+    /* 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="0 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-primary-container)">${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>`)}
+          </div>`
+        : nothing}`
+  }
+
+  /** How: three side views; the chosen one's gap is dragged. */
+  private renderModes() {
+    const icon = (m: FastenMode, on: boolean) => {
+      const g = on && m !== 'centre' ? Math.min(this.gap / 4, 10) : 0
+      const base = svg`<rect x="6" y="30" width="52" height="14" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary)" />`
+      const gapDrag = on && !this.locked ? 'ns-resize' : 'pointer'
+      if (m === 'meet')
+        return svg`<svg width="64" height="48">${base}<rect gap x="22" y=${18 - g} width="20" height="12" style=${`fill:var(--md-sys-color-surface);stroke:currentColor;cursor:${gapDrag}`} />
+          ${g ? svg`<text x="46" y=${26 - g / 2} font-size="10" style="fill:currentColor">${this.gap}</text>` : nothing}</svg>`
+      if (m === 'flush')
+        return svg`<svg width="64" height="48">${base}<rect gap x="22" y=${30 - g} width="20" height="10" style=${`fill:var(--md-sys-color-surface);stroke:currentColor;cursor:${gapDrag}`} />
+          <line x1="4" y1="30" x2="60" y2="30" style="stroke:currentColor;stroke-dasharray:2 2" /></svg>`
+      return svg`<svg width="64" height="48">${base}<circle cx="32" cy="30" r="11" style="fill:var(--md-sys-color-surface);fill-opacity:.85;stroke:currentColor" /><circle cx="32" cy="30" r="2" style="fill:currentColor" /></svg>`
+    }
+    return html`<div modes>
+      ${this.modes.map(m => {
+        const on = m === this.mode
+        return html`<button mode=${m} ?on=${on} ?disabled=${this.locked}
+          @click=${() => {
+            if (on) return
+            this.change({ mode: m })
+            this.released()
+          }}
+          @pointerdown=${(ev: PointerEvent) => {
+            if (!on || this.locked || !(ev.target as Element).hasAttribute?.('gap')) return
+            ev.preventDefault()
+            ;(ev.currentTarget as Element).setPointerCapture(ev.pointerId)
+            this.gapFrom = { y: ev.clientY, gap: this.gap }
+          }}
+          @pointermove=${(ev: PointerEvent) => {
+            if (!this.gapFrom) return
+            this.change({ gap: Math.max(0, Math.round(this.gapFrom.gap + (this.gapFrom.y - ev.clientY) * 2)) })
+          }}
+          @pointerup=${() => {
+            if (!this.gapFrom) return
+            this.gapFrom = undefined
+            this.released()
+          }}>
+          ${icon(m, on)}<span>${i18next.t('figure.label.fasten-mode-' + m)}</span>
+        </button>`
+      })}
+    </div>`
+  }
+
+  /** Where the part's centre is on each axis now: the drag's, or the form's. */
+  private centreOf(view: FaceView): Record<Axis, number> {
+    if (this.dragged) return this.dragged.at
+    const at = { x: 0, y: 0, z: 0 }
+    for (const a of view.axes) at[a] = offsetOf(this.align[a], this.alignMm[a], view.face[a], view.part[a])
+    return at
+  }
+
+  /** What each axis is caught by now: at the centre, level with an edge, touching one from outside, or nothing. */
+  private caughtOf(view: FaceView, at: Record<Axis, number>): Partial<Record<Axis, string>> {
+    if (this.dragged) return this.dragged.caught
+    const out: Partial<Record<Axis, string>> = {}
+    for (const a of view.axes) {
+      const how = this.align[a] ?? 'centre'
+      if (how === 'centre') out[a] = 'centre'
+      else if (how === 'min' || how === 'max') out[a] = 'inside'
+      else if (view.face[a] !== undefined && Math.abs(Math.abs(at[a]) - (view.face[a]! + view.part[a]) / 2) < 0.5) out[a] = 'outside'
+    }
+    return out
+  }
+
+  private renderWhere() {
+    const view = this.view
+    if (!view) return nothing
+    const { h, v, sign } = screenOf(view.axes)
+    const W = PANEL_W,
+      H = 180
+    /* Room around the face for the part to go past its edges by about half itself; a plane with no size, three parts wide. */
+    const span = (a: Axis) => (view.face[a] !== undefined ? view.face[a]! + view.part[a] : view.part[a] * 3)
+    const k = Math.min((W - 40) / span(h), (H - 40) / span(v))
+    this.scale = k
+    const cx = W / 2,
+      cy = H / 2
+    const at = this.centreOf(view)
+    const caught = this.caughtOf(view, at)
+    const fw = (view.face[h] ?? 0) * k,
+      fh = (view.face[v] ?? 0) * k
+    const pw = view.part[h] * k,
+      ph = view.part[v] * k
+    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
+    const fx = cx - fw / 2,
+      fy = cy - fh / 2
+    const ix = Math.max(fx, px),
+      iy = Math.max(fy, py)
+    const iw = Math.min(fx + fw, px + pw) - ix,
+      ih = Math.min(fy + fh, py + ph) - iy
+    const { touching, sides } = faceSized ? overhangOf(view, at) : { touching: true, sides: [] as ReturnType<typeof overhangOf>['sides'] }
+    const round = this.mode === 'centre'
+    const guide = (a: Axis) => {
+      const c = caught[a]
+      if (!c) return nothing
+      const along = a === h
+      const edge = c === 'centre' ? 0 : Math.sign(at[a]) * (view.face[a] ?? 0) / 2
+      const pos = (along ? cx : cy) + sign[a] * edge * k
+      const style = `stroke:var(--md-sys-color-primary);stroke-width:${c === 'centre' ? 1 : 2.5};stroke-dasharray:${c === 'centre' ? '4 3' : ''}`
+      return along ? svg`<line x1=${pos} y1="4" x2=${pos} y2=${H - 4} style=${style} />` : svg`<line x1="4" y1=${pos} x2=${W - 4} y2=${pos} style=${style} />`
+    }
+    const dim = (a: Axis) => {
+      /* Caught by the centre or an edge, the guide says where it is; a number only where nothing caught it. */
+      if (caught[a]) return nothing
+      const along = a === h
+      const mm = Math.round(at[a])
+      const label = `${mm > 0 ? '+' : ''}${mm} mm`
+      const to = sign[a] * at[a] * k
+      const tx = along ? cx + to / 2 : 8,
+        ty = along ? H - 6 : cy + to / 2 + 4
+      return svg`${along
+          ? svg`<line x1=${cx} y1=${H - 16} x2=${cx + to} y2=${H - 16} style="stroke:var(--md-sys-color-on-surface)" />`
+          : svg`<line x1="20" y1=${cy} x2="20" y2=${cy + to} style="stroke:var(--md-sys-color-on-surface)" />`}
+        <text dim=${a} x=${tx} y=${ty} font-size="11" text-anchor=${along ? 'middle' : 'start'}
+          style="fill:var(--md-sys-color-primary);cursor:text;text-decoration:underline dotted" @click=${() => !this.locked && (this.typing = a)}>${label}</text>`
+    }
+    const faceName = this.target ? `${this.target} ${i18next.t('figure.label.face-' + this.face)}` : this.planeWord
+    const sizeWords = faceSized ? ` ${Math.round(view.face[h]!)} × ${Math.round(view.face[v]!)}` : ''
+    return html`<div where tabindex="0" @keydown=${(ev: KeyboardEvent) => this.keys(ev, view)}>
+        ${svg`<svg viewBox="0 0 ${W} ${H}" role="img" aria-label=${faceName}
+            @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="2" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:1.5" />`
+            : svg`<rect x="4" y="4" width=${W - 8} height=${H - 8} rx="6" style="fill:var(--md-sys-color-primary-container);fill-opacity:.5" />`}
+          <text x=${faceSized ? fx + 4 : 10} y=${faceSized ? fy + fh - 6 : 18} font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${faceName}${sizeWords}</text>
+          ${guide(h)}${guide(v)}
+          <g footprint style=${`cursor:${this.locked ? 'default' : 'grab'}`} @pointerdown=${(ev: PointerEvent) => this.grab(ev, at, caught)}>
+            <rect x=${px} y=${py} width=${pw} height=${ph} rx=${round ? pw / 2 : 2} style="fill:var(--md-sys-color-tertiary-container)" />
+            ${faceSized && iw > 0 && ih > 0
+              ? svg`<rect x=${ix} y=${iy} width=${iw} height=${ih} rx=${round ? Math.min(iw, ih) / 2 : 2} style="fill:var(--md-sys-color-surface)" />`
+              : !faceSized
+                ? svg`<rect x=${px} y=${py} width=${pw} height=${ph} rx=${round ? pw / 2 : 2} style="fill:var(--md-sys-color-surface)" />`
+                : nothing}
+            <rect x=${px} y=${py} width=${pw} height=${ph} rx=${round ? pw / 2 : 2}
+              style=${`fill:none;stroke:var(--md-sys-color-on-surface);stroke-width:1.5;stroke-dasharray:${touching ? '' : '4 3'}`} />
+            <text x=${px + pw / 2} y=${py + ph / 2 + 4} text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-surface)">${this.partName}</text>
+          </g>
+          ${dim(h)}${dim(v)}
+        </svg>`}
+        ${this.typing ? this.renderTyping(view, this.typing, at) : nothing}
+      </div>
+      ${this.said && !this.dragged
+        ? nothing
+        : !touching
+        ? html`<small off role="status">${i18next.t('figure.text.fasten-off-face', { face: faceName })}</small>`
+        : sides.length
+          ? html`<small warn role="status">${i18next.t('figure.text.fasten-past-edges', {
+              sides: sides.map(s => i18next.t(`figure.text.overhang-side-${s.side}`, { axis: s.axis.toUpperCase(), mm: String(s.mm) })).join(' · ')
+            })}</small>`
+          : nothing}`
+  }
+
+  private renderTyping(view: FaceView, a: Axis, at: Record<Axis, number>) {
+    const along = a === screenOf(view.axes).h
+    return html`<input type="number" step="1" aria-label=${`${a.toUpperCase()} mm`} .value=${String(Math.round(at[a]))}
+      style=${along ? 'left: calc(50% - 36px); bottom: 0' : 'left: 4px; top: calc(50% - 12px)'}
+      @keydown=${(ev: KeyboardEvent) => {
+        ev.stopPropagation()
+        if (ev.key === 'Escape') this.typing = undefined
+        if (ev.key !== 'Enter') return
+        const value = Number((ev.target as HTMLInputElement).value)
+        this.typing = undefined
+        if (!Number.isFinite(value)) return
+        this.change({ axis: a, how: 'mm', mm: Math.round(value) })
+        this.released()
+      }}
+      @blur=${() => (this.typing = undefined)} />`
+  }
+
+  private grab(ev: PointerEvent, at: Record<Axis, number>, caught: Partial<Record<Axis, string>>) {
+    if (this.locked) return
+    ;(ev.currentTarget as Element).closest('svg')!.setPointerCapture(ev.pointerId)
+    this.dragged = { at: { ...at }, caught: { ...caught } }
+  }
+
+  /** The footprint follows the pointer, caught at the centre and edges within a few pixels. */
+  private drag(ev: PointerEvent, view: FaceView, cx: number, cy: number) {
+    if (!this.dragged) return
+    const svgEl = ev.currentTarget as SVGSVGElement
+    const pt = svgEl.createSVGPoint()
+    pt.x = ev.clientX
+    pt.y = ev.clientY
+    const p = pt.matrixTransform(svgEl.getScreenCTM()!.inverse())
+    const { h, v, sign } = screenOf(view.axes)
+    const at = { ...this.dragged.at },
+      caught: Partial<Record<Axis, string>> = {}
+    for (const [a, d] of [
+      [h, (sign[h] * (p.x - cx)) / this.scale],
+      [v, (sign[v] * (p.y - cy)) / this.scale]
+    ] as const) {
+      const got = alignmentAt(d, view.face[a], view.part[a], view.edges[a], 8 / this.scale)
+      at[a] = offsetOf(got.how, got.mm, view.face[a], view.part[a])
+      if (got.caught) caught[a] = got.caught
+    }
+    this.dragged = { at, caught }
+  }
+
+  private drop() {
+    const d = this.dragged
+    if (!d || !this.view) return
+    this.dragged = undefined
+    for (const a of this.view.axes) {
+      const got = alignmentAt(d.at[a], this.view.face[a], this.view.part[a], this.view.edges[a], 0.5)
+      this.change({ axis: a, how: got.how, ...(got.how === 'mm' ? { mm: got.mm } : {}) })
+    }
+    this.released()
+  }
+
+  /** Arrows move the part a millimetre, ten with Shift; the centre and edges still catch it. */
+  private keys(ev: KeyboardEvent, view: FaceView) {
+    const step = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[ev.key]
+    if (!step || this.locked || this.typing) return
+    ev.preventDefault()
+    ev.stopPropagation()
+    const by = ev.shiftKey ? 10 : 1
+    const at = this.centreOf(view)
+    const { h, v, sign } = screenOf(view.axes)
+    ;[h, v].forEach((a, i) => {
+      if (!step[i]) return
+      /* Up the screen is up the face: a Y that rises goes up with the arrow. */
+      const got = alignmentAt(at[a] + sign[a] * step[i]! * by, view.face[a], view.part[a], view.edges[a], by / 2)
+      this.change({ axis: a, how: got.how, ...(got.how === 'mm' ? { mm: got.mm } : {}) })
+    })
+    this.released()
+  }
+}

package/client/modeller/figure-links.ts

@@ -50,9 +50,14 @@ import {
   type MotionForm
 } from './links.js'
 import { SidePanelStyles } from './side-panel-styles.js'
+import './figure-fasten-drawing.js'
+import type { FastenChange } from './figure-fasten-drawing.js'
+import { faceViewOf, modeOf, myFaceFor, turnsInPlace, type FastenMode } from './fasten-geometry.js'
 import { HelpToggles } from './help.js'
 
 const FACES = Object.keys(FIGURE_FACES) as FigureFace[]
+/** The target list's entry for the plane the figure stands by. */
+const PLANE = '__plane'
 
 const freshFasten = () => ({
   face: 'bottom' as FigureFace | 'centre',
@@ -521,15 +526,19 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
     /* On the mounting plane only the faces it takes: a bottom or a top on the floor, a back on a wall. */
     const plane = mountingPlaneOf(asset)
+    const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'))
     /* Its outer faces, and its centre -- a roller spins about its middle (ADR-0093); the mounting plane takes a face. */
     const mineFaces: Array<FigureFace | 'centre'> = [
       ...(facesOf(asset, this.partId).filter(face => FACES.includes(face as FigureFace) && (!f.toPlane || plane.faces.includes(face as FigureFace))) as FigureFace[]),
       ...(f.toPlane ? [] : (['centre'] as const))
     ]
-    const myFace = mineFaces.includes(f.face) ? f.face : mineFaces[0]!
     const theirFaces = f.target ? facesOf(asset, f.target) : FACES
     const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0]!
     const aim = f.toPlane ? ('plane' as const) : { part: f.target, face: targetFace }
+    /* The part's own face is not chosen: the target's face and how give it (user 2026-10-01; the kernel takes no other). */
+    const mode: FastenMode = f.toPlane ? 'meet' : modeOf(f.face, f.facing)
+    const derived = f.toPlane || f.target ? myFaceFor(asset, this.partId, aim, mode) : undefined
+    const myFace = derived ?? (mineFaces.includes(f.face) ? f.face : mineFaces[0]!)
     const align = f.target || f.toPlane ? alignOf(asset, this.partId, aim, f.align, f.alignMm, !!f.twist, f.alignInput) : undefined
     const action =
       f.toPlane || f.target
@@ -599,42 +608,43 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           </div>
           ${this.renderDetachWords()}`
         : nothing}
-      ${f.toPlane
-        ? html`<p hint>${i18next.t('figure.text.fasten-edit-on-plane')}</p>`
-        : html`<div form>
-              <span>${i18next.t('figure.label.target-part')}</span>
-              <select @change=${(e: Event) => this.aimAt(asset, { ...f, target: (e.target as HTMLSelectElement).value })}>
-                <option value="" ?selected=${!f.target}>${i18next.t('figure.label.target-part-placeholder')}</option>
-                ${targets.map(one =>
-                  loops(one)
-                    ? html`<option value=${one} disabled>${i18next.t('figure.text.target-would-loop', { part: one, mine: this.partId })}</option>`
-                    : html`<option value=${one} ?selected=${one === f.target}>${one}</option>`
-                )}
-              </select>
-            </div>
-            ${f.target
-              ? html`<div form>
-                    <span>${i18next.t('figure.label.my-face')}</span>
-                    <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as FigureFace | 'centre' })}>
-                      ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-                    </select>
-                    <span>${i18next.t('figure.label.target-face')}</span>
-                    <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as FigureFace })}>
-                      ${theirFaces.map(face => html`<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-                    </select>
-                  </div>`
-              : html`<p hint>${i18next.t('figure.text.fasten-target-first')}</p>`}`}
+      <div form>
+        <span>${i18next.t('figure.label.target-part')}</span>
+        <select @change=${(e: Event) => {
+          const value = (e.target as HTMLSelectElement).value
+          this.aimAt(asset, value === PLANE ? { ...f, toPlane: true, target: '' } : { ...f, toPlane: false, target: value })
+        }}>
+          <option value="" ?selected=${!f.target && !f.toPlane}>${i18next.t('figure.label.target-part-placeholder')}</option>
+          <option value=${PLANE} ?selected=${f.toPlane}>${planeWord}</option>
+          ${targets.map(one =>
+            loops(one)
+              ? html`<option value=${one} disabled>${i18next.t('figure.text.target-would-loop', { part: one, mine: this.partId })}</option>`
+              : html`<option value=${one} ?selected=${one === f.target && !f.toPlane}>${one}</option>`
+          )}
+        </select>
+      </div>
+      ${f.toPlane || f.target
+        ? html`<p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
+            <figure-fasten-drawing
+              .target=${f.toPlane ? '' : f.target}
+              .planeWord=${planeWord}
+              .faces=${theirFaces}
+              .face=${targetFace}
+              .modes=${f.toPlane ? (['meet'] as FastenMode[]) : ([...(['meet', 'flush'] as FastenMode[]), ...(turnsInPlace(asset, this.partId) ? (['centre'] as FastenMode[]) : [])])}
+              .mode=${mode}
+              .view=${faceViewOf(asset, this.partId, aim)}
+              .align=${f.align}
+              .alignMm=${f.alignMm}
+              .gap=${f.gap}
+              .partName=${this.partId}
+              ?locked=${this.locked}
+              ?said=${!!held}
+              @fasten-change=${(e: CustomEvent<FastenChange>) => this.onFastenChange(asset, e.detail)}
+              @fasten-release=${() => this.onFastenRelease(!!held)}
+            ></figure-fasten-drawing>`
+        : html`<p hint>${i18next.t('figure.text.fasten-target-first')}</p>`}
       ${(f.toPlane || f.target) ? html`<details fasten-detail>
         <summary>${i18next.t('figure.label.fasten-detail')} · <span fasten-summary>${detail.length ? detail.join(' · ') : i18next.t('figure.text.fasten-summary-default')}</span></summary>
-        ${f.toPlane
-          ? nothing
-          : html`<div form>
-              <span>${i18next.t('figure.label.facing')}</span>
-              <select @change=${(e: Event) => (this.fasten = { ...f, facing: (e.target as HTMLSelectElement).value as 'meet' | 'flush' })}>
-                <option value="meet" ?selected=${f.facing === 'meet'}>${i18next.t('figure.label.facing-meet')}</option>
-                <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
-              </select>
-            </div>`}
         ${this.renderAlignment(f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : [])}
         <div form>
           <span>${i18next.t('figure.label.gap')}</span>
@@ -650,6 +660,32 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     `
   }
 
+  /** 「lid 의 아랫면을 bin 의 윗면에 맞닿게」: what the fastening is, in one line, the part's own face said as a result. */
+  private sentenceOf(myFace: string, to: string, mode: FastenMode) {
+    return i18next.t(`figure.text.fasten-sentence-${mode}`, { part: this.partId, face: i18next.t('figure.label.face-' + myFace), to })
+  }
+
+  /** A change the drawing asks: to the form only; the preview behind follows the form. */
+  private onFastenChange(asset: FigureAsset, c: FastenChange) {
+    const f = this.fasten
+    if ('targetFace' in c) this.aimAt(asset, { ...f, targetFace: c.targetFace as FigureFace })
+    else if ('mode' in c) this.fasten = { ...f, face: c.mode === 'centre' ? 'centre' : f.face === 'centre' ? 'bottom' : f.face, facing: c.mode === 'flush' ? 'flush' : 'meet' }
+    else if ('gap' in c) this.fasten = { ...f, gap: c.gap }
+    else
+      this.fasten = {
+        ...f,
+        align: { ...f.align, [c.axis]: c.how },
+        alignMm: c.how === 'mm' ? { ...f.alignMm, [c.axis]: c.mm ?? 0 } : f.alignMm
+      }
+  }
+
+  /** Let go: a fastening the part already has is applied as it now is (one step); a new one waits for 붙이기. */
+  private async onFastenRelease(held: boolean) {
+    if (!held) return
+    await this.updateComplete
+    if (this.fastenCandidate) this.command(this.fastenCandidate.action)
+  }
+
   private renderDetachWords() {
     return this.detachWords.length ? html`<ul detach-words>${this.detachWords.map(line => html`<li>${line}</li>`)}</ul>` : nothing
   }

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

@@ -6,6 +6,7 @@ import { i18next, localize } from '@operato/i18n'
 import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { drawnOf } from './section-drawing.js'
+import './figure-cavity-drawing.js'
 import {
   END_FACE,
   SIDE_FACE,
@@ -188,6 +189,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
             </small>`
           : nothing}
       </div>
+      ${cavity ? html`<figure-cavity-drawing .body=${body} .perSide=${this.perSide} ?locked=${this.locked}></figure-cavity-drawing>` : nothing}
       ${cavity
         ? html`<div field>
               <label>${i18next.t('figure.label.section-wall')}</label>

package/client/modeller/section-controls.ts

@@ -113,3 +113,22 @@ export function cavityDepthOf(shape: FigureEvaluatedShape): number {
   const closed = (x: typeof c.start) => (x === 'open' ? 0 : x.closed)
   return mm(e.end - e.start - closed(c.start) - closed(c.end))
 }
+
+/** The inside as it stands, every side's wall written out. */
+export function cavityWorkingOf(shape: FigureEvaluatedShape): { wall: Record<string, number>; start: FigureCavityRequest['start']; end: FigureCavityRequest['end'] } | undefined {
+  const c = shape.cavity
+  const e = shape.extrusion
+  if (!c || !e) return undefined
+  return { wall: Object.fromEntries(sidesOf(e.axis).map(s => [s, c.wall[s]!])), start: c.start, end: c.end }
+}
+
+/** A wall dragged to `value`: that side alone, or every side when the walls are one. */
+export function wallDragged(wall: Record<string, number>, side: string, value: number, perSide: boolean): Record<string, number> {
+  const v = Math.max(1, Math.round(value))
+  return perSide ? { ...wall, [side]: v } : Object.fromEntries(Object.keys(wall).map(s => [s, v]))
+}
+
+/** An end pressed: open becomes closed by the default wall, closed becomes open. */
+export function endToggled(shape: FigureEvaluatedShape, now: FigureCavityRequest['start']): FigureCavityRequest['start'] {
+  return now === 'open' ? { closed: defaultWallOf(shape) } : 'open'
+}

package/dist-client/modeller/fasten-geometry.d.ts

@@ -0,0 +1,60 @@
+import type { FigureAsset, FigureFace } from '@hatiolab/figure-model';
+import { type Alignment } from './links.js';
+type Axis = 'x' | 'y' | 'z';
+export type FastenMode = 'meet' | 'flush' | 'centre';
+export type FastenTarget = {
+    part: string;
+    face: string;
+} | 'plane';
+/**
+ * The part's own face a fastening takes: the one looking against the target's face (올려놓기), with it (같은 면), or its
+ * centre. Read from where each face looks now, so a part standing turned offers the face that is really there.
+ * Undefined when the part has no such face.
+ */
+export declare function myFaceFor(asset: FigureAsset, part: string, target: FastenTarget, mode: FastenMode): FigureFace | 'centre' | undefined;
+/** Which way the fastening is, read back from the part's face and facing. */
+export declare const modeOf: (face: string, facing: "meet" | "flush") => FastenMode;
+/**
+ * The face seen from above: its two axes across (as the form's alignment names them), the face's size on each -- none
+ * for a plane with no declared size -- the part's footprint on each, and whether its edges can be lined up with.
+ */
+export interface FaceView {
+    axes: [Axis, Axis];
+    face: Partial<Record<Axis, number>>;
+    part: Record<Axis, number>;
+    edges: Record<Axis, boolean>;
+}
+export declare function faceViewOf(asset: FigureAsset, part: string, target: FastenTarget): FaceView | undefined;
+/** Where the part's centre is from the face's centre along one axis, for the way it is aligned there. */
+export declare function offsetOf(how: Alignment | undefined, mm: number | undefined, face: number | undefined, part: number): number;
+/**
+ * A place dropped on the face, as the form's alignment: caught at the centre, at an edge from inside (level with it:
+ * `min` / `max`, where the edges can be lined up with), or at an edge from outside (touching it, as a distance), when
+ * within `catchMm`; anywhere else a distance off centre, whole millimetres.
+ */
+export declare function alignmentAt(d: number, face: number | undefined, part: number, edges: boolean, catchMm: number): {
+    how: Alignment;
+    mm?: number;
+    caught?: 'centre' | 'inside' | 'outside';
+};
+/** How far the footprint comes past the face's edges, per side, and whether it touches the face at all. */
+export declare function overhangOf(view: FaceView, at: Record<Axis, number>): {
+    touching: boolean;
+    sides: Array<{
+        axis: Axis;
+        side: 'low' | 'high';
+        mm: number;
+    }>;
+};
+/** Whether the part turns about a joint: then 가운데를 면에 is offered -- a roller spinning in place. */
+export declare const turnsInPlace: (asset: FigureAsset, part: string) => boolean;
+/**
+ * How the face lies on the screen: X across when it is one of the face's axes, else Z; the other down the screen -- up
+ * for Y, which rises, so a front face is seen as it stands and not upside down.
+ */
+export declare function screenOf(axes: readonly [Axis, Axis]): {
+    h: Axis;
+    v: Axis;
+    sign: Record<Axis, 1 | -1>;
+};
+export {};