@things-factory/figure-ui 10.1.46 → 10.1.48

package/client/modeller/figure-view.ts

@@ -0,0 +1,152 @@
+/**
+ * 저작 화면의 **보기 설정**.
+ *
+ * ## 저장되지 않는다
+ *
+ * 이것은 자산이 아니라 **작업대**다. 조명을 밝게 하고 바닥을 켠 것은 그 사람이 지금
+ * 보기 편한 상태일 뿐, 그 자산의 성질이 아니다. 그래서 `FigureSource` 에 안 들어간다 —
+ * `toFigureSource` 는 판에서 `width` · `height` · `depth` 와 몇 가지만 집어 가고 나머지는
+ * 버린다.
+ *
+ * 다른 사람이 같은 자산을 열면 자기 설정으로 본다. 그것이 맞다.
+ *
+ * ## 씬이 아는 이름을 그대로 쓴다
+ *
+ * 여기 이름은 전부 `model-layer` 의 상태 이름이다. 옮겨 적는 표를 두지 않는다 — 표를
+ * 두면 씬이 새 설정을 받아도 이쪽이 모른다.
+ *
+ * 값이 바뀌면 씬이 스스로 반영한다(`three-capability` 의 `onchange`). 다만 `grid` 는
+ * 한동안 3D 를 세울 때만 읽혔다 — things-scene 10.1.5 에서 고쳤다.
+ */
+export interface ViewSettings {
+  /**
+   * 어떤 도면에 놓인 것으로 보나 — 씬 전체의 좌표 모드.
+   *
+   * **도형의 `placement` 와 다른 것이다.** 도형의 것은 「이 종류는 바닥에 서나, 천장에
+   * 매달리나」이고, 이것은 「지금 보고 있는 도면이 어느 쪽을 기준으로 재나」다. 바닥
+   * 기준 도면에 천정 기반 OHT 를 놓으면 도면은 안 뒤집히고 OHT 가 천장 높이에 매달린다.
+   *
+   * 한동안 도형의 `placement` 를 이 자리에 흘려 넣었다. 모델러에 도형이 하나뿐이라
+   * 그럴듯해 보였지만, 그러면 도형의 성질이 씬 전체를 뒤집는다 — 도면에서는 성립할 수가
+   * 없고(도면에는 도형이 여럿이다), 저작 중에는 배치를 고를 때마다 저작자가 적어 둔
+   * 높이가 전부 다른 숫자로 보였다.
+   *
+   * 씬의 낱말 그대로다: `floor` 바닥 기준 · `space` 중심 기준(바닥 없음) · `inverted`
+   * 천장 기준. **미리보기에만 먹인다** — 편집 캔버스의 `zPos` 는 저작자가 직접 적는
+   * 숫자라 그 뜻이 보기 설정에 따라 바뀌면 안 된다.
+   */
+  placement: 'floor' | 'space' | 'inverted'
+  /**
+   * 천장 높이 (mm). 천정 기반 도형을 미리보기에서 어디에 매달 것인가.
+   *
+   * 도형은 제가 놓일 방의 높이를 모른다. 도면은 알지만 미리보기에는 도면이 없으므로,
+   * 저작자가 가정할 값을 여기서 정한다.
+   */
+  ceilingHeight: number
+  /** 좌표 바탕(축 가이드). 원점과 눈금을 보인다. */
+  grid: boolean
+  /** 축 이름표(X · Y · Z). 눈금만 두고 글자를 끌 수 있다. */
+  gridLabels: boolean
+  /** 판의 바닥면. 좌표 바탕과 겹치므로 기본은 끈다. */
+  floor: boolean
+  /** Environment — 반사(IBL). 금속 재질이 무엇을 비출지 정한다. */
+  environment: EnvironmentName
+  /** Sky Color — 배경색. */
+  skyColor: string
+  /** Key Light Intensity. */
+  dirLightIntensity: number
+  /** Key Light — Follow Camera. 끄면 그림자 방향이 고정된다. */
+  dirLightFollowCamera: boolean
+  /** Key Light — Cast Shadow. */
+  dirShadowEnabled: boolean
+  /** Hemisphere Light Intensity — 그늘진 면을 들어올린다. */
+  hemiIntensity: number
+}
+
+/**
+ * 환경 프리셋 — **`scene-manager` 의 `SkyPreset` 과 같은 여덟이다.**
+ *
+ * 한동안 다섯만 적었다. 씬은 여덟을 다 받는데 이쪽이 셋을 몰라서 고를 수 없었다.
+ * operato-board 의 3D 씬 속성 패널도 같은 여덟을 보인다.
+ */
+export const ENVIRONMENTS = [
+  'studio',
+  'warehouse',
+  'factory',
+  'office',
+  'home',
+  'sunny',
+  'cloudy',
+  'rainy'
+] as const
+export type EnvironmentName = (typeof ENVIRONMENTS)[number]
+
+/**
+ * 씬에 그대로 넣는 보기 설정 — **좌표 기준과 천장 높이는 빼고.**
+ *
+ * 나머지는 전부 `model-layer` 의 상태 이름이라 그대로 넣으면 씬이 알아서 반응한다.
+ * 그런데 `placement` 는 편집 캔버스에 들어가면 안 되고(거기는 늘 상자 기준이다),
+ * `ceilingHeight` 는 씬이 모르는 이름이다.
+ *
+ * **rest spread 로 넘기지 않으려고 이 함수가 있다.** 캔버스가 한동안
+ * `const { grid, ..., ...light } = view` 로 나머지를 통째로 넘겼는데, 그러면 설정을
+ * 하나 더할 때마다 그것이 두 화면에 **말없이** 실린다. 새로 더한 좌표 기준이 바로
+ * 그 길로 캔버스에 들어갈 뻔했다.
+ */
+export function sceneLook(view: ViewSettings): Record<string, unknown> {
+  const { placement, ceilingHeight, ...look } = view
+  return look
+}
+
+/**
+ * 씬의 좌표 기준 — **씬의 낱말 그대로 셋이다.**
+ *
+ * 형식의 `floor` · `center` · `ceiling` 과 짝이 맞지만 철자가 다르다. 옮겨 적는 표를 두지
+ * 않는 것이 이 파일의 규칙이므로 씬 쪽을 쓴다. 화면에는 둘 다 보인다 — 「천장 기준
+ * (inverted)」.
+ */
+export const SCENE_REFERENCES = ['floor', 'space', 'inverted'] as const
+
+/** 배경색 기본값. 회색이라 부품 색이 제 색으로 보인다. */
+export const WORKBENCH = '#7c7c7c'
+
+/**
+ * 처음 값.
+ *
+ * **지금 저작 화면이 실제로 쓰던 값 그대로다.** 설정을 만들면서 화면이 달라지면
+ * 무엇이 설정 때문이고 무엇이 원래 그랬는지 갈리지 않는다.
+ */
+export const DEFAULT_VIEW: ViewSettings = {
+  placement: 'floor',
+  /* 공장 천장의 흔한 높이. 반도체 fab 의 OHT 레일이 대체로 이 언저리다. */
+  ceilingHeight: 4000,
+  grid: true,
+  gridLabels: true,
+  floor: false,
+  environment: 'studio',
+  skyColor: WORKBENCH,
+  dirLightIntensity: 2.0,
+  dirLightFollowCamera: true,
+  dirShadowEnabled: true,
+  hemiIntensity: 4.0
+}
+
+/**
+ * How tall the preview board is: enough room for the tallest instance where the figure actually stands.
+ *
+ * A floor or center figure stands on the floor, so the tallest instance is the whole height. Only a
+ * ceiling figure needs the room up to the ceiling. The board used to reach the ceiling for every figure,
+ * which made a 920 tall AGV preview 4400 tall.
+ *
+ * This is an envelope, not a placement rule: where each instance goes is still the scene's
+ * (`FigureRealObject.effectiveZPos`), and the camera fits what the scene drew.
+ */
+export function previewBoardDepth(
+  figure: { placement?: 'floor' | 'ceiling' | 'center'; base: { y: number } },
+  ceilingHeight: number,
+  factor: number
+): number {
+  const tallest = figure.base.y * factor
+  const reach = figure.placement === 'ceiling' ? Math.max(ceilingHeight, tallest) : tallest
+  return Math.round(reach * 1.1)
+}

