@things-factory/figure-ui 10.1.46 → 10.1.48

package/client/modeller/v3-stage-model.ts

@@ -0,0 +1,159 @@
+import * as THREE from 'three'
+import { buildV3Geometry } from '@hatiolab/things-scene'
+
+import type { GizmoResult } from './v3-gizmo.js'
+import type { V3RenderPart } from './v3-renderer.js'
+
+/*
+ * V3 bodies <-> scene components, in one place (V2's `figure-source.ts` was that place for V2 parts).
+ *
+ * The modeller stands on a things-scene board in editing mode, as V2's did: each body figure-model evaluates is a
+ * `figure-v3-part` component, and what the scene's gizmo writes back comes here to become a change of the part's
+ * inputs. The two vocabularies:
+ *
+ *     V3 (asset frame, mm, y up)            scene component
+ *     ────────────────────────────────      ─────────────────────────────────────────────
+ *     body box extent  x · y · z             width · depth · height
+ *     body box centre  x                     left + width/2  - board width/2
+ *                      y                     zPos + depth/2
+ *                      z                     top  + height/2 - board height/2
+ *     body rotation (rigid@1, Rx·Ry·Rz)      rotationX · -rotation · rotationY (radians; three 'XYZ')
+ *
+ * The box is the body's own bounding box in its local frame, so a turned body keeps its size and the gizmo's handles
+ * sit on its faces. Its centre is not always the body's origin (a portal rises from its bottom), so a turn about the
+ * centre moves the origin: the result gives the origin where the turned body puts it.
+ */
+
+export interface Board {
+  width: number
+  height: number
+}
+
+export interface BodyFrame {
+  /** The body's box: its centre in the body's own frame, and its extent. */
+  centre: THREE.Vector3
+  extent: THREE.Vector3
+  rotation: THREE.Matrix4
+  origin: THREE.Vector3
+}
+
+const round = (n: number) => Math.round(n * 1e6) / 1e6
+
+export function frameOf(part: V3RenderPart): BodyFrame | null {
+  /* The box things-scene's `figure-v3-part` centres the body on: the same builder, measured the same way. */
+  let built: THREE.BufferGeometry | undefined
+  try {
+    built = buildV3Geometry(part.shape as never, part.segments) as THREE.BufferGeometry | undefined
+  } catch {
+    return null
+  }
+  if (!built?.getAttribute('position')) return null
+  built.computeBoundingBox()
+  const box = built.boundingBox!
+  const unit = { centre: box.getCenter(new THREE.Vector3()), extent: box.getSize(new THREE.Vector3()) }
+  built.dispose()
+  const r = part.pose.r
+  const rotation = new THREE.Matrix4().set(r[0]![0]!, r[0]![1]!, r[0]![2]!, 0, r[1]![0]!, r[1]![1]!, r[1]![2]!, 0, r[2]![0]!, r[2]![1]!, r[2]![2]!, 0, 0, 0, 0, 1)
+  return { centre: unit.centre, extent: unit.extent, rotation, origin: new THREE.Vector3(...(part.pose.t as [number, number, number])) }
+}
+
+/** The colours a body is drawn in, from the palette the modeller resolved (the asset's, over which the theme wins). */
+function colours(part: V3RenderPart, palette: Record<string, string>) {
+  const m = part.material
+  const glow = m.emissive?.on ? { color: palette[m.emissive.token] ?? palette[m.token] ?? '#9a9a9a', intensity: m.emissive.intensity } : undefined
+  return { color: palette[m.token] ?? '#9a9a9a', preset: m.preset, transparent: !!m.transparent, ...(glow ? { glow } : {}) }
+}
+
+/** The component state that draws a body where figure-model put it. */
+export function componentOf(part: V3RenderPart, palette: Record<string, string>, board: Board): Record<string, unknown> | null {
+  const frame = frameOf(part)
+  if (!frame) return null
+  const { centre, extent, rotation, origin } = frame
+  const world = centre.clone().applyMatrix4(rotation).add(origin)
+  const euler = new THREE.Euler().setFromRotationMatrix(rotation, 'XYZ')
+  const width = extent.x || 1,
+    depth = extent.y || 1,
+    height = extent.z || 1
+  return {
+    type: 'figure-v3-part',
+    name: part.id,
+    shape: part.shape,
+    ...(part.segments !== undefined ? { segments: part.segments } : {}),
+    ...colours(part, palette),
+    width: round(width),
+    depth: round(depth),
+    height: round(height),
+    left: round(world.x + board.width / 2 - width / 2),
+    top: round(world.z + board.height / 2 - height / 2),
+    zPos: round(world.y - depth / 2),
+    rotationX: round(euler.x),
+    rotation: round(-euler.y),
+    rotationY: round(euler.z)
+  }
+}
+
+const num = (v: unknown, fallback = 0) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback)
+
+/**
+ * What the gizmo did, in the inputs' terms: where the body's origin is now, how it is turned (degrees, rigid@1's
+ * order) and how much each of its own axes grew. Only what changed is given; a component the gizmo did not move gives
+ * nothing.
+ */
+export function gizmoResultOf(part: V3RenderPart, after: Record<string, unknown>, board: Board): GizmoResult {
+  const frame = frameOf(part)
+  if (!frame) return {}
+  const { centre, extent, rotation, origin } = frame
+  const width = num(after.width, extent.x),
+    depth = num(after.depth, extent.y),
+    height = num(after.height, extent.z)
+  const scale = new THREE.Vector3(width / (extent.x || 1), depth / (extent.y || 1), height / (extent.z || 1))
+  const world = new THREE.Vector3(num(after.left) + width / 2 - board.width / 2, num(after.zPos) + depth / 2, num(after.top) + height / 2 - board.height / 2)
+  const euler = new THREE.Euler(num(after.rotationX), -num(after.rotation), num(after.rotationY), 'XYZ')
+  const turnedTo = new THREE.Matrix4().makeRotationFromEuler(euler)
+
+  const before = new THREE.Quaternion().setFromRotationMatrix(rotation)
+  const now = new THREE.Quaternion().setFromEuler(euler)
+  const turned = before.angleTo(now) > 1e-4
+  const sized = [scale.x, scale.y, scale.z].some(s => Math.abs(s - 1) > 1e-4)
+  /* The origin that puts the (scaled, turned) box centre where the scene has it. */
+  const newOrigin = world.clone().sub(centre.clone().multiply(scale).applyMatrix4(turnedTo))
+  const moved = newOrigin.distanceTo(origin) > 0.5
+
+  const result: GizmoResult = {}
+  if (moved || turned) result.position = newOrigin.toArray() as [number, number, number]
+  if (turned) result.rotation = [euler.x, euler.y, euler.z].map(THREE.MathUtils.radToDeg) as [number, number, number]
+  if (sized) result.scale = scale.toArray() as [number, number, number]
+  return result
+}
+
+/** The keys of `next` whose values differ from `current` -- only those are set, so the scene raises no echo. */
+export function changedKeys(current: Record<string, unknown>, next: Record<string, unknown>): Record<string, unknown> | null {
+  const diff: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(next)) {
+    if (key === 'type') continue
+    const was = current[key]
+    const same = typeof value === 'object' && value !== null ? JSON.stringify(was) === JSON.stringify(value) : was === value
+    if (!same) diff[key] = value
+  }
+  return Object.keys(diff).length ? diff : null
+}
+
+/** A board wide and deep enough for the figure, with room around it; its size only grows while a figure is edited. */
+export function boardFor(parts: readonly V3RenderPart[], at: Board & { depth?: number } = { width: 0, height: 0 }): Board & { depth: number } {
+  const box = new THREE.Box3()
+  for (const part of parts) {
+    const frame = frameOf(part)
+    if (!frame) continue
+    const half = frame.extent.clone().multiplyScalar(0.5)
+    const corners = [-1, 1].flatMap(x => [-1, 1].flatMap(y => [-1, 1].map(z => new THREE.Vector3(x * half.x, y * half.y, z * half.z))))
+    for (const corner of corners) box.expandByPoint(corner.add(frame.centre).applyMatrix4(frame.rotation).add(frame.origin))
+  }
+  const size = box.isEmpty() ? new THREE.Vector3(1000, 1000, 1000) : box.getSize(new THREE.Vector3())
+  const reach = (axis: 'x' | 'z') => 2 * Math.max(Math.abs(box.isEmpty() ? 500 : box.min[axis]), Math.abs(box.isEmpty() ? 500 : box.max[axis]))
+  return {
+    width: Math.max(at.width, Math.ceil(reach('x') * 1.2), 200),
+    height: Math.max(at.height, Math.ceil(reach('z') * 1.2), 200),
+    /* Only grows, as the plan does: a raised arm made the board taller than it was, and a new board lost the camera. */
+    depth: Math.max(at.depth ?? 0, Math.ceil(size.y * 1.1), 200)
+  }
+}

