@things-factory/figure-ui 10.1.153 → 10.1.155

package/dist-client/modeller/figure-material-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-material-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-material-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, svg } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\nimport type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'\nimport { SidePanelStyles } from './side-panel-styles.js'\nimport { isRoundBody } from './starting-shape.js'\nimport { glowOf, materialEditOf, offeredPaletteOf } from './material-edit.js'\n\n/** The purpose each palette role is for, by its token. */\nconst PURPOSE: Record<string, string> = {\n  'palette.primary': 'primary',\n  'palette.accent': 'accent',\n  'palette.neutral': 'neutral',\n  'palette.dark': 'dark',\n  'palette.light': 'light',\n  'palette.surface': 'surface',\n  'palette.status-danger': 'danger',\n  'palette.status-warning': 'warning',\n  'palette.status-info': 'info',\n  'palette.status-success': 'success'\n}\nexport const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)\n\n/** Bodies with a rim — the ones `set-segments` accepts. */\nconst DEFAULT_SEGMENTS = 12\n\n/**\n * 재질 — a part's material.\n *\n * An earlier editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The material\n * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This\n * shows those: painted colours and lit colours as two groups of swatches, each named for what it\n * is for.\n *\n * Not here, because a material has no place for them: flat shading and casting\n * shadows. The glow's colour comes from the lit colours.\n *\n * Every change leaves as one `part-edit`; the editor runs it through the session, one step of the undo history.\n */\n@customElement('figure-material-panel')\nexport class FigureMaterialPanel extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    div[field] {\n      display: grid;\n      gap: 4px;\n    }\n    /* A slider and its value on one line, the value at the end where the eye finishes. */\n    div[slider] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 3em;\n      align-items: center;\n      gap: 8px;\n    }\n    div[slider] output {\n      text-align: right;\n      font-variant-numeric: tabular-nums;\n    }\n    div[swatches] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n    }\n    button[swatch] {\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border-radius: 50%;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      background: var(--swatch);\n      cursor: pointer;\n    }\n    button[swatch][on] {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: 1px;\n    }\n    select,\n    input[type='range'] {\n      font: inherit;\n      min-width: 0;\n    }\n    /* The segment picker: the four common counts as their silhouettes with their triangle cost, the rest folded. */\n    div[segments] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 4px;\n    }\n    button[seg] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1px;\n      padding: 6px 2px 4px;\n      font: inherit;\n      color: var(--md-sys-color-on-surface);\n      background: none;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    button[seg]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[seg][on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    /* Small, and 12 and 16 both read as circles: large enough for the corners to show. */\n    button[seg] svg {\n      display: block;\n      width: 32px;\n      height: 32px;\n    }\n    button[seg] svg polygon {\n      fill: var(--md-sys-color-surface-container-highest);\n      stroke: currentColor;\n      stroke-width: 1.1;\n      stroke-linejoin: miter;\n    }\n    button[seg][on] svg polygon {\n      fill: var(--md-sys-color-surface-container-lowest);\n    }\n    button[seg] b {\n      font-weight: 600;\n    }\n    button[seg] small {\n      margin: 0;\n    }\n    details[free] summary {\n      margin-top: 4px;\n      cursor: pointer;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[presets] {\n      display: flex;\n      gap: 4px;\n      margin-top: 4px;\n    }\n    div[presets] button {\n      flex: 1;\n      padding: 3px 0;\n      font: inherit;\n      color: var(--md-sys-color-on-surface);\n      background: none;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    div[presets] button[on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n  `]\n\n  /** The selected body as evaluated — its material, its segments and its shape. */\n  @property({ attribute: false }) body?: FigureAssetGeometry & { id: string }\n  /** The asset's palette, token → colour. */\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property({ type: Boolean }) locked = false\n  /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */\n  @state() private glowing?: number\n\n  render() {\n    const part = this.body\n    if (!part) return nothing\n    const material = part.material\n    /*\n      The roles offered are the app's palette, with any the asset carries beyond it. A new asset carries\n      only its primary colour; a role it lacks is sent with its colour and added in the same edit (`put`).\n    */\n    const entries = Object.entries(this.offered())\n    const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))\n    const lit = entries.filter(([token]) => token.startsWith('palette.status-'))\n    const glow = material.emissive\n    return html`<section>\n      <h3>${i18next.t('figure.label.part-material')}</h3>\n      <div field>\n        <label>${i18next.t('figure.label.palette-role')}</label>\n        <div swatches>${this.swatches(painted, material.token, token => this.put({ token }))}</div>\n        ${lit.length\n          ? html`<small>${i18next.t('figure.label.status-colors')}</small>\n              <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`\n          : nothing}\n      </div>\n      <div form>\n        <span>${i18next.t('figure.label.preset')}</span>\n        <select\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as FigureMaterial['preset'] })}\n        >\n          <option value=\"\" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>\n          ${MATERIAL_PRESETS.map(\n            preset => html`<option value=${preset} ?selected=${preset === material.preset}>${i18next.t('figure.label.preset-' + preset)}</option>`\n          )}\n        </select>\n      </div>\n      <label toggle>\n        <input\n          type=\"checkbox\"\n          ?disabled=${this.locked}\n          .checked=${!!material.transparent}\n          @change=${(e: Event) => this.put({ transparent: (e.target as HTMLInputElement).checked || undefined })}\n        />\n        ${i18next.t('figure.label.transparent')}\n      </label>\n      <div form>\n        <span>${i18next.t('figure.label.emissive')}</span>\n        <div slider>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          ?disabled=${this.locked}\n          .value=${String(glow?.intensity ?? 0)}\n          @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}\n          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}\n        />\n        <output>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</output>\n        </div>\n      </div>\n      ${glow\n        ? html`<div field>\n            <label>${i18next.t('figure.label.emissive-color')}</label>\n            <div swatches>${this.swatches(lit.length ? lit : painted, glow.token, token => this.put({ emissive: { ...glow, token } }))}</div>\n          </div>`\n        : nothing}\n      ${this.renderSegments(part)}\n    </section>`\n  }\n\n  private renderSegments(part: FigureAssetGeometry & { id: string }) {\n    if (!isRoundBody((part as { shape?: never }).shape)) return nothing\n    const current = part.segments ?? DEFAULT_SEGMENTS\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.segments')}</label>\n        <div segments>\n          ${SEGMENT_PRESETS.slice(0, 4).map(\n            preset => html`<button\n              seg\n              ?on=${preset === current}\n              ?disabled=${this.locked}\n              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}\n            >\n              ${silhouette(preset)}\n              <b>${preset}</b>\n              <small>${i18next.t('figure.text.n-triangles', { count: figureTrianglesOf({ ...part, segments: preset }) })}</small>\n            </button>`\n          )}\n        </div>\n        <details free ?open=${SEGMENT_PRESETS.slice(4).includes(current as never)}>\n          <summary>${i18next.t('figure.text.more-segment-options')}</summary>\n          <div presets>\n            ${SEGMENT_PRESETS.slice(4).map(\n              preset => html`<button ?on=${preset === current} ?disabled=${this.locked} @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}>\n                ${preset}\n              </button>`\n            )}\n          </div>\n        </details>\n      </div>\n    `\n  }\n\n  private swatches(entries: [string, string][], chosen: string | undefined, pick: (token: string) => void) {\n    return entries.map(\n      ([token, colour]) => html`<button\n        swatch\n        ?on=${token === chosen}\n        ?disabled=${this.locked}\n        title=${purposeOf(token)}\n        aria-label=${purposeOf(token)}\n        style=\"--swatch:${colour}\"\n        @click=${() => pick(token)}\n      ></button>`\n    )\n  }\n\n  private offered(): Record<string, string> {\n    return offeredPaletteOf(activePalette() as Record<string, string>, this.palette)\n  }\n\n  private glow(intensity: number, live = false) {\n    this.glowing = live ? intensity : undefined\n    this.put(glowOf(this.body!.material, intensity), live)\n  }\n\n  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */\n  private put(patch: Partial<FigureMaterial>, live = false) {\n    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, this.offered())\n    if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))\n    else this.edit(edit)\n  }\n\n  private edit(edit: FigurePartEdit) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n\n/** A regular polygon of this many sides -- how round a body with this rim count looks from its end. */\nfunction silhouette(segments: number) {\n  const points: string[] = []\n  for (let i = 0; i < segments; i++) {\n    const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments\n    points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`)\n  }\n  return svg`<svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><polygon points=${points.join(' ')}></polygon></svg>`\n}\n"]}
+{"version":3,"file":"figure-material-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-material-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, svg } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/figure-model'\nimport { activePalette } from '@hatiolab/things-scene'\nimport type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { isRoundBody } from './starting-shape.js'\nimport { glowOf, materialEditOf, offeredPaletteOf } from './material-edit.js'\n\n/** The purpose each palette role is for, by its token. */\nconst PURPOSE: Record<string, string> = {\n  'palette.primary': 'primary',\n  'palette.accent': 'accent',\n  'palette.neutral': 'neutral',\n  'palette.dark': 'dark',\n  'palette.light': 'light',\n  'palette.surface': 'surface',\n  'palette.status-danger': 'danger',\n  'palette.status-warning': 'warning',\n  'palette.status-info': 'info',\n  'palette.status-success': 'success'\n}\nexport const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)\n\n/** Bodies with a rim — the ones `set-segments` accepts. */\nconst DEFAULT_SEGMENTS = 12\n\n/**\n * 재질 — a part's material.\n *\n * An earlier editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The material\n * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This\n * shows those: painted colours and lit colours as two groups of swatches, each named for what it\n * is for.\n *\n * Not here, because a material has no place for them: flat shading and casting\n * shadows. The glow's colour comes from the lit colours.\n *\n * Every change leaves as one `part-edit`; the editor runs it through the session, one step of the undo history.\n */\n@customElement('figure-material-panel')\nexport class FigureMaterialPanel extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    div[field] {\n      display: grid;\n      gap: 4px;\n    }\n    /* A slider and its value on one line, the value at the end where the eye finishes. */\n    div[slider] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 3em;\n      align-items: center;\n      gap: 8px;\n    }\n    div[slider] output {\n      text-align: right;\n      font-variant-numeric: tabular-nums;\n    }\n    div[swatches] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n    }\n    button[swatch] {\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border-radius: 50%;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      background: var(--swatch);\n      cursor: pointer;\n    }\n    button[swatch][on] {\n      outline: 2px solid var(--md-sys-color-primary);\n      outline-offset: 1px;\n    }\n    select,\n    input[type='range'] {\n      font: inherit;\n      min-width: 0;\n    }\n    /* The segment picker: the four common counts as their silhouettes with their triangle cost, the rest folded. */\n    div[segments] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 4px;\n    }\n    button[seg] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1px;\n      padding: 6px 2px 4px;\n      font: inherit;\n      color: var(--md-sys-color-on-surface);\n      background: none;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    button[seg]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[seg][on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n    /* Small, and 12 and 16 both read as circles: large enough for the corners to show. */\n    button[seg] svg {\n      display: block;\n      width: 32px;\n      height: 32px;\n    }\n    button[seg] svg polygon {\n      fill: var(--md-sys-color-surface-container-highest);\n      stroke: currentColor;\n      stroke-width: 1.1;\n      stroke-linejoin: miter;\n    }\n    button[seg][on] svg polygon {\n      fill: var(--md-sys-color-surface-container-lowest);\n    }\n    button[seg] b {\n      font-weight: 600;\n    }\n    button[seg] small {\n      margin: 0;\n    }\n    details[free] summary {\n      margin-top: 4px;\n      cursor: pointer;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[presets] {\n      display: flex;\n      gap: 4px;\n      margin-top: 4px;\n    }\n    div[presets] button {\n      flex: 1;\n      padding: 3px 0;\n      font: inherit;\n      color: var(--md-sys-color-on-surface);\n      background: none;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    div[presets] button[on] {\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-color: transparent;\n    }\n  `]\n\n  /** The selected body as evaluated — its material, its segments and its shape. */\n  @property({ attribute: false }) body?: FigureAssetGeometry & { id: string }\n  /** The asset's palette, token → colour. */\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property({ type: Boolean }) locked = false\n  /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */\n  @state() private glowing?: number\n\n  render() {\n    const part = this.body\n    if (!part) return nothing\n    const material = part.material\n    /*\n      The roles offered are the app's palette, with any the asset carries beyond it. A new asset carries\n      only its primary colour; a role it lacks is sent with its colour and added in the same edit (`put`).\n    */\n    const entries = Object.entries(this.offered())\n    const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))\n    const lit = entries.filter(([token]) => token.startsWith('palette.status-'))\n    const glow = material.emissive\n    return html`<section>\n      <h3>${i18next.t('figure.label.part-material')}</h3>\n      <div field>\n        <label>${i18next.t('figure.label.palette-role')}</label>\n        <div swatches>${this.swatches(painted, material.token, token => this.put({ token }))}</div>\n        ${lit.length\n          ? html`<small>${i18next.t('figure.label.status-colors')}</small>\n              <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`\n          : nothing}\n      </div>\n      <div form>\n        <span>${i18next.t('figure.label.preset')}</span>\n        <select\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as FigureMaterial['preset'] })}\n        >\n          <option value=\"\" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>\n          ${MATERIAL_PRESETS.map(\n            preset => html`<option value=${preset} ?selected=${preset === material.preset}>${i18next.t('figure.label.preset-' + preset)}</option>`\n          )}\n        </select>\n      </div>\n      <label toggle>\n        <input\n          type=\"checkbox\"\n          ?disabled=${this.locked}\n          .checked=${!!material.transparent}\n          @change=${(e: Event) => this.put({ transparent: (e.target as HTMLInputElement).checked || undefined })}\n        />\n        ${i18next.t('figure.label.transparent')}\n      </label>\n      <div form>\n        <span>${i18next.t('figure.label.emissive')}</span>\n        <div slider>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          ?disabled=${this.locked}\n          .value=${String(glow?.intensity ?? 0)}\n          @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}\n          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}\n        />\n        <output>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</output>\n        </div>\n      </div>\n      ${glow\n        ? html`<div field>\n            <label>${i18next.t('figure.label.emissive-color')}</label>\n            <div swatches>${this.swatches(lit.length ? lit : painted, glow.token, token => this.put({ emissive: { ...glow, token } }))}</div>\n          </div>`\n        : nothing}\n      ${this.renderSegments(part)}\n    </section>`\n  }\n\n  private renderSegments(part: FigureAssetGeometry & { id: string }) {\n    if (!isRoundBody((part as { shape?: never }).shape)) return nothing\n    const current = part.segments ?? DEFAULT_SEGMENTS\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.segments')}</label>\n        <div segments>\n          ${SEGMENT_PRESETS.slice(0, 4).map(\n            preset => html`<button\n              seg\n              ?on=${preset === current}\n              ?disabled=${this.locked}\n              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}\n            >\n              ${silhouette(preset)}\n              <b>${preset}</b>\n              <small>${i18next.t('figure.text.n-triangles', { count: figureTrianglesOf({ ...part, segments: preset }) })}</small>\n            </button>`\n          )}\n        </div>\n        <details free ?open=${SEGMENT_PRESETS.slice(4).includes(current as never)}>\n          <summary>${i18next.t('figure.text.more-segment-options')}</summary>\n          <div presets>\n            ${SEGMENT_PRESETS.slice(4).map(\n              preset => html`<button ?on=${preset === current} ?disabled=${this.locked} @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}>\n                ${preset}\n              </button>`\n            )}\n          </div>\n        </details>\n      </div>\n    `\n  }\n\n  private swatches(entries: [string, string][], chosen: string | undefined, pick: (token: string) => void) {\n    return entries.map(\n      ([token, colour]) => html`<button\n        swatch\n        ?on=${token === chosen}\n        ?disabled=${this.locked}\n        title=${purposeOf(token)}\n        aria-label=${purposeOf(token)}\n        style=\"--swatch:${colour}\"\n        @click=${() => pick(token)}\n      ></button>`\n    )\n  }\n\n  private offered(): Record<string, string> {\n    return offeredPaletteOf(activePalette() as Record<string, string>, this.palette)\n  }\n\n  private glow(intensity: number, live = false) {\n    this.glowing = live ? intensity : undefined\n    this.put(glowOf(this.body!.material, intensity), live)\n  }\n\n  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */\n  private put(patch: Partial<FigureMaterial>, live = false) {\n    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, this.offered())\n    if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))\n    else this.edit(edit)\n  }\n\n  private edit(edit: FigurePartEdit) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n\n/** A regular polygon of this many sides -- how round a body with this rim count looks from its end. */\nfunction silhouette(segments: number) {\n  const points: string[] = []\n  for (let i = 0; i < segments; i++) {\n    const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments\n    points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`)\n  }\n  return svg`<svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><polygon points=${points.join(' ')}></polygon></svg>`\n}\n"]}

