@things-factory/figure-ui 10.1.204 → 10.1.206

package/client/modeller/canvas.ts

@@ -2,10 +2,10 @@ import { LitElement, html, css, unsafeCSS, type PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { create, Model, niceGridStep } from '@hatiolab/things-scene'
 
-import type { GizmoReach } from './gizmo.js'
+import type { GizmoReach, GizmoResult } from './gizmo.js'
 import type { FigureRenderPart } from './renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
-import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit, type Board, type ScaleAnchor } from './stage-model.js'
+import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit, type Board } from './stage-model.js'
 import { JOINT_FAN } from './joint-fan.js'
 import { SLOT_MARK } from './slot-layout-host.js'
 import { PREVIEW, TARGET_FACE } from './command-preview.js'
@@ -77,11 +77,15 @@ export class FigureCanvas extends LitElement {
   `
   @property({ attribute: false }) parts: FigureRenderPart[] = []
   @property({ attribute: false }) palette: Record<string, string> = {}
-  /** The face a size drag keeps, per part (figure-model's `figureScaleAnchorOf`), so the drag shows what is written. */
-  @property({ attribute: false }) anchors: Record<string, ScaleAnchor> = {}
   /** Which figure is open. Another one stands the board up again. */
   @property() context = ''
   @property() selected = ''
+  /**
+   * The fastening window is open (ADR-0140 stage 4): a part pressed is aimed at, not chosen -- told out as `part-aimed`
+   * with where the press landed (the scene's `pickedAt`: the point and the drawn triangle's outward normal, in the
+   * figure's frame), and the part being fastened stays chosen.
+   */
+  @property({ type: Boolean }) aiming = false
   /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */
   @property({ attribute: false }) reach: GizmoReach = { translate: false, rotate: false, scale: false }
   @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW
@@ -133,7 +137,7 @@ export class FigureCanvas extends LitElement {
 
   protected updated(changed: PropertyValues) {
     if (!this.hasUpdated) return
-    if (['parts', 'palette', 'context', 'fan', 'anchors', 'ghost', 'highlight', 'marks'].some(key => changed.has(key))) this.standUp()
+    if (['parts', 'palette', 'context', 'fan', 'ghost', 'highlight', 'marks'].some(key => changed.has(key))) this.standUp()
     if (changed.has('view')) this.applyView()
     if (changed.has('selected')) this.showSelected()
   }
@@ -235,8 +239,20 @@ export class FigureCanvas extends LitElement {
     }
   }
 
+  /**
+   * A part's component state, kept for the part object it was made from while the palette and the board are the same: a
+   * size drag redraws the board every frame, and only the parts the frame moved are new objects (ADR-0140 4.4).
+   */
+  private made = new WeakMap<FigureRenderPart, Record<string, unknown> | null>()
+  private madeFor?: [Record<string, string>, Board]
+  private componentFor(part: FigureRenderPart): Record<string, unknown> | null {
+    if (this.madeFor?.[0] !== this.palette || this.madeFor?.[1] !== this.board) (this.made = new WeakMap()), (this.madeFor = [this.palette, this.board!])
+    if (!this.made.has(part)) this.made.set(part, componentOf(part, this.palette, this.board!, true))
+    return this.made.get(part)!
+  }
+
   private components(): Record<string, unknown>[] {
-    const parts = this.parts.map(part => componentOf(part, this.palette, this.board!, this.anchors[ownerOf(part.id)])).filter((c): c is Record<string, unknown> => !!c)
+    const parts = this.parts.map(part => this.componentFor(part)).filter((c): c is Record<string, unknown> => !!c)
     /* The fan in the accent colour, translucent; `capturable: false` keeps clicks, the marquee and the gizmo off it. */
     const fan = this.fan ? componentOf(this.fan, { ...this.palette, [JOINT_FAN]: this.palette['palette.accent'] ?? FAN_COLOUR }, this.board!) : null
     const accent = this.palette['palette.accent'] ?? FAN_COLOUR
@@ -285,7 +301,13 @@ export class FigureCanvas extends LitElement {
         const found = standing.get(name)
         if (found) {
           const diff = changedKeys(found.state, state)
-          if (diff) found.set(diff)
+          /*
+            A part whose size is being dragged keeps the size the gizmo gives it: what is drawn does not go back into what the
+            gizmo measures (ADR-0140 4.4). Written back, a size the frame could not change (one that follows the figure) put
+            the part back to its old size, and the release wrote nothing.
+          */
+          if (diff && this.pointerDown && this.grabs.has(name)) for (const key of ['width', 'depth', 'height']) delete diff[key]
+          if (diff && Object.keys(diff).length) found.set(diff)
           continue
         }
         const made = Model.compile({ ...state }, layer.app as never) as SceneComponent | null
@@ -309,10 +331,32 @@ export class FigureCanvas extends LitElement {
         element hears it even after it left the page. A canvas not on the page has nothing to say about the choice.
       */
       if (!this.isConnected) return
+      /*
+        While aiming, a press is told by the click (below); the part being fastened is chosen again once the scene has
+        done with the pick -- put back while the scene was still telling it, the selection read right but the outline
+        stayed on the part pressed (:3300, 2026-10-20).
+      */
+      if (this.aiming) {
+        setTimeout(() => this.showSelected())
+        return
+      }
       const name = (after as SceneComponent[] | undefined)?.[0]?.state?.name
       const id = typeof name === 'string' ? name : ''
       if (ownerOf(id) !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))
     })
+    /*
+      A press while aiming: the part pressed -- the one being fastened too, which changes no selection and so is told by
+      no `selected` -- with where it landed (`pickedAt`, filled before the click is told). It comes up to the board
+      with the component in the last argument's `origin`, as a change does.
+    */
+    layer.on?.('click', (...args: unknown[]) => {
+      if (!this.aiming || !this.isConnected) return
+      const origin = (args[args.length - 1] as { origin?: SceneComponent & { realObject?: { pickedAt?: { point: number[]; normal: number[] } } } } | undefined)?.origin
+      const id = origin?.state?.name
+      if (typeof id !== 'string' || !id) return
+      const at = origin?.realObject?.pickedAt
+      this.dispatchEvent(new CustomEvent('part-aimed', { detail: { id, ...(at ? { point: at.point, normal: at.normal } : {}) }, bubbles: true, composed: true }))
+    })
     /*
       A change comes up to the board with the component in the last argument's `origin` (the scene appends
       { origin, name, deliverer } as it bubbles). Reading the first argument as the component does nothing.
@@ -330,6 +374,12 @@ export class FigureCanvas extends LitElement {
       const name = origin?.state?.name
       if (typeof name !== 'string' || !this.parts.some(p => p.id === name)) return
       this.pending.set(name, origin!)
+      /* A size drag: the scene tells the handle held; figure-model draws each frame from it (ADR-0140 4.4). */
+      const grab = origin!.state?.scaleGrab as GizmoResult['grab'] | undefined
+      if (this.pointerDown && grab) {
+        this.grabs.set(name, { ...grab })
+        this.sizingSoon(name)
+      }
       if (!this.pointerDown) this.commitSoon(80)
     })
     this.stage.addEventListener('pointerdown', this.onPointerDown, true)
@@ -339,10 +389,34 @@ export class FigureCanvas extends LitElement {
 
   /** Components the gizmo changed since the last commit, by part name. */
   private pending = new Map<string, SceneComponent>()
+  /** The handle each size drag held, by part name, from the scene's `scaleGrab` -- told with the release. */
+  private grabs = new Map<string, NonNullable<GizmoResult['grab']>>()
+  private sizingFrame?: number
+  /** Once an animation frame: where a size drag stands, told so the editor draws figure-model's result for it. */
+  private sizingSoon(name: string) {
+    if (this.sizingFrame !== undefined) return
+    this.sizingFrame = requestAnimationFrame(() => {
+      this.sizingFrame = undefined
+      const part = this.pressedPart(name)
+      const component = this.pending.get(name)
+      if (!part || !component || !this.board || !this.pointerDown) return
+      const result = { ...gizmoResultOf(part, component.state, this.board), grab: this.grabs.get(name) }
+      if (result.scale) this.dispatchEvent(new CustomEvent('part-sizing', { detail: { id: part.id, result }, bubbles: true, composed: true }))
+    })
+  }
   private pointerDown = false
   private commitTimer?: ReturnType<typeof setTimeout>
+  /**
+   * The parts as they stood when the pointer went down. A drag is measured against them: while a size drag is drawn, the
+   * parts given are its frames (ADR-0140 4.4), and measured against those it grew on itself and its release wrote nothing.
+   */
+  private atPress?: Map<string, FigureRenderPart>
   private onPointerDown = () => {
     this.pointerDown = true
+    this.atPress = new Map(this.parts.map(p => [p.id, p]))
+  }
+  private pressedPart(name: string): FigureRenderPart | undefined {
+    return this.atPress?.get(name) ?? this.parts.find(p => p.id === name)
   }
   private onPointerUp = () => {
     if (!this.pointerDown) return
@@ -364,13 +438,18 @@ export class FigureCanvas extends LitElement {
     if (this.pointerDown || !this.board || !this.pending.size) return
     const changed = [...this.pending]
     this.pending.clear()
+    if (this.sizingFrame !== undefined) cancelAnimationFrame(this.sizingFrame)
+    this.sizingFrame = undefined
     for (const [name, component] of changed) {
-      const part = this.parts.find(p => p.id === name)
+      const part = this.pressedPart(name)
       if (!part) continue
-      const result = gizmoResultOf(part, component.state, this.board)
+      const grab = this.grabs.get(name)
+      const result = { ...gizmoResultOf(part, component.state, this.board), ...(grab ? { grab } : {}) }
       if (!result.position && !result.rotation && !result.scale) continue
       this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }))
     }
+    this.grabs.clear()
+    this.atPress = undefined
     setTimeout(() => this.sync())
   }
 
@@ -397,6 +476,9 @@ export class FigureCanvas extends LitElement {
   private teardown() {
     clearTimeout(this.commitTimer)
     this.pending.clear()
+    this.grabs.clear()
+    if (this.sizingFrame !== undefined) cancelAnimationFrame(this.sizingFrame)
+    this.sizingFrame = undefined
     this.stage?.removeEventListener('pointerdown', this.onPointerDown, true)
     window.removeEventListener('pointerup', this.onPointerUp, true)
     window.removeEventListener('pointercancel', this.onPointerUp, true)

package/client/modeller/editor-styles.ts

@@ -87,10 +87,6 @@ export const EditorStyles = css`
     padding: 0 8px;
     color: var(--md-sys-color-on-surface-variant);
   }