package/client/modeller/v3-thumbnail.ts

@@ -11,8 +11,9 @@ import type { V3RenderPart } from './v3-renderer.js'
  *
  * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있다. 그것을 찍으면 카드마다 프레임이
  * 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이 된다. 목록은 견주는 자리이므로 그림은
- * **정해진 크기와 정해진 카메라**로 찍는다. `figure-v3-canvas` 의 `thumbnail()` 은 보이는 캔버스를
- * 그대로 뽑으므로 카드용이 아니다 — 여기서는 새로 세운 캔버스가 스스로 `fit()` 한 자리에서 찍는다.
+ * **정해진 크기와 정해진 카메라**로 찍는다 — 새로 세운 캔버스(`viewOnly`)가 스스로 `fit()` 한 자리에서
+ * `snapshot()` 으로 찍는다. 캔버스가 씬 위로 옮겨 가면서 찍는 길이 빠졌고, 그동안 저장은 그림 없이 갔다
+ * (사용자 2026-09-24).
  *
  * ## 왜 서버가 아니라 브라우저인가
  *
@@ -37,7 +38,8 @@ interface Shooter extends HTMLElement {
   parts?: V3RenderPart[]
   palette?: Record<string, string>
   context?: string
-  thumbnail?: () => string | undefined
+  viewOnly?: boolean
+  snapshot?: (width?: number, height?: number) => Promise<string | undefined>
   fit?: () => void
 }
 
