@things-factory/figure-ui 10.1.44 → 10.1.46

package/client/modeller/figure-settings.ts

@@ -1,328 +0,0 @@
-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, SCENE_REFERENCES } 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='number'],
-      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('figure.label.assumed-drawing')}</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'))}
-      </section>
-
-      <section>
-        <h3>${i18next.t('figure.label.environment')}</h3>
-
-        <label field>
-          <span>${i18next.t('figure.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(`figure.label.environment-${name}`)}
-              </option>`
-            )}
-          </select>
-        </label>
-        <p quiet>${i18next.t('figure.text.environment-explained')}</p>
-
-        <label field>
-          <span>${i18next.t('figure.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('figure.label.key-light')}</h3>
-
-        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('figure.label.intensity'), 0, 5, 0.1)}
-        ${this.toggle(
-          'dirLightFollowCamera',
-          view.dirLightFollowCamera,
-          i18next.t('figure.label.follow-camera'),
-          i18next.t('figure.text.follow-camera-explained')
-        )}
-        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('figure.label.cast-shadow'))}
-        ${view.dirLightIntensity === 0 && view.hemiIntensity === 0
-          ? html`<p quiet>${i18next.t('figure.text.all-lights-off')}</p>`
-          : ''}
-      </section>
-
-      <section>
-        <h3>${i18next.t('figure.label.hemisphere-light')}</h3>
-
-        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('figure.label.intensity'), 0, 8, 0.1)}
-        <p quiet>${i18next.t('figure.text.hemisphere-light-explained')}</p>
-      </section>
-
-      <section>
-        <button reset @click=${() => this.reset()}>${i18next.t('figure.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

@@ -1,272 +0,0 @@
-import '@material/web/icon/icon.js'
-import './figure-inspector.js'
-import './figure-capabilities.js'
-import './figure-animations.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'
-
-import { i18next, localize } from '@operato/i18n'
-import type { ContractChange, FigureSource } from '@hatiolab/figure-model'
-
-import type { FigureDraft, PartModel } from './figure-source.js'
-import { DEFAULT_VIEW } from './figure-view.js'
-import type { ViewSettings } from './figure-view.js'
-
-type Tab = 'properties' | 'capability' | 'animation' | 'verdict' | 'view' | 'history'
-
-/**
- * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
- *
- * ## 왜 위아래로 나누지 않나
- *
- * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못
- * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.
- *
- * ## 그래도 개수는 늘 보인다
- *
- * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이
- * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그
- * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는
- * 것이 보인다.
- *
- * 판정은 화면에서 감춰도 **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;
-      /*
-        **아이콘 하나가 한 칸을 쓴다.**
-
-        전에는 이름을 적었는데, 넷이 좁은 칸을 나눠 쓰면서 접혀 「성숙 / 도」가 되었다. 접히면
-        그 탭만 두 줄이 되어 높이가 서로 달라진다. 다섯이 되면서 더는 줄여 짜 넣을 수 없어
-        아이콘으로 바꿨고, 이름은 title 과 aria-label 로 남는다.
-
-        배지는 여전히 자리를 차지하지 않고 **아이콘 위에 겹친다**(아래 span[badge]). 개수는
-        곁들이는 것이다.
-      */
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      white-space: nowrap;
-      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] {
-      font-weight: 700;
-      color: var(--md-sys-color-primary);
-      border-bottom-color: var(--md-sys-color-primary);
-    }
-
-    /*
-      판정을 덮어 두어도 개수는 여기 남는다.
-
-      자리를 먹지 않게 오른쪽 위에 겹쳐 둔다 — 탭 이름을 밀지 않으므로 이름이 접히지 않는다.
-      숫자가 커져도(1,200 같은 것) 이름 위로 넘칠 뿐 줄을 바꾸지 않는다.
-    */
-    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;
-    }
-
-    figure-inspector,
-    figure-animations,
-    figure-report,
-    figure-settings {
-      flex: 1;
-      min-height: 0;
-      border-left: none;
-    }
-    /* 감추되 떼지는 않는다 */
-    [off] {
-      display: none;
-    }
-  `
-
-  /*
-    두 형태가 이 패널에서 갈린다.
-
-    속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**
-    곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
-  */
-  @property({ type: String }) figureName = ''
-  /** 카탈로그 분류·태그. 속성 탭이 보여 주고 바꾼다. */
-  @property({ type: String }) figureCategory?: string
-  @property({ type: Array }) figureTags?: string[]
-  /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */
-  @property({ type: String }) figureId?: string
-  @property({ type: String }) figureState?: 'draft' | 'released'
-  @property({ type: Number }) figureVersion = 0
-  @property({ type: Boolean }) dirty = false
-
-  @property({ type: Object }) draft?: FigureDraft
-  @property({ type: Array }) parts: PartModel[] = []
-  @property({ type: Object }) source?: FigureSource
-
-  /** 이 고침이 이미 놓인 인스턴스에 무엇을 하나(ADR-0063 결정 3). 발행 전 도형에는 비어 있다. */
-  @property({ type: Array }) contract: ContractChange[] = []
-  /** 직전 발행 기준 상자. 외형 변화 안내의 X·Z 복원 선택지에만 쓴다. */
-  @property({ type: Object }) releasedBase?: FigureSource['base']
-
-  /** 견주지 못한 까닭. 있으면 화면이 「확인하지 못했다」로 말한다. */
-  @property({ type: String }) contractFailure?: string
-  @property({ type: Number }) selected = -1
-  /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */
-  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW
-
-  @state() private tab: Tab = 'properties'
-  /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */
-  @state() private instances?: number
-
-  /**
-   * 이 도형이 든 clip 수. 탭 아이콘에 붙는다.
-   *
-   * 아이콘만으로는 「여기에 무언가 있다」를 알 수 없다. 대부분의 도형은 움직이지 않으므로
-   * 이 탭은 늘 비어 있을 것이고, 그러면 움직이는 도형을 열었을 때 그 사실이 눈에 걸려야 한다.
-   * 0 이면 아무것도 안 붙인다 — 「0」을 붙이면 없는 것이 있는 것처럼 자리를 차지한다.
-   */
-  private get clipCount(): number | undefined {
-    const n = (this.draft?.animations?.length ?? 0) + (this.draft?.parameters?.length ?? 0)
-    return n === 0 ? undefined : n
-  }
-
-  render() {
-    return html`
-      <div tabs>
-        ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
-        ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
-        ${this.renderTab('animation', 'animation', i18next.t('figure.label.animation'), this.clipCount)}
-        ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
-        ${this.renderTab('view', 'wb_sunny', i18next.t('figure.label.tab-environment'))}
-        ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
-      </div>
-
-      <figure-inspector
-        ?off=${this.tab !== 'properties'}
-        .figureId=${this.figureId}
-        .figureVersion=${this.figureVersion}
-        .figureName=${this.figureName}
-        .figureCategory=${this.figureCategory}
-        .figureTags=${this.figureTags}
-        .draft=${this.draft}
-        .parts=${this.parts}
-        .contract=${this.contract}
-        .contractFailure=${this.contractFailure}
-        .selected=${this.selected}
-      ></figure-inspector>
-
-      <figure-capabilities
-        ?off=${this.tab !== 'capability'}
-        .draft=${this.draft}
-        .parts=${this.parts}
-      ></figure-capabilities>
-
-      <figure-animations
-        ?off=${this.tab !== 'animation'}
-        .draft=${this.draft}
-        .parts=${this.parts}
-      ></figure-animations>
-
-      <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>
-
-      <!--
-        이력은 감춰도 DOM 에 남긴다 — 다른 탭들과 같은 규칙이다. 떼었다 붙이면 판본을 다시 부른다.
-      -->
-      <figure-history-panel
-        ?off=${this.tab !== 'history'}
-        .figureId=${this.figureId}
-        .figureState=${this.figureState}
-        .figureVersion=${this.figureVersion}
-        .dirty=${this.dirty}
-        .releasedBase=${this.releasedBase}
-      ></figure-history-panel>
-    `
-  }
-
-  /**
-   * 탭 하나 — **아이콘이 이름을 대신한다.**
-   *
-   * 탭이 다섯이 되면서 이름이 좁은 칸을 나눠 쓰다 접혔다. 앞으로 더 늘어날 자리이므로 이름을
-   * 줄여 짜 넣는 대신 아이콘으로 바꾼다.
-   *
-   * **이름을 버리지는 않는다.** 아이콘만으로는 무엇인지 모르는 사람이 있고, 특히 「능력」처럼
-   * 이 도구에만 있는 개념이 그렇다. 그래서 이름은 `title` 로 남아 마우스를 올리면 나오고,
-   * `aria-label` 로 읽는 기계에도 그대로 간다.
-   */
-  private renderTab(tab: Tab, 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>
-    `
-  }
-}