@things-factory/figure-ui 10.1.45 → 10.1.47

package/client/modeller/angle-dial.ts

@@ -0,0 +1,70 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+/**
+ * 막대 옆에 서는 **각도 눈**. 지금 각이 범위의 어디인지를 한 눈에 보인다.
+ *
+ * ## 왜 3D 로는 모자랐나
+ *
+ * 관절이 돌아도 화면이 그대로인 경우가 있다 — 제 축에서 대칭인 부품이 그렇다. 그래서 관절이
+ * 모는 부품에 바늘을 달아 미리보기에서 함께 돌게 했는데(`joint-gizmo.ts` 의 `jointNeedles`),
+ * **미리보기에서는 그 바늘이 4 × 2 픽셀이다**(잰 값: 부품 100mm · 바늘 60 × 12mm · 여덟 대를
+ * 한 화면에 세운 상태). 미리보기는 크기 반응을 보려고 여덟 대를 나란히 놓는 자리라 한 대가
+ * 20 픽셀쯤이고, 그 위의 어떤 표시도 몇 픽셀을 넘지 못한다.
+ *
+ * 각을 읽는 일은 3D 의 배율에서 떼어 놓는다. 눈은 막대 옆 24 픽셀 자리에 서고, 도형이 아무리
+ * 작게 서 있어도 같은 크기로 읽힌다.
+ */
+
+export interface DialShape {
+  /** 가동 범위를 채운 부채꼴. SVG path 의 `d`. */
+  sector: string
+  /** 지금 값이 가리키는 끝점. */
+  needle: { x: number; y: number }
+  centre: { x: number; y: number }
+  radius: number
+}
+
+/** 0 도가 위를 가리키고, 값이 커지면 시계 방향으로 돈다 — 화면의 각과 같은 방향이다. */
+function at(centre: { x: number; y: number }, radius: number, degrees: number) {
+  const rad = (degrees * Math.PI) / 180
+  return {
+    x: +(centre.x + radius * Math.sin(rad)).toFixed(2),
+    y: +(centre.y - radius * Math.cos(rad)).toFixed(2)
+  }
+}
+
+/** 한 바퀴에 가까우면 부채꼴 대신 온전한 원이다. */
+const FULL = 359.9
+
+/**
+ * 눈의 모양. 값이 범위를 벗어나면 범위 끝에 세운다 — 밖을 가리키는 바늘은 없는 값을 말한다.
+ */
+export function dialShape(min: number, max: number, value: number, radius = 9): DialShape {
+  const centre = { x: radius + 1, y: radius + 1 }
+  const span = Math.abs(max - min)
+  const held = Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max))
+
+  if (span >= FULL) {
+    const top = at(centre, radius, 0)
+    const bottom = at(centre, radius, 180)
+    return {
+      sector: `M ${top.x} ${top.y} A ${radius} ${radius} 0 1 1 ${bottom.x} ${bottom.y} A ${radius} ${radius} 0 1 1 ${top.x} ${top.y} Z`,
+      needle: at(centre, radius, held),
+      centre,
+      radius
+    }
+  }
+
+  const from = at(centre, radius, min)
+  const to = at(centre, radius, max)
+  const large = span > 180 ? 1 : 0
+
+  return {
+    sector: `M ${centre.x} ${centre.y} L ${from.x} ${from.y} A ${radius} ${radius} 0 ${large} 1 ${to.x} ${to.y} Z`,
+    needle: at(centre, radius, held),
+    centre,
+    radius
+  }
+}

package/client/modeller/figure-settings.ts

@@ -0,0 +1,328 @@
+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-v3-capability.ts

@@ -0,0 +1,137 @@
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { v3BindingsOf } from '@hatiolab/figure-model'
+import type { FigureCapability, V3Asset } from '@hatiolab/figure-model'
+import { SidePanelStyles } from './side-panel-styles.js'
+
+/*
+  One rung per set of the format's capability names. Typed as the format's names, so a misspelt rung does not pass
+  (ADR-0051 ④, the V2 ladder's lesson).
+*/
+type Rung = 'none' | 'hold' | 'flow'
+const RUNGS: Readonly<Record<Rung, readonly FigureCapability[]>> = Object.freeze({
+  none: [],
+  hold: ['Capacity', 'Holdable'],
+  flow: ['FlowNode']
+})
+
+/** Which rung a set of names is, or null when it is none of them -- not invented. */
+export function rungOf(names: readonly string[] | undefined): Rung | null {
+  const has = new Set(names ?? [])
+  if (has.size === 0) return 'none'
+  for (const [rung, wanted] of Object.entries(RUNGS) as [Rung, readonly FigureCapability[]][])
+    if (wanted.length === has.size && wanted.every(name => has.has(name))) return rung
+  return null
+}
+
+/**
+ * 자리·능력 — what the figure does on a board (V2's 「능력」 tab, parity row ⑤): the ladder from drawing only, to
+ * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,
+ * so the list is the only way to find one; choosing a row selects its part, where the place is edited.
+ */
+@customElement('figure-v3-capability')
+export class FigureV3Capability extends localize(i18next)(LitElement) {
+  static styles = [SidePanelStyles, css`
+    :host {
+      display: block;
+    }
+    label[rung] {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+      padding: 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    label[rung][on] {
+      border-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    label[rung] span {
+      display: grid;
+      gap: 2px;
+    }
+    label[rung] em,
+    p[hint],
+    small {
+      font-style: normal;
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    button[place] {
+      display: grid;
+      gap: 2px;
+      text-align: left;
+      padding: 6px 8px;
+      font: inherit;
+      color: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+      background: none;
+      cursor: pointer;
+    }
+    button[place][on] {
+      border-color: var(--md-sys-color-primary);
+    }
+    code {
+      font-size: 0.9em;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `]
+
+  @property({ attribute: false }) asset?: V3Asset
+  /** The selected part, whose places are marked. */
+  @property() selected = ''
+  @property({ type: Boolean }) locked = false
+
+  render() {
+    const asset = this.asset
+    if (!asset) return nothing
+    const names = asset.document.capabilities.names ?? []
+    const rung = rungOf(names)
+    const places = v3BindingsOf(asset)
+    return html`<section>
+      <h3>${i18next.t('figure.label.what-this-does')}</h3>
+      ${(['none', 'hold', 'flow'] as const).map(
+        which => html`<label rung ?on=${rung === which}>
+          <input type="radio" name="rung" .checked=${live(rung === which)} ?disabled=${this.locked} @change=${() => this.setRung(which)} />
+          <span>
+            <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>
+            <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>
+          </span>
+        </label>`
+      )}
+      ${rung === null ? html`<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}
+      ${names.length ? html`<code>${names.join(' · ')}</code>` : nothing}
+      </section>
+      <section>
+      <h3>${i18next.t('figure.label.places')}</h3>
+      ${places.length
+        ? places.map(
+            one => html`<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>
+              <strong>${one.label}</strong>
+              <small>
+                ${i18next.t('figure.label.place-' + one.role)} · ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·
+                ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}
+              </small>
+            </button>`
+          )
+        : html`<p hint>${i18next.t('figure.text.no-places')}</p>`}
+      ${places.length && rung === 'none' ? html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>` : nothing}
+      </section>
+    `
+  }
+
+  private setRung(which: Rung) {
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which]] } }, bubbles: true, composed: true }))
+  }
+
+  private pick(part: string) {
+    this.dispatchEvent(new CustomEvent('select-part', { detail: { id: part }, bubbles: true, composed: true }))
+  }
+}