package/dist-client/modeller/figure-preview.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { type ViewSettings } from './figure-view.js';
+import { type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js';
 import { type FigureRevision } from './revision.js';
 declare const FigurePreview_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class FigurePreview extends FigurePreview_base {

package/dist-client/modeller/figure-preview.js

@@ -4,10 +4,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { compileFigureAsset } from '@hatiolab/figure-model';
 import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene';
-import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH } from './figure-view.js';
+import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH } from '@things-factory/figure-viewer/dist-client/figure-view.js';
 import { dialShape } from './angle-dial.js';
 import { derivedOf } from './revision.js';
-import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from './preview-model.js';
+import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from '@things-factory/figure-viewer/dist-client/preview-model.js';
 let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);

package/dist-client/modeller/figure-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-preview.js","sourceRoot":"","sources":["../../client/modeller/figure-preview.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { compileFigureAsset } from '@hatiolab/figure-model'\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'\n\nimport { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'\nimport { dialShape } from './angle-dial.js'\nimport { derivedOf, type FigureRevision } from './revision.js'\nimport { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from './preview-model.js'\n\n/**\n * The figure placed on a board.\n *\n * The editing canvas shows the figure at the size it was made. Half of what a figure is lies in how it answers a\n * different size, so here the figure being authored is registered as a board registers it and placed as\n * `FigureInstance`s: the size it was made, and each of the seven ways of growing one, two or three axes twice as\n * large, side by side at one scale, four to a row. The board draws them as it will on a real board --\n * placement, lights, environment, the same renderer.\n *\n * The controls: each value that poses the figure with a slider (and a dial for an angle), each clip's\n * speed, and 「이 자세를 기본으로」 to keep the pose as the one it stands in. Nothing here is edited; the canvas edits.\n */\n\ninterface SceneHandle {\n  dispose?: () => void\n  resize?: () => void\n  fit?: (type?: string) => void\n  /** The scene's container: it can make the content again while keeping the 3D renderer and the camera (undo and redo use it). */\n  rootContainer?: { rebuildContentModel?: (model: unknown, options?: { preserveThreeD?: boolean }) => void }\n  root?: {\n    set?: (patch: Record<string, unknown>) => void\n    fitCameraToModel?: () => void\n    components?: { set?: (property: string, value: unknown) => void }[]\n  }\n}\n\n@customElement('figure-preview')\nexport class FigurePreview extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      min-width: 0;\n      min-height: 0;\n      overflow: hidden;\n      background-color: ${unsafeCSS(WORKBENCH)};\n      font-size: 0.76rem;\n    }\n    div[stage] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    }\n    /*\n      The size help and the posing controls share the stage's bottom edge. Each stood in its own corner, so on a narrow\n      stage (the 1024 width, both side panels open) the controls lay over the help's button. One row that wraps keeps both\n      whole: side by side when there is room, the controls above the help when there is not.\n    */\n    div[foot] {\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: 8px;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      justify-content: space-between;\n      align-items: flex-end;\n      gap: 8px;\n      pointer-events: none;\n    }\n    div[foot] > * { pointer-events: auto; }\n    div[setup] { max-width: min(320px, 100%); padding: 12px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: grid; gap: 8px; }\n    div[setup] p { margin: 0; line-height: 1.5; }\n    div[setup] select, div[setup] button { font: inherit; padding: 8px; min-width: 0; }\n    /* Which is which: side by side means nothing without a legend. */\n    div[legend] {\n      position: absolute;\n      top: 8px;\n      left: 8px;\n      display: flex;\n      gap: 6px;\n      padding: 4px 8px;\n      color: rgba(255, 255, 255, 0.9);\n      background-color: rgba(28, 28, 30, 0.6);\n      border-radius: 6px;\n      font-size: 0.72rem;\n      flex-wrap: wrap;\n      max-width: calc(100% - 16px);\n    }\n    /* A variant drawn at another size than it asks: the figure does not declare that size. */\n    div[legend] small[clamp] {\n      margin-left: 4px;\n      color: #ffcc80;\n    }\n    div[clips] {\n      margin-left: auto;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 8px 10px;\n      color: rgba(255, 255, 255, 0.92);\n      background-color: rgba(28, 28, 30, 0.72);\n      border-radius: 8px;\n      font-size: 0.72rem;\n    }\n    div[clips] label {\n      display: grid;\n      grid-template-columns: auto 20px 96px 34px;\n      align-items: center;\n      gap: 8px;\n    }\n    div[clips] svg[dial] {\n      width: 20px;\n      height: 20px;\n    }\n    div[clips] svg[dial] path {\n      fill: rgba(255, 255, 255, 0.22);\n    }\n    div[clips] svg[dial] line {\n      stroke: var(--md-sys-color-primary, #7cc6ff);\n      stroke-width: 2;\n      stroke-linecap: round;\n    }\n    div[clips] svg[dial] circle {\n      fill: none;\n      stroke: rgba(255, 255, 255, 0.35);\n    }\n    div[clips] button[pose] {\n      align-self: stretch;\n      padding: 4px 8px;\n      font: inherit;\n      font-size: 0.7rem;\n      color: rgba(255, 255, 255, 0.92);\n      background-color: rgba(255, 255, 255, 0.14);\n      border: 1px solid rgba(255, 255, 255, 0.22);\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    div[clips] button[pose]:hover {\n      background-color: rgba(255, 255, 255, 0.24);\n    }\n    div[clips] span[drive] {\n      opacity: 0.6;\n      font-size: 0.66rem;\n    }\n    div[clips] input {\n      width: 96px;\n      accent-color: var(--md-sys-color-primary);\n    }\n    div[clips] output {\n      font-variant-numeric: tabular-nums;\n      text-align: right;\n      opacity: 0.85;\n    }\n    div[cannot] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 12px;\n      text-align: center;\n      line-height: 1.6;\n      color: #f4f4f4;\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n  `\n\n  /** The figure being authored, as the editor holds it now. */\n  @property({ attribute: false }) revision?: FigureRevision\n  private get asset(): FigureAsset | undefined {\n    return this.revision?.asset\n  }\n  /** The size the figure was made at, once per version: without a declared size it is measured by evaluating the figure. */\n  private authoredSize(): { x: number; y: number; z: number } {\n    const shown = this.revision!\n    return derivedOf(shown, 'authored-size', () => authoredSizeOf(shown.asset))\n  }\n  /** Which figure: the type it is registered under here is this one's own, never a real type a board uses. */\n  @property() context = ''\n  /**\n   * In front. Once made, the preview stays standing behind the edit canvas, so coming back to it is not a new 3D scene\n   * (about 300 ms): out of sight it does not follow the figure, and when it is shown again it makes its content again\n   * inside the scene that stands if the figure changed meanwhile.\n   */\n  @property({ type: Boolean }) active = true\n  private stale = false\n  @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW\n\n  @query('div[stage]') private stage!: HTMLDivElement\n  @state() private cannot = ''\n  /** Clip speeds and control values given here -- the preview's, not the figure's. */\n  @state() private driving: Record<string, number> = {}\n  @state() private giving: Record<string, number> = {}\n  /** The part chosen in the editor. The size help starts on it, so the help speaks of the part the author was working on. */\n  @property() selected = ''\n  @state() private setupPart = ''\n\n  /** What is being tried here now -- clip speeds and control values -- for the AI dock to hear with a request; none when nothing is. */\n  tried(): { clips?: Record<string, number>; controls?: Record<string, number> } | undefined {\n    const clips = Object.keys(this.driving).length ? { ...this.driving } : undefined\n    const controls = Object.keys(this.giving).length ? { ...this.giving } : undefined\n    return clips || controls ? { ...(clips ? { clips } : {}), ...(controls ? { controls } : {}) } : undefined\n  }\n\n  private scene?: SceneHandle\n  private standing?: string\n  private registered?: string\n  private watcher?: ResizeObserver\n\n  render() {\n    const asset = this.asset\n    const controls = asset ? asset.document.model.inputs.filter(i => i.role === 'state') : []\n    const clips = asset ? [...new Set((asset.drivers ?? []).map(d => d.clip))] : []\n    let clampsByWay: ReturnType<typeof previewClampsOf> = {}\n    try {\n      clampsByWay = asset ? previewClampsOf(asset, this.authoredSize()) : {}\n    } catch {\n      clampsByWay = {}\n    }\n    /* The part the help speaks of: the one picked in it, else the one chosen in the editor, else the first. */\n    const setupPart = setupPartOf(this.setupPart, this.selected, asset?.appearance.map(p => p.target) ?? [])\n    return html`<div stage></div>\n      ${this.cannot\n        ? html`<div cannot>${this.cannot}</div>`\n        : html`<div legend>\n              ${PREVIEW_WAYS.map(way => {\n                const clamps = clampsByWay[way.name] ?? []\n                return html`<span>\n                  ${way.axes.length ? way.name : i18next.t('figure.label.preview-base')}\n                  ${clamps.length\n                    ? html`<small clamp>${clamps.map(c => i18next.t('figure.text.preview-clamped', { axis: c.axis.toUpperCase(), asked: c.asked.toLocaleString(), used: c.used.toLocaleString() })).join(' · ')}</small>`\n                    : nothing}\n                </span>`\n              })}\n            </div>\n            <div foot>${asset?.appearance.length ? html`<div setup>\n              <p>${i18next.t('figure.text.preview-setup')}</p>\n              <select aria-label=${i18next.t('figure.label.resize-part')} @change=${(e: Event) => this.setupPart = (e.target as HTMLSelectElement).value}>\n                ${asset.appearance.map(p => html`<option value=${p.target} ?selected=${p.target === setupPart}>${p.target}</option>`)}\n              </select>\n              <button @click=${() => this.dispatchEvent(new CustomEvent('configure-size', { detail: { part: setupPart }, bubbles: true, composed: true }))}>${i18next.t('figure.button.configure-size')}</button>\n            </div>` : nothing}\n            ${controls.length + clips.length ? this.renderDrivers(asset!, controls, clips) : nothing}</div>`}`\n  }\n\n  private renderDrivers(asset: FigureAsset, controls: FigureAsset['document']['model']['inputs'], clips: string[]) {\n    const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id])\n    return html`<div clips>\n      ${changed.length\n        ? html`<button pose title=${i18next.t('figure.text.pose-as-default-explained')} @click=${() => this.poseAsDefault()}>\n            ${i18next.t('figure.button.pose-as-default')}\n          </button>`\n        : nothing}\n      ${controls.map(control => {\n        const value = this.giving[control.id] ?? asset.stateDefaults[control.id] ?? control.min\n        const step = Math.max((control.max - control.min) / 100, 0.01)\n        const label = asset.stateInputs?.[control.id]?.label ?? control.id\n        return html`<label>\n          <span>${label} <span drive>${control.unit}</span></span>\n          ${this.renderDial(control, value)}\n          <input\n            type=\"range\"\n            min=${control.min}\n            max=${control.max}\n            step=${step}\n            .value=${String(value)}\n            @input=${(e: Event) => this.give(control.id, Number((e.target as HTMLInputElement).value))}\n          />\n          <output>${Math.round(value)}</output>\n        </label>`\n      })}\n      ${clips.map(clip => {\n        /*\n          A clip nothing has driven stands still, here as on a board: the instances get a speed only from `drive`. The\n          slider showed 1.00 over rollers that did not turn (2026-10-03). It shows what plays -- 0 until moved.\n        */\n        const value = this.driving[clip] ?? 0\n        return html`<label>\n          <span>${clip} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>\n          <span></span>\n          <input type=\"range\" min=\"0\" max=\"3\" step=\"0.05\" .value=${String(value)} @input=${(e: Event) => this.drive(clip, Number((e.target as HTMLInputElement).value))} />\n          <output>${value.toFixed(2)}</output>\n        </label>`\n      })}\n    </div>`\n  }\n\n  private renderDial(control: { unit: string; min: number; max: number }, value: number) {\n    if (control.unit !== 'deg') return html`<span></span>`\n    const dial = dialShape(control.min, control.max, value)\n    const span = dial.radius * 2 + 2\n    return html`<svg dial viewBox=\"0 0 ${span} ${span}\" aria-hidden=\"true\">\n      <path d=${dial.sector}></path>\n      <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>\n      <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>\n    </svg>`\n  }\n\n  private drive(clip: string, value: number) {\n    this.driving = { ...this.driving, [clip]: value }\n    this.tellInstances('clips', this.driving)\n  }\n\n  private give(id: string, value: number) {\n    this.giving = { ...this.giving, [id]: value }\n    this.tellInstances('parameters', this.giving)\n  }\n\n  private poseAsDefault() {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-state-defaults', values: { ...this.giving } } }, bubbles: true, composed: true }))\n    this.giving = {}\n  }\n\n  private tellInstances(key: 'clips' | 'parameters', values: Record<string, number>) {\n    for (const component of this.scene?.root?.components ?? []) component.set?.(key, { ...values })\n  }\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (!this.hasUpdated) return\n    if (!this.active) {\n      this.stale = true\n      return\n    }\n    if (this.stale || changed.has('active')) {\n      this.stale = false\n      this.standUp()\n      return\n    }\n    if (changed.has('revision') || changed.has('context')) {\n      this.standUp()\n      return\n    }\n    if (!changed.has('view')) return\n    const before = changed.get('view') as ViewSettings | undefined\n    const now = this.view ?? DEFAULT_VIEW\n    if (before?.placement !== now.placement || before?.ceilingHeight !== now.ceilingHeight) this.standUp()\n    else this.scene?.root?.set?.(sceneLook(now))\n  }\n\n  firstUpdated() {\n    this.standUp()\n    this.watcher = new ResizeObserver(() => {\n      if (this.active) this.scene?.resize?.()\n    })\n    this.watcher.observe(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.watcher?.disconnect()\n    this.watcher = undefined\n    this.teardown()\n  }\n\n  private standUp() {\n    const asset = this.asset\n    const view = this.view ?? DEFAULT_VIEW\n    if (!asset || !asset.appearance.length) {\n      this.cannot = i18next.t('figure.text.preview-needs-a-part')\n      this.teardown()\n      return\n    }\n    const signature = JSON.stringify([asset, view.placement, view.ceilingHeight])\n    if (this.scene && this.standing === signature) return\n    try {\n      compileFigureAsset(asset)\n    } catch {\n      this.cannot = i18next.t('figure.text.preview-blocked-by-errors')\n      this.teardown()\n      return\n    }\n    try {\n      /* Registered as a board registers it, under a type of this preview's own: a real type's drawings stay as they are. */\n      const type = previewTypeOf(this.context)\n      const size = this.authoredSize()\n      /*\n        The figure changed under a scene that is standing: the same type is registered again and the content made again\n        inside the same 3D scene. Making a scene anew costs about a third of a second and its first drawing compiles the\n        shaders again -- a value typed beside the preview held the screen for seconds. The scene is made anew only when\n        there is none, for another figure, or when the content cannot be made again in place.\n      */\n      const again = this.scene?.rootContainer?.rebuildContentModel && this.registered === type\n      if (!again) this.teardown()\n      this.driving = {}\n      registerFigure(type, asset)\n      this.registered = type\n      const { components, board } = previewInstances(type, size)\n      const model = {\n        type: 'model-layer',\n        width: board.width,\n        height: board.height,\n        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, PREVIEW_FACTOR),\n        threed: true,\n        sky: 'color',\n        ...sceneLook(view),\n        placement: view.placement,\n        heights: { floor: 0, ceiling: view.ceilingHeight },\n        pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),\n        components\n      }\n      if (again) {\n        try {\n          this.scene!.rootContainer!.rebuildContentModel!(model, { preserveThreeD: true })\n          this.standing = signature\n          this.cannot = ''\n          return\n        } catch {\n          this.teardown()\n          registerFigure(type, asset)\n          this.registered = type\n        }\n      }\n      this.scene = create({\n        target: this.stage,\n        model,\n        mode: 0\n      }) as SceneHandle\n      this.standing = signature\n      this.scene.resize?.()\n      this.scene.fit?.('ratio')\n      this.scene.root?.fitCameraToModel?.()\n      this.cannot = ''\n    } catch (error) {\n      this.cannot = (error as Error).message\n    }\n  }\n\n  private teardown() {\n    this.scene?.dispose?.()\n    this.scene = undefined\n    this.standing = undefined\n    if (this.registered) unregisterFigure(this.registered)\n    this.registered = undefined\n  }\n}\n"]}
+{"version":3,"file":"figure-preview.js","sourceRoot":"","sources":["../../client/modeller/figure-preview.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAEjF,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAqB,MAAM,0DAA0D,CAAA;AACnJ,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAuB,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,4DAA4D,CAAA;AA6BjL,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAzD;;QA8IL,4GAA4G;QAChG,YAAO,GAAG,EAAE,CAAA;QACxB;;;;WAIG;QAC0B,WAAM,GAAG,IAAI,CAAA;QAClC,UAAK,GAAG,KAAK,CAAA;QACW,SAAI,GAAiB,YAAY,CAAA;QAGhD,WAAM,GAAG,EAAE,CAAA;QAC5B,oFAAoF;QACnE,YAAO,GAA2B,EAAE,CAAA;QACpC,WAAM,GAA2B,EAAE,CAAA;QACpD,2HAA2H;QAC/G,aAAQ,GAAG,EAAE,CAAA;QACR,cAAS,GAAG,EAAE,CAAA;IA+OjC,CAAC;aA9YQ,WAAM,GAAG,GAAG,CAAA;;;;;;;0BAOK,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAwHpB,SAAS,CAAC,SAAS,CAAC;;GAE3C,AAjIY,CAiIZ;IAID,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAA;IAC7B,CAAC;IACD,0HAA0H;IAClH,YAAY;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAS,CAAA;QAC5B,OAAO,SAAS,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAC7E,CAAC;IAqBD,sIAAsI;IACtI,KAAK;QACH,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QAChF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QACjF,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAC3G,CAAC;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QACzF,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAC/E,IAAI,WAAW,GAAuC,EAAE,CAAA;QACxD,IAAI,CAAC;YACH,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QACxE,CAAC;QAAC,MAAM,CAAC;YACP,WAAW,GAAG,EAAE,CAAA;QAClB,CAAC;QACD,2GAA2G;QAC3G,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;QACxG,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA,eAAe,IAAI,CAAC,MAAM,QAAQ;YACxC,CAAC,CAAC,IAAI,CAAA;gBACE,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBACvB,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;gBAC1C,OAAO,IAAI,CAAA;oBACP,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;oBACnE,MAAM,CAAC,MAAM;oBACb,CAAC,CAAC,IAAI,CAAA,gBAAgB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;oBACrM,CAAC,CAAC,OAAO;wBACL,CAAA;YACV,CAAC,CAAC;;wBAEQ,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;mBACpC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;mCACtB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK;kBACtI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,CAAC,CAAC,MAAM,cAAc,CAAC,CAAC,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,WAAW,CAAC;;+BAEtG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;mBACpL,CAAC,CAAC,CAAC,OAAO;cACf,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,EAAE,CAAA;IAC5G,CAAC;IAEO,aAAa,CAAC,KAAkB,EAAE,QAAoD,EAAE,KAAe;QAC7G,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACxH,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,MAAM;YACd,CAAC,CAAC,IAAI,CAAA,sBAAsB,OAAO,CAAC,CAAC,CAAC,uCAAuC,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;cAC7G,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;oBACpC;YACZ,CAAC,CAAC,OAAO;QACT,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,GAAG,CAAA;YACvF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,EAAE,IAAI,CAAC,CAAA;YAC9D,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,OAAO,CAAC,EAAE,CAAA;YAClE,OAAO,IAAI,CAAA;kBACD,KAAK,gBAAgB,OAAO,CAAC,IAAI;YACvC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC;;;kBAGzB,OAAO,CAAC,GAAG;kBACX,OAAO,CAAC,GAAG;mBACV,IAAI;qBACF,MAAM,CAAC,KAAK,CAAC;qBACb,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;oBAElF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;iBACpB,CAAA;QACX,CAAC,CAAC;QACA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACjB;;;cAGE;YACF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACrC,OAAO,IAAI,CAAA;kBACD,IAAI,gBAAgB,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;;mEAEX,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;oBACnJ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;iBACnB,CAAA;QACX,CAAC,CAAC;WACG,CAAA;IACT,CAAC;IAEO,UAAU,CAAC,OAAmD,EAAE,KAAa;QACnF,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK;YAAE,OAAO,IAAI,CAAA,eAAe,CAAA;QACtD,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACvD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAA;QAChC,OAAO,IAAI,CAAA,0BAA0B,IAAI,IAAI,IAAI;gBACrC,IAAI,CAAC,MAAM;mBACR,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM;iBACpD,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC;WAC/E,CAAA;IACT,CAAC;IAEO,KAAK,CAAC,IAAY,EAAE,KAAa;QACvC,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAA;QACjD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;IAC3C,CAAC;IAEO,IAAI,CAAC,EAAU,EAAE,KAAa;QACpC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAA;QAC7C,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IAC/C,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QACjK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;IAClB,CAAC;IAEO,aAAa,CAAC,GAA2B,EAAE,MAA8B;QAC/E,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,IAAI,EAAE;YAAE,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,CAAA;IACjG,CAAC;IAED,UAAU,CAAC,OAA6B;QACtC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAM;QAC5B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,OAAM;QACR,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAClB,IAAI,CAAC,OAAO,EAAE,CAAA;YACd,OAAM;QACR,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,OAAO,EAAE,CAAA;YACd,OAAM;QACR,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAM;QAChC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAA6B,CAAA;QAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,YAAY,CAAA;QACrC,IAAI,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,SAAS,IAAI,MAAM,EAAE,aAAa,KAAK,GAAG,CAAC,aAAa;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;;YACjG,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IAC9C,CAAC;IAED,YAAY;QACV,IAAI,CAAC,OAAO,EAAE,CAAA;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACrC,IAAI,IAAI,CAAC,MAAM;gBAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAA;QACzC,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,CAAA;QAC1B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAEO,OAAO;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAY,CAAA;QACtC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YACvC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAA;YAC3D,IAAI,CAAC,QAAQ,EAAE,CAAA;YACf,OAAM;QACR,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAA;QAC7E,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;YAAE,OAAM;QACrD,IAAI,CAAC;YACH,kBAAkB,CAAC,KAAK,CAAC,CAAA;QAC3B,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAA;YAChE,IAAI,CAAC,QAAQ,EAAE,CAAA;YACf,OAAM;QACR,CAAC;QACD,IAAI,CAAC;YACH,sHAAsH;YACtH,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACxC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;YAChC;;;;;cAKE;YACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,mBAAmB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAA;YACxF,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,QAAQ,EAAE,CAAA;YAC3B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;YACjB,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;YACtB,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAC1D,MAAM,KAAK,GAAG;gBACZ,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,KAAK,EAAE,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,cAAc,CAAC;gBACjH,MAAM,EAAE,IAAI;gBACZ,GAAG,EAAE,OAAO;gBACZ,GAAG,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE;gBAClD,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3D,UAAU;aACX,CAAA;YACD,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC;oBACH,IAAI,CAAC,KAAM,CAAC,aAAc,CAAC,mBAAoB,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAA;oBAChF,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;oBACzB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;oBAChB,OAAM;gBACR,CAAC;gBAAC,MAAM,CAAC;oBACP,IAAI,CAAC,QAAQ,EAAE,CAAA;oBACf,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;oBAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;gBACxB,CAAC;YACH,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBAClB,MAAM,EAAE,IAAI,CAAC,KAAK;gBAClB,KAAK;gBACL,IAAI,EAAE,CAAC;aACR,CAAgB,CAAA;YACjB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;YACzB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAA;YACrB,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAA;YACzB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,CAAA;YACrC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAClB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,MAAM,GAAI,KAAe,CAAC,OAAO,CAAA;QACxC,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAA;QACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QACzB,IAAI,IAAI,CAAC,UAAU;YAAE,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACtD,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;IAC7B,CAAC;;AAzQ+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;+CAA0B;AAU7C;IAAX,QAAQ,EAAE;;8CAAa;AAMK;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;6CAAc;AAEV;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;2CAAkC;AAEpC;IAA5B,KAAK,CAAC,YAAY,CAAC;8BAAiB,cAAc;4CAAA;AAClC;IAAhB,KAAK,EAAE;;6CAAoB;AAEX;IAAhB,KAAK,EAAE;;8CAA6C;AACpC;IAAhB,KAAK,EAAE;;6CAA4C;AAExC;IAAX,QAAQ,EAAE;;+CAAc;AACR;IAAhB,KAAK,EAAE;;gDAAuB;AAhKpB,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA+YzB","sourcesContent":["import { css, html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { compileFigureAsset } from '@hatiolab/figure-model'\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'\n\nimport { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'\nimport { dialShape } from './angle-dial.js'\nimport { derivedOf, type FigureRevision } from './revision.js'\nimport { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from '@things-factory/figure-viewer/dist-client/preview-model.js'\n\n/**\n * The figure placed on a board.\n *\n * The editing canvas shows the figure at the size it was made. Half of what a figure is lies in how it answers a\n * different size, so here the figure being authored is registered as a board registers it and placed as\n * `FigureInstance`s: the size it was made, and each of the seven ways of growing one, two or three axes twice as\n * large, side by side at one scale, four to a row. The board draws them as it will on a real board --\n * placement, lights, environment, the same renderer.\n *\n * The controls: each value that poses the figure with a slider (and a dial for an angle), each clip's\n * speed, and 「이 자세를 기본으로」 to keep the pose as the one it stands in. Nothing here is edited; the canvas edits.\n */\n\ninterface SceneHandle {\n  dispose?: () => void\n  resize?: () => void\n  fit?: (type?: string) => void\n  /** The scene's container: it can make the content again while keeping the 3D renderer and the camera (undo and redo use it). */\n  rootContainer?: { rebuildContentModel?: (model: unknown, options?: { preserveThreeD?: boolean }) => void }\n  root?: {\n    set?: (patch: Record<string, unknown>) => void\n    fitCameraToModel?: () => void\n    components?: { set?: (property: string, value: unknown) => void }[]\n  }\n}\n\n@customElement('figure-preview')\nexport class FigurePreview extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      min-width: 0;\n      min-height: 0;\n      overflow: hidden;\n      background-color: ${unsafeCSS(WORKBENCH)};\n      font-size: 0.76rem;\n    }\n    div[stage] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    }\n    /*\n      The size help and the posing controls share the stage's bottom edge. Each stood in its own corner, so on a narrow\n      stage (the 1024 width, both side panels open) the controls lay over the help's button. One row that wraps keeps both\n      whole: side by side when there is room, the controls above the help when there is not.\n    */\n    div[foot] {\n      position: absolute;\n      left: 8px;\n      right: 8px;\n      bottom: 8px;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      justify-content: space-between;\n      align-items: flex-end;\n      gap: 8px;\n      pointer-events: none;\n    }\n    div[foot] > * { pointer-events: auto; }\n    div[setup] { max-width: min(320px, 100%); padding: 12px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: grid; gap: 8px; }\n    div[setup] p { margin: 0; line-height: 1.5; }\n    div[setup] select, div[setup] button { font: inherit; padding: 8px; min-width: 0; }\n    /* Which is which: side by side means nothing without a legend. */\n    div[legend] {\n      position: absolute;\n      top: 8px;\n      left: 8px;\n      display: flex;\n      gap: 6px;\n      padding: 4px 8px;\n      color: rgba(255, 255, 255, 0.9);\n      background-color: rgba(28, 28, 30, 0.6);\n      border-radius: 6px;\n      font-size: 0.72rem;\n      flex-wrap: wrap;\n      max-width: calc(100% - 16px);\n    }\n    /* A variant drawn at another size than it asks: the figure does not declare that size. */\n    div[legend] small[clamp] {\n      margin-left: 4px;\n      color: #ffcc80;\n    }\n    div[clips] {\n      margin-left: auto;\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 8px 10px;\n      color: rgba(255, 255, 255, 0.92);\n      background-color: rgba(28, 28, 30, 0.72);\n      border-radius: 8px;\n      font-size: 0.72rem;\n    }\n    div[clips] label {\n      display: grid;\n      grid-template-columns: auto 20px 96px 34px;\n      align-items: center;\n      gap: 8px;\n    }\n    div[clips] svg[dial] {\n      width: 20px;\n      height: 20px;\n    }\n    div[clips] svg[dial] path {\n      fill: rgba(255, 255, 255, 0.22);\n    }\n    div[clips] svg[dial] line {\n      stroke: var(--md-sys-color-primary, #7cc6ff);\n      stroke-width: 2;\n      stroke-linecap: round;\n    }\n    div[clips] svg[dial] circle {\n      fill: none;\n      stroke: rgba(255, 255, 255, 0.35);\n    }\n    div[clips] button[pose] {\n      align-self: stretch;\n      padding: 4px 8px;\n      font: inherit;\n      font-size: 0.7rem;\n      color: rgba(255, 255, 255, 0.92);\n      background-color: rgba(255, 255, 255, 0.14);\n      border: 1px solid rgba(255, 255, 255, 0.22);\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    div[clips] button[pose]:hover {\n      background-color: rgba(255, 255, 255, 0.24);\n    }\n    div[clips] span[drive] {\n      opacity: 0.6;\n      font-size: 0.66rem;\n    }\n    div[clips] input {\n      width: 96px;\n      accent-color: var(--md-sys-color-primary);\n    }\n    div[clips] output {\n      font-variant-numeric: tabular-nums;\n      text-align: right;\n      opacity: 0.85;\n    }\n    div[cannot] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 12px;\n      text-align: center;\n      line-height: 1.6;\n      color: #f4f4f4;\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n  `\n\n  /** The figure being authored, as the editor holds it now. */\n  @property({ attribute: false }) revision?: FigureRevision\n  private get asset(): FigureAsset | undefined {\n    return this.revision?.asset\n  }\n  /** The size the figure was made at, once per version: without a declared size it is measured by evaluating the figure. */\n  private authoredSize(): { x: number; y: number; z: number } {\n    const shown = this.revision!\n    return derivedOf(shown, 'authored-size', () => authoredSizeOf(shown.asset))\n  }\n  /** Which figure: the type it is registered under here is this one's own, never a real type a board uses. */\n  @property() context = ''\n  /**\n   * In front. Once made, the preview stays standing behind the edit canvas, so coming back to it is not a new 3D scene\n   * (about 300 ms): out of sight it does not follow the figure, and when it is shown again it makes its content again\n   * inside the scene that stands if the figure changed meanwhile.\n   */\n  @property({ type: Boolean }) active = true\n  private stale = false\n  @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW\n\n  @query('div[stage]') private stage!: HTMLDivElement\n  @state() private cannot = ''\n  /** Clip speeds and control values given here -- the preview's, not the figure's. */\n  @state() private driving: Record<string, number> = {}\n  @state() private giving: Record<string, number> = {}\n  /** The part chosen in the editor. The size help starts on it, so the help speaks of the part the author was working on. */\n  @property() selected = ''\n  @state() private setupPart = ''\n\n  /** What is being tried here now -- clip speeds and control values -- for the AI dock to hear with a request; none when nothing is. */\n  tried(): { clips?: Record<string, number>; controls?: Record<string, number> } | undefined {\n    const clips = Object.keys(this.driving).length ? { ...this.driving } : undefined\n    const controls = Object.keys(this.giving).length ? { ...this.giving } : undefined\n    return clips || controls ? { ...(clips ? { clips } : {}), ...(controls ? { controls } : {}) } : undefined\n  }\n\n  private scene?: SceneHandle\n  private standing?: string\n  private registered?: string\n  private watcher?: ResizeObserver\n\n  render() {\n    const asset = this.asset\n    const controls = asset ? asset.document.model.inputs.filter(i => i.role === 'state') : []\n    const clips = asset ? [...new Set((asset.drivers ?? []).map(d => d.clip))] : []\n    let clampsByWay: ReturnType<typeof previewClampsOf> = {}\n    try {\n      clampsByWay = asset ? previewClampsOf(asset, this.authoredSize()) : {}\n    } catch {\n      clampsByWay = {}\n    }\n    /* The part the help speaks of: the one picked in it, else the one chosen in the editor, else the first. */\n    const setupPart = setupPartOf(this.setupPart, this.selected, asset?.appearance.map(p => p.target) ?? [])\n    return html`<div stage></div>\n      ${this.cannot\n        ? html`<div cannot>${this.cannot}</div>`\n        : html`<div legend>\n              ${PREVIEW_WAYS.map(way => {\n                const clamps = clampsByWay[way.name] ?? []\n                return html`<span>\n                  ${way.axes.length ? way.name : i18next.t('figure.label.preview-base')}\n                  ${clamps.length\n                    ? html`<small clamp>${clamps.map(c => i18next.t('figure.text.preview-clamped', { axis: c.axis.toUpperCase(), asked: c.asked.toLocaleString(), used: c.used.toLocaleString() })).join(' · ')}</small>`\n                    : nothing}\n                </span>`\n              })}\n            </div>\n            <div foot>${asset?.appearance.length ? html`<div setup>\n              <p>${i18next.t('figure.text.preview-setup')}</p>\n              <select aria-label=${i18next.t('figure.label.resize-part')} @change=${(e: Event) => this.setupPart = (e.target as HTMLSelectElement).value}>\n                ${asset.appearance.map(p => html`<option value=${p.target} ?selected=${p.target === setupPart}>${p.target}</option>`)}\n              </select>\n              <button @click=${() => this.dispatchEvent(new CustomEvent('configure-size', { detail: { part: setupPart }, bubbles: true, composed: true }))}>${i18next.t('figure.button.configure-size')}</button>\n            </div>` : nothing}\n            ${controls.length + clips.length ? this.renderDrivers(asset!, controls, clips) : nothing}</div>`}`\n  }\n\n  private renderDrivers(asset: FigureAsset, controls: FigureAsset['document']['model']['inputs'], clips: string[]) {\n    const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id])\n    return html`<div clips>\n      ${changed.length\n        ? html`<button pose title=${i18next.t('figure.text.pose-as-default-explained')} @click=${() => this.poseAsDefault()}>\n            ${i18next.t('figure.button.pose-as-default')}\n          </button>`\n        : nothing}\n      ${controls.map(control => {\n        const value = this.giving[control.id] ?? asset.stateDefaults[control.id] ?? control.min\n        const step = Math.max((control.max - control.min) / 100, 0.01)\n        const label = asset.stateInputs?.[control.id]?.label ?? control.id\n        return html`<label>\n          <span>${label} <span drive>${control.unit}</span></span>\n          ${this.renderDial(control, value)}\n          <input\n            type=\"range\"\n            min=${control.min}\n            max=${control.max}\n            step=${step}\n            .value=${String(value)}\n            @input=${(e: Event) => this.give(control.id, Number((e.target as HTMLInputElement).value))}\n          />\n          <output>${Math.round(value)}</output>\n        </label>`\n      })}\n      ${clips.map(clip => {\n        /*\n          A clip nothing has driven stands still, here as on a board: the instances get a speed only from `drive`. The\n          slider showed 1.00 over rollers that did not turn (2026-10-03). It shows what plays -- 0 until moved.\n        */\n        const value = this.driving[clip] ?? 0\n        return html`<label>\n          <span>${clip} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>\n          <span></span>\n          <input type=\"range\" min=\"0\" max=\"3\" step=\"0.05\" .value=${String(value)} @input=${(e: Event) => this.drive(clip, Number((e.target as HTMLInputElement).value))} />\n          <output>${value.toFixed(2)}</output>\n        </label>`\n      })}\n    </div>`\n  }\n\n  private renderDial(control: { unit: string; min: number; max: number }, value: number) {\n    if (control.unit !== 'deg') return html`<span></span>`\n    const dial = dialShape(control.min, control.max, value)\n    const span = dial.radius * 2 + 2\n    return html`<svg dial viewBox=\"0 0 ${span} ${span}\" aria-hidden=\"true\">\n      <path d=${dial.sector}></path>\n      <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>\n      <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>\n    </svg>`\n  }\n\n  private drive(clip: string, value: number) {\n    this.driving = { ...this.driving, [clip]: value }\n    this.tellInstances('clips', this.driving)\n  }\n\n  private give(id: string, value: number) {\n    this.giving = { ...this.giving, [id]: value }\n    this.tellInstances('parameters', this.giving)\n  }\n\n  private poseAsDefault() {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-state-defaults', values: { ...this.giving } } }, bubbles: true, composed: true }))\n    this.giving = {}\n  }\n\n  private tellInstances(key: 'clips' | 'parameters', values: Record<string, number>) {\n    for (const component of this.scene?.root?.components ?? []) component.set?.(key, { ...values })\n  }\n\n  willUpdate(changed: Map<string, unknown>) {\n    if (!this.hasUpdated) return\n    if (!this.active) {\n      this.stale = true\n      return\n    }\n    if (this.stale || changed.has('active')) {\n      this.stale = false\n      this.standUp()\n      return\n    }\n    if (changed.has('revision') || changed.has('context')) {\n      this.standUp()\n      return\n    }\n    if (!changed.has('view')) return\n    const before = changed.get('view') as ViewSettings | undefined\n    const now = this.view ?? DEFAULT_VIEW\n    if (before?.placement !== now.placement || before?.ceilingHeight !== now.ceilingHeight) this.standUp()\n    else this.scene?.root?.set?.(sceneLook(now))\n  }\n\n  firstUpdated() {\n    this.standUp()\n    this.watcher = new ResizeObserver(() => {\n      if (this.active) this.scene?.resize?.()\n    })\n    this.watcher.observe(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.watcher?.disconnect()\n    this.watcher = undefined\n    this.teardown()\n  }\n\n  private standUp() {\n    const asset = this.asset\n    const view = this.view ?? DEFAULT_VIEW\n    if (!asset || !asset.appearance.length) {\n      this.cannot = i18next.t('figure.text.preview-needs-a-part')\n      this.teardown()\n      return\n    }\n    const signature = JSON.stringify([asset, view.placement, view.ceilingHeight])\n    if (this.scene && this.standing === signature) return\n    try {\n      compileFigureAsset(asset)\n    } catch {\n      this.cannot = i18next.t('figure.text.preview-blocked-by-errors')\n      this.teardown()\n      return\n    }\n    try {\n      /* Registered as a board registers it, under a type of this preview's own: a real type's drawings stay as they are. */\n      const type = previewTypeOf(this.context)\n      const size = this.authoredSize()\n      /*\n        The figure changed under a scene that is standing: the same type is registered again and the content made again\n        inside the same 3D scene. Making a scene anew costs about a third of a second and its first drawing compiles the\n        shaders again -- a value typed beside the preview held the screen for seconds. The scene is made anew only when\n        there is none, for another figure, or when the content cannot be made again in place.\n      */\n      const again = this.scene?.rootContainer?.rebuildContentModel && this.registered === type\n      if (!again) this.teardown()\n      this.driving = {}\n      registerFigure(type, asset)\n      this.registered = type\n      const { components, board } = previewInstances(type, size)\n      const model = {\n        type: 'model-layer',\n        width: board.width,\n        height: board.height,\n        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, PREVIEW_FACTOR),\n        threed: true,\n        sky: 'color',\n        ...sceneLook(view),\n        placement: view.placement,\n        heights: { floor: 0, ceiling: view.ceilingHeight },\n        pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),\n        components\n      }\n      if (again) {\n        try {\n          this.scene!.rootContainer!.rebuildContentModel!(model, { preserveThreeD: true })\n          this.standing = signature\n          this.cannot = ''\n          return\n        } catch {\n          this.teardown()\n          registerFigure(type, asset)\n          this.registered = type\n        }\n      }\n      this.scene = create({\n        target: this.stage,\n        model,\n        mode: 0\n      }) as SceneHandle\n      this.standing = signature\n      this.scene.resize?.()\n      this.scene.fit?.('ratio')\n      this.scene.root?.fitCameraToModel?.()\n      this.cannot = ''\n    } catch (error) {\n      this.cannot = (error as Error).message\n    }\n  }\n\n  private teardown() {\n    this.scene?.dispose?.()\n    this.scene = undefined\n    this.standing = undefined\n    if (this.registered) unregisterFigure(this.registered)\n    this.registered = undefined\n  }\n}\n"]}

package/dist-client/modeller/figure-properties.js

@@ -9,7 +9,7 @@ import './figure-carrier.js';
 import { occupancyFromParts } from './occupancy.js';
 import { tagsOf, figureFigureFacts } from './figure-facts.js';
 import { offeredMountingOf } from './mounting-part.js';
-import { SidePanelStyles } from './side-panel-styles.js';
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
 const PLACEMENTS = ['floor', 'ceiling', 'center', 'wall'];
 const FACES = Object.keys(FIGURE_FACES);

package/dist-client/modeller/figure-properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-properties.js","sourceRoot":"","sources":["../../client/modeller/figure-properties.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FIGURE_FACES } from '@hatiolab/figure-model'\nimport type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'\n\nimport './figure-carrier.js'\nimport { occupancyFromParts } from './occupancy.js'\nimport { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'\nimport { offeredMountingOf } from './mounting-part.js'\nimport type { FigureRevision } from './revision.js'\nimport { SidePanelStyles } from './side-panel-styles.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center', 'wall']\nconst FACES = Object.keys(FIGURE_FACES) as FigureFace[]\n\n/**\n * 속성 — the modeller's figure properties.\n *\n * The tab opens with what the figure is: its name, the face it is placed by, the room it takes up, where the\n * catalogue files it.\n *\n * Two kinds of change leave this tab, and it does neither itself:\n *  - `command` carries an authoring command (rename, declare the room, the mounting face, the carrier). The page runs it\n *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.\n *  - `catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them\n *    to the saved row at once, so they need a saved figure.\n *\n * Not here yet, because has no place for them: editing the declared room by hand (declares it from the\n * parts, as graph expressions), and the detail level. Both wait on a ruling.\n */\n@customElement('figure-properties')\nexport class FigureProperties extends localize(i18next)(LitElement) {\n  static styles = [ScrollbarStyles, SidePanelStyles, css`\n    :host {\n      display: block;\n      /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */\n      padding: 0;\n      overflow: auto;\n    }\n    div[row] {\n      display: flex;\n      gap: 6px;\n      align-items: center;\n    }\n    div[row] > select {\n      flex: 1;\n    }\n    div[row] > button[act] {\n      flex: 1;\n      width: auto;\n      margin-top: 0;\n    }\n    div[row] > span {\n      flex: 1;\n    }\n  `]\n\n  /** The figure at the version on screen. */\n  @property({ attribute: false }) revision?: FigureRevision\n  /** The saved row, if any. Category and tags live on it. */\n  @property({ type: String }) figureId?: string\n  @property({ type: String }) figureCategory?: string\n  @property({ type: Array }) figureTags?: string[]\n  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */\n  @state() private pickedPart?: string\n  @state() private pickedFace?: FigureFace\n\n  private facts(): FigureFigureFacts | undefined {\n    try {\n      return this.revision ? figureFigureFacts(this.revision) : undefined\n    } catch {\n      /* A source the format refuses has no facts to show; the verdict tab says why. */\n      return undefined\n    }\n  }\n\n  /*\n    The figure's own settings are shown while no part is picked; with one picked this is out of sight, and working out its\n    facts (the figure parsed and compiled) on every edit is for nobody. Out of sight it keeps what it last drew, and it\n    draws again when it comes back into view.\n  */\n  private lastDrawn?: unknown\n  private outOfSight = false\n  private watch?: ResizeObserver\n  connectedCallback() {\n    super.connectedCallback()\n    this.watch = new ResizeObserver(() => {\n      if (this.outOfSight && this.checkVisibility?.() !== false) {\n        this.outOfSight = false\n        this.requestUpdate()\n      }\n    })\n    this.watch.observe(this)\n  }\n  disconnectedCallback() {\n    this.watch?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  render() {\n    if (this.hasUpdated && this.checkVisibility?.() === false) {\n      this.outOfSight = true\n      return this.lastDrawn ?? nothing\n    }\n    this.lastDrawn = this.draw()\n    return this.lastDrawn\n  }\n\n  private draw() {\n    const facts = this.facts()\n    if (!facts) return nothing\n    /* The figure's type is the page's (it lives on the row); it is slotted into the first section. */\n    return html`<section>\n        <h3>${i18next.t('figure.label.group-figure')}</h3>\n        <slot name=\"type\"></slot>\n        ${this.renderName(facts)} ${this.renderPlacement(facts)}\n      </section>\n      <section>\n        <h3>${i18next.t('figure.label.group-standing')}</h3>\n        ${this.renderSpace(facts)} ${this.renderMounting(facts)}\n      </section>\n      <figure-carrier .carrier=${this.revision?.asset.carrier}></figure-carrier>\n      <section>\n        <h3>${i18next.t('figure.label.group-catalog')}</h3>\n        ${this.renderCatalog()}\n      </section>`\n  }\n\n  private renderName(facts: FigureFigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.name')}</label>\n        <input\n          .value=${facts.name}\n          placeholder=${i18next.t('figure.text.figure-display-name')}\n          @change=${(event: Event) => {\n            const input = event.target as HTMLInputElement\n            if (!input.value.trim()) {\n              /* The format refuses a blank name; put the old one back rather than send a command that fails. */\n              input.value = facts.name\n              return\n            }\n            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })\n          }}\n        />\n      </div>\n    `\n  }\n\n  /**\n   * The face the figure is placed by. In it is part of the room declaration, so choosing one declares the room\n   * again from the parts — the only way declares it — with the new face. The hint says so.\n   */\n  private renderPlacement(facts: FigureFigureFacts) {\n    const current = facts.placement ?? 'floor'\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.figure-placement')}</label>\n        <select\n          .value=${live(current)}\n          @change=${(event: Event) => {\n            const select = event.target as HTMLSelectElement\n            /* The figure's own setting (ADR-0097): chosen with no part too, and the room is left as it is declared. */\n            this.command({ kind: 'set-placement', placement: select.value as Placement })\n            /* Refused, the figure is placed as it was, and the list says so; taken, the figure drawn again says the new one. */\n            select.value = current\n          }}\n        >\n          ${PLACEMENTS.map(\n            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`\n          )}\n        </select>\n        <small>${i18next.t('figure.text.placement-is-intent')}</small>\n      </div>\n    `\n  }\n\n  private renderSpace(facts: FigureFigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.declared-space')}</label>\n        <div row>\n          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>\n          <button act ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>\n            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private renderMounting(facts: FigureFigureFacts) {\n    const mounting = facts.mounting\n    /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */\n    const { part, face } = offeredMountingOf(facts, { part: this.pickedPart, face: this.pickedFace })\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.mounting-face')}</label>\n        <div row>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>\n            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}\n          </select>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as FigureFace)}>\n            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}\n          </select>\n        </div>\n        <div row>\n          <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>\n            <md-icon>check</md-icon>${i18next.t('figure.button.set-mounting-face')}\n          </button>\n          <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>\n            <md-icon>close</md-icon>${i18next.t('figure.button.clear-mounting-face')}\n          </button>\n        </div>\n        <small>\n          ${facts.declared\n            ? mounting\n              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`\n              : i18next.t('figure.label.mounting-face-none')\n            : i18next.t('figure.text.mounting-face-needs-space')}\n        </small>\n      </div>\n    `\n  }\n\n  private renderCatalog() {\n    const saved = !!this.figureId\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.category')}</label>\n        <input\n          .value=${this.figureCategory ?? ''}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.category-placeholder')}\n          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}\n        />\n      </div>\n      <div field>\n        <label>${i18next.t('figure.label.tags')}</label>\n        <input\n          .value=${(this.figureTags ?? []).join(', ')}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.tags-placeholder')}\n          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}\n        />\n        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}\n      </div>\n    `\n  }\n\n  private declare(placement: Placement) {\n    if (!this.revision) return\n    this.command(occupancyFromParts(this.revision.asset, placement))\n  }\n\n  private command(action: FigureAuthoringAction) {\n    this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))\n  }\n\n  private catalog(patch: { category?: string; tags?: string[] }) {\n    this.dispatchEvent(new CustomEvent('catalog', { detail: patch, bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"figure-properties.js","sourceRoot":"","sources":["../../client/modeller/figure-properties.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FIGURE_FACES } from '@hatiolab/figure-model'\nimport type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'\n\nimport './figure-carrier.js'\nimport { occupancyFromParts } from './occupancy.js'\nimport { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'\nimport { offeredMountingOf } from './mounting-part.js'\nimport type { FigureRevision } from './revision.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center', 'wall']\nconst FACES = Object.keys(FIGURE_FACES) as FigureFace[]\n\n/**\n * 속성 — the modeller's figure properties.\n *\n * The tab opens with what the figure is: its name, the face it is placed by, the room it takes up, where the\n * catalogue files it.\n *\n * Two kinds of change leave this tab, and it does neither itself:\n *  - `command` carries an authoring command (rename, declare the room, the mounting face, the carrier). The page runs it\n *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.\n *  - `catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them\n *    to the saved row at once, so they need a saved figure.\n *\n * Not here yet, because has no place for them: editing the declared room by hand (declares it from the\n * parts, as graph expressions), and the detail level. Both wait on a ruling.\n */\n@customElement('figure-properties')\nexport class FigureProperties extends localize(i18next)(LitElement) {\n  static styles = [ScrollbarStyles, SidePanelStyles, css`\n    :host {\n      display: block;\n      /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */\n      padding: 0;\n      overflow: auto;\n    }\n    div[row] {\n      display: flex;\n      gap: 6px;\n      align-items: center;\n    }\n    div[row] > select {\n      flex: 1;\n    }\n    div[row] > button[act] {\n      flex: 1;\n      width: auto;\n      margin-top: 0;\n    }\n    div[row] > span {\n      flex: 1;\n    }\n  `]\n\n  /** The figure at the version on screen. */\n  @property({ attribute: false }) revision?: FigureRevision\n  /** The saved row, if any. Category and tags live on it. */\n  @property({ type: String }) figureId?: string\n  @property({ type: String }) figureCategory?: string\n  @property({ type: Array }) figureTags?: string[]\n  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */\n  @state() private pickedPart?: string\n  @state() private pickedFace?: FigureFace\n\n  private facts(): FigureFigureFacts | undefined {\n    try {\n      return this.revision ? figureFigureFacts(this.revision) : undefined\n    } catch {\n      /* A source the format refuses has no facts to show; the verdict tab says why. */\n      return undefined\n    }\n  }\n\n  /*\n    The figure's own settings are shown while no part is picked; with one picked this is out of sight, and working out its\n    facts (the figure parsed and compiled) on every edit is for nobody. Out of sight it keeps what it last drew, and it\n    draws again when it comes back into view.\n  */\n  private lastDrawn?: unknown\n  private outOfSight = false\n  private watch?: ResizeObserver\n  connectedCallback() {\n    super.connectedCallback()\n    this.watch = new ResizeObserver(() => {\n      if (this.outOfSight && this.checkVisibility?.() !== false) {\n        this.outOfSight = false\n        this.requestUpdate()\n      }\n    })\n    this.watch.observe(this)\n  }\n  disconnectedCallback() {\n    this.watch?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  render() {\n    if (this.hasUpdated && this.checkVisibility?.() === false) {\n      this.outOfSight = true\n      return this.lastDrawn ?? nothing\n    }\n    this.lastDrawn = this.draw()\n    return this.lastDrawn\n  }\n\n  private draw() {\n    const facts = this.facts()\n    if (!facts) return nothing\n    /* The figure's type is the page's (it lives on the row); it is slotted into the first section. */\n    return html`<section>\n        <h3>${i18next.t('figure.label.group-figure')}</h3>\n        <slot name=\"type\"></slot>\n        ${this.renderName(facts)} ${this.renderPlacement(facts)}\n      </section>\n      <section>\n        <h3>${i18next.t('figure.label.group-standing')}</h3>\n        ${this.renderSpace(facts)} ${this.renderMounting(facts)}\n      </section>\n      <figure-carrier .carrier=${this.revision?.asset.carrier}></figure-carrier>\n      <section>\n        <h3>${i18next.t('figure.label.group-catalog')}</h3>\n        ${this.renderCatalog()}\n      </section>`\n  }\n\n  private renderName(facts: FigureFigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.name')}</label>\n        <input\n          .value=${facts.name}\n          placeholder=${i18next.t('figure.text.figure-display-name')}\n          @change=${(event: Event) => {\n            const input = event.target as HTMLInputElement\n            if (!input.value.trim()) {\n              /* The format refuses a blank name; put the old one back rather than send a command that fails. */\n              input.value = facts.name\n              return\n            }\n            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })\n          }}\n        />\n      </div>\n    `\n  }\n\n  /**\n   * The face the figure is placed by. In it is part of the room declaration, so choosing one declares the room\n   * again from the parts — the only way declares it — with the new face. The hint says so.\n   */\n  private renderPlacement(facts: FigureFigureFacts) {\n    const current = facts.placement ?? 'floor'\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.figure-placement')}</label>\n        <select\n          .value=${live(current)}\n          @change=${(event: Event) => {\n            const select = event.target as HTMLSelectElement\n            /* The figure's own setting (ADR-0097): chosen with no part too, and the room is left as it is declared. */\n            this.command({ kind: 'set-placement', placement: select.value as Placement })\n            /* Refused, the figure is placed as it was, and the list says so; taken, the figure drawn again says the new one. */\n            select.value = current\n          }}\n        >\n          ${PLACEMENTS.map(\n            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`\n          )}\n        </select>\n        <small>${i18next.t('figure.text.placement-is-intent')}</small>\n      </div>\n    `\n  }\n\n  private renderSpace(facts: FigureFigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.declared-space')}</label>\n        <div row>\n          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>\n          <button act ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>\n            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private renderMounting(facts: FigureFigureFacts) {\n    const mounting = facts.mounting\n    /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */\n    const { part, face } = offeredMountingOf(facts, { part: this.pickedPart, face: this.pickedFace })\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.mounting-face')}</label>\n        <div row>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>\n            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}\n          </select>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as FigureFace)}>\n            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}\n          </select>\n        </div>\n        <div row>\n          <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>\n            <md-icon>check</md-icon>${i18next.t('figure.button.set-mounting-face')}\n          </button>\n          <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>\n            <md-icon>close</md-icon>${i18next.t('figure.button.clear-mounting-face')}\n          </button>\n        </div>\n        <small>\n          ${facts.declared\n            ? mounting\n              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`\n              : i18next.t('figure.label.mounting-face-none')\n            : i18next.t('figure.text.mounting-face-needs-space')}\n        </small>\n      </div>\n    `\n  }\n\n  private renderCatalog() {\n    const saved = !!this.figureId\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.category')}</label>\n        <input\n          .value=${this.figureCategory ?? ''}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.category-placeholder')}\n          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}\n        />\n      </div>\n      <div field>\n        <label>${i18next.t('figure.label.tags')}</label>\n        <input\n          .value=${(this.figureTags ?? []).join(', ')}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.tags-placeholder')}\n          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}\n        />\n        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}\n      </div>\n    `\n  }\n\n  private declare(placement: Placement) {\n    if (!this.revision) return\n    this.command(occupancyFromParts(this.revision.asset, placement))\n  }\n\n  private command(action: FigureAuthoringAction) {\n    this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))\n  }\n\n  private catalog(patch: { category?: string; tags?: string[] }) {\n    this.dispatchEvent(new CustomEvent('catalog', { detail: patch, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/figure-section-editor.js

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { i18next, localize } from '@operato/i18n';
 import { figureCavitySectionOf, figureSectionSidesOf } from '@hatiolab/figure-model';
-import { SidePanelStyles } from './side-panel-styles.js';
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { apexOver, cavityKeyOf, drawnOf, insertAfter, markedBy, measureNoteOf, movePoint, pointLabel, removePoint, sectionActionOf, sectionOf, workingIssuesOf, workingOf, workingShapeOf } from './section-drawing.js';
 import { cavityDepthOf, cavityRequestOf, cavityResultOf, hollowableOf, sameOf, sidesOf } from './section-controls.js';
 import './figure-cavity-drawing.js';