@things-factory/figure-ui 10.1.92 → 10.1.93

package/client/modeller/fasten-geometry.ts

@@ -0,0 +1,152 @@
+import { figurePartFaceOf } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureFace } from '@hatiolab/figure-model'
+
+import { boxOf } from './align.js'
+import { alignAxesOf, facesOf, faceAxisOf, hasInstanceSize, mountingPlaneOf, type Alignment } from './links.js'
+
+/*
+ * What the 붙이기 drawing reads (user 2026-10-01): the face a part is fastened to, seen from above, and where the part
+ * lies on it. A fastening is chosen by the target's face and how (올려놓기 · 같은 면에 맞추기 · 가운데를 면에); the part's
+ * own face follows from those -- the kernel takes no other pairing (figure-model `attach`: meet is the facing face,
+ * flush the same one, a face along another axis would need a turn).
+ */
+
+type Axis = 'x' | 'y' | 'z'
+const AXES: Axis[] = ['x', 'y', 'z']
+export type FastenMode = 'meet' | 'flush' | 'centre'
+export type FastenTarget = { part: string; face: string } | 'plane'
+
+const OPPOSITE: Record<FigureFace, FigureFace> = { left: 'right', right: 'left', bottom: 'top', top: 'bottom', back: 'front', front: 'back' }
+const NORMAL: Record<FigureFace, [Axis, 1 | -1]> = { left: ['x', -1], right: ['x', 1], bottom: ['y', -1], top: ['y', 1], back: ['z', -1], front: ['z', 1] }
+
+/** The world direction a part's face looks along now, turns and all; by its name when the face's outline is not read. */
+function directionOf(asset: FigureAsset, part: string, face: string): [Axis, 1 | -1] | undefined {
+  const area = (() => {
+    try {
+      return figurePartFaceOf(asset, part, face)
+    } catch {
+      return undefined
+    }
+  })()
+  if (area) {
+    const k = area.normal.findIndex(v => Math.abs(v) > 0.5)
+    if (k >= 0) return [AXES[k]!, area.normal[k]! > 0 ? 1 : -1]
+  }
+  return face in NORMAL ? NORMAL[face as FigureFace] : undefined
+}
+
+/**
+ * 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 function myFaceFor(asset: FigureAsset, part: string, target: FastenTarget, mode: FastenMode): FigureFace | 'centre' | undefined {
+  if (mode === 'centre') return target === 'plane' ? undefined : 'centre'
+  const want: [Axis, 1 | -1] | undefined =
+    target === 'plane'
+      ? /* The plane is met from above on a floor, from in front on a wall. */ [mountingPlaneOf(asset).normal, -1]
+      : (() => {
+          const d = directionOf(asset, target.part, target.face)
+          return d && [d[0], (mode === 'meet' ? -d[1] : d[1]) as 1 | -1]
+        })()
+  if (!want) return undefined
+  const mine = facesOf(asset, part).filter((f): f is FigureFace => f in NORMAL)
+  const hit = mine.find(f => {
+    const d = directionOf(asset, part, f)
+    return d && d[0] === want[0] && d[1] === want[1]
+  })
+  return hit ?? (target !== 'plane' && mode === 'meet' && target.face in OPPOSITE ? OPPOSITE[target.face as FigureFace] : undefined)
+}
+
+/** Which way the fastening is, read back from the part's face and facing. */
+export const modeOf = (face: string, facing: 'meet' | 'flush'): FastenMode => (face === 'centre' ? 'centre' : facing)
+
+/**
+ * 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 function faceViewOf(asset: FigureAsset, part: string, target: FastenTarget): FaceView | undefined {
+  const across = alignAxesOf(asset, part, target)
+  if (across.length !== 2) return undefined
+  const box = boxOf(asset, part)
+  if (!box) return undefined
+  const axes = [across[0]!.axis, across[1]!.axis] as [Axis, Axis]
+  const face: Partial<Record<Axis, number>> = {}
+  if (target === 'plane') {
+    for (const a of axes) if (hasInstanceSize(asset, a)) face[a] = asset.designInputs[`size.${a}`]!
+  } else {
+    const theirs = boxOf(asset, target.part)
+    const normal = faceAxisOf(asset, target.part, target.face)
+    for (const a of axes) if (theirs && a !== normal) face[a] = theirs.extent[a]
+  }
+  return {
+    axes,
+    face,
+    part: { x: box.extent.x, y: box.extent.y, z: box.extent.z },
+    edges: Object.fromEntries(across.map(o => [o.axis, o.edges])) as Record<Axis, boolean>
+  }
+}
+
+/** Where the part's centre is from the face's centre along one axis, for the way it is aligned there. */
+export function offsetOf(how: Alignment | undefined, mm: number | undefined, face: number | undefined, part: number): number {
+  if (how === 'min' && face !== undefined) return -(face - part) / 2
+  if (how === 'max' && face !== undefined) return (face - part) / 2
+  if (how === 'mm' || how === 'share') return mm ?? 0
+  return 0
+}
+
+/**
+ * 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 function alignmentAt(d: number, face: number | undefined, part: number, edges: boolean, catchMm: number): { how: Alignment; mm?: number; caught?: 'centre' | 'inside' | 'outside' } {
+  if (Math.abs(d) <= catchMm) return { how: 'centre', caught: 'centre' }
+  if (face !== undefined) {
+    const inside = (face - part) / 2,
+      outside = (face + part) / 2
+    for (const [at, how] of [
+      [-inside, 'min'],
+      [inside, 'max']
+    ] as const)
+      if (Math.abs(d - at) <= catchMm && inside > 0) return edges ? { how, caught: 'inside' } : { how: 'mm', mm: Math.round(at), caught: 'inside' }
+    for (const at of [-outside, outside]) if (Math.abs(d - at) <= catchMm) return { how: 'mm', mm: Math.round(at), caught: 'outside' }
+  }
+  return { how: 'mm', mm: Math.round(d) }
+}
+
+/** How far the footprint comes past the face's edges, per side, and whether it touches the face at all. */
+export function overhangOf(view: FaceView, at: Record<Axis, number>): { touching: boolean; sides: Array<{ axis: Axis; side: 'low' | 'high'; mm: number }> } {
+  const sides: Array<{ axis: Axis; side: 'low' | 'high'; mm: number }> = []
+  let touching = true
+  for (const a of view.axes) {
+    const face = view.face[a]
+    if (face === undefined) continue
+    const lo = at[a] - view.part[a] / 2,
+      hi = at[a] + view.part[a] / 2
+    if (lo >= face / 2 || hi <= -face / 2) touching = false
+    if (-face / 2 - lo > 0.5) sides.push({ axis: a, side: 'low', mm: Math.round(-face / 2 - lo) })
+    if (hi - face / 2 > 0.5) sides.push({ axis: a, side: 'high', mm: Math.round(hi - face / 2) })
+  }
+  return { touching, sides }
+}
+
+/** Whether the part turns about a joint: then 가운데를 면에 is offered -- a roller spinning in place. */
+export const turnsInPlace = (asset: FigureAsset, part: string) => (asset.joints ?? []).some(j => j.body1.part === part && (j.type === 'revolute' || j.body1.face === 'centre'))
+
+/**
+ * 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 function screenOf(axes: readonly [Axis, Axis]): { h: Axis; v: Axis; sign: Record<Axis, 1 | -1> } {
+  const h = axes.includes('x') ? 'x' : 'z'
+  const v = axes.find(a => a !== h)!
+  return { h, v, sign: { x: 1, y: 1, z: 1, [v]: v === 'y' ? -1 : 1 } as Record<Axis, 1 | -1> }
+}

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

@@ -0,0 +1,259 @@
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { figureCavitySectionOf } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape, FigureSection } from '@hatiolab/figure-model'
+import { cavityRefusalOf, cavityWorkingOf, END_FACE, endToggled, mm, SIDE_FACE, wallDragged } from './section-controls.js'
+
+type Axis = 'x' | 'y' | 'z'
+type End = 'start' | 'end'
+type Body = { id: string; shape: FigureEvaluatedShape }
+
+/** How the section is laid on the screen, by the axis it is pushed along: across to the right, then down. */
+const SCREEN: Record<Axis, [Axis, Axis]> = { y: ['x', 'z'], x: ['z', 'y'], z: ['x', 'y'] }
+
+/**
+ * 속 공간 그림 — the inside of a pushed part drawn, and edited by drawing (user 2026-10-01: 「이해와 편집이 직관적이지 않다」).
+ *
+ * Seen along the push, the section and its inside: a handle in the middle of each wall is dragged to its thickness,
+ * every wall together unless 면마다 벽 is on. Cut along the push, the walls and the two ends: an end pressed opens or
+ * closes it, a closed end's inner line is dragged to its thickness. While dragging, the figure behind shows what the
+ * inside makes (`command-live`); letting go sends one `set-cavity`. What the kernel would refuse is drawn in the error
+ * colour and said, by the kernel's own check, and is not sent.
+ */
+@customElement('figure-cavity-drawing')
+export class FigureCavityDrawing extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 6px;
+    }
+    svg {
+      width: 100%;
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+    svg text {
+      font: inherit;
+    }
+    small[refusal] {
+      color: var(--md-sys-color-error);
+    }
+  `
+
+  @property({ attribute: false }) body?: Body
+  @property({ type: Boolean }) locked = false
+  /** Walls one per side: a handle moves its own wall only. */
+  @property({ type: Boolean }) perSide = false
+
+  /** What is being dragged, and the inside it makes; undefined when nothing is. */
+  @state() private working?: ReturnType<typeof cavityWorkingOf>
+  @state() private refusal = ''
+  private dragging: { kind: 'wall'; side: string } | { kind: 'end'; end: End } | null = null
+  private pressedAt = 0
+
+  private get now() {
+    return this.working ?? (this.body ? cavityWorkingOf(this.body.shape) : undefined)
+  }
+
+  private request(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): FigureCavityRequest {
+    return { wall: { ...w.wall }, start: w.start, end: w.end }
+  }
+
+  private action(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): FigureAuthoringAction {
+    return { kind: 'set-cavity', part: this.body!.id, cavity: this.request(w) }
+  }
+
+  private judge(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): string {
+    const ask = cavityRefusalOf(this.body!.shape, this.request(w))
+    if (!ask) return ''
+    if (ask.code === 'wall-too-thick') return i18next.t('figure.text.section-wall-over', { max: String(ask.max) })
+    if (ask.code === 'ends-too-thick') return i18next.t('figure.text.section-ends-over', { max: String(ask.max) })
+    return i18next.t('figure.text.section-not-positive')
+  }
+
+  /** The working inside while dragging: drawn, judged, and previewed behind when the kernel would take it. */
+  private hold(w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+    this.working = w
+    this.refusal = this.judge(w)
+    this.emit('command-live', this.refusal ? null : this.action(w))
+  }
+
+  private release() {
+    const w = this.working
+    this.dragging = null
+    this.working = undefined
+    if (!w) return
+    /* Refused: nothing is sent, and the reason stays said until the next drag -- letting go must not look like taking it. */
+    if (this.refusal) {
+      this.emit('command-live', null)
+      return
+    }
+    this.emit('command', this.action(w))
+  }
+
+  private emit(name: 'command' | 'command-live', action: FigureAuthoringAction | null) {
+    this.dispatchEvent(new CustomEvent(name, { detail: { action }, bubbles: true, composed: true }))
+  }
+
+  private point(ev: PointerEvent, el: SVGSVGElement) {
+    const pt = el.createSVGPoint()
+    pt.x = ev.clientX
+    pt.y = ev.clientY
+    return pt.matrixTransform(el.getScreenCTM()!.inverse())
+  }
+
+  render() {
+    const e = this.body?.shape.extrusion
+    const w = this.now
+    if (!e || !w || (e.section.kind !== 'rectangle' && e.section.kind !== 'ellipse')) return nothing
+    return html`${this.top(e, w)}${this.side(e, w)}
+      ${this.refusal ? html`<small refusal role="alert">${this.refusal}</small>` : nothing}`
+  }
+
+  /** Seen along the push: the section, its inside and a handle on each wall. */
+  private top(e: NonNullable<FigureEvaluatedShape['extrusion']>, w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+    const [h, v] = SCREEN[e.axis]
+    const s = e.section
+    const across = (a: Axis) => (s.kind === 'rectangle' ? s.size[a]! : 2 * (s as { radius: Record<string, number> }).radius[a]!)
+    const W = 300,
+      H = 170,
+      pad = 26
+    const k = Math.min((W - 2 * pad) / across(h), (H - 2 * pad) / across(v))
+    const ox = W / 2,
+      oy = H / 2
+    const inside = figureCavitySectionOf(s as FigureSection, e.axis, w.wall)
+    const bad = !!this.refusal || !('section' in inside)
+    const shape = (sec: FigureSection, c: Partial<Record<Axis, number>>, attrs: string) => {
+      const cx = ox + (c[h] ?? 0) * k,
+        cy = oy + (c[v] ?? 0) * k
+      if (sec.kind === 'ellipse') return svg`<ellipse cx=${cx} cy=${cy} rx=${sec.radius[h]! * k} ry=${sec.radius[v]! * k} style=${attrs} />`
+      const r = sec as { size: Record<string, number>; corner?: Record<string, number> }
+      return svg`<rect x=${cx - (r.size[h]! * k) / 2} y=${cy - (r.size[v]! * k) / 2} width=${r.size[h]! * k} height=${r.size[v]! * k}
+        rx=${(r.corner?.[h] ?? 0) * k} ry=${(r.corner?.[v] ?? 0) * k} style=${attrs} />`
+    }
+    const half = { [h]: (across(h) * k) / 2, [v]: (across(v) * k) / 2 } as Record<Axis, number>
+    /* Each wall's handle sits on the inside's edge, half way along it; the value is the wall's own. */
+    const handles = [`${h}-`, `${h}+`, `${v}-`, `${v}+`].map(side => {
+      const a = side[0] as Axis,
+        low = side[1] === '-'
+      const edge = (low ? -1 : 1) * (half[a] - w.wall[side]! * k)
+      const x = a === h ? ox + edge : ox,
+        y = a === v ? oy + edge : oy
+      /* The number stands in the wall itself, half way through it; a wall too thin for it has it just outside. */
+      const band = w.wall[side]! * k
+      const mid = (low ? -1 : 1) * (half[a] - (band < 16 ? -9 : band / 2))
+      const tx = a === h ? ox + mid : x + 14,
+        ty = a === v ? oy + mid + 4 : y - 10
+      return svg`<g wall=${side} style=${`cursor:${a === h ? 'ew-resize' : 'ns-resize'}`}
+          @pointerdown=${(ev: PointerEvent) => this.grab(ev, { kind: 'wall', side })}>
+        <rect x=${x - 6} y=${y - 6} width="12" height="12" rx="2" style="fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-primary);stroke-width:1.5" />
+        <text x=${tx} y=${ty} font-size="11" text-anchor=${a === h ? 'middle' : 'start'} style="fill:var(--md-sys-color-on-surface)">${mm(w.wall[side]!)}</text>
+        <title>${i18next.t('figure.label.face-' + SIDE_FACE[side])} ${i18next.t('figure.label.section-wall')}</title>
+      </g>`
+    })
+    return svg`<svg viewBox=${`0 0 ${W} ${H}`} role="img" aria-label=${i18next.t('figure.label.section-cavity-top')}
+        @pointermove=${(ev: PointerEvent) => this.drag(ev, e, k, ox, oy, half)}
+        @pointerup=${() => this.release()} @pointercancel=${() => this.release()}>
+      ${shape(s as FigureSection, {}, 'fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:1.5')}
+      ${'section' in inside
+        ? shape(inside.section, inside.centre, `fill:var(--md-sys-color-surface);stroke:${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)'};stroke-width:1.2;stroke-dasharray:4 3`)
+        : nothing}
+      ${this.locked ? nothing : handles}
+    </svg>`
+  }
+
+  /** Cut along the push: the walls across the first plane axis, and the two ends -- pressed to open or close. */
+  private side(e: NonNullable<FigureEvaluatedShape['extrusion']>, w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+    const [h] = SCREEN[e.axis]
+    const s = e.section
+    const width = s.kind === 'rectangle' ? s.size[h]! : 2 * (s as { radius: Record<string, number> }).radius[h]!
+    const length = e.end - e.start
+    const W = 300,
+      H = 170,
+      padX = 40,
+      padY = 26
+    const k = Math.min((W - 2 * padX) / width, (H - 2 * padY) / length)
+    const x0 = W / 2 - (width * k) / 2,
+      x1 = W / 2 + (width * k) / 2,
+      yTop = H / 2 - (length * k) / 2,
+      yBot = H / 2 + (length * k) / 2
+    const wl = w.wall[`${h}-`]! * k,
+      wr = w.wall[`${h}+`]! * k
+    const thick = (end: End) => (w[end] === 'open' ? 0 : (w[end] as { closed: number }).closed * k)
+    /* The push's start is drawn at the bottom: a tote stands on its floor. */
+    const floor = thick('start'),
+      lid = thick('end')
+    const fill = 'fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:1.2'
+    const endZone = (end: End, y: number, t: number) => {
+      const open = w[end] === 'open'
+      const words = open
+        ? i18next.t('figure.label.section-end-open')
+        : `${i18next.t('figure.label.section-end-closed')} ${mm((w[end] as { closed: number }).closed)}`
+      const label = `${i18next.t('figure.label.face-' + END_FACE(e.axis, end))}: ${words}`
+      const inner = end === 'start' ? y - t : y + t
+      return svg`<g end=${end} style=${`cursor:${open ? 'pointer' : 'ns-resize'}`}
+          @pointerdown=${(ev: PointerEvent) => this.grab(ev, { kind: 'end', end })}>
+        <rect x=${x0 + wl} y=${Math.min(y, inner) - 8} width=${x1 - x0 - wl - wr} height=${Math.abs(t) + 16} style="fill:transparent" />
+        ${open ? svg`<line x1=${x0 + wl} y1=${y} x2=${x1 - wr} y2=${y} style="stroke:var(--md-sys-color-outline);stroke-dasharray:3 3" />` : nothing}
+        <text x=${W / 2} y=${end === 'start' ? yBot + 16 : yTop - 8} font-size="11" text-anchor="middle" style="fill:var(--md-sys-color-primary)">${label}</text>
+        <title>${label}</title>
+      </g>`
+    }
+    return svg`<svg viewBox=${`0 0 ${W} ${H + 8}`} role="img" aria-label=${i18next.t('figure.label.section-cavity-side')}
+        @pointermove=${(ev: PointerEvent) => this.dragEnd(ev, k, yTop, yBot)}
+        @pointerup=${(ev: PointerEvent) => this.releaseEnd(ev)} @pointercancel=${() => this.release()}>
+      <rect x=${x0} y=${yTop} width=${wl} height=${yBot - yTop} style=${fill} />
+      <rect x=${x1 - wr} y=${yTop} width=${wr} height=${yBot - yTop} style=${fill} />
+      ${floor ? svg`<rect x=${x0 + wl} y=${yBot - floor} width=${x1 - x0 - wl - wr} height=${floor} style=${fill} />` : nothing}
+      ${lid ? svg`<rect x=${x0 + wl} y=${yTop} width=${x1 - x0 - wl - wr} height=${lid} style=${fill} />` : nothing}
+      ${this.locked ? nothing : [endZone('start', yBot, floor), endZone('end', yTop, lid)]}
+    </svg>`
+  }
+
+  private grab(ev: PointerEvent, what: NonNullable<FigureCavityDrawing['dragging']>) {
+    if (this.locked) return
+    ev.stopPropagation()
+    ;(ev.currentTarget as Element).closest('svg')!.setPointerCapture(ev.pointerId)
+    this.dragging = what
+    this.pressedAt = ev.clientY
+    this.refusal = ''
+  }
+
+  private drag(ev: PointerEvent, e: NonNullable<FigureEvaluatedShape['extrusion']>, k: number, ox: number, oy: number, half: Record<Axis, number>) {
+    const d = this.dragging
+    if (d?.kind !== 'wall') return
+    const [h] = SCREEN[e.axis]
+    const p = this.point(ev, ev.currentTarget as SVGSVGElement)
+    const a = d.side[0] as Axis,
+      low = d.side[1] === '-'
+    const at = a === h ? p.x - ox : p.y - oy
+    const value = (half[a] - (low ? -at : at)) / k
+    this.hold({ ...this.now!, wall: wallDragged(this.now!.wall, d.side, value, this.perSide) })
+  }
+
+  private dragEnd(ev: PointerEvent, k: number, yTop: number, yBot: number) {
+    const d = this.dragging
+    if (d?.kind !== 'end' || this.now![d.end] === 'open') return
+    if (Math.abs(ev.clientY - this.pressedAt) < 3 && !this.working) return
+    const p = this.point(ev, ev.currentTarget as SVGSVGElement)
+    const t = d.end === 'start' ? (yBot - p.y) / k : (p.y - yTop) / k
+    this.hold({ ...this.now!, [d.end]: { closed: Math.max(1, Math.round(t)) } })
+  }
+
+  /** A press on an end that did not move is a toggle; a drag was a thickness. */
+  private releaseEnd(ev: PointerEvent) {
+    const d = this.dragging
+    if (d?.kind === 'end' && !this.working && Math.abs(ev.clientY - this.pressedAt) < 3) {
+      this.dragging = null
+      const next = { ...this.now!, [d.end]: endToggled(this.body!.shape, this.now![d.end]) }
+      this.refusal = this.judge(next)
+      if (!this.refusal) this.emit('command', this.action(next))
+      return
+    }
+    this.release()
+  }
+}
+