@@ -74,6 +76,7 @@ export async function captureV3Thumbnail(
   shooter.parts = parts
   shooter.palette = palette
   shooter.context = 'thumbnail'
+  shooter.viewOnly = true
   shooter.style.cssText = 'display: block; width: 100%; height: 100%;'
 
   try {
@@ -82,7 +85,8 @@ export async function captureV3Thumbnail(
       (async () => {
         await settle()
         shooter.fit?.()
-        return shooter.thumbnail?.()
+        await settle()
+        return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
       })(),
       PATIENCE
     )

package/client/pages/figure-list-page.ts

@@ -428,12 +428,12 @@ export class FigureListPage extends FigureListPageBase {
               카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 손이 갔을 때 뜨는
               말이 알려 준다.
 
-              색칠한 배지로 두지 않는다. 지금 카탈로그의 열넷 중 열셋이 0 점이라(선언된 묶음 한도
-              3 을 넘긴다) 붉은 덩어리가 카드마다 서면 목록이 시끄럽고, 그러면서 아무것도 가르지
-              못한다. 숫자는 조용히 적고 낮은 것에만 **점 하나**를 붙인다.
+              색칠한 배지로 두지 않는다. 옛 draw call 한도 3 으로 재던 때는 카탈로그 거의 모두가 0 점이라
+              붉은 덩어리가 카드마다 섰고 아무것도 가르지 못했다. V3 는 「한 화면 N 대」 목표에 견준
+              여유라(`v3ScoreOf`, 2026-09-24) 퍼지지만, 숫자는 조용히 적고 낮은 것에만 **점 하나**를 붙인다.
 
               아직 재지 않은 것을 0 으로 보여 주지 않는다 — 0 은 「가볍다」는 뜻이 되어 버린다.
-              등급 문자(A~D)도 여기서 만들지 않는다: 경계는 `figure-model` 의 `scoreOf` 가 정하고,
+              등급 문자(A~D)도 여기서 만들지 않는다: 경계는 `figure-model` 의 `scoreOf` · `v3ScoreOf` 가 정하고,
               화면이 그것을 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.
             */
             renderer: (value: number | null) =>

package/client/pages/figure-v3-modeller-page.ts

@@ -12,6 +12,7 @@ import '@material/web/icon/icon.js'
 import '../modeller/figure-history-panel.js'
 import '../modeller/figure-v3-verdict.js'
 import '../modeller/figure-v3-properties.js'
+import type { V3BudgetLine } from '../modeller/v3-maturity.js'
 
 /**
  * The V3 product page has exactly one authoritative workspace for UI and AI input transactions.
@@ -39,31 +40,25 @@ export class FigureV3ModellerPage extends PageView {
       min-width: 0;
       min-height: 0;
     }
-    aside {
-      width: 320px;
-      flex: none;
-      min-height: 0;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      border-left: 1px solid var(--md-sys-color-outline-variant);
-    }
+    /* The first field of the properties tab, in the side panel's look (side-panel-styles): a label above the field. */
     label[type-field] {
       display: grid;
-      gap: 4px;
-      padding: 12px 12px 8px;
-      font-size: 12px;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      gap: 2px;
+      margin: 0 0 5px;
+      font-size: 0.68rem;
+      color: var(--md-sys-color-on-surface-variant);
     }
     label[type-field] input,
     label[type-field] code {
-      font: inherit;
-      font-family: monospace;
-      padding: 6px 8px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 4px;
-      background: var(--md-sys-color-surface);
+      box-sizing: border-box;
+      min-height: 30px;
+      padding: 4px 7px;
+      font-family: var(--mono-font, monospace);
+      font-size: 0.76rem;
       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;
     }
     label[type-field] small {
       color: var(--md-sys-color-on-surface-variant);
@@ -77,57 +72,9 @@ export class FigureV3ModellerPage extends PageView {
     label[type-field] small[role='alert'] {
       color: var(--md-sys-color-error);
     }
-    /* The V2 side panel's tabs, drawn the same way: one icon per tab, the name in title and aria-label. */
-    div[tabs] {
-      display: flex;
-      flex: none;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    button[tab] {
-      flex: 1;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 7px 6px;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      background: none;
-      border: none;
-      border-bottom: 2px solid transparent;
-      cursor: pointer;
-    }
-    button[tab]:hover:not([on]) {
-      background-color: var(--md-sys-color-surface-container);
-    }
-    button[tab][on] {
-      color: var(--md-sys-color-primary);
-      border-bottom-color: var(--md-sys-color-primary);
-    }
-    button[tab] md-icon {
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-    }
-    span[badge] {
-      position: absolute;
-      top: 5px;
-      right: 2px;
-      padding: 0 5px;
-      font-size: 0.62rem;
-      font-weight: 700;
-      line-height: 1.5;
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      border-radius: 999em;
-      pointer-events: none;
-    }
-    /* Hidden, not removed: the verdict keeps its last answer and the panel its list while the other tab is open. */
-    [off] {
-      display: none;
-    }
     .error {
       padding: 16px;
-      color: #922716;
+      color: var(--md-sys-color-error);
     }
   `
   private readonly session = createV3ProductSession(v3ProductStore)
@@ -149,12 +96,9 @@ export class FigureV3ModellerPage extends PageView {
   @state() private typeError = ''
   /** Why a command from the side did nothing. Shown beside the tabs — the editor stays, since nothing in it was lost. */
   @state() private commandError = ''
-  /**
-   * Which tab the side shows. The verdict comes first: it is what the author needs while editing, and the count on
-   * its tab stays in sight while the history is open — as on the V2 page.
-   */
-  @state() private tab: 'properties' | 'verdict' | 'history' = 'verdict'
+  /** The verdict's count, handed to the editor's verdict tab. */
   @state() private instances?: number
+  @state() private budget?: V3BudgetLine
   /**
    * The source the verdict judges. The session refuses to export while it loads or saves, so the last one read is
    * kept rather than blanked — the verdict would otherwise flicker to 「waiting」 on every save.
@@ -364,66 +308,54 @@ export class FigureV3ModellerPage extends PageView {
   render() {
     if (this.error) return html`<p role="alert" class="error">${this.error}</p>`
     const view = this.session.read()
-    return html`<figure-v3-editor
-        .session=${this.session}
-        .revision=${this.revision}
-        @v3-changed=${this.changed}
-      ></figure-v3-editor>
-      <aside>
-        <label type-field>
-          <span>${i18next.t('figure.label.figure-type')}</span>
-          ${this.row.version > 0
-            ? html`<code>${this.row.type}</code><small>${i18next.t('figure.text.type-name-cannot-change')}</small>`
-            : html`<input
-                .value=${this.row.type ?? ''}
-                placeholder=${i18next.t('figure.text.figure-type-placeholder')}
-                ?disabled=${!view.id}
-                @change=${this.renameType}
-              />`}
-          ${this.typeError ? html`<small role="alert">${this.typeError}</small>` : ''}
-        </label>
-        ${this.commandError ? html`<p fit-error role="alert">${this.commandError}</p>` : ''}
-        <div tabs>
-          ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
-          ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
-          ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
-        </div>
-        <figure-v3-properties
-          ?off=${this.tab !== 'properties'}
-          .source=${this.draftSource()}
-          .figureId=${view.id}
-          .figureCategory=${this.row.category}
-          .figureTags=${this.row.tags}
-          @v3-command=${this.onCommand}
-          @v3-catalog=${this.onCatalog}
-        ></figure-v3-properties>
-        <figure-v3-verdict
-          ?off=${this.tab !== 'verdict'}
-          .source=${this.draftSource()}
-          .figureId=${view.id}
-          .figureType=${this.row.type}
-          @capacity-changed=${(event: CustomEvent) => (this.instances = event.detail.instances)}
-          @fit-base-to-parts=${this.fitToParts}
-        ></figure-v3-verdict>
-        <figure-history-panel
-          ?off=${this.tab !== 'history'}
-          format="v3"
-          .figureId=${view.id}
-          .figureState=${this.row.state}
-          .figureVersion=${this.row.version}
-          .figureType=${this.row.type}
-          .dirty=${!!view.dirty}
-          @fit-base-to-parts=${this.fitToParts}
-          @figure-released=${this.released}
-          @figure-reverted=${this.reverted}
-        ></figure-history-panel>
-      </aside>`
-  }
-  private renderTab(tab: 'properties' | 'verdict' | 'history', icon: string, label: string, badge?: number) {
-    return html`
-      <button tab ?on=${this.tab === tab} title=${label} aria-label=${label} @click=${() => (this.tab = tab)}>
-        <md-icon>${icon}</md-icon>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
-      </button>
-    `
+    return html`<figure-v3-editor .session=${this.session} .revision=${this.revision} .instances=${this.instances} .budget=${this.budget} @v3-changed=${this.changed}>
+      ${this.commandError ? html`<p slot="notice" fit-error role="alert">${this.commandError}</p>` : ''}
+      <figure-v3-properties
+        slot="figure"
+        .source=${this.draftSource()}
+        .figureId=${view.id}
+        .figureCategory=${this.row.category}
+        .figureTags=${this.row.tags}
+        @v3-command=${this.onCommand}
+        @v3-catalog=${this.onCatalog}
+      >
+        <label slot="type" type-field>
+            <span>${i18next.t('figure.label.figure-type')}</span>
+            ${this.row.version > 0
+              ? html`<code>${this.row.type}</code><small>${i18next.t('figure.text.type-name-cannot-change')}</small>`
+              : html`<input
+                  .value=${this.row.type ?? ''}
+                  placeholder=${i18next.t('figure.text.figure-type-placeholder')}
+                  ?disabled=${!view.id}
+                  @change=${this.renameType}
+                />`}
+            ${this.typeError ? html`<small role="alert">${this.typeError}</small>` : ''}
+          </label>
+      </figure-v3-properties>
+      <figure-v3-verdict
+        slot="verdict"
+        .source=${this.draftSource()}
+        .figureId=${view.id}
+        .figureType=${this.row.type}
+        @capacity-changed=${(event: CustomEvent) => {
+          this.instances = event.detail.instances
+          this.budget = event.detail.budget
+        }}
+        @fit-base-to-parts=${this.fitToParts}
+      ></figure-v3-verdict>
+      <figure-history-panel
+        slot="history"
+        format="v3"
+        .figureId=${view.id}
+        .figureState=${this.row.state}
+        .figureVersion=${this.row.version}
+        .figureType=${this.row.type}
+        .dirty=${!!view.dirty}
+        @fit-base-to-parts=${this.fitToParts}
+        @figure-released=${this.released}
+        @figure-reverted=${this.reverted}
+      ></figure-history-panel>
+    </figure-v3-editor>`
   }
+
 }

package/dist-client/modeller/angle-dial.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 막대 옆에 서는 **각도 눈**. 지금 각이 범위의 어디인지를 한 눈에 보인다.
+ *
+ * ## 왜 3D 로는 모자랐나
+ *
+ * 관절이 돌아도 화면이 그대로인 경우가 있다 — 제 축에서 대칭인 부품이 그렇다. 그래서 관절이
+ * 모는 부품에 바늘을 달아 미리보기에서 함께 돌게 했는데(`joint-gizmo.ts` 의 `jointNeedles`),
+ * **미리보기에서는 그 바늘이 4 × 2 픽셀이다**(잰 값: 부품 100mm · 바늘 60 × 12mm · 여덟 대를
+ * 한 화면에 세운 상태). 미리보기는 크기 반응을 보려고 여덟 대를 나란히 놓는 자리라 한 대가
+ * 20 픽셀쯤이고, 그 위의 어떤 표시도 몇 픽셀을 넘지 못한다.
+ *
+ * 각을 읽는 일은 3D 의 배율에서 떼어 놓는다. 눈은 막대 옆 24 픽셀 자리에 서고, 도형이 아무리
+ * 작게 서 있어도 같은 크기로 읽힌다.
+ */
+export interface DialShape {
+    /** 가동 범위를 채운 부채꼴. SVG path 의 `d`. */
+    sector: string;
+    /** 지금 값이 가리키는 끝점. */
+    needle: {
+        x: number;
+        y: number;
+    };
+    centre: {
+        x: number;
+        y: number;
+    };
+    radius: number;
+}
+/**
+ * 눈의 모양. 값이 범위를 벗어나면 범위 끝에 세운다 — 밖을 가리키는 바늘은 없는 값을 말한다.
+ */
+export declare function dialShape(min: number, max: number, value: number, radius?: number): DialShape;

package/dist-client/modeller/angle-dial.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+/** 0 도가 위를 가리키고, 값이 커지면 시계 방향으로 돈다 — 화면의 각과 같은 방향이다. */
+function at(centre, radius, degrees) {
+    const rad = (degrees * Math.PI) / 180;
+    return {
+        x: +(centre.x + radius * Math.sin(rad)).toFixed(2),
+        y: +(centre.y - radius * Math.cos(rad)).toFixed(2)
+    };
+}
+/** 한 바퀴에 가까우면 부채꼴 대신 온전한 원이다. */
+const FULL = 359.9;
+/**
+ * 눈의 모양. 값이 범위를 벗어나면 범위 끝에 세운다 — 밖을 가리키는 바늘은 없는 값을 말한다.
+ */
+export function dialShape(min, max, value, radius = 9) {
+    const centre = { x: radius + 1, y: radius + 1 };
+    const span = Math.abs(max - min);
+    const held = Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max));
+    if (span >= FULL) {
+        const top = at(centre, radius, 0);
+        const bottom = at(centre, radius, 180);
+        return {
+            sector: `M ${top.x} ${top.y} A ${radius} ${radius} 0 1 1 ${bottom.x} ${bottom.y} A ${radius} ${radius} 0 1 1 ${top.x} ${top.y} Z`,
+            needle: at(centre, radius, held),
+            centre,
+            radius
+        };
+    }
+    const from = at(centre, radius, min);
+    const to = at(centre, radius, max);
+    const large = span > 180 ? 1 : 0;
+    return {
+        sector: `M ${centre.x} ${centre.y} L ${from.x} ${from.y} A ${radius} ${radius} 0 ${large} 1 ${to.x} ${to.y} Z`,
+        needle: at(centre, radius, held),
+        centre,
+        radius
+    };
+}
+//# sourceMappingURL=angle-dial.js.map

package/dist-client/modeller/angle-dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angle-dial.js","sourceRoot":"","sources":["../../client/modeller/angle-dial.ts"],"names":[],"mappings":"AAAA;;GAEG;AA0BH,wDAAwD;AACxD,SAAS,EAAE,CAAC,MAAgC,EAAE,MAAc,EAAE,OAAe;IAC3E,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;IACrC,OAAO;QACL,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAClD,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;KACnD,CAAA;AACH,CAAC;AAED,iCAAiC;AACjC,MAAM,IAAI,GAAG,KAAK,CAAA;AAElB;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa,EAAE,MAAM,GAAG,CAAC;IAC3E,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,CAAA;IAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IAChC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;IAE9E,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;QACjB,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;QACjC,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAA;QACtC,OAAO;YACL,MAAM,EAAE,KAAK,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,MAAM,IAAI,MAAM,UAAU,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,MAAM,MAAM,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI;YACjI,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC;YAChC,MAAM;YACN,MAAM;SACP,CAAA;IACH,CAAC;IAED,MAAM,IAAI,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAA;IAClC,MAAM,KAAK,GAAG,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAEhC,OAAO;QACL,MAAM,EAAE,KAAK,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI;QAC9G,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC;QAChC,MAAM;QACN,MAAM;KACP,CAAA;AACH,CAAC","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\n/**\n * 막대 옆에 서는 **각도 눈**. 지금 각이 범위의 어디인지를 한 눈에 보인다.\n *\n * ## 왜 3D 로는 모자랐나\n *\n * 관절이 돌아도 화면이 그대로인 경우가 있다 — 제 축에서 대칭인 부품이 그렇다. 그래서 관절이\n * 모는 부품에 바늘을 달아 미리보기에서 함께 돌게 했는데(`joint-gizmo.ts` 의 `jointNeedles`),\n * **미리보기에서는 그 바늘이 4 × 2 픽셀이다**(잰 값: 부품 100mm · 바늘 60 × 12mm · 여덟 대를\n * 한 화면에 세운 상태). 미리보기는 크기 반응을 보려고 여덟 대를 나란히 놓는 자리라 한 대가\n * 20 픽셀쯤이고, 그 위의 어떤 표시도 몇 픽셀을 넘지 못한다.\n *\n * 각을 읽는 일은 3D 의 배율에서 떼어 놓는다. 눈은 막대 옆 24 픽셀 자리에 서고, 도형이 아무리\n * 작게 서 있어도 같은 크기로 읽힌다.\n */\n\nexport interface DialShape {\n  /** 가동 범위를 채운 부채꼴. SVG path 의 `d`. */\n  sector: string\n  /** 지금 값이 가리키는 끝점. */\n  needle: { x: number; y: number }\n  centre: { x: number; y: number }\n  radius: number\n}\n\n/** 0 도가 위를 가리키고, 값이 커지면 시계 방향으로 돈다 — 화면의 각과 같은 방향이다. */\nfunction at(centre: { x: number; y: number }, radius: number, degrees: number) {\n  const rad = (degrees * Math.PI) / 180\n  return {\n    x: +(centre.x + radius * Math.sin(rad)).toFixed(2),\n    y: +(centre.y - radius * Math.cos(rad)).toFixed(2)\n  }\n}\n\n/** 한 바퀴에 가까우면 부채꼴 대신 온전한 원이다. */\nconst FULL = 359.9\n\n/**\n * 눈의 모양. 값이 범위를 벗어나면 범위 끝에 세운다 — 밖을 가리키는 바늘은 없는 값을 말한다.\n */\nexport function dialShape(min: number, max: number, value: number, radius = 9): DialShape {\n  const centre = { x: radius + 1, y: radius + 1 }\n  const span = Math.abs(max - min)\n  const held = Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max))\n\n  if (span >= FULL) {\n    const top = at(centre, radius, 0)\n    const bottom = at(centre, radius, 180)\n    return {\n      sector: `M ${top.x} ${top.y} A ${radius} ${radius} 0 1 1 ${bottom.x} ${bottom.y} A ${radius} ${radius} 0 1 1 ${top.x} ${top.y} Z`,\n      needle: at(centre, radius, held),\n      centre,\n      radius\n    }\n  }\n\n  const from = at(centre, radius, min)\n  const to = at(centre, radius, max)\n  const large = span > 180 ? 1 : 0\n\n  return {\n    sector: `M ${centre.x} ${centre.y} L ${from.x} ${from.y} A ${radius} ${radius} 0 ${large} 1 ${to.x} ${to.y} Z`,\n    needle: at(centre, radius, held),\n    centre,\n    radius\n  }\n}\n"]}

package/dist-client/modeller/figure-settings.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import type { ViewSettings } from './figure-view.js';
+declare const FigureSettings_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 저작 화면의 **보기 설정**.
+ *
+ * ## 자산이 아니라 작업대다
+ *
+ * 여기서 고치는 것은 저장되지 않는다. 조명을 밝게 하고 바닥을 켠 것은 지금 보기 편한
+ * 상태일 뿐이다. 그래서 「저장 안 됨」을 화면에 적어 둔다 — 안 적으면 저작자가 조명을
+ * 맞춰 두고 그것이 자산에 딸려 간다고 여긴다.
+ *
+ * ## 값을 들고 있지 않는다
+ *
+ * 이 패널은 받은 것을 그리고 바뀐 것을 알린다. 정본은 모델러 페이지가 갖는다 — 속성
+ * 패널과 같은 방식이다. 여기서 들고 있으면 페이지가 다시 그릴 때 두 벌이 갈린다.
+ */
+export declare class FigureSettings extends FigureSettings_base {
+    static styles: import("lit").CSSResult[];
+    view: ViewSettings;
+    render(): import("lit-html").TemplateResult<1>;
+    private toggle;
+    private slider;
+    /** 처음 값으로 되돌린다. 만지다 길을 잃었을 때 돌아올 자리가 있어야 한다. */
+    private reset;
+    private put;
+    /**
+     * 바뀐 것을 알린다.
+     *
+     * **알리기 전에 내 것도 바꿔 둔다.** Lit 은 속성을 다음 렌더에 넣으므로, 같은 프레임에
+     * 두 번 고치면 두 번째가 `this.view` 의 옛 값을 읽어 첫 번째를 덮는다. 실제로 그랬다 —
+     * 축 가이드를 끄고 바닥판을 켰더니 축 가이드가 도로 켜져 있었고, 화면의 체크 상자와
+     * 씬의 상태가 서로 다른 말을 했다.
+     *
+     * 정본은 여전히 모델러 페이지가 갖는다. 여기 값은 다음 렌더에 같은 것으로 덮인다.
+     */
+    private tell;
+}
+export {};