@fmsim/machine 2.0.0-beta.3 → 2.0.0-beta.6

package/dist/factories/machine-3d.js

@@ -8,7 +8,9 @@
  *   - Unit: 낮은 depth, 불투명
  */
 import * as THREE from 'three';
-import { RealObjectGroup, registerRealObjectFactory } from '@hatiolab/things-scene';
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene';
+import { LEGEND_CAPACITY } from '../features/mcs-status-default';
+import { getVaueOnRanges } from '../utils/get-value-on-ranges';
 /**
  * 포트 기본 높이 (절대값).
  * 모든 이송장치의 상단 높이 = 이 값.
@@ -27,6 +29,8 @@ const DEFAULTS = {
 class MCSRealObject3D extends RealObjectGroup {
     constructor(component, config) {
         super(component);
+        // ── Change handling ──
+        this._updatePending = false;
         this._config = config;
     }
     // width, height 절대값 (음수 값은 양수로 취급)
@@ -139,7 +143,6 @@ class MCSRealObject3D extends RealObjectGroup {
         geo.rotateX(Math.PI / 2);
         return this.removeBottomFace(geo);
     }
-    // ── Build ──
     build() {
         var _a;
         super.build();
@@ -172,30 +175,143 @@ class MCSRealObject3D extends RealObjectGroup {
         material.polygonOffset = true;
         material.polygonOffsetFactor = -1;
         material.polygonOffsetUnit = -1;
-        const mesh = new THREE.Mesh(geometry, material);
+        // BoxGeometry material groups: +x(0), -x(1), +y(2), -y(3), +z(4), -z(5)
+        let meshMaterial = material;
+        if (shape === 'box') {
+            if (this._config.openTop) {
+                // 상단면 제거 → 5면 개방 박스
+                const invisible = new THREE.MeshBasicMaterial({ visible: false });
+                meshMaterial = [material, material, invisible, material, material, material];
+            }
+            else if (this._config.texturedTop) {
+                // 상판에 2D 렌더링 텍스처
+                const topMat = this.buildTopTexture(w, h);
+                meshMaterial = [material, material, topMat, material, material, material];
+            }
+            else if (this._config.matteTop) {
+                // 상판만 무반사
+                const matte = new THREE.MeshBasicMaterial({ color, opacity, transparent: opacity < 1 });
+                meshMaterial = [material, material, matte, material, material, material];
+            }
+        }
+        this._ownMesh = new THREE.Mesh(geometry, meshMaterial);
         // sizeRatio < 1이면 부모 중심에 배치 (rawDepth/2), 아니면 자체 중심 (depth/2)
-        mesh.position.y = ratio < 1 ? rawDepth / 2 : depth / 2;
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-        this.object3d.add(mesh);
+        this._ownMesh.position.y = ratio < 1 ? rawDepth / 2 : depth / 2;
+        this._ownMesh.castShadow = true;
+        this._ownMesh.receiveShadow = true;
+        this.object3d.add(this._ownMesh);
     }
-    // ── Change handling ──
     onchange(after, before) {
         if ('width' in after ||
             'height' in after ||
             'depth' in after ||
             'fillStyle' in after ||
             'strokeStyle' in after ||
-            'id' in after // Carrier: CARRIERNAME 변경 시 가시성 재판정
-        ) {
-            this.update();
+            'id' in after ||
+            'EMPTYTYPE' in after ||
+            'CARRIERSTATUS' in after) {
+            // 연속 setState에 의한 다중 rebuild 방지: 한 프레임에 한 번만 실행
+            if (!this._updatePending) {
+                this._updatePending = true;
+                queueMicrotask(() => {
+                    this._updatePending = false;
+                    this.update();
+                });
+            }
             return;
         }
         super.onchange(after, before);
     }
-    // RealObjectGroup 기본 동작 비활성화 (update()에서 일괄 처리)
+    /**
+     * 상판 텍스처: 컴포넌트의 2D render()를 캔버스에 그려서 텍스처로 사용
+     */
+    buildTopTexture(w, h) {
+        var _a;
+        const scale = 4;
+        const cw = this.nextPow2(w * scale);
+        const ch = this.nextPow2(h * scale);
+        const canvas = document.createElement('canvas');
+        canvas.width = cw;
+        canvas.height = ch;
+        const ctx = canvas.getContext('2d');
+        const statusColor = '#' + this.resolveColor().toString(16).padStart(6, '0');
+        const emptyType = ((_a = this.component.state) === null || _a === void 0 ? void 0 : _a.EMPTYTYPE) || '';
+        const text = emptyType === 'FULL' ? 'F' : emptyType === 'EMPTY' ? 'E' : emptyType === 'EMPTYEMPTY' ? 'X' : '';
+        // 실제 사용 영역 (nextPow2 이전 크기)
+        const usedW = w * scale;
+        const usedH = h * scale;
+        // 바탕: 캐리어 상태 색상 (사용 영역만)
+        ctx.fillStyle = statusColor;
+        ctx.fillRect(0, 0, usedW, usedH);
+        // 텍스트 (사용 영역 중앙)
+        if (text) {
+            const fontSize = Math.round(Math.min(usedW, usedH) * 0.7);
+            ctx.font = `bold ${fontSize}px Arial`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = '#000000';
+            ctx.fillText(text, usedW / 2, usedH / 2);
+        }
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.offset.set(0, 1 - usedH / ch);
+        texture.repeat.set(usedW / cw, usedH / ch);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        return new THREE.MeshBasicMaterial({
+            map: texture,
+            transparent: true,
+            side: THREE.DoubleSide,
+        });
+    }
+    nextPow2(n) {
+        if (!(n > 0))
+            return 1;
+        let v = Math.ceil(n);
+        v--;
+        v |= v >> 1;
+        v |= v >> 2;
+        v |= v >> 4;
+        v |= v >> 8;
+        v |= v >> 16;
+        return v + 1;
+    }
+    /**
+     * 자신의 mesh만 제거 후 rebuild.
+     * 기본 update()는 clear()로 object3d의 모든 children을 제거하는데,
+     * 컨테이너(Port 등)의 경우 자식 컴포넌트(Carrier 등)의 3D 오브젝트도 함께 제거됨.
+     * 이를 방지하기 위해 자신이 생성한 mesh만 제거한다.
+     */
+    update() {
+        // 자신의 mesh만 제거 (자식 컴포넌트 3D 오브젝트 보존)
+        if (this._ownMesh) {
+            this.object3d.remove(this._ownMesh);
+            disposeObject3D(this._ownMesh);
+            this._ownMesh = undefined;
+        }
+        this.build();
+        this.updateTransform();
+        this.updateAlpha();
+        this.updateHidden();
+    }
+    // RealObjectGroup 기본 동작 비활성화
     updateDimension() { }