package/client/modeller/side-panel-styles.ts

@@ -0,0 +1,326 @@
+import { css } from 'lit'
+
+/**
+ * The side panel's one look -- V2's inspector, for every element that draws in the V3 modeller's side.
+ *
+ * The side is drawn by several elements (the type field, the figure's properties, a part's values, fastening, places,
+ * motion, material, controls, clips, the environment) and each had styled its own fields: three label styles and
+ * three field heights in one column (user, 2026-09-24: "why are the styles and layout all different?"). They share
+ * this sheet now and keep only what is theirs.
+ *
+ * The vocabulary, V2's:
+ *   section              one titled group; the side is a stack of them
+ *   h3                   a group's title -- small capitals
+ *   div[inline-field]    a short label and its one field on one line
+ *   div[field]           a label above a full-width field
+ *   div[form]            short labels beside their fields, the fields starting on one line
+ *   div[vector-row]      a title, then X · Y · Z in one row of cells with the axis inside (`div[triple]` of
+ *                        `div[cell]`) -- three values read together, as vector tools lay them out
+ *   div[pair]            two controls side by side
+ *   label[toggle]        a checkbox and its words
+ *   p[hint] · small      the quiet line under a field
+ *   button[act]          an action under the fields it acts on
+ *   [scrub]              a label dragged sideways to scrub its field
+ */
+export const SidePanelStyles = css`
+  :host {
+    --figure-control-height: 30px;
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+  }
+  /* The side is a stack of sections, each a titled group (V2's inspector). */
+  section {
+    display: grid;
+    gap: 6px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  }
+  section > h3 {
+    margin: 0;
+  }
+  section div[field] + div[field],
+  section div[inline-field] + div[inline-field],
+  section div[vector-row] + div[vector-row] {
+    margin-top: 0;
+  }
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 14px 0 6px;
+    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);
+  }
+  h3:first-child {
+    margin-top: 0;
+  }
+  label,
+  div[form] > span {
+    font-size: 0.68rem;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  div[field] {
+    display: grid;
+    gap: 2px;
+  }
+  div[field] + div[field],
+  div[field] + div[form],
+  div[form] + div[field],
+  div[vector-row] + div[vector-row],
+  div[vector-row] + div[field],
+  div[field] + div[vector-row] {
+    margin-top: 5px;
+  }
+  div[form],
+  div[inline-field],
+  div[vector-row] {
+    display: grid;
+    grid-template-columns: 64px minmax(0, 1fr);
+    align-items: center;
+    gap: 5px 7px;
+  }
+  div[form] > span,
+  div[inline-field] > label,
+  div[vector-row] > label {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+  div[inline-field] + div[inline-field],
+  div[inline-field] + div[vector-row],
+  div[vector-row] + div[inline-field] {
+    margin-top: 5px;
+  }
+  /* A row of icon tools (align, mirror, snap), as V2's placement section had them. */
+  div[tools] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  div[tools] button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 28px;
+    padding: 0;
+    color: var(--md-sys-color-on-surface);
+    background: var(--md-sys-color-surface-container-lowest);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  div[tools] button:hover:not(:disabled) {
+    background: var(--md-sys-color-surface-container);
+  }
+  div[tools] button:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+  div[tools] md-icon {
+    font-size: 17px;
+    width: 17px;
+    height: 17px;
+  }
+  div[pair] {
+    display: flex;
+    gap: 4px;
+  }
+  div[pair] > * {
+    flex: 1;
+    min-width: 0;
+  }
+  div[triple] {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 4px;
+  }
+  input,
+  select {
+    width: 100%;
+    min-width: 0;
+    min-height: var(--figure-control-height);
+    box-sizing: border-box;
+    padding: 4px 7px;
+    font: inherit;
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface-container-lowest);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 6px;
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    width: auto;
+    min-height: 0;
+  }
+  /* A thin track and a small thumb: a slider is a line to drag along, not a block (user, 2026-09-24). */
+  input[type='range'] {
+    -webkit-appearance: none;
+    appearance: none;
+    min-height: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  input[type='range']::-webkit-slider-runnable-track {
+    height: 3px;
+    border-radius: 2px;
+    background: var(--md-sys-color-outline-variant);
+  }
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    margin-top: -4.5px;
+    border: none;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+  }
+  input[type='range']::-moz-range-track {
+    height: 3px;
+    border-radius: 2px;
+    background: var(--md-sys-color-outline-variant);
+  }
+  input[type='range']::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    border: none;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+  }
+  input[type='range']:focus {
+    outline: none;
+  }
+  input[type='range']:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+  input[type='color'] {
+    padding: 2px;
+    width: 40px;
+  }
+  input:focus,
+  select:focus {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: -1px;
+  }
+  input:disabled,
+  select:disabled {
+    opacity: 0.6;
+  }
+  /* A number with its axis inside the cell, on the left. */
+  div[cell] {
+    display: flex;
+    box-sizing: border-box;
+    height: var(--figure-control-height);
+    align-items: center;
+    gap: 2px;
+    padding-left: 6px;
+    background-color: var(--md-sys-color-surface-container-lowest);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 6px;
+  }
+  div[cell]:focus-within {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: -1px;
+    border-color: transparent;
+  }
+  /* A label that scrubs its field when dragged sideways (vector tools' way). */
+  [scrub] {
+    cursor: ew-resize;
+    user-select: none;
+    touch-action: none;
+  }
+  div[cell] span[axis] {
+    flex: none;
+    font-size: 0.64rem;
+    letter-spacing: 0.02em;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  div[cell] input {
+    min-height: 0;
+    height: calc(var(--figure-control-height) - 2px);
+    padding: 4px 6px 4px 2px;
+    font-family: var(--mono-font, monospace);
+    text-align: right;
+    background: none;
+    border: none;
+    border-radius: 0;
+  }
+  div[cell] input:focus {
+    outline: none;
+  }
+  label[toggle] {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+  }
+  /* The 「?」 beside a title: no border, it says there is more rather than asking to be pressed (V2). */
+  button[help] {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    color: var(--md-sys-color-outline);
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  button[help] md-icon {
+    font-size: 13px;
+    width: 13px;
+    height: 13px;
+  }
+  button[help]:hover,
+  button[help][aria-expanded='true'] {
+    color: var(--md-sys-color-primary);
+  }
+  p[hint],
+  small {
+    display: block;
+    margin: 2px 0 4px;
+    font-size: 0.68rem;
+    line-height: 1.5;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  p[hint] {
+    padding-left: 6px;
+    border-left: 2px solid var(--md-sys-color-outline-variant);
+  }
+  button[act] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+    margin-top: 4px;
+    padding: 3px 8px;
+    min-height: 28px;
+    font: inherit;
+    font-size: 0.72rem;
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface-container);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  button[act]:hover:not(:disabled) {
+    background-color: var(--md-sys-color-surface-container-high);
+  }
+  button[act]:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  button[act] md-icon {
+    font-size: 15px;
+    width: 15px;
+    height: 15px;
+  }
+`