@things-factory/figure-ui 10.1.46 → 10.1.48

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

@@ -1,305 +1,263 @@
 import { __decorate, __metadata } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
+import { customElement, property, query } 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. */
+import { create, Model, niceGridStep } from '@hatiolab/things-scene';
+import { DEFAULT_VIEW, sceneLook, WORKBENCH } from './figure-view.js';
+import { boardFor, changedKeys, componentOf, gizmoResultOf } from './v3-stage-model.js';
+import { JOINT_FAN } from './v3-joint-fan.js';
+/* The fan's colour when the figure's palette names no accent. */
+const FAN_COLOUR = '#ff8a00';
+/* The 2D side of the board, which the author never sees on this page but the scene paints. */
+const PAPER = '#ffffff';
 let FigureV3Canvas = class FigureV3Canvas extends LitElement {
     constructor() {
         super(...arguments);
         this.parts = [];
         this.palette = {};
+        /** Which figure is open. Another one stands the board up again. */
         this.context = '';
-        /** The selected part, and what the gizmo may write for it (`gizmoReachOf`). Nothing reachable, no gizmo. */
         this.selected = '';
+        /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */
         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];
-            this.dispatchEvent(new CustomEvent('part-selected', { detail: hit?.object.name ?? '', bubbles: true, composed: true }));
-        };
+        this.view = DEFAULT_VIEW;
+        /**
+         * View only: nothing that happens on the board is told out. The card's picture is taken from a second canvas stood up
+         * off screen (`v3-thumbnail.ts`); the scene settles its components as it builds them, and a change told from there
+         * would reach the editor as an edit (V2's `viewOnly`, for the same reason).
+         */
+        this.viewOnly = false;
+        /** Where the selected part turns and how far (`v3-joint-fan`): shown, never picked, never saved. */
+        this.fan = null;
+        /** Set while this canvas writes to components, so the scene's echo of it is not taken for a drag. */
+        this.writing = false;
     }
     static { this.styles = css `
     :host {
-      display: block;
-      min-width: 0;
-      min-height: 0;
       position: relative;
-      /*
-        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238
-        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the
-        first paint and the scene agree and there is no flash between them.
-      */
-      background: var(--md-sys-color-surface-container);
+      display: flex;
+      min-height: 0;
+      overflow: hidden;
+      background-color: ${unsafeCSS(WORKBENCH)};
     }
-    canvas {
-      display: block;
+    /* The scene sets position: relative inline on its target; the size is given so it still fills the host. */
+    div[stage] {
+      position: absolute;
+      inset: 0;
       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;
+      margin: 0;
       text-align: center;
       pointer-events: none;
-      color: var(--md-sys-color-on-surface-variant);
+      color: #f4f4f4;
     }
   `; }
     render() {
-        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>`}`;
+        return html `<div stage></div>${this.parts.length ? nothing : html `<p>${i18next.t('figure.text.add-a-shape-to-start')}</p>`}`;
     }
     firstUpdated() {
-        this.initialize();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.hasUpdated)
-            void this.updateComplete.then(() => this.initialize());
+        this.standUp();
+        this.watcher = new ResizeObserver(() => this.scene?.resize?.());
+        this.watcher.observe(this);
     }
-    initialize() {
-        if (this.initialized || !this.isConnected)
+    updated(changed) {
+        if (!this.hasUpdated)
             return;
-        const canvas = this.renderRoot.querySelector('canvas');
-        this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
-        this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
-        this.paintBackground();
-        /*
-          The app switches theme by the body's class (light · dark). Reading the colour once at start left a light
-          board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.
-        */
-        this.themeObserver = new MutationObserver(() => {
-            this.paintBackground();
-            this.draw();
-        });
-        this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
-        this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5));
-        const light = new THREE.DirectionalLight(0xffffff, 3);
-        light.position.set(1, 2, 3);
-        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) {
-                this.renderer.setSize(r.width, r.height, false);
-                this.camera.aspect = r.width / r.height;
-                this.camera.updateProjectionMatrix();
-                this.draw();
-            }
-        });
-        this.observer.observe(this);
-        this.initialized = true;
-        this.updateGeometry(true);
+        if (changed.has('parts') || changed.has('palette') || changed.has('context') || changed.has('fan'))
+            this.standUp();
+        if (changed.has('view'))
+            this.applyView();
+        if (changed.has('selected'))
+            this.showSelected();
     }
-    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();
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+        this.watcher = undefined;
+        this.teardown();
     }
