@things-factory/figure-ui 10.1.40 → 10.1.42

package/dist-client/modeller/v3-canvas.js

@@ -1,8 +1,10 @@
 import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { replaceV3Meshes, disposeV3Meshes } from './v3-renderer.js';
 /** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */
 let FigureV3Canvas = class FigureV3Canvas extends LitElement {
@@ -11,16 +13,72 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
         this.parts = [];
         this.palette = {};
         this.context = '';
+        /** The selected part, and what the gizmo may write for it (`gizmoReachOf`). Nothing reachable, no gizmo. */
+        this.selected = '';
+        this.reach = { translate: false, rotate: false, scale: false };
+        /** Move · turn · size — W · E · R, as in the V2 modeller. */
+        this.mode = 'translate';
+        /** What the gizmo holds: a stand-in at the body's origin, so the body's own matrix stays the evaluation's. */
+        this.proxy = new THREE.Object3D();
+        /** The pointerup that ends a drag is not a pick — releasing off the body would otherwise deselect it. */
+        this.justDragged = false;
         this.scene = new THREE.Scene();
         this.group = new THREE.Group();
         this.camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000);
         this.initialized = false;
         this.contextAtRender = '';
+        this.key = (event) => {
+            const mode = { w: 'translate', e: 'rotate', r: 'scale' }[event.key.toLowerCase()];
+            if (mode && this.reach[mode])
+                this.mode = mode;
+        };
+        this.dragging = (event) => {
+            const on = !!event.value;
+            if (this.controls)
+                this.controls.enabled = !on;
+            const body = this.group.children.find(child => child.name === this.selected);
+            if (on && body) {
+                this.proxy.updateMatrix();
+                this.dragStart = { proxy: this.proxy.matrix.clone(), mesh: body.matrix.clone(), body };
+                return;
+            }
+            const start = this.dragStart;
+            this.dragStart = undefined;
+            if (!start)
+                return;
+            /* Either listener may see the release first; the flag lasts past both, then clears. */
+            this.justDragged = true;
+            setTimeout(() => (this.justDragged = false));
+            const result = {};
+            if (this.mode === 'translate')
+                result.position = this.proxy.position.toArray();
+            if (this.mode === 'rotate') {
+                /* rigid@1 composes Rx·Ry·Rz — three's 'XYZ' order — so the angles come back as the inputs mean them. */
+                const euler = new THREE.Euler().setFromQuaternion(this.proxy.quaternion, 'XYZ');
+                result.rotation = [euler.x, euler.y, euler.z].map(THREE.MathUtils.radToDeg);
+            }
+            if (this.mode === 'scale')
+                result.scale = this.proxy.scale.toArray();
+            this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: this.selected, result }, bubbles: true, composed: true }));
+        };
+        /** While dragging, the body follows the stand-in; the next evaluation replaces it with where the inputs put it. */
+        this.follow = () => {
+            const start = this.dragStart;
+            if (!start)
+                return;
+            this.proxy.updateMatrix();
+            const delta = this.proxy.matrix.clone().multiply(start.proxy.clone().invert());
+            start.body.matrix.copy(delta.multiply(start.mesh));
+            start.body.matrixWorldNeedsUpdate = true;
+            this.group.updateMatrixWorld(true);
+        };
         this.draw = () => {
             if (this.renderer)
                 this.renderer.render(this.scene, this.camera);
         };
         this.pick = (event) => {
+            if (this.justDragged || this.transform?.dragging)
+                return;
             const r = event.currentTarget.getBoundingClientRect(), ray = new THREE.Raycaster();
             ray.setFromCamera(new THREE.Vector2(((event.clientX - r.left) / r.width) * 2 - 1, (-(event.clientY - r.top) / r.height) * 2 + 1), this.camera);
             const hit = ray.intersectObjects(this.group.children)[0];
@@ -45,6 +103,35 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
       width: 100%;
       height: 100%;
     }
