@things-factory/figure-ui 10.1.3 → 10.1.5

package/client/modeller/figure-side.ts

@@ -1,6 +1,7 @@
 import './figure-inspector.js'
 import './figure-report.js'
 import './figure-settings.js'
+import './figure-history-panel.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -12,7 +13,7 @@ import type { BoardModel, PartModel } from './figure-source.js'
 import { DEFAULT_VIEW } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 
-type Tab = 'properties' | 'verdict' | 'view'
+type Tab = 'properties' | 'verdict' | 'view' | 'history'
 
 /**
  * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
@@ -116,6 +117,13 @@ export class FigureSide extends localize(i18next)(LitElement) {
     속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**
     곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
   */
+  @property({ type: String }) figureName = ''
+  /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureState?: 'draft' | 'released'
+  @property({ type: Number }) figureVersion = 0
+  @property({ type: Boolean }) dirty = false
+
   @property({ type: Object }) board?: BoardModel
   @property({ type: Array }) parts: PartModel[] = []
   @property({ type: Object }) source?: FigureSource
@@ -133,10 +141,12 @@ export class FigureSide extends localize(i18next)(LitElement) {
         ${this.renderTab('properties', i18next.t('label.properties'))}
         ${this.renderTab('verdict', i18next.t('label.maturity'), this.instances)}
         ${this.renderTab('view', i18next.t('label.view'))}
+        ${this.renderTab('history', i18next.t('label.history'))}
       </div>
 
       <figure-inspector
         ?off=${this.tab !== 'properties'}
+        .figureName=${this.figureName}
         .board=${this.board}
         .parts=${this.parts}
         .selected=${this.selected}
@@ -149,6 +159,17 @@ export class FigureSide extends localize(i18next)(LitElement) {
       ></figure-report>
 
       <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>
+
+      <!--
+        이력은 감춰도 DOM 에 남긴다 — 다른 탭들과 같은 규칙이다. 떼었다 붙이면 판본을 다시 부른다.
+      -->
+      <figure-history-panel
+        ?off=${this.tab !== 'history'}
+        .figureId=${this.figureId}
+        .figureState=${this.figureState}
+        .figureVersion=${this.figureVersion}
+        .dirty=${this.dirty}
+      ></figure-history-panel>
     `
   }
 

package/client/modeller/figure-thumbnail.ts

@@ -0,0 +1,78 @@
+import './figure-canvas.js'
+
+import type { BoardModel, PartModel } from './figure-source.js'
+
+/**
+ * 카드에 쓸 그림을 찍는다 — **숨은 자리에 저작 캔버스를 하나 더 세워서.**
+ *
+ * ## 왜 보이는 캔버스를 찍지 않나
+ *
+ * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있고, 칸의 비율도 창 크기와 접힌 패널에 따라
+ * 다르다. 그것을 찍으면 카드마다 프레임이 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이
+ * 된다. 목록은 견주는 자리이므로 그림은 **정해진 크기와 정해진 카메라**로 찍는다.
+ *
+ * ## 왜 씬을 여기서 세우지 않고 부품을 세우나
+ *
+ * 씬 값(환경 · 하늘 · 조명 · 픽셀 비율 · 좌표 바탕)은 `figure-canvas` 가 든다. 여기서 다시 적으면
+ * 두 벌이 되고, 그러면 **카드에 보이는 그림과 저작면에서 보던 것이 아무 오류 없이 갈린다.** 그래서
+ * 같은 부품을 `viewOnly` 로 하나 더 세워 그 부품이 자기 씬을 세우게 하고, 찍은 뒤 버린다.
+ *
+ * ## 왜 서버가 아니라 브라우저인가
+ *
+ * 보드는 저장할 때 서버가 찍는데, 백엔드에 GPU 가 없는 배포가 많아 헤드리스로 3D 를 찍는 것이 자주
+ * 실패한다. 도형을 그릴 GPU 는 이미 보는 사람 손에 있다.
+ */
+
+/** 카드는 4:3 이다. */
+const WIDTH = 480
+const HEIGHT = 360
+
+interface Shooter extends HTMLElement {
+  board?: BoardModel
+  parts?: PartModel[]
+  viewOnly?: boolean
+  snapshot?: (width?: number, height?: number) => Promise<string | undefined>
+}
+
+/** 프레임 두 장 뒤에 한 번 더 쉰다 — 씬이 서고 카메라가 자리를 잡을 틈. 씬에 그 신호가 없다. */
+function settle(): Promise<void> {
+  return new Promise(resolve =>
+    requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 150)))
+  )
+}
+
+export async function captureThumbnail(
+  board: BoardModel | undefined,
+  parts: PartModel[]
+): Promise<string | undefined> {
+  if (!board || !parts.length) {
+    return undefined
+  }
+
+  /*
+    화면 밖에 둔다. `display: none` 이면 캔버스가 크기를 못 얻어 아무것도 그리지 못한다.
+    WebGL context 는 브라우저가 8~16개에서 끊으므로 찍은 뒤 반드시 버린다(아래 finally).
+  */
+  const host = document.createElement('div')
+  host.setAttribute('figure-thumbnail-stage', '')
+  host.style.cssText = `position: fixed; left: -10000px; top: 0; width: ${WIDTH}px; height: ${HEIGHT}px; pointer-events: none;`
+  document.body.appendChild(host)
+
+  const shooter = document.createElement('figure-canvas') as Shooter
+  shooter.viewOnly = true
+  shooter.board = board
+  shooter.parts = parts
+  shooter.style.cssText = 'display: block; width: 100%; height: 100%;'
+
+  try {
+    host.appendChild(shooter)
+    await settle()
+
+    return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
+  } catch (e) {
+    console.warn(`[thumbnail] 세우지 못했습니다 — ${(e as Error).message}`)
+    return undefined
+  } finally {
+    host.remove()
+  }
+}