-  ox-canvas-bar .status[dirty] {
-    color: var(--md-sys-color-primary);
-    font-weight: 600;
-  }
   /*
     The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):
     round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,
@@ -135,6 +131,22 @@ export const EditorStyles = css`
     min-width: 0;
     min-height: 0;
   }
+  /* Which size handles change one diameter (ADR-0140 4.1): a quiet line over the canvas, out of the gizmo's way. */
+  p[same-measure] {
+    position: absolute;
+    bottom: 12px;
+    left: 50%;
+    z-index: 5;
+    transform: translateX(-50%);
+    margin: 0;
+    padding: 4px 10px;
+    border-radius: 999em;
+    background: var(--md-sys-color-surface-container-high);
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--ui-t-small, 11.5px);
+    pointer-events: none;
+    white-space: nowrap;
+  }
   /* A new figure's first question, over the empty canvas. */
   div[start] {
     position: absolute;
@@ -249,18 +261,13 @@ export const EditorStyles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  span[badge] {
-    position: absolute;
-    top: 3px;
-    right: 2px;
-    padding: 0 5px;
-    font-size: var(--ui-t-micro, 11px);
-    font-weight: 700;
-    line-height: 1.5;
-    color: var(--md-sys-color-on-primary-container);
-    background: var(--md-sys-color-primary-container);
-    border-radius: 999em;
-    pointer-events: none;
+  /* A range's two ends read as one: smallest – largest. */
+  div[pair][range] {
+    align-items: center;
+  }
+  div[pair][range] > span[dash] {
+    flex: none;
+    color: var(--md-sys-color-on-surface-variant);
   }
   /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */
   div[panel] {
@@ -332,12 +339,6 @@ export const EditorStyles = css`
     min-height: 0;
     overflow: auto;
   }
-  /* The fastening window keeps to the panel's width: a popup's own sizing made it wider than the panel. */
-  div[fasten-panel] > figure-fasten-dialog {
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-  }
   /* Which part the panel speaks of. */
   div[subject] {
     position: sticky;