@things-factory/figure-ui 10.1.46 → 10.1.47

package/client/modeller/figure-v3-preview.ts

@@ -0,0 +1,326 @@
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { compileV3Asset } from '@hatiolab/figure-model'
+import type { V3Asset } from '@hatiolab/figure-model'
+import { create, registerFigureV3, unregisterFigureV3 } from '@hatiolab/things-scene'
+
+import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
+import { dialShape } from './angle-dial.js'
+import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewInstances } from './v3-preview-model.js'
+
+/**
+ * The figure placed on a board -- V2's preview, for a V3 figure.
+ *
+ * The editing canvas shows the figure at the size it was made. Half of what a figure is lies in how it answers a
+ * different size, so here the figure being authored is registered as a board registers it and placed as
+ * `FigureInstance`s: the size it was made, and each of the seven ways of growing one, two or three axes twice as
+ * large, side by side at one scale, four to a row (V2's eight). The board draws them as it will on a real board --
+ * placement, lights, environment, the same V3 renderer.
+ *
+ * The controls are V2's too: each value that poses the figure with a slider (and a dial for an angle), each clip's
+ * speed, and 「이 자세를 기본으로」 to keep the pose as the one it stands in. Nothing here is edited; the canvas edits.
+ */
+
+interface SceneHandle {
+  dispose?: () => void
+  resize?: () => void
+  fit?: (type?: string) => void
+  root?: {
+    set?: (patch: Record<string, unknown>) => void
+    fitCameraToModel?: () => void
+    components?: { set?: (property: string, value: unknown) => void }[]
+  }
+}
+
+@customElement('figure-v3-preview')
+export class FigureV3Preview extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      position: relative;
+      display: flex;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+      background-color: ${unsafeCSS(WORKBENCH)};
+      font-size: 0.76rem;
+    }
+    div[stage] {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+    /* Which is which: side by side means nothing without a legend. */
+    div[legend] {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 6px;
+      padding: 4px 8px;
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(28, 28, 30, 0.6);
+      border-radius: 6px;
+      font-size: 0.72rem;
+    }
+    div[clips] {
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 8px 10px;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(28, 28, 30, 0.72);
+      border-radius: 8px;
+      font-size: 0.72rem;
+    }
+    div[clips] label {
+      display: grid;
+      grid-template-columns: auto 20px 96px 34px;
+      align-items: center;
+      gap: 8px;
+    }
+    div[clips] svg[dial] {
+      width: 20px;
+      height: 20px;
+    }
+    div[clips] svg[dial] path {
+      fill: rgba(255, 255, 255, 0.22);
+    }
+    div[clips] svg[dial] line {
+      stroke: var(--md-sys-color-primary, #7cc6ff);
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+    div[clips] svg[dial] circle {
+      fill: none;
+      stroke: rgba(255, 255, 255, 0.35);
+    }
+    div[clips] button[pose] {
+      align-self: stretch;
+      padding: 4px 8px;
+      font: inherit;
+      font-size: 0.7rem;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(255, 255, 255, 0.14);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    div[clips] button[pose]:hover {
+      background-color: rgba(255, 255, 255, 0.24);
+    }
+    div[clips] span[drive] {
+      opacity: 0.6;
+      font-size: 0.66rem;
+    }
+    div[clips] input {
+      width: 96px;
+      accent-color: var(--md-sys-color-primary);
+    }
+    div[clips] output {
+      font-variant-numeric: tabular-nums;
+      text-align: right;
+      opacity: 0.85;
+    }
+    div[cannot] {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      text-align: center;
+      line-height: 1.6;
+      color: #f4f4f4;
+      background-color: ${unsafeCSS(WORKBENCH)};
+    }
+  `
+
+  /** The figure being authored, as the editor holds it now. */
+  @property({ attribute: false }) asset?: V3Asset
+  /** Which figure: the type it is registered under here is this one's own, never a real type a board uses. */
+  @property() context = ''
+  @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW
+
+  @query('div[stage]') private stage!: HTMLDivElement
+  @state() private cannot = ''
+  /** Clip speeds and control values given here -- the preview's, not the figure's. */
+  @state() private driving: Record<string, number> = {}
+  @state() private giving: Record<string, number> = {}
+
+  private scene?: SceneHandle
+  private standing?: string
+  private registered?: string
+  private watcher?: ResizeObserver
+
+  render() {
+    const asset = this.asset
+    const controls = asset ? asset.document.model.inputs.filter(i => i.role === 'state') : []
+    const clips = asset ? [...new Set((asset.drivers ?? []).map(d => d.clip))] : []
+    return html`<div stage></div>
+      ${this.cannot
+        ? html`<div cannot>${this.cannot}</div>`
+        : html`<div legend>${PREVIEW_WAYS.map(way => html`<span>${way.axes.length ? way.name : i18next.t('figure.label.preview-base')}</span>`)}</div>
+            ${controls.length + clips.length ? this.renderDrivers(asset!, controls, clips) : nothing}`}`
+  }
+
+  private renderDrivers(asset: V3Asset, controls: V3Asset['document']['model']['inputs'], clips: string[]) {
+    const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id])
+    return html`<div clips>
+      ${changed.length
+        ? html`<button pose title=${i18next.t('figure.text.pose-as-default-explained')} @click=${() => this.poseAsDefault()}>
+            ${i18next.t('figure.button.pose-as-default')}
+          </button>`
+        : nothing}
+      ${controls.map(control => {
+        const value = this.giving[control.id] ?? asset.stateDefaults[control.id] ?? control.min
+        const step = Math.max((control.max - control.min) / 100, 0.01)
+        const label = asset.stateInputs?.[control.id]?.label ?? control.id
+        return html`<label>
+          <span>${label} <span drive>${control.unit}</span></span>
+          ${this.renderDial(control, value)}
+          <input
+            type="range"
+            min=${control.min}
+            max=${control.max}
+            step=${step}
+            .value=${String(value)}
+            @input=${(e: Event) => this.give(control.id, Number((e.target as HTMLInputElement).value))}
+          />
+          <output>${Math.round(value)}</output>
+        </label>`
+      })}
+      ${clips.map(clip => {
+        const value = this.driving[clip] ?? 1
+        return html`<label>
+          <span>${clip} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>
+          <span></span>
+          <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))} />
+          <output>${value.toFixed(2)}</output>
+        </label>`
+      })}
+    </div>`
+  }
+
+  private renderDial(control: { unit: string; min: number; max: number }, value: number) {
+    if (control.unit !== 'deg') return html`<span></span>`
+    const dial = dialShape(control.min, control.max, value)
+    const span = dial.radius * 2 + 2
+    return html`<svg dial viewBox="0 0 ${span} ${span}" aria-hidden="true">
+      <path d=${dial.sector}></path>
+      <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>
+      <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>
+    </svg>`
+  }
+
+  private drive(clip: string, value: number) {
+    this.driving = { ...this.driving, [clip]: value }
+    this.tellInstances('clips', this.driving)
+  }
+
+  private give(id: string, value: number) {
+    this.giving = { ...this.giving, [id]: value }
+    this.tellInstances('parameters', this.giving)
+  }
+
+  private poseAsDefault() {
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-state-defaults', values: { ...this.giving } } }, bubbles: true, composed: true }))
+    this.giving = {}
+  }
+
+  private tellInstances(key: 'clips' | 'parameters', values: Record<string, number>) {
+    for (const component of this.scene?.root?.components ?? []) component.set?.(key, { ...values })
+  }
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (!this.hasUpdated) return
+    if (changed.has('asset') || changed.has('context')) {
+      this.standUp()
+      return
+    }
+    if (!changed.has('view')) return
+    const before = changed.get('view') as ViewSettings | undefined
+    const now = this.view ?? DEFAULT_VIEW
+    if (before?.placement !== now.placement || before?.ceilingHeight !== now.ceilingHeight) this.standUp()
+    else this.scene?.root?.set?.(sceneLook(now))
+  }
+
+  firstUpdated() {
+    this.standUp()
+    this.watcher = new ResizeObserver(() => this.scene?.resize?.())
+    this.watcher.observe(this)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.watcher?.disconnect()
+    this.watcher = undefined
+    this.teardown()
+  }
+
+  private standUp() {
+    const asset = this.asset
+    const view = this.view ?? DEFAULT_VIEW
+    if (!asset || !asset.appearance.length) {
+      this.cannot = i18next.t('figure.text.preview-needs-a-part')
+      this.teardown()
+      return
+    }
+    const signature = JSON.stringify([asset, view.placement, view.ceilingHeight])
+    if (this.scene && this.standing === signature) return
+    try {
+      compileV3Asset(asset)
+    } catch {
+      this.cannot = i18next.t('figure.text.preview-blocked-by-errors')
+      this.teardown()
+      return
+    }
+    this.teardown()
+    this.driving = {}
+    try {
+      /* Registered as a board registers it, under a type of this preview's own: a real type's drawings stay as they are. */
+      const type = `figure-v3-preview-${this.context || 'new'}`
+      registerFigureV3(type, asset)
+      this.registered = type
+      const size = authoredSizeOf(asset)
+      const { components, board } = previewInstances(type, size)
+      this.scene = create({
+        target: this.stage,
+        model: {
+          type: 'model-layer',
+          width: board.width,
+          height: board.height,
+          depth: previewBoardDepth({ placement: asset.occupancy?.placement, base: { y: size.y } }, view.ceilingHeight, PREVIEW_FACTOR),
+          threed: true,
+          sky: 'color',
+          ...sceneLook(view),
+          placement: view.placement,
+          heights: { floor: 0, ceiling: view.ceilingHeight },
+          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+          components
+        },
+        mode: 0
+      }) as SceneHandle
+      this.standing = signature
+      this.scene.resize?.()
+      this.scene.fit?.('ratio')
+      this.scene.root?.fitCameraToModel?.()
+      this.cannot = ''
+    } catch (error) {
+      this.cannot = (error as Error).message
+    }
+  }
+
+  private teardown() {
+    this.scene?.dispose?.()
+    this.scene = undefined
+    this.standing = undefined
+    if (this.registered) unregisterFigureV3(this.registered)
+    this.registered = undefined
+  }
+}

package/client/modeller/figure-v3-properties.ts

@@ -9,6 +9,7 @@ import type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'
 
 import { occupancyFromParts } from './v3-occupancy.js'
 import { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'
+import { SidePanelStyles } from './side-panel-styles.js'
 
 const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']
 const FACES = Object.keys(V3_FACES) as V3Face[]
@@ -31,71 +32,30 @@ const FACES = Object.keys(V3_FACES) as V3Face[]
  */
 @customElement('figure-v3-properties')
 export class FigureV3Properties extends localize(i18next)(LitElement) {
-  static styles = css`
+  static styles = [SidePanelStyles, css`
     :host {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      padding: 12px;
+      display: block;
+      /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */
+      padding: 0;
       overflow: auto;
-      font-size: 0.76rem;
-      color: var(--md-sys-color-on-surface);
-    }
-    div[field] {
-      display: grid;
-      gap: 4px;
-    }
-    div[field] > label {
-      font-weight: 600;
     }
     div[row] {
       display: flex;
       gap: 6px;
       align-items: center;
     }
-    input,
-    select,
-    button {
-      font: inherit;
-      min-width: 0;
-    }
-    input,
-    select {
-      padding: 5px 8px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 4px;
-      background: var(--md-sys-color-surface);
-      color: var(--md-sys-color-on-surface);
-    }
     div[row] > select {
       flex: 1;
     }
-    button {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 10px;
-      border: none;
-      border-radius: 999em;
-      cursor: pointer;
-      color: var(--md-sys-color-on-secondary-container);
-      background: var(--md-sys-color-secondary-container);
-    }
-    button:disabled,
-    input:disabled,
-    select:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-    button md-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
+    div[row] > button[act] {
+      flex: 1;
+      width: auto;
+      margin-top: 0;
     }
-    small {
-      color: var(--md-sys-color-on-surface-variant);
+    div[row] > span {
+      flex: 1;
     }
-  `
+  `]
 
   /** The source being edited. */
   @property({ type: String }) source?: string
@@ -119,8 +79,20 @@ export class FigureV3Properties extends localize(i18next)(LitElement) {
   render() {
     const facts = this.facts()
     if (!facts) return nothing
-    return html`${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderSpace(facts)} ${this.renderMounting(facts)}
-    ${this.renderCatalog()}`
+    /* The figure's type is the page's (it lives on the row); it is slotted into the first section, as V2 had it. */
+    return html`<section>
+        <h3>${i18next.t('figure.label.group-figure')}</h3>
+        <slot name="type"></slot>
+        ${this.renderName(facts)} ${this.renderPlacement(facts)}
+      </section>
+      <section>
+        <h3>${i18next.t('figure.label.group-standing')}</h3>
+        ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+      </section>
+      <section>
+        <h3>${i18next.t('figure.label.group-catalog')}</h3>
+        ${this.renderCatalog()}
+      </section>`
   }
 
   private renderName(facts: V3FigureFacts) {
@@ -172,7 +144,7 @@ export class FigureV3Properties extends localize(i18next)(LitElement) {
         <label>${i18next.t('figure.label.declared-space')}</label>
         <div row>
           <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
-          <button fit ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
+          <button act ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
             <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
           </button>
         </div>
@@ -196,10 +168,10 @@ export class FigureV3Properties extends localize(i18next)(LitElement) {
           </select>
         </div>
         <div row>
-          <button ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
+          <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
             ${i18next.t('figure.button.set-mounting-face')}
           </button>
-          <button ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+          <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
             ${i18next.t('figure.button.clear-mounting-face')}
           </button>
         </div>