@things-factory/figure-ui 10.1.16 → 10.1.18

package/client/modeller/figure-preview.ts

@@ -6,6 +6,9 @@ import { compile, validate } from '@hatiolab/figure-model'
 import type { FigureSource } from '@hatiolab/figure-model'
 import { create, registerFigure } from '@hatiolab/things-scene'
 
+import { DEFAULT_VIEW, sceneLook, WORKBENCH } from './figure-view.js'
+import type { ViewSettings } from './figure-view.js'
+
 /**
  * 저작 중인 것을 **보드에 놓았을 때**의 모습.
  *
@@ -29,9 +32,6 @@ import { create, registerFigure } from '@hatiolab/things-scene'
  * 뷰 모드로 세운다.
  */
 
-/** 배경. 편집 캔버스와 같은 값을 쓴다 — 갈리면 두 화면이 다른 도구처럼 보인다. */
-const WORKBENCH = '#7c7c7c'
-
 /** 얼마나 키워 보나. */
 export const PREVIEW_FACTOR = 2
 
@@ -57,6 +57,18 @@ export const PREVIEW_WAYS: readonly { name: string; axes: readonly ('x' | 'y' |
   { name: 'x·y·z', axes: ['x', 'y', 'z'] }
 ]
 
+/*
+ * 높이는 여기서 안 정한다.
+ *
+ * 한동안 배치 기준을 높이로 옮기는 계산을 이 파일이 들고 있었다. 이제 씬이 한다 —
+ * `FigureRealObject.effectiveZPos` 가 청사진의 `placement` 와 레이어의 `heights` 로 정한다
+ * (ADR-0045, `operato-twin/design/04-decisions.md`). 보드가 그렇게 세우므로 「보드에 놓았을
+ * 때의 모습」을 말하는 이 화면도 그렇게 세워야 한다 — 여기서 `zPos` 를 적으면 **적은 값이
+ * 이겨서**, 씬이 무엇을 할지가 이 화면에서만 안 보인다.
+ *
+ * 규칙이 두 벌이면 갈린다. 오늘 하루가 그 이야기였다.
+ */
+
 interface SceneHandle {
   dispose?: () => void
   resize?: () => void
@@ -64,6 +76,8 @@ interface SceneHandle {
   root?: {
     invalidate?: () => void
     fitCameraToModel?: (margin?: number) => void
+    /** 보기 설정을 넣는 자리. 씬이 스스로 반응한다. */
+    set?: (patch: Record<string, unknown>) => void
     /** 세워 둔 인스턴스들. clip 을 몰 때 전부에 같은 값을 준다. */
     components?: { set?: (property: string, value: unknown) => void }[]
   }
@@ -103,11 +117,11 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
 
     /*
-      Clip 조작. **저작자가 제 애니메이션을 만져 볼 유일한 자리다.**
+      움직임 조작. **저작자가 제 애니메이션과 파라미터를 만져 볼 유일한 자리다.**
 
-      보드에서는 트윈이 clip 을 몬다 — 「닙이 40% 열렸다」는 사실이 어디선가 온다. 저작
-      중에는 그 사실을 주는 것이 없어서, 손대지 않으면 hold 인 clip 은 0 에 머문 채
-      영영 안 움직인다. 포크가 안 올라가는 것을 저작자가 「안 되는구나」로 읽게 된다.
+      도면에서는 트윈이 이 값을 준다 — 「닙이 40% 닫혔다」는 사실이 어디선가 온다. 저작
+      중에는 그 사실을 주는 것이 없어서, 손대지 않으면 파라미터는 기본값에 머문 채 영영
+      안 움직인다. 포크가 안 올라가는 것을 저작자가 「안 되는구나」로 읽게 된다.
 
       **미리보기 것이지 자산의 것이 아니다.** 여기서 민 값은 저장되지 않는다.
     */
@@ -162,6 +176,14 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   /** 저작 중인 것. 저장 형식으로 받는다 — 보드가 소비하는 것이 이 형식이다. */
   @property({ type: Object }) source?: FigureSource
 
+  /**
+   * 보기 설정. 저장되지 않는다(`figure-view.ts`).
+   *
+   * 한동안 이 화면만 조명과 환경을 **하드코딩**했다. 저작자가 환경 탭에서 무엇을 바꿔도
+   * 편집 캔버스만 달라지고 여기는 그대로였다 — 두 화면이 같은 것을 다르게 보여 주었다.
+   */
+  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW
+
   @query('div[stage]') private stage!: HTMLDivElement
 
   /** 세울 수 없는 사유. 없으면 세운 것이다. */
@@ -172,11 +194,14 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   private standing?: string
   private watcher?: ResizeObserver
 
-  /** 지금 민 clip 값. clip 이름 → 수. **저장되지 않는다.** */
+  /** 지금 민 clip 배속. clip 이름 → 수. **저장되지 않는다.** */
   @state() private driving: Record<string, number> = {}
+  /** 지금 민 파라미터 값. 이름 → `range` 의 단위로 잰 수. **저장되지 않는다.** */
+  @state() private giving: Record<string, number> = {}
 
   render() {
     const clips = this.source?.animations ?? []
+    const parameters = this.source?.parameters ?? []
 
     return html`
       <div stage></div>
@@ -185,31 +210,54 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         : html`<div legend>
               ${PREVIEW_WAYS.map(way => html`<span>${way.name}</span>`)}
             </div>
-            ${clips.length > 0 ? this.renderClips(clips) : ''}`}
+            ${clips.length + parameters.length > 0 ? this.renderDrivers(clips, parameters) : ''}`}
     `
   }
 
   /**
-   * Clip 하나에 손잡이 하나.
+   * 움직임 하나에 손잡이 하나.
    *
-   * 수의 뜻이 `drive` 에 따라 다르므로 그것을 이름 옆에 적는다. `loop` 는 배속이라 0 이
-   * 멈춤이고, `hold` 는 0~1 위치라 0 이 처음이다. 둘을 같은 눈금으로 두면 「1」이 무슨
-   * 뜻인지 매번 헷갈린다.
+   * 두 갈래를 **눈금이 다른 채로** 낸다. clip 은 배속이라 0 이 멈춤이고 0~3 이 뜻이
+   * 있으며, 파라미터는 물리량이라 그 `range` 가 곧 눈금이고 단위가 따라 붙는다. 하나의
+   * 0~1 로 뭉뚱그리면 「1」이 무슨 뜻인지 매번 헷갈리고, 1200mm 를 넣어 보려던 저작자가
+   * 넣을 자리를 못 찾는다.
    */
-  private renderClips(clips: NonNullable<FigureSource['animations']>) {
+  private renderDrivers(
+    clips: NonNullable<FigureSource['animations']>,
+    parameters: NonNullable<FigureSource['parameters']>
+  ) {
     return html`
       <div clips>
+        ${parameters.map(parameter => {
+          const range = parameter.range
+          const value = this.giving[parameter.name] ?? parameter.default ?? range?.min ?? 0
+          const step = range ? Math.max((range.max - range.min) / 100, 0.01) : 1
+
+          return html`
+            <label>
+              <span>${parameter.label ?? parameter.name} <span drive>${range?.unit ?? ''}</span></span>
+              <input
+                type="range"
+                min=${range?.min ?? 0}
+                max=${range?.max ?? 1}
+                step=${step}
+                .value=${String(value)}
+                @input=${(e: Event) => this.give(parameter.name, Number((e.target as HTMLInputElement).value))}
+              />
+              <output>${Math.round(value)}</output>
+            </label>
+          `
+        })}
         ${clips.map(clip => {
-          const loop = (clip.drive ?? 'loop') === 'loop'
-          const value = this.driving[clip.name] ?? (loop ? 1 : 0)
+          const value = this.driving[clip.name] ?? 1
 
           return html`
             <label>
-              <span>${clip.name} <span drive>${loop ? '배속' : '위치'}</span></span>
+              <span>${clip.name} <span drive>배속</span></span>
               <input
                 type="range"
                 min="0"
-                max=${loop ? 3 : 1}
+                max="3"
                 step="0.05"
                 .value=${String(value)}
                 @input=${(e: Event) => this.drive(clip.name, Number((e.target as HTMLInputElement).value))}
@@ -230,15 +278,53 @@ export class FigurePreview extends localize(i18next)(LitElement) {
    */
   private drive(name: string, value: number): void {
     this.driving = { ...this.driving, [name]: value }
+    this.tellInstances('clips', this.driving)
+  }
 
+  /**
+   * 파라미터 값을 준다 — **`range` 의 단위 그대로다.**
+   *
+   * 0~1 로 바꿔서 주지 않는다. 그 환산은 런타임의 일이고, 여기서 한 번 더 하면 두 곳이
+   * 갈릴 수 있다. 저작자가 화면에서 보는 1200 이 씬에 그대로 간다.
+   */
+  private give(name: string, value: number): void {
+    this.giving = { ...this.giving, [name]: value }
+    this.tellInstances('parameters', this.giving)
+  }
+
+  private tellInstances(key: 'clips' | 'parameters', values: Record<string, number>): void {
     for (const component of this.scene?.root?.components ?? []) {
-      component.set?.('clips', { ...this.driving })
+      component.set?.(key, { ...values })
     }
   }
 
+  /**
+   * 보기 설정이 바뀌면 **다시 세우지 않고 씬에 넣는다** — 두 개만 빼고.
+   *
+   * 조명·환경·바탕은 씬이 스스로 반응한다(`three-capability` 의 `onchange`). 슬라이더를
+   * 끄는 동안 다시 세우면 카메라가 매 프레임 처음으로 돌아간다.
+   *
+   * 좌표 기준과 천장 높이는 다르다. 씬이 그 둘로 인스턴스 높이를 정하는데, 그 계산은 세울
+   * 때 한 번 돈다 — 이미 세워 둔 것에 넣어 봐야 자리가 안 바뀐다. 그것만 다시 세운다.
+   */
   willUpdate(changed: Map<string, unknown>) {
     if (!this.hasUpdated) return
-    if (changed.has('source')) this.standUp()
+
+    if (changed.has('source')) {
+      this.standUp()
+      return
+    }
+
+    if (!changed.has('view')) return
+
+    const before = changed.get('view') as ViewSettings | undefined
+    const now = this.view ?? DEFAULT_VIEW
+    if (before?.placement !== now.placement || before?.ceilingHeight !== now.ceilingHeight) {
+      this.standUp()
+      return
+    }
+
+    this.scene?.root?.set?.(sceneLook(now))
   }
 
   firstUpdated() {
@@ -268,7 +354,9 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       return
     }
 
-    const signature = JSON.stringify(source)
+    const view = this.view ?? DEFAULT_VIEW
+    /* 씬이 이 둘로 인스턴스 높이를 정한다 — 서명에 안 넣으면 다시 세워도 그대로 선다. */
+    const signature = JSON.stringify([source, view.placement, view.ceilingHeight])
     if (this.scene && this.standing === signature) return
 
     const { errors } = validate(source)
@@ -304,24 +392,16 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       const COLUMNS = 4
       const cell = { x: base.x * biggest * 1.25, z: base.z * biggest * 1.25 }
       const rows = Math.ceil(PREVIEW_WAYS.length / COLUMNS)
-      const board = {
-        width: Math.round(cell.x * COLUMNS),
-        height: Math.round(cell.z * rows),
-        /*
-          판의 높이도 가장 큰 인스턴스를 담아야 한다.
-
-          안 주면 카메라가 평면만 보고 자리를 잡아서, 키가 큰 모델은 밑동만 보인다.
-          시그널타워를 2 배로 놓으면 2200 인데 판이 그것을 모르면 받침만 화면에 든다.
-        */
-        depth: Math.round(base.y * biggest * 1.1)
-      }
-
       /*
         씬의 낱말이 형식과 다르다 — `width` 가 형식의 x, `height` 가 z, `depth` 가 y 다.
         옮기는 일을 여기 한 줄에 모아 둔다.
 
         `depth` 를 늘 적는 이유가 있다. 안 적으면 평면 두 축의 기하평균으로 잡혀서,
         「y 만 키운다」가 x·z 를 안 건드리는데도 높이가 안 오른다.
+
+        높이는 **배치 기준이 정한다.** 바닥 기반은 땅에서 올라오고, 천정 기반은 천장에
+        붙어 내려온다. 여덟을 나란히 세우는 자리라 이것이 눈에 바로 보인다 — 바닥 기반이면
+        밑면이, 천정 기반이면 윗면이 한 줄이 된다.
       */
       const components = PREVIEW_WAYS.map((way, at) => {
         const grow = growth(way)
@@ -329,6 +409,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         const row = Math.floor(at / COLUMNS)
         const width = Math.round(base.x * grow.x)
         const height = Math.round(base.z * grow.z)
+        const tall = Math.round(base.y * grow.y)
 
         return {
           type: source.type,
@@ -338,23 +419,52 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           top: Math.round(row * cell.z + (cell.z - height) / 2),
           width,
           height,
-          depth: Math.round(base.y * grow.y)
+          depth: tall
         }
       })
 
+      const draft = {
+        width: Math.round(cell.x * COLUMNS),
+        height: Math.round(cell.z * rows),
+        /*
+          판의 높이도 가장 큰 인스턴스를 담아야 한다. 안 주면 카메라가 평면만 보고 자리를
+          잡아서, 키가 큰 모델은 밑동만 보인다 — 시그널타워를 2 배로 놓으면 2200 인데 판이
+          그것을 모르면 받침만 화면에 든다.
+
+          어디에 올려 놓을지는 **씬이 정하므로**(`FigureRealObject.effectiveZPos`), 여기서는
+          어느 경우에도 담기는 경계만 잡는다. 바닥 기반은 가장 큰 것의 키까지, 천정 기반은
+          천장까지다. 배치를 높이로 옮기는 계산을 여기서 다시 쓰면 그것이 두 벌째가 된다.
+        */
+        depth: Math.round(Math.max(view.ceilingHeight, base.y * biggest) * 1.1)
+      }
+
       this.scene = create({
         target: this.stage,
         model: {
           type: 'model-layer',
-          width: board.width,
-          height: board.height,
-          depth: board.depth,
+          width: draft.width,
+          height: draft.height,
+          depth: draft.depth,
           threed: true,
-          environment: 'studio',
-          grid: true,
           sky: 'color',
-          skyColor: WORKBENCH,
-          floor: false,
+          /*
+            보기 설정을 그대로 싣는다.
+
+            여기만 조명·환경·바탕을 하드코딩하고 있었다. 저작자가 환경 탭에서 조명을
+            올려도 편집 캔버스만 밝아지고 이 화면은 그대로여서, 같은 것을 두 화면이
+            다르게 보여 주었다.
+
+            `sceneLook` 이 좌표 기준과 천장 높이를 빼고 준다 — 씬이 아는 이름이 아니거나
+            (`ceilingHeight`) 편집 캔버스에 새면 안 되는 것(`placement`)이라서다. 둘 다 아래에
+            씬의 낱말로 따로 싣는다.
+          */
+          ...sceneLook(view),
+          placement: view.placement,
+          /*
+            부착면의 높이. 씬이 이 자리를 갖고(`real-object.ts` 의 `sceneHeights`), 천정 기반
+            도형이 여기서 제 높이를 얻는다. 보드에서는 현장이 이 값을 준다.
+          */
+          heights: { floor: 0, ceiling: view.ceilingHeight },
           pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
           components
         },

package/client/modeller/figure-report.ts

@@ -6,7 +6,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
-import { compile, costCurveSvg, costOf, scoreOf, sizingReport, validate } from '@hatiolab/figure-model'
+import { blocksRelease, compile, costCurveSvg, costOf, scoreOf, sizingReport, validate } from '@hatiolab/figure-model'
 import type { FigureCost, FigureScore, FigureSource } from '@hatiolab/figure-model'
 
 import { capacityOf } from './scene-budget.js'
@@ -439,7 +439,16 @@ export class FigureReport extends localize(i18next)(LitElement) {
   /** 추이 그림을 제 크기로 펼쳤나. */
   @state() private expanded = false
   @state() private errors: { code: string; message: string; at?: string }[] = []
-  @state() private violations: { code: string; message: string }[] = []
+  /**
+   * 형식이 권하지 않는 것 — **그중 둘은 발행을 막는다.**
+   *
+   * 등급을 형식에서 받는다(`blocksRelease`). 화면이 제 목록을 들면 형식에 코드가 하나 늘 때
+   * 조용히 「알림」으로 그려지고, 저작자는 발행이 막힌 것을 **눌러 보고 나서야** 안다.
+   *
+   * `actual` 은 얼마나 넘쳤나다. 「상자를 벗어난다」만으로는 2mm 인지 250mm 인지 모르고,
+   * 그 둘은 고치는 품이 다르다.
+   */
+  @state() private violations: { code: string; message: string; blocking: boolean; actual?: number }[] = []
   /**
    * 크기를 바꿔 봤을 때 갈라지는가 — **발행을 막는 것**이다.
    *
@@ -864,9 +873,13 @@ export class FigureReport extends localize(i18next)(LitElement) {
           )}
           ${this.violations.map(
             v => html`
-              <li violation>
-                <md-icon>info</md-icon>
-                <span>${v.message}</span>
+              <li ?violation=${!v.blocking}>
+                <md-icon>${v.blocking ? 'block' : 'info'}</md-icon>
+                <span>
+                  ${v.message}${v.blocking && v.actual !== undefined
+                    ? html` <code at>${v.actual}</code>`
+                    : ''}
+                </span>
               </li>
             `
           )}
@@ -909,7 +922,12 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     const result = validate(source)
     this.errors = result.errors.map(e => ({ code: e.code, message: e.message, at: e.path }))
-    this.violations = result.violations.map(v => ({ code: v.code, message: v.message }))
+    this.violations = result.violations.map(v => ({
+      code: v.code,
+      message: v.message,
+      blocking: blocksRelease(v.code),
+      actual: v.actual
+    }))
 
     if (this.errors.length > 0) {
       // 형식을 어겼으면 컴파일이 던진다. 셈을 비우고 오류만 보여 준다.

package/client/modeller/figure-settings.ts

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
-import { DEFAULT_VIEW, ENVIRONMENTS } from './figure-view.js'
+import { DEFAULT_VIEW, ENVIRONMENTS, SCENE_REFERENCES } from './figure-view.js'
 import type { EnvironmentName, ViewSettings } from './figure-view.js'
 
 /**
@@ -99,6 +99,7 @@ export class FigureSettings extends localize(i18next)(LitElement) {
       }
 
       select,
+      input[type='number'],
       input[type='color'] {
         width: 100%;
         padding: 5px 6px;
@@ -158,10 +159,52 @@ export class FigureSettings extends localize(i18next)(LitElement) {
     const view = this.view ?? DEFAULT_VIEW
 
     return html`
+      <!--
+        놓이는 보드.
+
+        이 묶음이 맨 위인 것은, 나머지가 「어떻게 보이나」인데 이것은 「무엇으로 보고
+        있나」이기 때문이다. 미리보기가 보드에 놓인 모습을 말하는 자리이므로, 어떤 보드를
+        가정하는지가 먼저 정해져야 그 다음이 뜻을 갖는다.
+
+        도형 탭의 「배치 기준」과 짝이지 같은 것이 아니다. 저쪽은 이 도형이 어느 면에
+        붙는가(저장된다), 이쪽은 그 면을 가진 보드가 어느 쪽을 기준으로 재는가(저장 안 된다).
+      -->
       <section>
-        <h3>${i18next.t('figure.label.guides')}</h3>
+        <h3>${i18next.t('figure.label.assumed-board')}</h3>
         <p quiet>${i18next.t('figure.text.view-settings-are-not-saved')}</p>
 
+        <label field>
+          <span>${i18next.t('figure.label.scene-reference')}</span>
+          <select
+            .value=${view.placement}
+            @change=${(e: Event) =>
+              this.put({ placement: (e.target as HTMLSelectElement).value as ViewSettings['placement'] })}
+          >
+            ${SCENE_REFERENCES.map(
+              name => html`<option value=${name} ?selected=${view.placement === name}>
+                ${i18next.t(`figure.label.scene-reference-${name}`)}
+              </option>`
+            )}
+          </select>
+        </label>
+        <p quiet>${i18next.t('figure.text.scene-reference-explained')}</p>
+
+        <label field>
+          <span>${i18next.t('figure.label.ceiling-height')}</span>
+          <input
+            type="number"
+            min="0"
+            step="100"
+            .value=${String(view.ceilingHeight)}
+            @change=${(e: Event) => this.put({ ceilingHeight: Number((e.target as HTMLInputElement).value) || 0 })}
+          />
+        </label>
+        <p quiet>${i18next.t('figure.text.ceiling-height-explained')}</p>
+      </section>
+
+      <section>
+        <h3>${i18next.t('figure.label.guides')}</h3>
+
         ${this.toggle('grid', view.grid, i18next.t('figure.label.coordinate-ground'), i18next.t('figure.text.coordinate-ground-explained'))}
         ${this.toggle('gridLabels', view.gridLabels, i18next.t('figure.label.axis-labels'))}
         ${this.toggle('floor', view.floor, i18next.t('figure.label.scene-floor'), i18next.t('figure.text.floor-explained'))}

package/client/modeller/figure-side.ts

@@ -12,7 +12,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import type { FigureSource } from '@hatiolab/figure-model'
 
-import type { BoardModel, PartModel } from './figure-source.js'
+import type { FigureDraft, PartModel } from './figure-source.js'
 import { DEFAULT_VIEW } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 
@@ -156,7 +156,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
   @property({ type: Number }) figureVersion = 0
   @property({ type: Boolean }) dirty = false
 
-  @property({ type: Object }) board?: BoardModel
+  @property({ type: Object }) draft?: FigureDraft
   @property({ type: Array }) parts: PartModel[] = []
   @property({ type: Object }) source?: FigureSource
   @property({ type: Number }) selected = -1
@@ -175,7 +175,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
    * 0 이면 아무것도 안 붙인다 — 「0」을 붙이면 없는 것이 있는 것처럼 자리를 차지한다.
    */
   private get clipCount(): number | undefined {
-    const n = this.board?.animations?.length ?? 0
+    const n = (this.draft?.animations?.length ?? 0) + (this.draft?.parameters?.length ?? 0)
     return n === 0 ? undefined : n
   }
 
@@ -196,20 +196,20 @@ export class FigureSide extends localize(i18next)(LitElement) {
         .figureName=${this.figureName}
         .figureCategory=${this.figureCategory}
         .figureTags=${this.figureTags}
-        .board=${this.board}
+        .draft=${this.draft}
         .parts=${this.parts}
         .selected=${this.selected}
       ></figure-inspector>
 
       <figure-capabilities
         ?off=${this.tab !== 'capability'}
-        .board=${this.board}
+        .draft=${this.draft}
         .parts=${this.parts}
       ></figure-capabilities>
 
       <figure-animations
         ?off=${this.tab !== 'animation'}
-        .board=${this.board}
+        .draft=${this.draft}
         .parts=${this.parts}
       ></figure-animations>