@things-factory/figure-ui 10.1.3

package/client/modeller/figure-settings.ts

@@ -0,0 +1,285 @@
+import { css, html, LitElement } from 'lit'
+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 type { EnvironmentName, ViewSettings } from './figure-view.js'
+
+/**
+ * 저작 화면의 **보기 설정**.
+ *
+ * ## 자산이 아니라 작업대다
+ *
+ * 여기서 고치는 것은 저장되지 않는다. 조명을 밝게 하고 바닥을 켠 것은 지금 보기 편한
+ * 상태일 뿐이다. 그래서 「저장 안 됨」을 화면에 적어 둔다 — 안 적으면 저작자가 조명을
+ * 맞춰 두고 그것이 자산에 딸려 간다고 여긴다.
+ *
+ * ## 값을 들고 있지 않는다
+ *
+ * 이 패널은 받은 것을 그리고 바뀐 것을 알린다. 정본은 모델러 페이지가 갖는다 — 속성
+ * 패널과 같은 방식이다. 여기서 들고 있으면 페이지가 다시 그릴 때 두 벌이 갈린다.
+ */
+@customElement('figure-settings')
+export class FigureSettings extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow-y: auto;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      /* 속성 패널의 묶음 제목과 같은 규격이다 — 두 탭이 다른 눈금을 쓰면 따로 논다 */
+      h3 {
+        margin: 0 0 2px 0;
+        font-size: var(--ui-t-micro, 11px);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 저장되지 않는다는 것을 한 번 말해 둔다 */
+      p[quiet] {
+        margin: 0;
+        font-size: 0.72rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      label[row] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--spacing-medium, 8px);
+        cursor: pointer;
+      }
+      label[row] span {
+        display: flex;
+        flex-direction: column;
+      }
+      label[row] em {
+        font-style: normal;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      input[type='checkbox'] {
+        flex: none;
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+
+      label[field] {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      label[field] > span {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      select,
+      input[type='color'] {
+        width: 100%;
+        padding: 5px 6px;
+        font: var(--input-field-font, inherit);
+        font-size: 0.76rem;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+      }
+      input[type='color'] {
+        height: 30px;
+        padding: 2px;
+        cursor: pointer;
+      }
+
+      /* 값이 옆에 붙어야 끌면서 얼마인지 안다 */
+      div[slider] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+      }
+      input[type='range'] {
+        flex: 1;
+        accent-color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+      div[slider] output {
+        flex: none;
+        width: 2.4em;
+        text-align: right;
+        font: var(--mono-font, ui-monospace, monospace);
+        font-size: 0.72rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      button[reset] {
+        align-self: flex-start;
+        padding: 5px 12px;
+        font: var(--label-font, inherit);
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface-variant);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button[reset]:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+    `
+  ]
+
+  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW
+
+  render() {
+    const view = this.view ?? DEFAULT_VIEW
+
+    return html`
+      <section>
+        <h3>${i18next.t('label.guides')}</h3>
+        <p quiet>${i18next.t('text.view-settings-are-not-saved')}</p>
+
+        ${this.toggle('grid', view.grid, i18next.t('label.coordinate-ground'), i18next.t('text.coordinate-ground-explained'))}
+        ${this.toggle('gridLabels', view.gridLabels, i18next.t('label.axis-labels'))}
+        ${this.toggle('floor', view.floor, i18next.t('label.floor'), i18next.t('text.floor-explained'))}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.environment')}</h3>
+
+        <label field>
+          <span>${i18next.t('label.preset')}</span>
+          <select
+            .value=${view.environment}
+            @change=${(e: Event) => this.put({ environment: (e.target as HTMLSelectElement).value as EnvironmentName })}
+          >
+            ${ENVIRONMENTS.map(
+              name => html`<option value=${name} ?selected=${view.environment === name}>
+                ${i18next.t(`label.environment-${name}`)}
+              </option>`
+            )}
+          </select>
+        </label>
+        <p quiet>${i18next.t('text.environment-explained')}</p>
+
+        <label field>
+          <span>${i18next.t('label.sky-color')}</span>
+          <input
+            type="color"
+            .value=${view.skyColor}
+            @change=${(e: Event) => this.put({ skyColor: (e.target as HTMLInputElement).value })}
+          />
+        </label>
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.key-light')}</h3>
+
+        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('label.intensity'), 0, 5, 0.1)}
+        ${this.toggle(
+          'dirLightFollowCamera',
+          view.dirLightFollowCamera,
+          i18next.t('label.follow-camera'),
+          i18next.t('text.follow-camera-explained')
+        )}
+        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('label.cast-shadow'))}
+        ${view.dirLightIntensity === 0 && view.hemiIntensity === 0
+          ? html`<p quiet>${i18next.t('text.all-lights-off')}</p>`
+          : ''}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.hemisphere-light')}</h3>
+
+        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('label.intensity'), 0, 8, 0.1)}
+        <p quiet>${i18next.t('text.hemisphere-light-explained')}</p>
+      </section>
+
+      <section>
+        <button reset @click=${() => this.reset()}>${i18next.t('button.reset-view')}</button>
+      </section>
+    `
+  }
+
+  private toggle(key: keyof ViewSettings, on: boolean, label: string, hint?: string) {
+    return html`
+      <label row>
+        <span>
+          ${label}${hint ? html`<em>${hint}</em>` : ''}
+        </span>
+        <input
+          type="checkbox"
+          .checked=${on}
+          @change=${(e: Event) => this.put({ [key]: (e.target as HTMLInputElement).checked } as Partial<ViewSettings>)}
+        />
+      </label>
+    `
+  }
+
+  private slider(key: keyof ViewSettings, value: number, label: string, min: number, max: number, step: number) {
+    return html`
+      <label field>
+        <span>${label}</span>
+        <div slider>
+          <input
+            type="range"
+            min=${min}
+            max=${max}
+            step=${step}
+            .value=${String(value)}
+            @input=${(e: Event) =>
+              this.put({ [key]: Number((e.target as HTMLInputElement).value) } as Partial<ViewSettings>)}
+          />
+          <output>${value.toFixed(1)}</output>
+        </div>
+      </label>
+    `
+  }
+
+  /** 처음 값으로 되돌린다. 만지다 길을 잃었을 때 돌아올 자리가 있어야 한다. */
+  private reset() {
+    this.tell({ ...DEFAULT_VIEW })
+  }
+
+  private put(patch: Partial<ViewSettings>) {
+    this.tell({ ...(this.view ?? DEFAULT_VIEW), ...patch })
+  }
+
+  /**
+   * 바뀐 것을 알린다.
+   *
+   * **알리기 전에 내 것도 바꿔 둔다.** Lit 은 속성을 다음 렌더에 넣으므로, 같은 프레임에
+   * 두 번 고치면 두 번째가 `this.view` 의 옛 값을 읽어 첫 번째를 덮는다. 실제로 그랬다 —
+   * 축 가이드를 끄고 바닥판을 켰더니 축 가이드가 도로 켜져 있었고, 화면의 체크 상자와
+   * 씬의 상태가 서로 다른 말을 했다.
+   *
+   * 정본은 여전히 모델러 페이지가 갖는다. 여기 값은 다음 렌더에 같은 것으로 덮인다.
+   */
+  private tell(view: ViewSettings) {
+    this.view = view
+    this.dispatchEvent(new CustomEvent('update-view', { detail: { view }, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/figure-side.ts

@@ -0,0 +1,162 @@
+import './figure-inspector.js'
+import './figure-report.js'
+import './figure-settings.js'
+
+import { css, html, LitElement } from 'lit'
+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 { DEFAULT_VIEW } from './figure-view.js'
+import type { ViewSettings } from './figure-view.js'
+
+type Tab = 'properties' | 'verdict' | 'view'
+
+/**
+ * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
+ *
+ * ## 왜 위아래로 나누지 않나
+ *
+ * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못
+ * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.
+ *
+ * ## 그래도 개수는 늘 보인다
+ *
+ * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이
+ * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그
+ * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는
+ * 것이 보인다.
+ *
+ * 판정은 화면에서 감춰도 **DOM 에는 남는다.** 떼었다 붙이면 다시 세느라 값이 잠깐
+ * 비고, 펼쳐 둔 추이 그림 같은 상태도 날아간다.
+ */
+@customElement('figure-side')
+export class FigureSide extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border-left: 1px solid var(--md-sys-color-outline-variant);
+      color: var(--md-sys-color-on-surface);
+      font: var(--label-font, inherit);
+      /*
+        이 패널의 본문 크기를 여기서 한 번 정한다.
+
+        전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를
+        물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.
+        이 파일에서만 두 번 났다.
+
+        form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
+        그것 말고는 여기 값을 따른다.
+      */
+      font-size: 0.76rem;
+    }
+
+    div[tabs] {
+      display: flex;
+      flex: none;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    button[tab] {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 8px 6px;
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+      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] {
+      font-weight: 700;
+      color: var(--md-sys-color-primary);
+      border-bottom-color: var(--md-sys-color-primary);
+    }
+
+    /* 판정을 덮어 두어도 개수는 여기 남는다 */
+    span[badge] {
+      padding: 1px 7px;
+      font-size: 0.72rem;
+      font-weight: 700;
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-radius: 999em;
+    }
+
+    figure-inspector,
+    figure-report,
+    figure-settings {
+      flex: 1;
+      min-height: 0;
+      border-left: none;
+    }
+    /* 감추되 떼지는 않는다 */
+    [off] {
+      display: none;
+    }
+  `
+
+  /*
+    두 형태가 이 패널에서 갈린다.
+
+    속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**
+    곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
+  */
+  @property({ type: Object }) board?: BoardModel
+  @property({ type: Array }) parts: PartModel[] = []
+  @property({ type: Object }) source?: FigureSource
+  @property({ type: Number }) selected = -1
+  /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */
+  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW
+
+  @state() private tab: Tab = 'properties'
+  /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */
+  @state() private instances?: number
+
+  render() {
+    return html`
+      <div tabs>
+        ${this.renderTab('properties', i18next.t('label.properties'))}
+        ${this.renderTab('verdict', i18next.t('label.maturity'), this.instances)}
+        ${this.renderTab('view', i18next.t('label.view'))}
+      </div>
+
+      <figure-inspector
+        ?off=${this.tab !== 'properties'}
+        .board=${this.board}
+        .parts=${this.parts}
+        .selected=${this.selected}
+      ></figure-inspector>
+
+      <figure-report
+        ?off=${this.tab !== 'verdict'}
+        .source=${this.source}
+        @verdict-changed=${(e: CustomEvent) => (this.instances = e.detail.instances)}
+      ></figure-report>
+
+      <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>
+    `
+  }
+
+  private renderTab(tab: Tab, label: string, badge?: number) {
+    return html`
+      <button tab ?on=${this.tab === tab} @click=${() => (this.tab = tab)}>
+        ${label}${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
+      </button>
+    `
+  }
+}