@things-factory/figure-ui 10.1.27 → 10.1.29

package/client/graphql/index.ts

@@ -323,6 +323,29 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
 }
 
 /** 발행된 판들 — 최근 것부터 열 개. */
+/**
+ * 직전 발행판의 정본. 한 번도 발행 안 했으면 `undefined`.
+ *
+ * 저작 중에 「이 고침이 이미 놓인 것을 깨나」를 그 자리에서 보여 주려면 견줄 것이 필요하다. 저장
+ * 전 초안은 서버가 모르므로 판정도 화면에서 한다 — 형식의 `contractChanges` 를 같이 쓴다.
+ */
+export async function fetchReleasedSource(id: string): Promise<string | undefined> {
+  const response = await client.query({
+    query: gql`
+      query FigureReleased($id: String!) {
+        figureReleased(id: $id) {
+          version
+          source
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<{ source?: string }>(response, 'figureReleased')?.source ?? undefined
+}
+
 export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {
   const response = await client.query({
     query: gql`

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/base-box.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import type { FigureDraft, PartModel } from './figure-source.js'
+
+/**
+ * 기준 상자를 고친다 — **부품은 제자리에 둔 채.**
+ *
+ * ## 왜 화면에 있어야 하나
+ *
+ * 기준 상자는 도면에 놓일 때의 배율을 정하는 수다(ADR-0044 ①). 부품이 그 상자를 넘으면 발행이
+ * 막히고, 고치는 길은 「상자 숫자 하나를 키우는 것」인데 **화면에 그 칸이 없었다.** 저작자는
+ * 넘쳤다는 말만 듣고 고칠 자리를 못 찾았다.
+ *
+ * ## 상자를 키우면 부품이 움직인다 — 그것을 되돌린다
+ *
+ * 저작면의 부품 자리는 판의 왼쪽 위에서 잰 값이고, 저장 형식의 자리는 **상자의 한가운데**에서 잰
+ * 값이다(`toFigureSource` 가 절반을 뺀다). 그래서 상자만 키우면 한가운데가 옮겨 가고 부품이 전부
+ * 반대로 밀린다. 여기서 늘어난 절반만큼 부품을 함께 옮겨, 저장되는 자리가 한 값도 안 바뀌게 한다.
+ *
+ * ## 「부품에 맞추기」는 한가운데를 지킨다
+ *
+ * 부품을 감싸는 가장 작은 상자를 만들 때, 부품 쪽을 **옮기지 않는다.** 한가운데에서 가장 먼
+ * 부품까지의 거리를 양쪽으로 잡는다. 부품이 한쪽으로 치우쳐 있으면 반대쪽에 여유가 남는데,
+ * 그것이 사실이다 — 치우친 것을 가운데로 끌어오면 저작자가 놓은 자리가 소리 없이 달라지고,
+ * 발행된 도형에서는 문(port)의 자리가 함께 움직인다.
+ *
+ * 높이는 밑면이 바닥이라 한쪽만 늘린다. 바닥 아래로 내려간 부품이 있으면 그 부품은 상자 밖에
+ * 남는다 — 그것을 담으려면 부품을 올려야 하고, 그것은 저작자가 정할 일이다. 발행 관문이 이미
+ * `part-outside-base` 로 말한다.
+ */
+
+export interface BaseSize {
+  /** 저작면의 가로 — 형식의 `base.x`. */
+  width: number
+  /** 저작면의 세로 — 형식의 `base.z`. */
+  height: number
+  /** 높이 — 형식의 `base.y`. */
+  depth: number
+}
+
+/** 상자는 밀리미터 하나보다 작아질 수 없다. 0 이 되면 배율이 0 으로 나뉜다. */
+const LEAST = 1
+
+const round = (value: number) => Math.round(value)
+
+export const baseOf = (draft: FigureDraft): BaseSize => ({
+  width: draft.width,
+  height: draft.height,
+  depth: draft.depth
+})
+
+/** 부품 전부를 담는 가장 작은 상자. 부품이 없으면 잴 것이 없다. */
+export function baseFittingParts(draft: FigureDraft, parts: readonly PartModel[]): BaseSize | undefined {
+  if (parts.length === 0) return undefined
+
+  const middle = { x: draft.width / 2, y: draft.height / 2 }
+  let half = { x: 0, y: 0 }
+  let tallest = 0
+
+  for (const part of parts) {
+    half = {
+      x: Math.max(half.x, Math.abs(part.left - middle.x), Math.abs(part.left + part.width - middle.x)),
+      y: Math.max(half.y, Math.abs(part.top - middle.y), Math.abs(part.top + part.height - middle.y))
+    }
+    tallest = Math.max(tallest, part.zPos + part.depth)
+  }
+
+  return {
+    width: Math.max(LEAST, round(half.x * 2)),
+    height: Math.max(LEAST, round(half.y * 2)),
+    depth: Math.max(LEAST, round(tallest))
+  }
+}
+
+/**
+ * 상자를 이 크기로. 부품은 저장되는 자리가 그대로이도록 함께 옮긴다.
+ *
+ * 달라질 것이 없으면 **받은 것을 그대로 돌려준다** — 고친 것이 없는데 「저장 안 됨」이 붙지 않게.
+ */
+export function resizeBase(
+  draft: FigureDraft,
+  parts: readonly PartModel[],
+  next: BaseSize
+): { draft: FigureDraft; parts: readonly PartModel[] } {
+  const size = {
+    width: Math.max(LEAST, round(next.width)),
+    height: Math.max(LEAST, round(next.height)),
+    depth: Math.max(LEAST, round(next.depth))
+  }
+
+  if (size.width === draft.width && size.height === draft.height && size.depth === draft.depth) {
+    return { draft, parts }
+  }
+
+  const shift = { x: (size.width - draft.width) / 2, y: (size.height - draft.height) / 2 }
+  const moved =
+    shift.x === 0 && shift.y === 0
+      ? parts
+      : parts.map(part => ({ ...part, left: part.left + shift.x, top: part.top + shift.y }))
+
+  return { draft: { ...draft, ...size }, parts: moved }
+}

package/client/modeller/figure-animations.ts

@@ -130,6 +130,18 @@ function freeName(taken: readonly { name: string }[], stem: string): string {
   for (let n = 2; ; n++) if (!used.has(`${stem}-${n}`)) return `${stem}-${n}`
 }
 
+/**
+ * 파라미터 범위에 적히는 단위 — **권하는 것이지 가두는 것이 아니다.**
+ *
+ * 관절이 만드는 파라미터가 `deg` 와 `mm` 을 쓰고(회전과 직선), 그리퍼·문 같은 값은 `%` 를 쓴다.
+ * 속도는 `mm/s` 와 `rpm`, 시간은 `s` 다. 이 여섯이 지금 쓰이는 전부이고, 목록에 없는 말을 적는
+ * 길은 그대로 열려 있다.
+ */
+const PARAMETER_UNITS = ['deg', 'mm', '%', 'mm/s', 'rpm', 's'] as const
+
+/** 목록 대신 손으로 적겠다는 표. `select` 의 값으로 쓴다. */
+const UNIT_TYPE_IT = '__type-it'
+
 @customElement('figure-animations')
 export class FigureAnimations extends localize(i18next)(LitElement) {
   static styles = [
@@ -225,6 +237,21 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
         min-width: 3.2em;
         color: var(--md-sys-color-on-surface-variant);
       }
+      /*
+        칸이 줄어들 줄 알아야 한다. 숫자 입력칸은 제 기본 너비(20자 남짓)를 갖고 있고 flex 는
+        기본 크기 아래로는 안 줄이므로, 범위처럼 한 줄에 셋이 서는 줄은 패널 밖으로 밀려
+        오른쪽 칸이 잘렸다.
+      */
+      div[row] > input {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      /* 단위는 「mm」 정도의 짧은 말이라 숫자 칸보다 좁게 둔다. 고르는 칸도 같은 폭이다. */
+      div[row] > input[unit],
+      div[row] > select[unit] {
+        flex: 0 1 5.5em;
+        min-width: 0;
+      }
 
       /* ── keyframe ─────────────────────────────────────────────────── */
 
@@ -341,6 +368,9 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   @state() private open = ''
   @state() private recipeTarget = ''
 
+  /** 단위를 손으로 적는 중인 파라미터. 목록에 없는 말을 적으려고 연 칸이다. */
+  @state() private typingUnit = new Set<number>()
+
   private get clips(): Clip[] {
     return this.draft?.animations ?? []
   }
@@ -542,14 +572,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
             aria-label="max"
             @change=${(e: Event) => this.setRange(at, { max: Number((e.target as HTMLInputElement).value) || 0 })}
           />
-          <input
-            unit
-            .value=${live(range.unit ?? '')}
-            placeholder="mm"
-            aria-label="unit"
-            title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
-            @change=${(e: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
-          />
+          ${this.renderUnit(at, range.unit ?? '')}
         </div>
         ${backwards ? html`<p warn>${i18next.t('figure.text.range-needs-room')}</p>` : nothing}
 
@@ -876,25 +899,25 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
   }
 
   /**
-   * 움직이는 부품 예산.
+   * 따로 움직이는 부품 예산.
    *
-   * **넘어도 막지 않는다.** 움직이는 부품은 저마다 단독 묶음이라 draw call 이 늘고 프레임마다
-   * 갱신이 는다 — 그 대가가 수로 보이면 저작자가 아낀다. 랜드마크 설비 하나는 정교해도 되고,
-   * 그 값이 도면 예산에 드러나면 된다.
+   * **넘어도 막지 않는다.** 제 변환을 지는 부품은 저마다 단독 묶음이라 draw call 이 늘고,
+   * 그만큼 한 화면에 함께 세울 수 있는 대수가 준다 — 그 대가가 수로 보이면 저작자가 아낀다.
+   * 랜드마크 설비 하나는 정교해도 되고, 그 값이 도면 예산에 드러나면 된다.
    */
   private renderBudget(): TemplateResult {
     const used = this.movingParts
-    const over = used > LIMITS.animatedParts
+    const over = used > LIMITS.independentParts
 
     return html`
       <section>
-        <h3>${i18next.t('figure.label.budget-animations')}</h3>
+        <h3>${i18next.t('figure.label.budget-independent')}</h3>
         <div budget ?over=${over}>
           <strong>${used}</strong>
-          <span quiet>/ ${LIMITS.animatedParts}</span>
+          <span quiet>/ ${LIMITS.independentParts}</span>
         </div>
-        <p quiet>${i18next.t('figure.text.animated-parts-cost')}</p>
-        ${over ? html`<p warn>${i18next.t('figure.text.animated-parts-over')}</p>` : nothing}
+        <p quiet>${i18next.t('figure.text.independent-parts-cost')}</p>
+        ${over ? html`<p warn>${i18next.t('figure.text.independent-parts-over')}</p>` : nothing}
       </section>
     `
   }
@@ -1009,6 +1032,56 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     this.patchParameter(at, { name: name.trim() })
   }
 
+  /**
+   * 단위 칸 — **목록이 보이는 채로, 적는 길도 열어 둔다.**
+   *
+   * 처음에는 `datalist` 를 붙였다. 그것은 브라우저가 쥐고 있는 기능이라 **눌러 보기 전에는 목록이
+   * 있는지조차 안 보인다** — 화살표도 없고, 어디에 어떻게 뜨는지도 브라우저가 정한다. 고를 수
+   * 있다는 것을 알리는 것이 이 칸의 목적이므로 `select` 로 바꿨다.
+   *
+   * 형식은 단위를 규칙으로 쓰지 않으므로(표시용 말이다) 목록에 가두지 않는다. 마지막 줄이
+   * 「직접 적기」이고, 목록에 없는 말이 이미 적혀 있으면 처음부터 적는 칸으로 연다.
+   */
+  private renderUnit(at: number, unit: string) {
+    const listed = (PARAMETER_UNITS as readonly string[]).includes(unit)
+    const typing = this.typingUnit.has(at) || (unit !== '' && !listed)
+
+    if (typing) {
+      return html`<input
+        unit
+        .value=${live(unit)}
+        placeholder="mm"
+        aria-label="unit"
+        title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+        @change=${(e: Event) => this.setRange(at, { unit: (e.target as HTMLInputElement).value.trim() })}
+      />`
+    }
+
+    return html`<select
+      unit
+      aria-label="unit"
+      title=${i18next.t('figure.text.unit-is-a-word-not-a-rule')}
+      @change=${(e: Event) => this.chooseUnit(at, (e.target as HTMLSelectElement).value)}
+    >
+      <option value="" ?selected=${unit === ''}>${i18next.t('figure.label.unit-none')}</option>
+      ${PARAMETER_UNITS.map(one => html`<option value=${one} ?selected=${one === unit}>${one}</option>`)}
+      <option value=${UNIT_TYPE_IT}>${i18next.t('figure.label.unit-type-it')}</option>
+    </select>`
+  }
+
+  /** 고른 것을 넣는다. 「직접 적기」는 값이 아니라 **칸을 바꾸는 것**이다. */
+  private chooseUnit(at: number, value: string): void {
+    if (value === UNIT_TYPE_IT) {
+      this.typingUnit = new Set([...this.typingUnit, at])
+      return
+    }
+
+    const next = new Set(this.typingUnit)
+    next.delete(at)
+    this.typingUnit = next
+    this.setRange(at, { unit: value })
+  }
+
   private setRange(at: number, patch: Partial<Parameter['range']>): void {
     const parameter = this.parameters[at]
     if (!parameter) return

package/client/modeller/figure-canvas.ts

@@ -4,7 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { create, Model } from '@hatiolab/things-scene'
 
-import { gridStep } from './part-edits.js'
+import { gridStep, roundPart } from './part-edits.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 import type { FigureDraft, PartModel } from './figure-source.js'
@@ -192,6 +192,14 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   /** 지금 고른 부품 이름. 목록에서 고른 것을 캔버스에 알린다. */
   @property({ type: String }) picked?: string
 
+  /**
+   * 관절이 도는 자리를 그리는 부채꼴(`joint-gizmo.ts`). 저작면에만 있고 저장되지 않는다.
+   *
+   * 부품과 같은 길로 세운다 — 씬에 겹쳐 그리는 통로를 따로 뚫지 않는다. `locked` 라 클릭도
+   * 마퀴도 집지 않는다.
+   */
+  @property({ type: Object }) gizmo?: PartModel
+
   /**
    * 보기 전용 — 씬에서 일어난 일을 밖에 알리지 않는다.
    *
@@ -278,6 +286,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
 
     if (changed.has('revision')) this.standing = undefined
     if (changed.has('draft') || changed.has('parts') || changed.has('figureId') || changed.has('revision')) this.standUp()
+    else if (changed.has('gizmo')) this.syncParts()
     if (changed.has('view')) this.applyView()
     if (changed.has('picked')) this.showPicked()
   }
@@ -358,7 +367,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
             없어야 한다: 좌표 모눈과 겹쳐 싸우고 원점 아래쪽을 가린다.
           */
           fillStyle: PAPER,
-          components: this.parts.map(part => ({ ...part }))
+          components: this.standing3d().map(part => ({ ...part }))
         },
         // **편집 모드**로 만든다. 도면의 3D 모델러가 그 모드에서 카메라 시점 버튼 ·
         // 기즈모 모드 · 도움말 · 단축키를 띄운다.
@@ -449,11 +458,17 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
    * 다시 세우면 고른 것과 카메라가 날아가서, 숫자 하나 고칠 때마다 화면이 처음으로
    * 돌아간다.
    */
+  /** 판에 세울 것 전부 — 저작한 부품과, 있으면 관절 부채꼴. */
+  private standing3d(): PartModel[] {
+    return this.gizmo ? [...this.parts, this.gizmo] : this.parts
+  }
+
   private syncParts() {
     const root = this.scene?.root
     if (!root) return
 
-    const wanted = new Map(this.parts.map(part => [part.name, part]))
+    const all = this.standing3d()
+    const wanted = new Map(all.map(part => [part.name, part]))
     const standing = this.partsOnCanvas()
 
     // 없어진 것을 제거한다
@@ -464,7 +479,7 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
       }
     }
 
-    for (const part of this.parts) {
+    for (const part of all) {
       const found = standing.get(part.name)
       if (found) {
         /*
@@ -521,8 +536,11 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
       const was = this.parts.find(part => part.name === name)
       if (!was) return
 
-      // 씬 모델 그대로 올려 보낸다. 모델러 페이지가 갖고 있는 것도 씬 모델이라 변환할 것이 없다.
-      this.tell('part-changed', { name, part: { ...was, ...changed!.state } as PartModel })
+      /*
+        씬 모델 그대로 올려 보낸다 — 모델러 페이지가 갖고 있는 것도 씬 모델이라 변환할 것이 없다.
+        밀리미터로만 맞춘다: 기즈모는 비율을 곱해 크기를 내므로 소수가 그대로 남는다.
+      */
+      this.tell('part-changed', { name, part: roundPart({ ...was, ...changed!.state } as PartModel) })
     })
   }