@things-factory/figure-ui 10.1.45 → 10.1.47

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

@@ -7,7 +7,29 @@ import { i18next, localize } from '@operato/i18n'
 import { V3_FACES } from '@hatiolab/figure-model'
 import type { V3Asset, V3AuthoringAction, V3DimensionSource, V3Face } from '@hatiolab/figure-model'
 
-import { AXES, canFasten, canFollow, choiceOf, fastenedTo, followOf, hasInstanceSize, motionOf, positionsWorkedOut, type Axis, type Follow } from './v3-links.js'
+import {
+  acceptsOf,
+  AXES,
+  canFasten,
+  canFollow,
+  dimensionNow,
+  followableAxes,
+  positionIsShare,
+  choiceOf,
+  fastenedTo,
+  followOf,
+  hasInstanceSize,
+  holdsThings,
+  motionOf,
+  placeFacesOf,
+  placeIdFor,
+  placesOn,
+  positionsWorkedOut,
+  type Axis,
+  type Follow
+} from './v3-links.js'
+import { SidePanelStyles } from './side-panel-styles.js'
+import { HelpToggles } from './v3-help.js'
 
 const FACES = Object.keys(V3_FACES) as V3Face[]
 
@@ -26,76 +48,25 @@ const FACES = Object.keys(V3_FACES) as V3Face[]
  */
 @customElement('figure-v3-links')
 export class FigureV3Links extends localize(i18next)(LitElement) {
-  static styles = css`
+  private readonly help = new HelpToggles(this)
+  static styles = [SidePanelStyles, css`
     :host {
-      display: grid;
-      gap: 10px;
+      display: block;
     }
-    h3 {
-      font-size: var(--ui-t-body, 13px);
-      margin: 12px 0 0;
+    /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
+    div[row] > b {
+      white-space: nowrap;
     }
     div[row] {
       display: grid;
-      grid-template-columns: 24px minmax(0, 1fr);
-      gap: 6px;
-      align-items: center;
-    }
-    div[form] {
-      display: grid;
-      grid-template-columns: 96px minmax(0, 1fr);
+      grid-template-columns: minmax(24px, max-content) minmax(0, 1fr);
       gap: 6px;
       align-items: center;
     }
-    div[pair] {
-      display: flex;
-      gap: 6px;
-    }
-    div[pair] > * {
-      flex: 1;
-      min-width: 0;
-    }
-    select,
-    input,
-    button {
-      font: inherit;
-      min-width: 0;
-    }
-    button[act] {
-      justify-self: start;
-      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[act]:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-    button[act] md-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
-    }
-    small,
-    p[hint] {
-      margin: 0;
-      color: var(--md-sys-color-on-surface-variant);
-    }
     b[bound] {
       font-weight: 600;
     }
-    label[toggle] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-  `
+  `]
 
   /** The asset being edited. */
   @property({ attribute: false }) asset?: V3Asset
@@ -104,37 +75,124 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   /** The part's own extent along its axes now, in mm — what a dimension is fixed at when it stops following. */
   @property({ attribute: false }) dims?: [number, number, number]
   @property({ type: Boolean }) locked = false
+  /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
+  @property() section: 'shape' | 'places' | 'motion' = 'shape'
 
   @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0 }
   @state() private motion = { kind: 'slide' as 'slide' | 'turn', axis: 'x' as Axis, id: '', min: 0, max: 500 }
