@things-factory/figure-ui 10.1.47 → 10.1.49

package/client/modeller/figure-v3-parts.ts

@@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
+import { PART_LIMIT } from '@hatiolab/figure-model'
 import type { V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3BudgetLine } from './v3-maturity.js'
 import { partLabelOf } from './v3-fields.js'
@@ -28,6 +29,8 @@ export interface V3PartRow {
   hidden?: boolean
   /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
   invisible?: boolean
+  /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */
+  copies?: number
 }
 
 /** 제공자마다의 아이콘. Material Symbols 이름이다. */
@@ -59,7 +62,7 @@ const RECIPES: Array<{ kind: V3PaletteKind; icon: string; label: string }> = [
   { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
   { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
   { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
-  { kind: 'wall', icon: 'wall', label: 'figure.label.primitive-wall' },
+  { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
   { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 
@@ -147,25 +150,61 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         font-style: normal;
         color: var(--md-sys-color-error);
       }
+      span[room][full] {
+        color: var(--md-sys-color-error);
+        font-weight: 600;
+      }
+      p[full] {
+        margin: 4px 0 0;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-error);
+      }
+      div[level] {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 6px;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[level] select {
+        min-width: 0;
+        padding: 2px 4px;
+        font: inherit;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+      }
+      small[copies] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
       span[room] {
         font-size: 0.7rem;
         font-weight: 400;
         letter-spacing: 0;
         text-transform: none;
       }
+      /* Three to a row, small (user, 2026-09-24): the palette is reached for, not read -- the list below is what grows. */
       div[palette] {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 3px;
       }
       button[shape] {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 2px;
-        padding: 7px 2px 5px 2px;
+        gap: 1px;
+        min-width: 0;
+        padding: 5px 1px 4px;
         font: var(--label-font, inherit);
-        font-size: 0.66rem;
+        font-size: 0.6rem;
+        line-height: 1.2;
+        text-align: center;
+        overflow-wrap: anywhere;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
         background: none;
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -182,7 +221,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         cursor: default;
       }
       button[shape] md-icon {
-        --md-icon-size: 20px;
+        --md-icon-size: 18px;
       }
       ol {
         margin: 0;
@@ -323,8 +362,15 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
    * 기준이 저작을 이끈다(V2 모델러의 정체성). 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.
    */
   @property({ attribute: false }) budget?: V3BudgetLine
+  /**
+   * 디테일 등급의 부품 한도 — V2 의 S/M/L(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가
+   * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
+   */
+  @property({ attribute: false }) partBudget?: { level: 'S' | 'M' | 'L' | null; used: number; limit: number | null }
 
   render() {
+    const b = this.partBudget
+    const full = !!b && b.limit !== null && b.used >= b.limit
     return html`
       <section>
         <h3>${i18next.t('figure.label.shapes')}</h3>
@@ -333,8 +379,8 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
             recipe => html`
               <button
                 shape
-                ?disabled=${this.locked}
-                title=${i18next.t(recipe.label)}
+                ?disabled=${this.locked || full}
+                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t(recipe.label)}
                 @click=${() => this.ask('add-part', { kind: recipe.kind })}
               >
                 <md-icon>${recipe.icon}</md-icon>
@@ -343,14 +389,18 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
             `
           )}
         </div>
+        ${full ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b!.level, limit: b!.limit })}</p>` : nothing}
       </section>
 
       <section list>
         <h3>
           <span>${i18next.t('figure.label.parts')}</span>
-          <span room>${this.parts.length}</span>
+          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}
+            >${b && b.limit !== null ? i18next.t('figure.text.n-of-limit', { used: b.used, limit: b.limit }) : (b?.used ?? this.parts.length)}</span
+          >
           ${this.renderShowAll()}
         </h3>
+        ${this.renderLevel()}
         ${this.renderBudget()}
         ${this.parts.length === 0
           ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
@@ -361,6 +411,31 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
     `
   }
 
+  /** 디테일 등급 — 고르면 한도가 바뀐다. V2 의 자리 그대로, 목록 머리 아래. */
+  private renderLevel() {
+    const b = this.partBudget
+    if (!b) return nothing
+    return html`<div level>
+      <label for="detail-level">${i18next.t('figure.label.detail-level')}</label>
+      <select
+        id="detail-level"
+        title=${i18next.t('figure.text.detail-level-explained')}
+        ?disabled=${this.locked}
+        @change=${(e: Event) => {
+          const value = (e.target as HTMLSelectElement).value
+          this.dispatchEvent(new CustomEvent('set-detail-level', { detail: { level: value || null }, bubbles: true, composed: true }))
+        }}
+      >
+        <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
+        ${(['S', 'M', 'L'] as const).map(
+          one => html`<option value=${one} ?selected=${one === b.level}>
+            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+          </option>`
+        )}
+      </select>
+    </div>`
+  }
+
   private renderBudget() {
     const b = this.budget
     if (!b || !this.parts.length) return nothing
@@ -434,7 +509,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         </button>
         <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
         <span label title=${part.id}
-          >${partLabelOf(part.id)}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+          >${partLabelOf(part.id)}${part.copies ? html` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
         >
         ${selected ? this.renderOps(part.id, index) : nothing}
       </li>

package/client/modeller/side-panel-styles.ts

@@ -88,6 +88,14 @@ export const SidePanelStyles = css`
     overflow-wrap: anywhere;
     white-space: normal;
   }
+  /* A value read, not edited, beside its label: the field's size and colour, not the page's. */
+  div[inline-field] > span[value] {
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+  }
+  label span[unit] {
+    color: var(--md-sys-color-outline);
+  }
   div[inline-field] + div[inline-field],
   div[inline-field] + div[vector-row],
   div[vector-row] + div[inline-field] {

package/client/modeller/v3-canvas.ts

@@ -7,6 +7,8 @@ import type { GizmoReach } from './v3-gizmo.js'
 import type { V3RenderPart } from './v3-renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
 import { boardFor, changedKeys, componentOf, gizmoResultOf, type Board } from './v3-stage-model.js'
+import { JOINT_FAN } from './v3-joint-fan.js'
+import { ownerOf } from './v3-fields.js'
 
 /*
  * The V3 modeller's canvas -- a things-scene board in editing mode, as the V2 modeller's was.
@@ -44,6 +46,9 @@ interface SceneHandle {
   root?: SceneLayer
 }
 
+/* The fan's colour when the figure's palette names no accent. */
+const FAN_COLOUR = '#ff8a00'
+
 /* The 2D side of the board, which the author never sees on this page but the scene paints. */
 const PAPER = '#ffffff'
 
@@ -81,6 +86,14 @@ export class FigureV3Canvas extends LitElement {
   /** 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
+  /**
+   * View only: nothing that happens on the board is told out. The card's picture is taken from a second canvas stood up
+   * off screen (`v3-thumbnail.ts`); the scene settles its components as it builds them, and a change told from there
+   * would reach the editor as an edit (V2's `viewOnly`, for the same reason).
+   */
+  @property({ type: Boolean }) viewOnly = false
+  /** Where the selected part turns and how far (`v3-joint-fan`): shown, never picked, never saved. */
+  @property({ attribute: false }) fan: V3RenderPart | null = null
 
   @query('div[stage]') private stage!: HTMLDivElement
 
@@ -103,7 +116,7 @@ export class FigureV3Canvas extends LitElement {
 
   protected updated(changed: PropertyValues) {
     if (!this.hasUpdated) return
-    if (changed.has('parts') || changed.has('palette') || changed.has('context')) this.standUp()
+    if (changed.has('parts') || changed.has('palette') || changed.has('context') || changed.has('fan')) this.standUp()
     if (changed.has('view')) this.applyView()
     if (changed.has('selected')) this.showSelected()
   }
@@ -115,6 +128,25 @@ export class FigureV3Canvas extends LitElement {
     this.teardown()
   }
 
+  /**
+   * The board as a picture, for the card: the 3D view at this size, or nothing when it cannot be taken. The scene's
+   * `toDataURL` renders the 2D board (a white sheet, V2 found), and the 3D renderer keeps no drawing buffer, so the
+   * scene's own `snapshot3d` draws and reads in one task. A picture that cannot be taken is not an error and is not
+   * faked (V2's `snapshot`, lost when this canvas moved onto the scene -- no card had a picture since, user 2026-09-24).
+   */
+  async snapshot(width = 480, height = 360): Promise<string | undefined> {
+    const layer = this.scene?.root as (SceneLayer & { snapshot3d?: (w?: number, h?: number, type?: string, quality?: number) => Promise<string | undefined> }) | undefined
+    if (!layer?.snapshot3d) return undefined
+    try {
+      /* webp: a card needs no alpha, and png is three or four times heavier in every list response. */
+      const url = await layer.snapshot3d(width, height, 'image/webp', 0.85)
+      return typeof url === 'string' && url.startsWith('data:') ? url : undefined
+    } catch (e) {
+      console.warn(`[thumbnail] could not take the picture -- ${(e as Error).message}`)
+      return undefined
+    }
+  }
+
   /** The whole figure in view: the board's fit, then the 3D camera's own, as V2 did. */
   fit() {
     this.scene?.fit?.('ratio')
@@ -129,7 +161,12 @@ export class FigureV3Canvas extends LitElement {
     if (!this.stage) return
     const needed = boardFor(this.parts, this.board)
     const outgrown = !this.board || needed.width > this.board.width || needed.height > this.board.height || needed.depth > this.board.depth
-    if (this.scene && this.standingFor === this.context && !outgrown) {
+    if (this.scene && this.standingFor === this.context) {
+      /*
+        A part dragged past the board's edge grows the board where it stands. Standing it up again lost the selection,
+        the gizmo and the camera after every such drag -- the gizmo seemed not to work at all (user, 2026-09-24).
+      */
+      if (outgrown) this.grow(needed)
       this.sync()
       return
     }
@@ -167,7 +204,10 @@ export class FigureV3Canvas extends LitElement {
   }
 
   private components(): Record<string, unknown>[] {
-    return this.parts.map(part => componentOf(part, this.palette, this.board!)).filter((c): c is Record<string, unknown> => !!c)
+    const parts = this.parts.map(part => componentOf(part, this.palette, this.board!)).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
+    return fan ? [...parts, { ...fan, capturable: false, locked: true }] : parts
   }
 
   /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */
@@ -180,6 +220,19 @@ export class FigureV3Canvas extends LitElement {
     return found
   }
 
+  /** A larger board under the same scene: its size, and the grid that suits it. Components are re-placed by `sync`. */
+  private grow(needed: Board & { depth: number }) {
+    const layer = this.scene?.root
+    this.board = needed
+    if (!layer) return
+    this.writing = true
+    try {
+      layer.set({ width: needed.width, height: needed.height, depth: needed.depth, gridStep: niceGridStep(Math.max(needed.width, needed.height)) })
+    } finally {
+      this.writing = false
+    }
+  }
+
   /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */
   private sync() {
     const layer = this.scene?.root
@@ -213,11 +266,11 @@ export class FigureV3Canvas extends LitElement {
   private watchScene() {
     const layer = this.scene?.root
     const root = layer?.root
-    if (!layer || !root?.on) return
+    if (!layer || !root?.on || this.viewOnly) return
     root.on('selected', (after: unknown) => {
       const name = (after as SceneComponent[] | undefined)?.[0]?.state?.name
       const id = typeof name === 'string' ? name : ''
-      if (id !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))
+      if (ownerOf(id) !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))
     })
     /*
       A change comes up to the board with the component in the last argument's `origin` (the scene appends
@@ -241,10 +294,11 @@ export class FigureV3Canvas extends LitElement {
     const layer = this.scene?.root
     const root = layer?.root
     if (!layer || !root) return
-    const component = this.selected ? this.standing().get(this.selected) : undefined
+    /* A repeat is selected whole: every copy of it (the editor selects the part the author made). */
+    const wanted = this.selected ? [...this.standing()].filter(([name]) => ownerOf(name) === this.selected).map(([, component]) => component) : []
     const now = root.selected ?? []
-    if ((now[0] ?? undefined) === component && now.length === (component ? 1 : 0)) return
-    root.selected = component ? [component] : []
+    if (now.length === wanted.length && wanted.every((one, i) => now[i] === one)) return
+    root.selected = wanted
     layer.invalidate?.()
   }