-    /** 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;
-            }
+    /**
+     * The board as a picture, for the card: the 3D view at this size, or nothing when it cannot be taken. The scene's
+     * `toDataURL` renders the 2D board (a white sheet, V2 found), and the 3D renderer keeps no drawing buffer, so the
+     * scene's own `snapshot3d` draws and reads in one task. A picture that cannot be taken is not an error and is not
+     * faked (V2's `snapshot`, lost when this canvas moved onto the scene -- no card had a picture since, user 2026-09-24).
+     */
+    async snapshot(width = 480, height = 360) {
+        const layer = this.scene?.root;
+        if (!layer?.snapshot3d)
+            return undefined;
+        try {
+            /* webp: a card needs no alpha, and png is three or four times heavier in every list response. */
+            const url = await layer.snapshot3d(width, height, 'image/webp', 0.85);
+            return typeof url === 'string' && url.startsWith('data:') ? url : undefined;
         }
-        const body = this.group.children.find(child => child.name === this.selected);
-        if (!body || !this.reach[this.mode]) {
-            transform.detach();
-            this.draw();
-            return;
+        catch (e) {
+            console.warn(`[thumbnail] could not take the picture -- ${e.message}`);
+            return undefined;
         }
-        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) {
+    /** The whole figure in view: the board's fit, then the 3D camera's own, as V2 did. */
+    fit() {
+        this.scene?.fit?.('ratio');
+        this.scene?.root?.fitCameraToModel?.();
+    }
+    /**
+     * Stand the board up for this figure, or bring the one standing up to date. A new board only for another figure or
+     * one that has outgrown it -- standing up again loses the selection and the camera.
+     */
+    standUp() {
+        if (!this.stage)
+            return;
+        const needed = boardFor(this.parts, this.board);
+        const outgrown = !this.board || needed.width > this.board.width || needed.height > this.board.height || needed.depth > this.board.depth;
+        if (this.scene && this.standingFor === this.context && !outgrown) {
+            this.sync();
+            return;
+        }
+        this.teardown();
+        if (!this.parts.length)
+            return;
+        this.board = needed;
         try {
-            const wasEmpty = this.group.children.length === 0;
-            replaceV3Meshes(this.group, this.parts, this.palette);
-            this.contextAtRender = this.context;
-            if (fit || wasEmpty)
-                this.fit();
-            this.draw();
+            this.scene = create({
+                target: this.stage,
+                model: {
+                    type: 'model-layer',
+                    width: needed.width,
+                    height: needed.height,
+                    depth: needed.depth,
+                    threed: true,
+                    /* Two samples a pixel: MSAA alone leaves steps on the silhouettes of one asset shown large (V2). */
+                    pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+                    ...sceneLook(this.view ?? DEFAULT_VIEW),
+                    gridStep: niceGridStep(Math.max(needed.width, needed.height)),
+                    sky: 'color',
+                    fillStyle: PAPER,
+                    components: this.components()
+                },
+                /* Editing mode: the camera view buttons, gizmo modes, help and keys V2's canvas had. */
+                mode: 1
+            });
+            this.standingFor = this.context;
+            this.watchScene();
+            this.scene.resize?.();
+            this.fit();
+            this.showSelected();
         }
         catch (error) {
-            // Do not leave another model's geometry visible after a failed context switch.
-            if (this.contextAtRender !== this.context) {
-                disposeV3Meshes(this.group);
-                this.draw();
-            }
             this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }));
         }
     }