+  @state() private place = { role: 'grip' as 'seat' | 'grip', face: 'top' as V3Face, label: '', accepts: '', capacity: 1 }
 
   render() {
     const asset = this.asset
     if (!asset || !this.partId) return nothing
+    if (this.section === 'motion')
+      return html`<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
+        ${this.renderMotion(asset)}</section>`
+    if (this.section === 'places')
+      return html`<section><h3>${i18next.t('figure.label.places-on-part', { part: this.partId })}${this.help.button('figure.text.place-explained')}</h3>${this.help.hint('figure.text.place-explained')}
+        ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.dimensions')}</h3>
+        ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      </section>
+      <section>
+        <h3>${i18next.t('figure.label.placement')}${this.help.button('figure.text.fastening-explained')}</h3>${this.help.hint('figure.text.fastening-explained')}
+        ${this.renderPositions(asset)}
+        ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      </section>
+    `
+  }
+
+  /** Where things are held on this part: a seat things rest on, or a grip things are held in (parity row ⑤). */
+  private renderPlaces(asset: V3Asset) {
+    const faces = placeFacesOf(asset, this.partId)
+    const p = this.place
+    const face = faces.includes(p.face) ? p.face : faces[0]!
+    const accepts = acceptsOf(p.accepts)
+    const capacityOk = Number.isSafeInteger(p.capacity) && p.capacity >= 1
+    const roleName = (role: string) => i18next.t('figure.label.place-' + role)
     return html`
-      <h3>${i18next.t('figure.label.dimensions')}</h3>
-      ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
-      <h3>${i18next.t('figure.label.placement')}</h3>
-      ${this.renderPositions(asset)}
-      ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
-      <h3>${i18next.t('figure.label.motion')}</h3>
-      ${this.renderMotion(asset)}
+      ${placesOn(asset, this.partId).map(
+        one => html`<div pair>
+          <span>
+            <b bound>${one.label}</b>
+            <small>${roleName(one.role)} · ${one.face ? i18next.t('figure.label.face-' + one.face) : ''} · ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}</small>
+          </span>
+          <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
+            <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}
+          </button>
+        </div>`
+      )}
+      ${holdsThings(asset)
+        ? nothing
+        : html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>
+            <button act ?disabled=${this.locked} @click=${() => this.declareHolding(asset)}>
+              <md-icon>inventory_2</md-icon>${i18next.t('figure.button.declare-holding')}
+            </button>`}
+      <div pair>
+        <select @change=${(e: Event) => (this.place = { ...p, role: (e.target as HTMLSelectElement).value as 'seat' | 'grip' })}>
+          <option value="grip" ?selected=${p.role === 'grip'}>${roleName('grip')}</option>
+          <option value="seat" ?selected=${p.role === 'seat'}>${roleName('seat')}</option>
+        </select>
+        <select @change=${(e: Event) => (this.place = { ...p, face: (e.target as HTMLSelectElement).value as V3Face })}>
+          ${faces.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+        </select>
+      </div>
+      <div form>
+        <span>${i18next.t('figure.label.place-name')}</span>
+        <input .value=${p.label} placeholder=${roleName(p.role)} @change=${(e: Event) => (this.place = { ...p, label: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.place-accepts')}</span>
+        <input .value=${p.accepts} placeholder="BOX, TOTE" @input=${(e: Event) => (this.place = { ...p, accepts: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.place-capacity')}</span>
+        <input type="number" min="1" step="1" .value=${String(p.capacity)} @change=${(e: Event) => (this.place = { ...p, capacity: (e.target as HTMLInputElement).valueAsNumber })} />
+      </div>
+      ${accepts.length ? nothing : html`<small>${i18next.t('figure.text.place-accepts-needed')}</small>`}
+      <button
+        act
+        ?disabled=${this.locked || !accepts.length || !capacityOk}
+        @click=${() =>
+          this.command({
+            kind: 'add-binding',
+            id: placeIdFor(asset, this.partId, p.role),
+            label: p.label.trim() || roleName(p.role),
+            role: p.role,
+            part: this.partId,
+            face,
+            accepts,
+            capacity: p.capacity
+          })}
+      >
+        <md-icon>back_hand</md-icon>${i18next.t('figure.button.add-place')}
+      </button>
     `
   }
 
+  /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */
+  private declareHolding(asset: V3Asset) {
+    const names = [...new Set([...(asset.document.capabilities.names ?? []), 'Capacity', 'Holdable'])]
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }))
+  }
+
   private renderDimensions(asset: V3Asset) {
     const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
-    return AXES.map(axis => {
+    const round = followableAxes(asset, this.partId).length === 2
+    return followableAxes(asset, this.partId).map(axis => {
       const now = followOf(asset, this.partId, axis)
       const value = choiceOf(now)
+      /* A cylinder's two measures are its radius and its length; its X and Y name them. */
+      const name = round ? i18next.t(axis === 'x' ? 'figure.label.field-radius' : 'figure.label.field-length') : axis.toUpperCase()
       return html`<div row>
-        <b>${axis.toUpperCase()}</b>
-        <select ?disabled=${this.locked || now.of === 'expression'} @change=${(e: Event) => this.follow(axis, (e.target as HTMLSelectElement).value, now)}>
+        <b>${name}</b>
+        <select ?disabled=${this.locked} @change=${(e: Event) => this.follow(asset, axis, (e.target as HTMLSelectElement).value, now)}>
           <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
           ${AXES.filter(one => hasInstanceSize(asset, one)).map(
-            one => html`<option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
-              ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
-            </option>`
+            one => html`<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
+                ${i18next.t('figure.label.follows-instance-share')} · ${one.toUpperCase()}
+              </option>
+              <option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
+                ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
+              </option>`
           )}
           ${others.flatMap(other =>
             AXES.map(
@@ -149,15 +207,24 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     })
   }
 
-  private follow(axis: Axis, choice: string, now: Follow) {
+  private follow(asset: V3Asset, axis: Axis, choice: string, now: Follow) {
     const following = now.of !== 'own'
+    /* The measure as it stands: a dimension stops following at it, and a share is taken of it. */
+    const current = dimensionNow(asset, this.partId, axis) ?? this.dims?.[AXES.indexOf(axis)] ?? 100
     if (choice === 'own') {
       if (!following) return
-      const mm = Math.max(1, Math.round(this.dims?.[AXES.indexOf(axis)] ?? 100))
-      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm })
+      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm: Math.max(1, Math.round(current)) })
       return
     }
     const [of, a, b] = choice.split(':')
+    if (of === 'share') {
+      /* V2's proportional rule: this measure is the share of the instance size it is now, so it grows with the figure. */
+      const size = asset.designInputs[`size.${a}`]
+      if (!size) return
+      const times = Math.round((current / size) * 1e6) / 1e6
+      this.command({ kind: 'link-dimension', part: this.partId, axis, source: { of: 'instance', axis: a as Axis }, times, replace: following })
+      return
+    }
     const source: V3DimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
     this.command({ kind: 'link-dimension', part: this.partId, axis, source, replace: following })
   }
@@ -169,10 +236,15 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   private renderPositions(asset: V3Asset) {
     return positionsWorkedOut(asset, this.partId).map(
       axis => html`<div pair>
-        <span>${axis.toUpperCase()} · ${i18next.t('figure.label.position-worked-out')}</span>
+        <span>${axis.toUpperCase()} · ${i18next.t(positionIsShare(asset, this.partId, axis) ? 'figure.label.position-in-proportion' : 'figure.label.position-worked-out')}</span>
         <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'fix-position', part: this.partId, axis })}>
           <md-icon>push_pin</md-icon>${i18next.t('figure.button.fix-position')}
         </button>
+        ${hasInstanceSize(asset, axis) && !positionIsShare(asset, this.partId, axis)
+          ? html`<button act ?disabled=${this.locked} title=${i18next.t('figure.text.scale-position-explained')} @click=${() => this.command({ kind: 'scale-position', part: this.partId, axis })}>
+              <md-icon>open_in_full</md-icon>${i18next.t('figure.button.scale-position')}
+            </button>`
+          : nothing}
       </div>`
     )
   }
@@ -189,7 +261,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
               <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
             </button>
           </div>`
-        : html`<p hint>${i18next.t('figure.text.fastening-explained')}</p>`}
+        : nothing}
       <div form>
         <span>${i18next.t('figure.label.my-face')}</span>
         <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as V3Face })}>
@@ -257,7 +329,6 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     const m = this.motion
     const unit = m.kind === 'turn' ? 'deg' : 'mm'
     return html`
-      <p hint>${i18next.t('figure.text.motion-explained')}</p>
       <div pair>
         <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn')}>
           <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>

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

@@ -1,10 +1,11 @@
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
 import type { V3AssetGeometry, V3Material, V3PartEdit } from '@hatiolab/figure-model'
+import { SidePanelStyles } from './side-panel-styles.js'
 
 /** The purpose each palette role is for, by its token — the V2 inspector's words for the same roles. */
 const PURPOSE: Record<string, string> = {
@@ -40,14 +41,9 @@ const DEFAULT_SEGMENTS = 12
  */
 @customElement('figure-v3-material')
 export class FigureV3Material extends localize(i18next)(LitElement) {
-  static styles = css`
+  static styles = [SidePanelStyles, css`
     :host {
-      display: grid;
-      gap: 10px;
-    }
-    h3 {
-      font-size: var(--ui-t-body, 13px);
-      margin: 12px 0 0;
+      display: block;
     }
     div[field] {
       display: grid;
@@ -74,46 +70,96 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
       outline: 2px solid var(--md-sys-color-primary);
       outline-offset: 1px;
     }
-    small {
-      color: var(--md-sys-color-on-surface-variant);
-    }
     select,
     input[type='range'] {
       font: inherit;
       min-width: 0;
     }
-    label[toggle] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
+    /* V2's segment picker: the four common counts as their silhouettes with their triangle cost, the rest folded. */
     div[segments] {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       gap: 4px;
     }
-    div[segments] button {
-      display: grid;
-      padding: 4px;
+    button[seg] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1px;
+      padding: 6px 2px 4px;
       font: inherit;
+      color: var(--md-sys-color-on-surface);
+      background: none;
       border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
-      background: var(--md-sys-color-surface);
+      cursor: pointer;
+    }
+    button[seg]:hover:not([on]) {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    button[seg][on] {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
+    }
+    /* Small, and 12 and 16 both read as circles: large enough for the corners to show (V2). */
+    button[seg] svg {
+      display: block;
+      width: 32px;
+      height: 32px;
+    }
+    button[seg] svg polygon {
+      fill: var(--md-sys-color-surface-container-highest);
+      stroke: currentColor;
+      stroke-width: 1.1;
+      stroke-linejoin: miter;
+    }
+    button[seg][on] svg polygon {
+      fill: var(--md-sys-color-surface-container-lowest);
+    }
+    button[seg] b {
+      font-size: 0.8rem;
+    }
+    button[seg] small {
+      margin: 0;
+      font-size: 0.6rem;
+    }
+    details[free] summary {
+      margin-top: 4px;
+      cursor: pointer;
+      font-size: 0.68rem;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    div[presets] {
+      display: flex;
+      gap: 4px;
+      margin-top: 4px;
+    }
+    div[presets] button {
+      flex: 1;
+      padding: 3px 0;
+      font: inherit;
+      font-size: 0.72rem;
       color: var(--md-sys-color-on-surface);
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
       cursor: pointer;
     }
-    div[segments] button[on] {
-      background: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-      border-color: var(--md-sys-color-primary);
+    div[presets] button[on] {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
     }
-  `
+  `]
 
   /** The selected body as evaluated — its material, its segments and its shape. */
   @property({ attribute: false }) body?: V3AssetGeometry & { id: string }
   /** The asset's palette, token → colour. */
   @property({ attribute: false }) palette: Record<string, string> = {}
   @property({ type: Boolean }) locked = false
+  /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */
+  @state() private glowing?: number
 
   render() {
     const part = this.body
@@ -127,7 +173,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
     const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))
     const lit = entries.filter(([token]) => token.startsWith('palette.status-'))
     const glow = material.emissive
-    return html`
+    return html`<section>
       <h3>${i18next.t('figure.label.part-material')}</h3>
       <div field>
         <label>${i18next.t('figure.label.palette-role')}</label>
@@ -168,9 +214,10 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
           step="0.05"
           ?disabled=${this.locked}
           .value=${String(glow?.intensity ?? 0)}
+          @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}
           @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}
         />
-        <small>${(glow?.intensity ?? 0).toFixed(2)}</small>
+        <small>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</small>
       </div>
       ${glow
         ? html`<div field>
@@ -179,7 +226,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
           </div>`
         : nothing}
       ${this.renderSegments(part)}
-    `
+    </section>`
   }
 
   private renderSegments(part: V3AssetGeometry & { id: string }) {
@@ -190,17 +237,29 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
       <div field>
         <label>${i18next.t('figure.label.segments')}</label>
         <div segments>
-          ${SEGMENT_PRESETS.map(
+          ${SEGMENT_PRESETS.slice(0, 4).map(
             preset => html`<button
+              seg
               ?on=${preset === current}
               ?disabled=${this.locked}
               @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}
             >
+              ${silhouette(preset)}
               <b>${preset}</b>
               <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>
             </button>`
           )}
         </div>
+        <details free ?open=${SEGMENT_PRESETS.slice(4).includes(current as never)}>
+          <summary>${i18next.t('figure.text.more-segment-options')}</summary>
+          <div presets>
+            ${SEGMENT_PRESETS.slice(4).map(
+              preset => html`<button ?on=${preset === current} ?disabled=${this.locked} @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}>
+                ${preset}
+              </button>`
+            )}
+          </div>
+        </details>
       </div>
     `
   }
@@ -224,12 +283,14 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
   }
 
   /** Intensity 0 is no glow at all, as in V2; a new glow takes the part's own colour until another is picked. */
-  private glow(intensity: number) {
+  private glow(intensity: number, live = false) {
     const material = this.body!.material
-    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined })
+    this.glowing = live ? intensity : undefined
+    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined }, live)
   }
 
-  private put(patch: Partial<V3Material>) {
+  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`v3-part-live`). */
+  private put(patch: Partial<V3Material>, live = false) {
     const material: V3Material = { ...this.body!.material, ...patch }
     for (const key of Object.keys(material) as (keyof V3Material)[]) if (material[key] === undefined) delete material[key]
     /* The colours this material names that the asset does not carry yet. */
@@ -239,10 +300,22 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
         .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)
         .map(token => [token, offered[token]!])
     )
-    this.edit({ kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) })
+    const edit: V3PartEdit = { kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) }
+    if (live) this.dispatchEvent(new CustomEvent('v3-part-live', { detail: { edit }, bubbles: true, composed: true }))
+    else this.edit(edit)
   }
 
   private edit(edit: V3PartEdit) {
     this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
 }
+
+/** A regular polygon of this many sides -- how round a body with this rim count looks from its end (V2). */
+function silhouette(segments: number) {
+  const points: string[] = []
+  for (let i = 0; i < segments; i++) {
+    const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments
+    points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`)
+  }
+  return svg`<svg viewBox="0 0 32 32" aria-hidden="true"><polygon points=${points.join(' ')}></polygon></svg>`
+}