+    div[gizmo] {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      gap: 2px;
+      padding: 2px;
+      border-radius: 6px;
+      background: var(--md-sys-color-surface);
+      border: 1px solid var(--md-sys-color-outline-variant);
+    }
+    div[gizmo] button {
+      font: inherit;
+      font-size: 12px;
+      padding: 3px 8px;
+      border: none;
+      border-radius: 4px;
+      background: none;
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    div[gizmo] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    div[gizmo] button:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
     p {
       position: absolute;
       inset: 45% 1rem auto;
@@ -54,8 +141,20 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
     }
   `; }
     render() {
-        return html `<canvas aria-label="Figure 3D 모델" @pointerup=${this.pick}></canvas
-      >${this.parts.length ? null : html `<p>도형을 추가해 모델링을 시작하세요.</p>`}`;
+        const any = this.selected && (this.reach.translate || this.reach.rotate || this.reach.scale);
+        return html `<canvas aria-label="Figure 3D 모델" tabindex="0" @pointerup=${this.pick} @keydown=${this.key}></canvas
+      >${any
+            ? html `<div gizmo>
+            ${['translate', 'rotate', 'scale'].map((mode, i) => html `<button
+                ?on=${this.mode === mode}
+                ?disabled=${!this.reach[mode]}
+                title=${`${i18next.t('figure.label.gizmo-' + mode)} (${'WER'[i]})`}
+                @click=${() => (this.mode = mode)}
+              >
+                ${i18next.t('figure.label.gizmo-' + mode)}
+              </button>`)}
+          </div>`
+            : null}${this.parts.length ? null : html `<p>도형을 추가해 모델링을 시작하세요.</p>`}`;
     }
     firstUpdated() {
         this.initialize();
@@ -87,6 +186,12 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
         this.scene.add(light);
         this.controls = new OrbitControls(this.camera, canvas);
         this.controls.addEventListener('change', this.draw);
+        this.transform = new TransformControls(this.camera, canvas);
+        this.transform.setSpace('world');
+        this.transform.addEventListener('change', this.draw);
+        this.transform.addEventListener('dragging-changed', this.dragging);
+        this.transform.addEventListener('objectChange', this.follow);
+        this.scene.add(this.proxy, this.transform.getHelper());
         this.observer = new ResizeObserver(() => {
             const r = this.getBoundingClientRect();
             if (r.width && r.height) {
@@ -103,6 +208,38 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
     updated(changed) {
         if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))
             this.updateGeometry(this.contextAtRender !== this.context);
+        if (this.initialized && ['parts', 'selected', 'reach', 'mode', 'context'].some(key => changed.has(key)))
+            this.placeGizmo();
+    }
+    /** Puts the gizmo on the selected body, in a mode it may write — or takes it away. */
+    placeGizmo() {
+        const transform = this.transform;
+        if (!transform || this.dragStart)
+            return;
+        if (!this.reach[this.mode]) {
+            const first = ['translate', 'rotate', 'scale'].find(mode => this.reach[mode]);
+            if (first && first !== this.mode) {
+                this.mode = first;
+                return;
+            }
+        }
+        const body = this.group.children.find(child => child.name === this.selected);
+        if (!body || !this.reach[this.mode]) {
+            transform.detach();
+            this.draw();
+            return;
+        }
+        const position = new THREE.Vector3(), quaternion = new THREE.Quaternion(), scale = new THREE.Vector3();
+        body.matrix.decompose(position, quaternion, scale);
+        this.proxy.position.copy(position);
+        this.proxy.quaternion.copy(quaternion);
+        this.proxy.scale.set(1, 1, 1);
+        this.proxy.updateMatrixWorld(true);
+        transform.setMode(this.mode);
+        /* Size follows the body's own axes; moving and turning read in the asset's axes, which the inputs are in. */
+        transform.setSpace(this.mode === 'scale' ? 'local' : 'world');
+        transform.attach(this.proxy);
+        this.draw();
     }
     updateGeometry(fit) {
         try {
@@ -154,6 +291,9 @@ let FigureV3Canvas = class FigureV3Canvas extends LitElement {
         this.observer?.disconnect();
         this.themeObserver?.disconnect();
         this.controls?.dispose();
+        this.transform?.detach();
+        this.transform?.dispose();
+        this.transform = undefined;
         disposeV3Meshes(this.group);
         this.renderer?.dispose();
         this.renderer = undefined;
@@ -174,6 +314,18 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], FigureV3Canvas.prototype, "context", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureV3Canvas.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Canvas.prototype, "reach", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], FigureV3Canvas.prototype, "mode", void 0);
 FigureV3Canvas = __decorate([
     customElement('figure-v3-canvas')
 ], FigureV3Canvas);

package/dist-client/modeller/v3-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"v3-canvas.js","sourceRoot":"","sources":["../../client/modeller/v3-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as THREE from 'three'\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'\nimport { replaceV3Meshes, disposeV3Meshes, type V3RenderPart } from './v3-renderer.js'\n\n/** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */\n@customElement('figure-v3-canvas')\nexport class FigureV3Canvas extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      min-width: 0;\n      min-height: 0;\n      position: relative;\n      /*\n        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238\n        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the\n        first paint and the scene agree and there is no flash between them.\n      */\n      background: var(--md-sys-color-surface-container);\n    }\n    canvas {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    p {\n      position: absolute;\n      inset: 45% 1rem auto;\n      text-align: center;\n      pointer-events: none;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n  `\n  @property({ attribute: false }) parts: V3RenderPart[] = []\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property() context = ''\n  private renderer?: THREE.WebGLRenderer\n  private readonly scene = new THREE.Scene()\n  private readonly group = new THREE.Group()\n  private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)\n  private controls?: OrbitControls\n  private observer?: ResizeObserver\n  private themeObserver?: MutationObserver\n  private initialized = false\n  private contextAtRender = ''\n  render() {\n    return html`<canvas aria-label=\"Figure 3D 모델\" @pointerup=${this.pick}></canvas\n      >${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`\n  }\n  protected firstUpdated() {\n    this.initialize()\n  }\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.hasUpdated) void this.updateComplete.then(() => this.initialize())\n  }\n  private initialize() {\n    if (this.initialized || !this.isConnected) return\n    const canvas = this.renderRoot.querySelector('canvas')!\n    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })\n    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n    this.paintBackground()\n    /*\n      The app switches theme by the body's class (light · dark). Reading the colour once at start left a light\n      board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.\n    */\n    this.themeObserver = new MutationObserver(() => {\n      this.paintBackground()\n      this.draw()\n    })\n    this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })\n    this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))\n    const light = new THREE.DirectionalLight(0xffffff, 3)\n    light.position.set(1, 2, 3)\n    this.scene.add(light)\n    this.controls = new OrbitControls(this.camera, canvas)\n    this.controls.addEventListener('change', this.draw)\n    this.observer = new ResizeObserver(() => {\n      const r = this.getBoundingClientRect()\n      if (r.width && r.height) {\n        this.renderer!.setSize(r.width, r.height, false)\n        this.camera.aspect = r.width / r.height\n        this.camera.updateProjectionMatrix()\n        this.draw()\n      }\n    })\n    this.observer.observe(this)\n    this.initialized = true\n    this.updateGeometry(true)\n  }\n  protected updated(changed: PropertyValues) {\n    if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))\n      this.updateGeometry(this.contextAtRender !== this.context)\n  }\n  private updateGeometry(fit: boolean) {\n    try {\n      const wasEmpty = this.group.children.length === 0\n      replaceV3Meshes(this.group, this.parts, this.palette)\n      this.contextAtRender = this.context\n      if (fit || wasEmpty) this.fit()\n      this.draw()\n    } catch (error) {\n      // Do not leave another model's geometry visible after a failed context switch.\n      if (this.contextAtRender !== this.context) {\n        disposeV3Meshes(this.group)\n        this.draw()\n      }\n      this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }))\n    }\n  }\n  fit() {\n    const bounds = new THREE.Box3().setFromObject(this.group),\n      center = new THREE.Vector3(),\n      size = new THREE.Vector3()\n    if (!bounds.isEmpty()) {\n      bounds.getCenter(center)\n      bounds.getSize(size)\n    }\n    const radius = Math.max(size.length() / 2, 100),\n      distance = (radius / Math.sin(THREE.MathUtils.degToRad(this.camera.fov / 2))) * 1.3\n    this.camera.position.copy(center).add(new THREE.Vector3(1, 0.8, 1).normalize().multiplyScalar(distance))\n    this.camera.near = Math.max(0.01, distance / 10000)\n    this.camera.far = Math.max(10000, distance * 100)\n    this.camera.updateProjectionMatrix()\n    this.controls?.target.copy(center)\n    this.controls?.update()\n    this.draw()\n  }\n  /**\n   * The scene's background, taken from the host's computed background — the token resolved and normalised to\n   * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.\n   */\n  private paintBackground() {\n    const colour = getComputedStyle(this).backgroundColor\n    if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent') this.scene.background = new THREE.Color(colour)\n  }\n  private draw = () => {\n    if (this.renderer) this.renderer.render(this.scene, this.camera)\n  }\n  private pick = (event: PointerEvent) => {\n    const r = (event.currentTarget as HTMLCanvasElement).getBoundingClientRect(),\n      ray = new THREE.Raycaster()\n    ray.setFromCamera(\n      new THREE.Vector2(((event.clientX - r.left) / r.width) * 2 - 1, (-(event.clientY - r.top) / r.height) * 2 + 1),\n      this.camera\n    )\n    const hit = ray.intersectObjects(this.group.children)[0]\n    this.dispatchEvent(\n      new CustomEvent('part-selected', { detail: hit?.object.name ?? '', bubbles: true, composed: true })\n    )\n  }\n  thumbnail() {\n    this.draw()\n    return this.renderer?.domElement.toDataURL('image/png')\n  }\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.themeObserver?.disconnect()\n    this.controls?.dispose()\n    disposeV3Meshes(this.group)\n    this.renderer?.dispose()\n    this.renderer = undefined\n    this.scene.clear()\n    this.initialized = false\n    super.disconnectedCallback()\n  }\n}\n"]}
+{"version":3,"file":"v3-canvas.js","sourceRoot":"","sources":["../../client/modeller/v3-canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\nimport * as THREE from 'three'\nimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'\nimport { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'\nimport type { GizmoReach, GizmoResult } from './v3-gizmo.js'\nimport { replaceV3Meshes, disposeV3Meshes, type V3RenderPart } from './v3-renderer.js'\n\n/** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */\n@customElement('figure-v3-canvas')\nexport class FigureV3Canvas extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      min-width: 0;\n      min-height: 0;\n      position: relative;\n      /*\n        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238\n        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the\n        first paint and the scene agree and there is no flash between them.\n      */\n      background: var(--md-sys-color-surface-container);\n    }\n    canvas {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    div[gizmo] {\n      position: absolute;\n      top: 8px;\n      left: 8px;\n      display: flex;\n      gap: 2px;\n      padding: 2px;\n      border-radius: 6px;\n      background: var(--md-sys-color-surface);\n      border: 1px solid var(--md-sys-color-outline-variant);\n    }\n    div[gizmo] button {\n      font: inherit;\n      font-size: 12px;\n      padding: 3px 8px;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      color: var(--md-sys-color-on-surface);\n      cursor: pointer;\n    }\n    div[gizmo] button[on] {\n      background: var(--md-sys-color-secondary-container);\n      color: var(--md-sys-color-on-secondary-container);\n    }\n    div[gizmo] button:disabled {\n      opacity: 0.4;\n      cursor: default;\n    }\n    p {\n      position: absolute;\n      inset: 45% 1rem auto;\n      text-align: center;\n      pointer-events: none;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n  `\n  @property({ attribute: false }) parts: V3RenderPart[] = []\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  @property() context = ''\n  /** The selected part, and what the gizmo may write for it (`gizmoReachOf`). Nothing reachable, no gizmo. */\n  @property() selected = ''\n  @property({ attribute: false }) reach: GizmoReach = { translate: false, rotate: false, scale: false }\n  /** Move · turn · size — W · E · R, as in the V2 modeller. */\n  @property() mode: 'translate' | 'rotate' | 'scale' = 'translate'\n  private transform?: TransformControls\n  /** What the gizmo holds: a stand-in at the body's origin, so the body's own matrix stays the evaluation's. */\n  private readonly proxy = new THREE.Object3D()\n  private dragStart?: { proxy: THREE.Matrix4; mesh: THREE.Matrix4; body: THREE.Mesh }\n  /** The pointerup that ends a drag is not a pick — releasing off the body would otherwise deselect it. */\n  private justDragged = false\n  private renderer?: THREE.WebGLRenderer\n  private readonly scene = new THREE.Scene()\n  private readonly group = new THREE.Group()\n  private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)\n  private controls?: OrbitControls\n  private observer?: ResizeObserver\n  private themeObserver?: MutationObserver\n  private initialized = false\n  private contextAtRender = ''\n  render() {\n    const any = this.selected && (this.reach.translate || this.reach.rotate || this.reach.scale)\n    return html`<canvas aria-label=\"Figure 3D 모델\" tabindex=\"0\" @pointerup=${this.pick} @keydown=${this.key}></canvas\n      >${any\n        ? html`<div gizmo>\n            ${(['translate', 'rotate', 'scale'] as const).map(\n              (mode, i) => html`<button\n                ?on=${this.mode === mode}\n                ?disabled=${!this.reach[mode]}\n                title=${`${i18next.t('figure.label.gizmo-' + mode)} (${'WER'[i]})`}\n                @click=${() => (this.mode = mode)}\n              >\n                ${i18next.t('figure.label.gizmo-' + mode)}\n              </button>`\n            )}\n          </div>`\n        : null}${this.parts.length ? null : html`<p>도형을 추가해 모델링을 시작하세요.</p>`}`\n  }\n  private key = (event: KeyboardEvent) => {\n    const mode = ({ w: 'translate', e: 'rotate', r: 'scale' } as const)[event.key.toLowerCase() as 'w' | 'e' | 'r']\n    if (mode && this.reach[mode]) this.mode = mode\n  }\n  protected firstUpdated() {\n    this.initialize()\n  }\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.hasUpdated) void this.updateComplete.then(() => this.initialize())\n  }\n  private initialize() {\n    if (this.initialized || !this.isConnected) return\n    const canvas = this.renderRoot.querySelector('canvas')!\n    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })\n    this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n    this.paintBackground()\n    /*\n      The app switches theme by the body's class (light · dark). Reading the colour once at start left a light\n      board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.\n    */\n    this.themeObserver = new MutationObserver(() => {\n      this.paintBackground()\n      this.draw()\n    })\n    this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })\n    this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))\n    const light = new THREE.DirectionalLight(0xffffff, 3)\n    light.position.set(1, 2, 3)\n    this.scene.add(light)\n    this.controls = new OrbitControls(this.camera, canvas)\n    this.controls.addEventListener('change', this.draw)\n    this.transform = new TransformControls(this.camera, canvas)\n    this.transform.setSpace('world')\n    this.transform.addEventListener('change', this.draw)\n    this.transform.addEventListener('dragging-changed', this.dragging)\n    this.transform.addEventListener('objectChange', this.follow)\n    this.scene.add(this.proxy, this.transform.getHelper())\n    this.observer = new ResizeObserver(() => {\n      const r = this.getBoundingClientRect()\n      if (r.width && r.height) {\n        this.renderer!.setSize(r.width, r.height, false)\n        this.camera.aspect = r.width / r.height\n        this.camera.updateProjectionMatrix()\n        this.draw()\n      }\n    })\n    this.observer.observe(this)\n    this.initialized = true\n    this.updateGeometry(true)\n  }\n  protected updated(changed: PropertyValues) {\n    if (this.initialized && (changed.has('parts') || changed.has('palette') || changed.has('context')))\n      this.updateGeometry(this.contextAtRender !== this.context)\n    if (this.initialized && ['parts', 'selected', 'reach', 'mode', 'context'].some(key => changed.has(key))) this.placeGizmo()\n  }\n  /** Puts the gizmo on the selected body, in a mode it may write — or takes it away. */\n  private placeGizmo() {\n    const transform = this.transform\n    if (!transform || this.dragStart) return\n    if (!this.reach[this.mode]) {\n      const first = (['translate', 'rotate', 'scale'] as const).find(mode => this.reach[mode])\n      if (first && first !== this.mode) {\n        this.mode = first\n        return\n      }\n    }\n    const body = this.group.children.find(child => child.name === this.selected) as THREE.Mesh | undefined\n    if (!body || !this.reach[this.mode]) {\n      transform.detach()\n      this.draw()\n      return\n    }\n    const position = new THREE.Vector3(),\n      quaternion = new THREE.Quaternion(),\n      scale = new THREE.Vector3()\n    body.matrix.decompose(position, quaternion, scale)\n    this.proxy.position.copy(position)\n    this.proxy.quaternion.copy(quaternion)\n    this.proxy.scale.set(1, 1, 1)\n    this.proxy.updateMatrixWorld(true)\n    transform.setMode(this.mode)\n    /* Size follows the body's own axes; moving and turning read in the asset's axes, which the inputs are in. */\n    transform.setSpace(this.mode === 'scale' ? 'local' : 'world')\n    transform.attach(this.proxy)\n    this.draw()\n  }\n  private dragging = (event: { value: unknown }) => {\n    const on = !!event.value\n    if (this.controls) this.controls.enabled = !on\n    const body = this.group.children.find(child => child.name === this.selected) as THREE.Mesh | undefined\n    if (on && body) {\n      this.proxy.updateMatrix()\n      this.dragStart = { proxy: this.proxy.matrix.clone(), mesh: body.matrix.clone(), body }\n      return\n    }\n    const start = this.dragStart\n    this.dragStart = undefined\n    if (!start) return\n    /* Either listener may see the release first; the flag lasts past both, then clears. */\n    this.justDragged = true\n    setTimeout(() => (this.justDragged = false))\n    const result: GizmoResult = {}\n    if (this.mode === 'translate') result.position = this.proxy.position.toArray() as [number, number, number]\n    if (this.mode === 'rotate') {\n      /* rigid@1 composes Rx·Ry·Rz — three's 'XYZ' order — so the angles come back as the inputs mean them. */\n      const euler = new THREE.Euler().setFromQuaternion(this.proxy.quaternion, 'XYZ')\n      result.rotation = [euler.x, euler.y, euler.z].map(THREE.MathUtils.radToDeg) as [number, number, number]\n    }\n    if (this.mode === 'scale') result.scale = this.proxy.scale.toArray() as [number, number, number]\n    this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: this.selected, result }, bubbles: true, composed: true }))\n  }\n  /** While dragging, the body follows the stand-in; the next evaluation replaces it with where the inputs put it. */\n  private follow = () => {\n    const start = this.dragStart\n    if (!start) return\n    this.proxy.updateMatrix()\n    const delta = this.proxy.matrix.clone().multiply(start.proxy.clone().invert())\n    start.body.matrix.copy(delta.multiply(start.mesh))\n    start.body.matrixWorldNeedsUpdate = true\n    this.group.updateMatrixWorld(true)\n  }\n  private updateGeometry(fit: boolean) {\n    try {\n      const wasEmpty = this.group.children.length === 0\n      replaceV3Meshes(this.group, this.parts, this.palette)\n      this.contextAtRender = this.context\n      if (fit || wasEmpty) this.fit()\n      this.draw()\n    } catch (error) {\n      // Do not leave another model's geometry visible after a failed context switch.\n      if (this.contextAtRender !== this.context) {\n        disposeV3Meshes(this.group)\n        this.draw()\n      }\n      this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }))\n    }\n  }\n  fit() {\n    const bounds = new THREE.Box3().setFromObject(this.group),\n      center = new THREE.Vector3(),\n      size = new THREE.Vector3()\n    if (!bounds.isEmpty()) {\n      bounds.getCenter(center)\n      bounds.getSize(size)\n    }\n    const radius = Math.max(size.length() / 2, 100),\n      distance = (radius / Math.sin(THREE.MathUtils.degToRad(this.camera.fov / 2))) * 1.3\n    this.camera.position.copy(center).add(new THREE.Vector3(1, 0.8, 1).normalize().multiplyScalar(distance))\n    this.camera.near = Math.max(0.01, distance / 10000)\n    this.camera.far = Math.max(10000, distance * 100)\n    this.camera.updateProjectionMatrix()\n    this.controls?.target.copy(center)\n    this.controls?.update()\n    this.draw()\n  }\n  /**\n   * The scene's background, taken from the host's computed background — the token resolved and normalised to\n   * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.\n   */\n  private paintBackground() {\n    const colour = getComputedStyle(this).backgroundColor\n    if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent') this.scene.background = new THREE.Color(colour)\n  }\n  private draw = () => {\n    if (this.renderer) this.renderer.render(this.scene, this.camera)\n  }\n  private pick = (event: PointerEvent) => {\n    if (this.justDragged || this.transform?.dragging) return\n    const r = (event.currentTarget as HTMLCanvasElement).getBoundingClientRect(),\n      ray = new THREE.Raycaster()\n    ray.setFromCamera(\n      new THREE.Vector2(((event.clientX - r.left) / r.width) * 2 - 1, (-(event.clientY - r.top) / r.height) * 2 + 1),\n      this.camera\n    )\n    const hit = ray.intersectObjects(this.group.children)[0]\n    this.dispatchEvent(\n      new CustomEvent('part-selected', { detail: hit?.object.name ?? '', bubbles: true, composed: true })\n    )\n  }\n  thumbnail() {\n    this.draw()\n    return this.renderer?.domElement.toDataURL('image/png')\n  }\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.themeObserver?.disconnect()\n    this.controls?.dispose()\n    this.transform?.detach()\n    this.transform?.dispose()\n    this.transform = undefined\n    disposeV3Meshes(this.group)\n    this.renderer?.dispose()\n    this.renderer = undefined\n    this.scene.clear()\n    this.initialized = false\n    super.disconnectedCallback()\n  }\n}\n"]}

package/dist-client/modeller/v3-editor.d.ts

@@ -1,6 +1,8 @@
 import { LitElement, type PropertyValues } from 'lit';
 import type { V3ProductSession } from './v3-product-session.js';
 import './v3-canvas.js';
+import './figure-v3-parts.js';
+import './figure-v3-material.js';
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 export declare class FigureV3Editor extends LitElement {
     static styles: import("lit").CSSResult;
@@ -8,12 +10,34 @@ export declare class FigureV3Editor extends LitElement {
     revision: number;
     private selected;
     private error;
+    /**
+     * Parts hidden on the workbench — the author's view while working, not the asset's visibility. Not saved, as in
+     * the V2 modeller: a part hidden here is still in the figure, still checked, still drawn on a board.
+     */
+    private hiddenParts;
     private lastContext;
     protected willUpdate(_changed: PropertyValues): void;
     private run;
     private changed;
     private save;
     private add;
+    /**
+     * The list's own operations, as V3 part edits — each one step of the session's history. The copy and the moved
+     * part stay selected, as they do in the V2 list.
+     */
+    private duplicatePart;
+    private movePart;
+    private removePart;
+    private toggleHiddenPart;
+    /** What the gizmo may write for the selected part — read off the asset being edited. */
+    private reachOf;
+    /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
+    private transformed;
+    /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
+    private align;
+    /** A mirrored copy: duplicate, then place the copy on the other side — two steps, as the V2 list makes it. */
+    private mirror;
+    private renderTools;
     private changeField;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-client/modeller/v3-editor.js

@@ -1,9 +1,14 @@
 import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css } from 'lit';
+import { i18next } from '@operato/i18n';
 import { customElement, property, state } from 'lit/decorators.js';
 import { captureV3Thumbnail } from './v3-thumbnail.js';
 import { drawableV3Parts } from './v3-renderer.js';
 import './v3-canvas.js';
+import './figure-v3-parts.js';
+import './figure-v3-material.js';
+import { gizmoChanges, gizmoReachOf } from './v3-gizmo.js';
+import { alignChanges, canMirror, mirrorChanges } from './v3-align.js';
 const names = {
     position: '위치',
     rotation: '회전',
@@ -36,6 +41,11 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         this.revision = 0;
         this.selected = '';
         this.error = '';
+        /**
+         * Parts hidden on the workbench — the author's view while working, not the asset's visibility. Not saved, as in
+         * the V2 modeller: a part hidden here is still in the figure, still checked, still drawn on a board.
+         */
+        this.hiddenParts = new Set();
         this.lastContext = null;
     }
     static { this.styles = css `
@@ -72,8 +82,8 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       overflow: auto;
       background: var(--md-sys-color-surface, #fff);
     }
-    aside:first-child {
-      border-right: 1px solid var(--md-sys-color-outline-variant);
+    figure-v3-parts {
+      min-height: 0;
     }
     aside:last-child {
       border-left: 1px solid var(--md-sys-color-outline-variant);
@@ -110,6 +120,24 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       color: var(--md-sys-color-on-secondary-container);
       border-color: var(--md-sys-color-primary);
     }
+    div[tools] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin: 0 0 8px;
+    }
+    div[tools] button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      padding: 0;
+    }
+    div[tools] md-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
     .parts {
       display: grid;
       gap: 6px;
@@ -165,7 +193,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       figure-v3-canvas {
         order: -1;
       }
-      aside:first-child {
+      figure-v3-parts {
         border-right: none;
         border-top: 1px solid var(--md-sys-color-outline-variant);
       }
@@ -180,6 +208,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.lastContext = view?.context ?? null;
             this.selected = '';
             this.error = '';
+            this.hiddenParts = new Set();
         }
         if (view && !view.geometry.some(g => g.id === this.selected))
             this.selected = '';
@@ -255,6 +284,122 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             this.selected = part.id;
         });
     }
+    /**
+     * The list's own operations, as V3 part edits — each one step of the session's history. The copy and the moved
+     * part stay selected, as they do in the V2 list.
+     */
+    duplicatePart(id) {
+        this.run(() => {
+            const before = new Set(this.session.read().geometry.map(g => g.id));
+            this.session.edit({ kind: 'duplicate-part', target: id });
+            this.selected = this.session.read().geometry.find(g => !before.has(g.id))?.id ?? id;
+        });
+    }
+    movePart(id, to) {
+        this.run(() => this.session.edit({ kind: 'move-part', target: id, to }));
+    }
+    removePart(id) {
+        try {
+            this.session.edit({ kind: 'remove-part', target: id });
+            this.error = '';
+            if (this.selected === id)
+                this.selected = '';
+            this.changed();
+        }
+        catch (error) {
+            /* The refusal a person meets most: another part stands on this one or follows its size. Said in their words. */
+            this.error =
+                error?.code === 'PART_REFERENCED'
+                    ? i18next.t('figure.text.part-is-referenced', { part: id })
+                    : error instanceof Error
+                        ? error.message
+                        : String(error);
+        }
+    }
+    toggleHiddenPart(id) {
+        const next = new Set(this.hiddenParts);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.hiddenParts = next;
+    }
+    /** What the gizmo may write for the selected part — read off the asset being edited. */
+    reachOf(id) {
+        const none = { translate: false, rotate: false, scale: false };
+        if (!id || !this.session)
+            return none;
+        try {
+            return gizmoReachOf(JSON.parse(this.session.source()), id);
+        }
+        catch {
+            return none;
+        }
+    }
+    /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
+    transformed(id, result) {
+        const view = this.session.read();
+        const sizes = Object.fromEntries(view.fields.map(field => [field.id, field.value]));
+        const changes = gizmoChanges(id, this.reachOf(id), result, sizes);
+        if (changes.length)
+            this.run(() => this.session.apply(changes));
+        else
+            this.requestUpdate();
+    }
+    /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
+    align(tool) {
+        this.run(() => {
+            const asset = JSON.parse(this.session.source());
+            const changes = alignChanges(asset, this.selected, this.reachOf(this.selected), tool);
+            if (changes.length)
+                this.session.apply(changes);
+        });
+    }
+    /** A mirrored copy: duplicate, then place the copy on the other side — two steps, as the V2 list makes it. */
+    mirror(axis) {
+        this.run(() => {
+            const id = this.selected;
+            const before = new Set(this.session.read().geometry.map(g => g.id));
+            this.session.edit({ kind: 'duplicate-part', target: id });
+            const copy = this.session.read().geometry.find(g => !before.has(g.id))?.id;
+            if (!copy)
+                return;
+            this.session.apply(mirrorChanges(JSON.parse(this.session.source()), id, copy, axis));
+            this.selected = copy;
+        });
+    }
+    renderTools(unavailable) {
+        const reach = this.reachOf(this.selected);
+        if (!this.selected || !reach.translate)
+            return null;
+        let asset;
+        try {
+            asset = JSON.parse(this.session.source());
+        }
+        catch {
+            return null;
+        }
+        const tool = (name, icon, label, title) => html `<button ?disabled=${unavailable} aria-label=${i18next.t(label)} title=${i18next.t(title)} @click=${() => this.align(name)}>
+        <md-icon>${icon}</md-icon>
+      </button>`;
+        return html `<div tools title=${i18next.t('figure.text.tools-explained')}>
+      ${tool('centre-x', 'horizontal_distribute', 'figure.button.center-x', 'figure.text.center-on-x')}
+      ${tool('centre-z', 'vertical_align_center', 'figure.button.center-z', 'figure.text.center-on-z')}
+      ${tool('floor', 'vertical_align_bottom', 'figure.button.to-floor', 'figure.text.put-on-floor')}
+      ${['x', 'z'].map(axis => {
+            const able = canMirror(asset, this.selected, axis, reach);
+            return html `<button
+          ?disabled=${unavailable || !able}
+          aria-label=${i18next.t('figure.button.mirror-' + axis)}
+          title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
+          @click=${() => this.mirror(axis)}
+        >
+          <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
+        </button>`;
+        })}
+      ${tool('snap', 'grid_on', 'figure.button.snap', 'figure.text.snap-explained')}
+    </div>`;
+    }
     changeField(field, event) {
         const input = event.target, value = input.valueAsNumber;
         this.run(() => this.session.apply([
@@ -291,27 +436,31 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
       </header>
       ${this.error || view.error ? html `<div role="alert" class="error">${this.error || view.error}</div>` : null}
       <main>
-        <aside>
-          <h3>도형 추가</h3>
-          <div class="recipes">
-            ${['box', 'cylinder', 'rounded-box', 'portal'].map((kind, i) => html `<button ?disabled=${unavailable} @click=${() => this.add(kind)}>${['상자', '원기둥', '둥근 상자', '문틀'][i]}</button>`)}
-          </div>
-          <h3>부품 ${view.geometry.length}</h3>
-          <div class="parts">
-            ${view.geometry.map(g => html `<button
-                  aria-pressed=${g.id === this.selected}
-                  @click=${() => {
-            this.selected = g.id;
-        }}
-                >
-                  ${g.id}
-                </button>`)}
-          </div>
-        </aside>
+        <figure-v3-parts
+          .parts=${view.geometry.map((g) => ({
+            id: g.id,
+            provider: g.shape?.provider ?? '',
+            hidden: this.hiddenParts.has(g.id),
+            invisible: g.visible === false
+        }))}
+          .selected=${this.selected}
+          ?locked=${unavailable}
+          @add-part=${(e) => this.add(e.detail.kind)}
+          @select-part=${(e) => (this.selected = e.detail.id)}
+          @toggle-part-hidden=${(e) => this.toggleHiddenPart(e.detail.id)}
+          @set-all-parts-hidden=${(e) => (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => g.id)) : new Set())}
+          @move-part-up=${(e) => this.movePart(e.detail.id, e.detail.to)}
+          @move-part-down=${(e) => this.movePart(e.detail.id, e.detail.to)}
+          @duplicate-part=${(e) => this.duplicatePart(e.detail.id)}
+          @remove-part=${(e) => this.removePart(e.detail.id)}
+        ></figure-v3-parts>
         <figure-v3-canvas
-          .parts=${drawableV3Parts(view.geometry ?? [])}
+          .parts=${drawableV3Parts(view.geometry ?? []).filter(body => !this.hiddenParts.has(body.id))}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
+          .selected=${this.selected}
+          .reach=${unavailable ? { translate: false, rotate: false, scale: false } : this.reachOf(this.selected)}
+          @part-transformed=${(e) => this.transformed(e.detail.id, e.detail.result)}
           @part-selected=${(e) => {
             this.selected = e.detail;
         }}
@@ -321,22 +470,15 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         ></figure-v3-canvas>
         <aside>
           <h3>${this.selected || '모델 입력'}</h3>
+          ${this.renderTools(unavailable)}
           ${fields.map(field => html `<label><span>${fieldLabel(field.id)} (${field.unit})${field.role === 'state' ? ' · 동작' : ''}</span><input aria-label=${field.id} type="number" step="any" .value=${String(field.value)} ?disabled=${unavailable} @change=${(e) => this.changeField(field, e)} /></label>`)}
           ${part
-            ? html `<h3>재질</h3>
-                  <label
-                    ><span>색 역할</span
-                    ><select
-                      .value=${part.material.token}
-                      ?disabled=${unavailable}
-                      @change=${(e) => this.run(() => this.session.edit({ kind: 'set-material', target: this.selected, material: { ...part.material, token: e.target.value } }))}
-                    >
-                      ${Object.keys(view.palette ?? {}).map(token => html `<option value=${token}>${token === 'palette.primary' ? '기본 몸체' : token}</option>`)}
-                    </select></label
-                  >
-                  <p class="hint">
-                    도형과 위치를 결정하는 입력을 편집합니다. 다른 부품과 공유하는 입력은 함께 영향을 줄 수 있습니다.
-                  </p>`
+            ? html `<figure-v3-material
+                  .body=${part}
+                  .palette=${view.palette ?? {}}
+                  ?locked=${unavailable}
+                  @v3-part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+                ></figure-v3-material>`
             : null}
           ${view.bindings.length
             ? html `<h3>배치 연결점</h3>
@@ -362,6 +504,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureV3Editor.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "hiddenParts", void 0);
 FigureV3Editor = __decorate([
     customElement('figure-v3-editor')
 ], FigureV3Editor);