-    fit() {
-        const bounds = new THREE.Box3().setFromObject(this.group), center = new THREE.Vector3(), size = new THREE.Vector3();
-        if (!bounds.isEmpty()) {
-            bounds.getCenter(center);
-            bounds.getSize(size);
+    components() {
+        const parts = this.parts.map(part => componentOf(part, this.palette, this.board)).filter((c) => !!c);
+        /* The fan in the accent colour, translucent; `capturable: false` keeps clicks, the marquee and the gizmo off it. */
+        const fan = this.fan ? componentOf(this.fan, { ...this.palette, [JOINT_FAN]: this.palette['palette.accent'] ?? FAN_COLOUR }, this.board) : null;
+        return fan ? [...parts, { ...fan, capturable: false, locked: true }] : parts;
+    }
+    /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */
+    standing() {
+        const found = new Map();
+        for (const component of this.scene?.root?.components ?? []) {
+            const name = component.state?.name;
+            if (typeof name === 'string')
+                found.set(name, component);
         }
-        const radius = Math.max(size.length() / 2, 100), distance = (radius / Math.sin(THREE.MathUtils.degToRad(this.camera.fov / 2))) * 1.3;
-        this.camera.position.copy(center).add(new THREE.Vector3(1, 0.8, 1).normalize().multiplyScalar(distance));
-        this.camera.near = Math.max(0.01, distance / 10000);
-        this.camera.far = Math.max(10000, distance * 100);
-        this.camera.updateProjectionMatrix();
-        this.controls?.target.copy(center);
-        this.controls?.update();
-        this.draw();
+        return found;
     }
-    /**
-     * The scene's background, taken from the host's computed background — the token resolved and normalised to
-     * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.
-     */
-    paintBackground() {
-        const colour = getComputedStyle(this).backgroundColor;
-        if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent')
-            this.scene.background = new THREE.Color(colour);
+    /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */
+    sync() {
+        const layer = this.scene?.root;
+        if (!layer || !this.board)
+            return;
+        const wanted = new Map(this.components().map(c => [c.name, c]));
+        const standing = this.standing();
+        this.writing = true;
+        try {
+            for (const [name, component] of standing) {
+                if (wanted.has(name))
+                    continue;
+                layer.removeComponent?.(component);
+                component.dispose?.();
+            }
+            for (const [name, state] of wanted) {
+                const found = standing.get(name);
+                if (found) {
+                    const diff = changedKeys(found.state, state);
+                    if (diff)
+                        found.set(diff);
+                    continue;
+                }
+                const made = Model.compile({ ...state }, layer.app);
+                if (made)
+                    layer.addComponent?.(made);
+            }
+        }
+        finally {
+            this.writing = false;
+        }
+        layer.invalidate?.();
+    }
+    /** Selection and drags, told out by the part's name -- never by its place in the list, which may change meanwhile. */
+    watchScene() {
+        const layer = this.scene?.root;
+        const root = layer?.root;
+        if (!layer || !root?.on || this.viewOnly)
+            return;
+        root.on('selected', (after) => {
+            const name = after?.[0]?.state?.name;
+            const id = typeof name === 'string' ? name : '';
+            if (id !== this.selected)
+                this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }));
+        });
+        /*
+          A change comes up to the board with the component in the last argument's `origin` (the scene appends
+          { origin, name, deliverer } as it bubbles). Reading the first argument as the component does nothing (V2).
+        */
+        layer.on?.('change', (...args) => {
+            if (this.writing)
+                return;
+            const origin = args[args.length - 1]?.origin;
+            const name = origin?.state?.name;
+            const part = typeof name === 'string' ? this.parts.find(p => p.id === name) : undefined;
+            if (!part || !this.board)
+                return;
+            const result = gizmoResultOf(part, origin.state, this.board);
+            if (!result.position && !result.rotation && !result.scale)
+                return;
+            this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }));
+            /* After the editor has applied (or refused) it: a refused change springs back to where the inputs put it. */
+            setTimeout(() => this.sync());
+        });
+    }
+    showSelected() {
+        const layer = this.scene?.root;
+        const root = layer?.root;
+        if (!layer || !root)
+            return;
+        const component = this.selected ? this.standing().get(this.selected) : undefined;
+        const now = root.selected ?? [];
+        if ((now[0] ?? undefined) === component && now.length === (component ? 1 : 0))
+            return;
+        root.selected = component ? [component] : [];
+        layer.invalidate?.();
     }
-    thumbnail() {
-        this.draw();
-        return this.renderer?.domElement.toDataURL('image/png');
+    /** View settings go into the scene as they are: they are the board's own state names. Nothing is stood up again. */
+    applyView() {
+        const layer = this.scene?.root;
+        if (!layer)
+            return;
+        layer.set(sceneLook(this.view ?? DEFAULT_VIEW));
+        layer.invalidate?.();
     }
-    disconnectedCallback() {
-        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;
-        this.scene.clear();
-        this.initialized = false;
-        super.disconnectedCallback();
+    teardown() {
+        this.scene?.dispose?.();
+        this.scene = undefined;
+        this.standingFor = undefined;
+        this.board = undefined;
     }
 };
 __decorate([
@@ -323,9 +281,21 @@ __decorate([
     __metadata("design:type", Object)
 ], FigureV3Canvas.prototype, "reach", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", String)
-], FigureV3Canvas.prototype, "mode", void 0);
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Canvas.prototype, "view", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureV3Canvas.prototype, "viewOnly", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureV3Canvas.prototype, "fan", void 0);
+__decorate([
+    query('div[stage]'),
+    __metadata("design:type", HTMLDivElement)
+], FigureV3Canvas.prototype, "stage", void 0);
 FigureV3Canvas = __decorate([
     customElement('figure-v3-canvas')
 ], FigureV3Canvas);