@things-factory/figure-ui 10.1.3

package/client/modeller/figure-preview.ts

@@ -0,0 +1,381 @@
+import { css, html, LitElement, unsafeCSS } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { compile, validate } from '@hatiolab/figure-model'
+import type { FigureSource } from '@hatiolab/figure-model'
+import { create, registerFigure } from '@hatiolab/things-scene'
+
+/**
+ * 저작 중인 것을 **보드에 놓았을 때**의 모습.
+ *
+ * ## 편집 캔버스로는 볼 수 없다
+ *
+ * 편집 캔버스는 부품을 컴포넌트로 늘어놓는다. 그래서 늘 기준 크기다. 그런데 이 형식의
+ * 값 절반은 **크기가 달라졌을 때 어떻게 반응하는가**에 있다. 기둥만 늘어나는 시그널타워,
+ * 롤러 개수가 느는 컨베이어는 기준 크기에서는 아무것도 보여 주지 못한다.
+ *
+ * 그래서 여기서는 저작한 것을 실제로 컴파일해 `FigureInstance` 로 세운다. 보드가 하는
+ * 일을 그대로 한다 — 청사진을 등록하고, 타입 이름만 적은 컴포넌트를 놓는다.
+ *
+ * ## 여러 크기를 한 번에 놓는다
+ *
+ * 하나만 놓으면 "이 크기에서는 이렇다" 밖에 알 수 없다. 기준 크기와 늘린 것을 나란히
+ * 놓아야 무엇이 따라 늘고 무엇이 그대로인지 보인다.
+ *
+ * ## 편집하지 않는다
+ *
+ * 여기서 집거나 끌 수 없다. 편집은 캔버스에서 한다. 보여 주기만 하는 자리라 씬을
+ * 뷰 모드로 세운다.
+ */
+
+/** 배경. 편집 캔버스와 같은 값을 쓴다 — 갈리면 두 화면이 다른 도구처럼 보인다. */
+const WORKBENCH = '#7c7c7c'
+
+/** 얼마나 키워 보나. */
+export const PREVIEW_FACTOR = 2
+
+/**
+ * 어느 축을 키워 놓아 보나 — **일곱 조합 전부.**
+ *
+ * 1 배 · 2 배 · 3 배를 나란히 놓던 자리다. 그러면 세 축이 늘 같이 늘어나므로, 축마다
+ * 따로 걸리는 규칙을 눈으로 볼 수가 없었다. 실제로 못 보고 넘어간 것들이 있다 — 컨베이어의
+ * 롤러가 폭을 안 따라가던 것, 문의 폭이 높이를 안 따라가던 것이 다 한 축만 늘렸을 때
+ * 드러나는 것이었다.
+ *
+ * 여덟이다. 첫째가 저작한 크기이고 나머지 일곱이 조합이다. 한 줄로 늘어놓으면 화면에
+ * 안 담겨서 **네 칸씩 두 줄**로 놓는다.
+ */
+export const PREVIEW_WAYS: readonly { name: string; axes: readonly ('x' | 'y' | 'z')[] }[] = [
+  { name: '기준', axes: [] },
+  { name: 'x', axes: ['x'] },
+  { name: 'y', axes: ['y'] },
+  { name: 'z', axes: ['z'] },
+  { name: 'x·y', axes: ['x', 'y'] },
+  { name: 'x·z', axes: ['x', 'z'] },
+  { name: 'y·z', axes: ['y', 'z'] },
+  { name: 'x·y·z', axes: ['x', 'y', 'z'] }
+]
+
+interface SceneHandle {
+  dispose?: () => void
+  resize?: () => void
+  fit?: (type?: string) => void
+  root?: {
+    invalidate?: () => void
+    fitCameraToModel?: (margin?: number) => void
+    /** 세워 둔 인스턴스들. clip 을 몰 때 전부에 같은 값을 준다. */
+    components?: { set?: (property: string, value: unknown) => void }[]
+  }
+}
+
+@customElement('figure-preview')
+export class FigurePreview extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      position: relative;
+      display: flex;
+      overflow: hidden;
+      background-color: ${unsafeCSS(WORKBENCH)};
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    div[stage] {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* 어느 것이 몇 배인지 — 나란히 놓아도 표가 없으면 읽을 수 없다 */
+    div[legend] {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 6px;
+      padding: 4px 8px;
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(28, 28, 30, 0.6);
+      border-radius: 6px;
+      font-size: 0.72rem;
+    }
+
+    /*
+      Clip 조작. **저작자가 제 애니메이션을 만져 볼 유일한 자리다.**
+
+      보드에서는 트윈이 clip 을 몬다 — 「닙이 40% 열렸다」는 사실이 어디선가 온다. 저작
+      중에는 그 사실을 주는 것이 없어서, 손대지 않으면 hold 인 clip 은 0 에 머문 채
+      영영 안 움직인다. 포크가 안 올라가는 것을 저작자가 「안 되는구나」로 읽게 된다.
+
+      **미리보기 것이지 자산의 것이 아니다.** 여기서 민 값은 저장되지 않는다.
+    */
+    div[clips] {
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 8px 10px;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(28, 28, 30, 0.72);
+      border-radius: 8px;
+      font-size: 0.72rem;
+    }
+    div[clips] label {
+      display: grid;
+      grid-template-columns: auto 96px 34px;
+      align-items: center;
+      gap: 8px;
+    }
+    div[clips] span[drive] {
+      opacity: 0.6;
+      font-size: 0.66rem;
+    }
+    div[clips] input {
+      width: 96px;
+      accent-color: var(--md-sys-color-primary);
+    }
+    div[clips] output {
+      font-variant-numeric: tabular-nums;
+      text-align: right;
+      opacity: 0.85;
+    }
+
+    /* 세울 수 없는 상태를 빈 화면으로 두지 않는다 — 왜 안 보이는지 말한다 */
+    div[cannot] {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-large, 12px);
+      text-align: center;
+      line-height: 1.6;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: ${unsafeCSS(WORKBENCH)};
+    }
+  `
+
+  /** 저작 중인 것. 저장 형식으로 받는다 — 보드가 소비하는 것이 이 형식이다. */
+  @property({ type: Object }) source?: FigureSource
+
+  @query('div[stage]') private stage!: HTMLDivElement
+
+  /** 세울 수 없는 사유. 없으면 세운 것이다. */
+  @state() private cannot = ''
+
+  private scene?: SceneHandle
+  /** 지금 세워 둔 것의 값. 같으면 다시 세우지 않는다. */
+  private standing?: string
+  private watcher?: ResizeObserver
+
+  /** 지금 민 clip 값. clip 이름 → 수. **저장되지 않는다.** */
+  @state() private driving: Record<string, number> = {}
+
+  render() {
+    const clips = this.source?.animations ?? []
+
+    return html`
+      <div stage></div>
+      ${this.cannot
+        ? html`<div cannot>${this.cannot}</div>`
+        : html`<div legend>
+              ${PREVIEW_WAYS.map(way => html`<span>${way.name}</span>`)}
+            </div>
+            ${clips.length > 0 ? this.renderClips(clips) : ''}`}
+    `
+  }
+
+  /**
+   * Clip 하나에 손잡이 하나.
+   *
+   * 수의 뜻이 `drive` 에 따라 다르므로 그것을 이름 옆에 적는다. `loop` 는 배속이라 0 이
+   * 멈춤이고, `hold` 는 0~1 위치라 0 이 처음이다. 둘을 같은 눈금으로 두면 「1」이 무슨
+   * 뜻인지 매번 헷갈린다.
+   */
+  private renderClips(clips: NonNullable<FigureSource['animations']>) {
+    return html`
+      <div clips>
+        ${clips.map(clip => {
+          const loop = (clip.drive ?? 'loop') === 'loop'
+          const value = this.driving[clip.name] ?? (loop ? 1 : 0)
+
+          return html`
+            <label>
+              <span>${clip.name} <span drive>${loop ? '배속' : '위치'}</span></span>
+              <input
+                type="range"
+                min="0"
+                max=${loop ? 3 : 1}
+                step="0.05"
+                .value=${String(value)}
+                @input=${(e: Event) => this.drive(clip.name, Number((e.target as HTMLInputElement).value))}
+              />
+              <output>${value.toFixed(2)}</output>
+            </label>
+          `
+        })}
+      </div>
+    `
+  }
+
+  /**
+   * 세워 둔 인스턴스 전부에 같은 값을 준다.
+   *
+   * 하나만 몰면 세 배율이 서로 다른 자세로 서서, 크기 반응을 보려고 나란히 놓은 뜻이
+   * 사라진다.
+   */
+  private drive(name: string, value: number): void {
+    this.driving = { ...this.driving, [name]: value }
+
+    for (const component of this.scene?.root?.components ?? []) {
+      component.set?.('clips', { ...this.driving })
+    }
+  }
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (!this.hasUpdated) return
+    if (changed.has('source')) this.standUp()
+  }
+
+  firstUpdated() {
+    this.standUp()
+    this.watcher = new ResizeObserver(() => this.scene?.resize?.())
+    this.watcher.observe(this)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.watcher?.disconnect()
+    this.watcher = undefined
+    this.teardown()
+  }
+
+  /**
+   * 저작한 것을 컴파일해 세운다.
+   *
+   * **형식을 어겼으면 세우지 않는다.** 반쯤 세운 것을 보여 주면 무엇이 잘못됐는지 알 수
+   * 없다. 판정 패널이 이미 사유를 말하고 있으므로 여기서는 세울 수 없다고만 한다.
+   */
+  private standUp() {
+    const source = this.source
+    if (!source || source.parts.length === 0) {
+      this.cannot = i18next.t('text.preview-needs-a-part')
+      this.teardown()
+      return
+    }
+
+    const signature = JSON.stringify(source)
+    if (this.scene && this.standing === signature) return
+
+    const { errors } = validate(source)
+    if (errors.length > 0) {
+      this.cannot = i18next.t('text.preview-blocked-by-errors')
+      this.teardown()
+      return
+    }
+
+    this.teardown()
+    // 표본이 바뀌면 민 값도 처음으로 돌린다 — 다른 자산의 clip 이름이 남으면 안 된다.
+    this.driving = {}
+
+    try {
+      registerFigure(compile(source) as never)
+
+      /*
+        보드가 하는 일을 그대로 한다. 컴포넌트에는 타입 이름과 자리·크기만 적는다 —
+        청사진도 원본도 보드에 들어가지 않는다.
+
+        가장 큰 것이 들어갈 만큼 판을 잡고, 세로로 줄을 나눠 나란히 놓는다.
+      */
+      const { base } = source
+      const biggest = PREVIEW_FACTOR
+      /** 이 조합에서 축별 배율. 조합에 든 축만 키운다. */
+      const growth = (way: (typeof PREVIEW_WAYS)[number]) => ({
+        x: way.axes.includes('x') ? PREVIEW_FACTOR : 1,
+        y: way.axes.includes('y') ? PREVIEW_FACTOR : 1,
+        z: way.axes.includes('z') ? PREVIEW_FACTOR : 1
+      })
+      // 여백을 넉넉히 두면 화면에서 형상이 작아진다. 가장 큰 것이 겨우 들어갈 만큼만 잡는다.
+      /** 네 칸씩 두 줄. */
+      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)
+        const column = at % COLUMNS
+        const row = Math.floor(at / COLUMNS)
+        const width = Math.round(base.x * grow.x)
+        const height = Math.round(base.z * grow.z)
+
+        return {
+          type: source.type,
+          id: `at-${way.name}`,
+          // 칸 가운데에 놓는다 — 크기가 저마다 달라 왼쪽에 맞추면 줄이 안 읽힌다.
+          left: Math.round(column * cell.x + (cell.x - width) / 2),
+          top: Math.round(row * cell.z + (cell.z - height) / 2),
+          width,
+          height,
+          depth: Math.round(base.y * grow.y)
+        }
+      })
+
+      this.scene = create({
+        target: this.stage,
+        model: {
+          type: 'model-layer',
+          width: board.width,
+          height: board.height,
+          depth: board.depth,
+          threed: true,
+          environment: 'studio',
+          grid: true,
+          sky: 'color',
+          skyColor: WORKBENCH,
+          floor: false,
+          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+          components
+        },
+        // 보기만 하는 자리다. 집거나 끌 수 없어야 한다.
+        mode: 0
+      }) as SceneHandle
+
+      this.standing = signature
+      this.scene.resize?.()
+      this.scene.fit?.('ratio')
+      this.scene.root?.fitCameraToModel?.()
+      this.cannot = ''
+    } catch (e) {
+      // 원인을 지어내지 않는다 — 던진 말을 그대로 보여 준다.
+      this.cannot = (e as Error).message
+    }
+  }
+
+  private teardown() {
+    this.scene?.dispose?.()
+    this.scene = undefined
+    this.standing = undefined
+  }
+}