-    updateAlpha() { }
+    updateAlpha() {
+        const { alpha = 1 } = this.component.state;
+        const configOpacity = this._config.opacity;
+        const effective = configOpacity * alpha;
+        this.object3d.traverse((o) => {
+            if (!o.material)
+                return;
+            const materials = Array.isArray(o.material) ? o.material : [o.material];
+            for (const m of materials) {
+                if (!m.visible)
+                    continue; // openTop invisible face 무시
+                if (m.map)
+                    continue; // 텍스처 material은 자체 transparent 유지
+                m.opacity = effective;
+                m.transparent = effective < 1;
+            }
+        });
+    }
 }
 // ── 팩토리 등록 헬퍼 ─────────────────────────────────────
 function register(type, overrides = {}) {
@@ -207,14 +323,14 @@ function register(type, overrides = {}) {
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 register('Equipment', {
     defaultDepth: 3 * TRANSPORT_SURFACE_HEIGHT,
-    opacity: 0.5,
+    opacity: 0.75,
     metalness: 0.4,
     roughness: 0.6,
     defaultColor: 0x8899aa,
 });
 register('Buffer', {
     defaultDepth: TRANSPORT_SURFACE_HEIGHT,
-    opacity: 0.5,
+    opacity: 1.0,
     metalness: 0.3,
     roughness: 0.7,
     defaultColor: 0x99aa88,
@@ -232,57 +348,280 @@ register('OHTLine', {
     roughness: 0.3,
     defaultColor: 0x888899,
 });
-register('STOCKER', {
-    defaultDepth: 5 * TRANSPORT_SURFACE_HEIGHT,
-    opacity: 0.35,
-    metalness: 0.3,
-    roughness: 0.6,
-    defaultColor: 0x8899bb,
-});
+// STOCKER: 벽면에 용량 게이지 바를 포함하는 커스텀 3D 오브젝트
+const STOCKER_CONFIG = Object.assign(Object.assign({}, DEFAULTS), { defaultDepth: 5 * TRANSPORT_SURFACE_HEIGHT, opacity: 0.75, metalness: 0.3, roughness: 0.6, defaultColor: 0x8899bb });
+class StockerRealObject3D extends MCSRealObject3D {
+    constructor(component) {
+        super(component, STOCKER_CONFIG);
+    }
+    build() {
+        super.build();
+        this.buildGauge();
+    }
+    buildGauge() {
+        var _a, _b;
+        const comp = this.component;
+        const data = comp.data || {};
+        const gaugeMode = ((_b = (_a = comp.root) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.stockerGaugeMode) || 'capacity';
+        const gauge = this.resolveGauge(data, gaugeMode);
+        // 테두리는 스토커의 상태 색상 (machine status)
+        const statusColor = comp.statusColor;
+        if (statusColor && statusColor.toUpperCase() !== '#F0F0F0') {
+            gauge.borderColor = statusColor;
+        }
+        const { w, h } = this.absSize;
+        const depth = this.effectiveDepth;
+        const isWidthLonger = w >= h;
+        // 게이지 캔버스 (고해상도)
+        const barW = 130;
+        const barH = 26;
+        const scale = 4;
+        const canvasW = barW * scale;
+        const canvasH = barH * scale;
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasW;
+        canvas.height = canvasH;
+        const ctx = canvas.getContext('2d');
+        const pad = 12;
+        // 배경 + 테두리
+        ctx.fillStyle = '#dddddd';
+        ctx.fillRect(0, 0, canvasW, canvasH);
+        ctx.strokeStyle = gauge.borderColor;
+        ctx.lineWidth = 12;
+        ctx.strokeRect(6, 6, canvasW - 12, canvasH - 12);
+        // 세그먼트 채움 (왼→오)
+        const innerW = canvasW - pad * 2;
+        const innerH = canvasH - pad * 2;
+        let x = pad;
+        for (const seg of gauge.segments) {
+            const segW = Math.max(innerW * seg.ratio, seg.ratio > 0 ? 1 : 0);
+            if (segW <= 0)
+                continue;
+            ctx.fillStyle = seg.color;
+            ctx.fillRect(x, pad, segW, innerH);
+            x += segW;
+        }
+        // 텍스트
+        ctx.font = `bold ${10 * scale}px sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = '#333333';
+        ctx.fillText(gauge.label, canvasW / 2, canvasH / 2);
+        // 텍스처 → Plane
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        const geo = new THREE.PlaneGeometry(barW, barH);
+        geo.rotateX(-Math.PI / 2); // 수평 (지붕 위)
+        if (!isWidthLonger)
+            geo.rotateY(Math.PI / 2);
+        const mat = new THREE.MeshBasicMaterial({
+            map: texture,
+            transparent: true,
+            side: THREE.DoubleSide,
+        });
+        mat.polygonOffset = true;
+        mat.polygonOffsetFactor = -2;
+        mat.polygonOffsetUnit = -2;
+        this.gaugeMesh = new THREE.Mesh(geo, mat);
+        this.gaugeMesh.position.set(0, depth + 0.5, 0);
+        this.object3d.add(this.gaugeMesh);
+    }
+    resolveGauge(data, mode) {
+        var _a, _b;
+        switch (mode) {
+            case 'carrier': {
+                const full = Number(data.FULL_CNT) || 0;
+                const empty = Number(data.EMPTY_CNT) || 0;
+                const emptyEmpty = Number(data.EMPTYEMPTY_CNT) || 0;
+                const total = full + empty + emptyEmpty;
+                const segments = total > 0
+                    ? [
+                        { ratio: full / total, color: '#4AA7FE' },
+                        { ratio: empty / total, color: '#8BDA5B' },
+                        { ratio: emptyEmpty / total, color: '#019D59' },
+                    ]
+                    : [{ ratio: 1, color: '#dddddd' }];
+                return {
+                    segments,
+                    borderColor: '#4AA7FE',
+                    label: total > 0 ? `F${full} E${empty} EE${emptyEmpty}` : '',
+                };
+            }
+            case 'abnormal': {
+                const normal = Number(data.CARRIER_NORMAL) || 0;
+                const abnormal = Number(data.CARRIER_ABNORMAL) || 0;
+                const total = normal + abnormal;
+                const segments = total > 0
+                    ? [
+                        { ratio: normal / total, color: '#8BDA5B' },
+                        { ratio: abnormal / total, color: '#F4B4B4' },
+                    ]
+                    : [{ ratio: 1, color: '#dddddd' }];
+                return {
+                    segments,
+                    borderColor: abnormal > 0 ? '#F4B4B4' : '#8BDA5B',
+                    label: total > 0 ? `N${normal} A${abnormal}` : '',
+                };
+            }
+            default: { // capacity
+                const cur = Number(data.CURRENTCAPACITY) || 0;
+                const max = Number(data.MAXCAPACITY) || 100;
+                const fullup = data.FULLUP === 'T';
+                const usage = Math.round((cur / max) * 100);
+                const legend = ((_b = (_a = this.component.root) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.LEGEND_CAPACITY) || LEGEND_CAPACITY;
+                const color = fullup ? 'red' : (getVaueOnRanges(usage, legend) || '#44aa44');
+                return {
+                    segments: [{ ratio: usage / 100, color }],
+                    borderColor: color,
+                    label: `${usage}%`,
+                };
+            }
+        }
+    }
+    onchange(after, before) {
+        if ('data' in after) {
+            this.clearGauge();
+            this.buildGauge();
+        }
+        super.onchange(after, before);
+    }
+    clear() {
+        this.clearGauge();
+        return super.clear();
+    }
+    clearGauge() {
+        var _a, _b;
+        if (this.gaugeMesh) {
+            this.object3d.remove(this.gaugeMesh);
+            (_a = this.gaugeMesh.geometry) === null || _a === void 0 ? void 0 : _a.dispose();
+            const mat = this.gaugeMesh.material;
+            (_b = mat === null || mat === void 0 ? void 0 : mat.map) === null || _b === void 0 ? void 0 : _b.dispose();
+            mat === null || mat === void 0 ? void 0 : mat.dispose();
+            this.gaugeMesh = undefined;
+        }
+    }
+}
+registerRealObjectFactory('STOCKER', (component) => new StockerRealObject3D(component));
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 //  Unit (이동체 · 홀더) — 낮은 depth, 불투명
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-register('Port', {
-    depthRatio: 0.5,
-    defaultZPosFromParent: true,
-    opacity: 0.5,
-    metalness: 0.4,
-    roughness: 0.6,
-    defaultColor: 0xb0a090,
-});
+// Port: 상부 개방 5면 박스
+const PORT_CONFIG = Object.assign(Object.assign({}, DEFAULTS), { depthRatio: 0.5, defaultZPosFromParent: true, opacity: 0.5, metalness: 0.4, roughness: 0.6, defaultColor: 0xb0a090, openTop: true });
+registerRealObjectFactory('Port', (component) => new MCSRealObject3D(component, PORT_CONFIG));
 register('Shelf', {
     depthRatio: 0.25,
     metalness: 0.3,
     roughness: 0.7,
     defaultColor: 0xaabbcc,
 });
-register('Carrier', {
-    depthRatio: 0.5,
-    metalness: 0.2,
-    roughness: 0.8,
-    defaultColor: 0x66bb66,
-    isVisible: (c) => !!c.state.id,
-    sizeRatio: 0.8,
-});
+// Carrier: CARRIERSTATUS에 따른 3D 애니메이션 지원
+const CARRIER_CONFIG = Object.assign(Object.assign({}, DEFAULTS), { depthRatio: 0.5, metalness: 0.2, roughness: 0.8, defaultColor: 0x66bb66, isVisible: (c) => !!c.state.id, sizeRatio: 0.8, texturedTop: true });
+class CarrierRealObject3D extends MCSRealObject3D {
+    constructor(component) {
+        super(component, CARRIER_CONFIG);
+        this._animRaf = null;
+        this._animStartTime = 0;
+    }
+    build() {
+        super.build();
+        this.startCarrierAnimation();
+    }
+    /**
+     * CARRIERSTATUS의 애니메이션 설정을 읽어 3D에서 직접 실행.
+     * things-scene의 delta 시스템과 독립적으로 동작.
+     */
+    startCarrierAnimation() {
+        var _a, _b, _c;
+        this.stopCarrierAnimation();
+        const comp = this.component;
+        if (!((_a = comp.app) === null || _a === void 0 ? void 0 : _a.isViewMode))
+            return;
+        const carrierStatus = (_b = comp.state) === null || _b === void 0 ? void 0 : _b.CARRIERSTATUS;
+        if (!carrierStatus)
+            return;
+        // 애니메이션 설정 가져오기
+        const config = (_c = comp.getAnimationConfig) === null || _c === void 0 ? void 0 : _c.call(comp, carrierStatus);
+        if (!(config === null || config === void 0 ? void 0 : config.animation))
+            return;
+        const { type, duration = 2000, scale: animScale = 1.3 } = config.animation;
+        if (!type)
+            return;
+        this._animStartTime = performance.now();
+        // 애니메이션 대상: group(object3d) — mesh 개별 변환 대신 group 전체를 변환하여
+        // 회전/스케일 중심이 component의 3D 위치(= 2D 중심)와 정확히 일치하도록 함
+        const obj = this.object3d;
+        const animate = () => {
+            var _a;
+            if (!this._ownMesh)
+                return;
+            const elapsed = performance.now() - this._animStartTime;
+            const progress = (elapsed % duration) / duration; // 0~1 반복
+            switch (type) {
+                case 'heartbeat': {
+                    const t = progress < 0.5 ? progress * 2 : (1 - progress) * 2;
+                    const s = 1 + (animScale - 1) * t;
+                    obj.scale.set(s, 1, s);
+                    break;
+                }
+                case 'rotation': {
+                    obj.rotation.y = progress * Math.PI * 2;
+                    break;
+                }
+                case 'vibration': {
+                    const theta = (_a = config.animation.theta) !== null && _a !== void 0 ? _a : 0.26;
+                    const current = Math.sin(progress * Math.PI * 2) * theta;
+                    obj.rotation.y = current;
+                    break;
+                }
+                case 'fade': {
+                    const alpha = 0.3 + 0.7 * (progress < 0.5 ? progress * 2 : (1 - progress) * 2);
+                    obj.traverse((o) => {
+                        if (o.material && !o.material.map) {
+                            o.material.opacity = alpha;
+                            o.material.transparent = true;
+                        }
+                    });
+                    break;
+                }
+            }
+            this._animRaf = requestAnimationFrame(animate);
+        };
+        this._animRaf = requestAnimationFrame(animate);
+    }
+    // 자체 애니메이션이 실행 중이면 things-scene의 syncAnimationDelta 비활성화
+    syncAnimationDelta() {
+        if (!this._animRaf) {
+            super.syncAnimationDelta();
+        }
+    }
+    stopCarrierAnimation() {
+        if (this._animRaf) {
+            cancelAnimationFrame(this._animRaf);
+            this._animRaf = null;
+        }
+        // group 스케일/회전 초기화
+        this.object3d.scale.set(1, 1, 1);
+        this.object3d.rotation.y = 0;
+    }
+    update() {
+        this.stopCarrierAnimation();
+        super.update();
+    }
+    clear() {
+        this.stopCarrierAnimation();
+        return super.clear();
+    }
+}
+registerRealObjectFactory('Carrier', (component) => new CarrierRealObject3D(component));
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 //  Gauge (용량 게이지) — 얇은 바
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-register('ZoneCapacityBar', {
-    depthRatio: 0.15,
-    metalness: 0.2,
-    roughness: 0.8,
-    defaultColor: 0x44aa44,
-});
-register('StockerCapacityBar', {
-    depthRatio: 0.15,
-    metalness: 0.2,
-    roughness: 0.8,
-    defaultColor: 0x44aa44,
-});
-register('MCSGaugeCapacityBar', {
-    depthRatio: 0.15,
-    metalness: 0.2,
-    roughness: 0.8,
-    defaultColor: 0x44aa44,
-});
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+//  Gauge (용량 게이지) — 2D 렌더링을 Plane 텍스처로 3D 표시
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Gauge 컴포넌트 (StockerCapacityBar, ZoneCapacityBar, MCSGaugeCapacityBar)는
+// 3D에서 표시하지 않음. 대신 부모(STOCKER 등)의 3D 모델에서 직접 게이지를 렌더링.
+registerRealObjectFactory('StockerCapacityBar', () => null);
+registerRealObjectFactory('MCSGaugeCapacityBar', () => null);
+registerRealObjectFactory('ZoneCapacityBar', () => null);
 //# sourceMappingURL=machine-3d.js.map