@fmsim/machine 2.0.0-beta.99 → 2.0.1

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

@@ -9,11 +9,11 @@
  */
 import * as THREE from 'three';
 import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
-import { RealObjectGroup, registerRealObjectFactory, disposeObject3D } from '@hatiolab/things-scene';
-import { LEGEND_CAPACITY } from '../features/mcs-status-default';
+import { RealObjectGroup, registerRealObjectFactory, disposeObject3D, MaterialBank } from '@hatiolab/things-scene';
+import { LEGEND_CAPACITY, resolveCarrierLegend } from '../features/mcs-status-default';
 import { getValueOnRanges } from '../utils/get-value-on-ranges';
 import { fitGaugeScale } from '../utils/fit-gauge-scale';
-import { carrierSegmentsFromData, abnormalSegmentsFromData, CARRIER_COLORS, ABNORMAL_COLORS } from '../utils/stocker-gauge';
+import { carrierSegmentsFromData, abnormalSegmentsFromData, carrierColorsFromLegend, ABNORMAL_COLORS } from '../utils/stocker-gauge';
 import { Z_FMSIM } from './z-priority';
 /**
  * 포트 기본 높이 (절대값).
@@ -232,6 +232,8 @@ class MCSRealObject3D extends RealObjectGroup {
                     ? this.buildTriangleGeometry(depth)
                     : this.buildBoxGeometry(w, depth, h);
         const isPlane = shape === 'plane';
+        // Standard body 는 MaterialBank 공유(색 변형) — 인스턴스 dedup + faint 안전(코어가 공유 base 의
+        // 변형만 스왑, 원본 base 불변). plane 은 unlit MeshBasicMaterial 이라 bank(Standard 전용) 비대상 → raw.
         const material = isPlane
             ? new THREE.MeshBasicMaterial({
                 color,
@@ -239,11 +241,13 @@ class MCSRealObject3D extends RealObjectGroup {
                 transparent: opacity < 1,
                 side: THREE.DoubleSide,
             })
-            : new THREE.MeshStandardMaterial(Object.assign({ color,
-                metalness,
+            : MaterialBank.material('mcs|body', Object.assign({ metalness,
                 roughness,
-                opacity, transparent: opacity < 1, side: opacity < 1 ? THREE.DoubleSide : THREE.FrontSide }, (this._config.emissiveIntensity ? { emissive: color, emissiveIntensity: this._config.emissiveIntensity } : {})));
-        // z-fighting 방지: 바닥면(floor grid)보다 항상 앞에 렌더링
+                opacity, side: opacity < 1 ? THREE.DoubleSide : THREE.FrontSide }, (this._config.emissiveIntensity
+                ? { emissive: color, emissiveIntensity: this._config.emissiveIntensity }
+                : {})), color);
+        // z-fighting 방지: 바닥면(floor grid)보다 앞. bank body 는 공유 base 라 polygonOffset 은 모든 mcs
+        // body 공통 상수 — 반환 material 에 세팅(같은 값이라 멱등, 인스턴스별 발산 없음).
         material.polygonOffset = true;
         material.polygonOffsetFactor = -1;
         material.polygonOffsetUnit = -1;
@@ -275,6 +279,10 @@ class MCSRealObject3D extends RealObjectGroup {
         this._ownMesh.castShadow = !isPlane;
         this._ownMesh.receiveShadow = true;
         this.components3D.add(this._ownMesh);
+        // mesh 는 super.build() *이후* 생성되므로, 코어의 build-시점 faint 적용이 이 mesh 에 못 닿는다.
+        // mesh 생성 직후 명시 적용 — 코어 applyMaterialOpacity 가 content-alpha × faint 를 일괄 처리.
+        // view 모드에선 factor=1(=state.alpha 없음) → canonical(config.opacity) 그대로, 고객 화면 불변.
+        this.updateAlpha();
     }
     onchange(after, before) {
         if ('width' in after ||
@@ -284,7 +292,8 @@ class MCSRealObject3D extends RealObjectGroup {
             'strokeStyle' in after ||
             'id' in after ||
             'EMPTYTYPE' in after ||
-            'CARRIERSTATUS' in after) {
+            'CARRIERSTATUS' in after ||
+            'showText' in after) {
             // 연속 setState에 의한 다중 rebuild 방지: 한 프레임에 한 번만 실행
             if (!this._updatePending) {
                 this._updatePending = true;
@@ -301,7 +310,7 @@ class MCSRealObject3D extends RealObjectGroup {
      * 상판 텍스처: 컴포넌트의 2D render()를 캔버스에 그려서 텍스처로 사용
      */
     buildTopTexture(w, h) {
-        var _a;
+        var _a, _b;
         const scale = 4;
         const cw = this.nextPow2(w * scale);
         const ch = this.nextPow2(h * scale);
@@ -318,8 +327,9 @@ class MCSRealObject3D extends RealObjectGroup {
         // 바탕: 캐리어 상태 색상 (사용 영역만)
         ctx.fillStyle = statusColor;
         ctx.fillRect(0, 0, usedW, usedH);
-        // 텍스트 (사용 영역 중앙)
-        if (text) {
+        // 텍스트 (사용 영역 중앙) — showText(= 현재 홀더의 showCarrierText) off 면 미표시. 2D 와 동일.
+        const showText = !!((_b = this.component.state) === null || _b === void 0 ? void 0 : _b.showText);
+        if (text && showText) {
             const fontSize = Math.round(Math.min(usedW, usedH) * 0.7);
             ctx.font = `bold ${fontSize}px Arial`;
             ctx.textAlign = 'center';
@@ -369,24 +379,6 @@ class MCSRealObject3D extends RealObjectGroup {
     }
     // RealObjectGroup 기본 동작 비활성화
     updateDimension() { }
-    updateAlpha() {
-        const state = this.component.state;
-        // alpha가 명시적으로 설정되어 있으면 그 값을 사용, 없으면 config 기본값 적용
-        const effective = ('alpha' in state) ? state.alpha : this._config.opacity;
-        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;
-            }
-        });
-    }
 }
 // ── 헬퍼 ────────────────────────────────────────────────
 /**
@@ -461,11 +453,9 @@ class OHTLineRealObject3D extends RealObjectGroup {
         const flangeW = beltW * 0.8; // 플랜지 폭
         const webH = beamH - flangeH * 2; // 웹 높이
         const webW = Math.max(flangeW * 0.25, 1); // 웹 두께
-        const mat = new THREE.MeshStandardMaterial({
-            color: OHT_LINE_RAIL_COLOR,
-            metalness: 0.5,
-            roughness: 0.4,
-        });
+        // 공유 base(MaterialBank) — OHTLine rail 은 정적 색이라 전 인스턴스 dedup. faint 는 코어가
+        // 공유 base 의 변형을 스왑(원본 불변). dispose 는 bank-safe(update 에서 material.dispose 안 함).
+        const mat = MaterialBank.material('oht-line|rail', { metalness: 0.5, roughness: 0.4 }, OHT_LINE_RAIL_COLOR);
         const geoms = [];
         // 상부 플랜지
         const topFlange = isVertical
@@ -488,12 +478,14 @@ class OHTLineRealObject3D extends RealObjectGroup {
         this._mesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(geoms), mat);
         this._mesh.castShadow = true;
         this.object3d.add(this._mesh);
+        // mesh 가 super.build() 이후 생성 → 코어 faint 를 명시 적용(편집 흐림이 mesh 에 닿게).
+        this.updateAlpha();
     }
     update() {
         if (this._mesh) {
             this.object3d.remove(this._mesh);
             this._mesh.geometry.dispose();
-            this._mesh.material.dispose();
+            // material 은 MaterialBank 공유(앱 수명) — 여기서 dispose 하면 다른 인스턴스가 깨진다.
             this._mesh = undefined;
         }
         this.build();
@@ -508,8 +500,8 @@ class OHTLineRealObject3D extends RealObjectGroup {
         }
         super.onchange(after, before);
     }
+    // updateAlpha override 제거 — 코어 RealObject.updateAlpha(=applyMaterialOpacity)로 수렴(faint).
     updateDimension() { }
-    updateAlpha() { }
 }
 registerRealObjectFactory('OHTLine', (component) => new OHTLineRealObject3D(component));
 // STOCKER: 벽면에 용량 게이지 바를 포함하는 커스텀 3D 오브젝트
@@ -523,7 +515,7 @@ class StockerRealObject3D extends MCSRealObject3D {
         this.buildGauge();
     }
     buildGauge() {
-        var _a;
+        var _a, _b;
         const comp = this.component;
         const data = comp.data || {};
         const gaugeMode = ((_a = comp.root) === null || _a === void 0 ? void 0 : _a.stockerGaugeMode) || 'capacity';
@@ -559,9 +551,12 @@ class StockerRealObject3D extends MCSRealObject3D {
         ctx.strokeStyle = gauge.borderColor;
         ctx.lineWidth = 12;
         ctx.strokeRect(6, 6, canvasW - 12, canvasH - 12);
-        // 세그먼트 채움 (왼→오)
+        // 세그먼트 채움 (왼→오) + carrier/abnormal 은 세그먼트별 숫자(%) 표기 (2D 와 동일)
         const innerW = canvasW - pad * 2;
         const innerH = canvasH - pad * 2;
+        // 컴포넌트 폰트 설정(fontFamily/bold/italic) 을 그대로, 크기만 텍스처 scale 배 (2D 와 상대 크기 일치).
+        const fontSize = (Number((_b = this.component.state) === null || _b === void 0 ? void 0 : _b.fontSize) || 15) * scale;
+        const font = this.gaugeFont(fontSize);
         let x = pad;
         for (const seg of gauge.segments) {
             const segW = Math.max(innerW * seg.ratio, seg.ratio > 0 ? 1 : 0);
@@ -569,14 +564,19 @@ class StockerRealObject3D extends MCSRealObject3D {
                 continue;
             ctx.fillStyle = seg.color;
             ctx.fillRect(x, pad, segW, innerH);
+            if (gauge.perSegment) {
+                this.drawGaugeSegmentNumber(ctx, seg.ratio, x, pad, segW, innerH, font, fontSize);
+            }
             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);
+        // capacity: 전체 중앙에 usage% 한 개 (2D 와 동일). carrier/abnormal 은 위 세그먼트별 숫자 사용.
+        if (gauge.label) {
+            ctx.font = font;
+            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;
@@ -601,31 +601,39 @@ class StockerRealObject3D extends MCSRealObject3D {
         var _a;
         switch (mode) {
             case 'carrier': {
-                // 세그먼트 비율/색상은 2D 와 공유되는 단일 소스에서 계산 (필드/색상 drift 방지)
-                const [f, e, ee] = carrierSegmentsFromData(data);
+                // 세그먼트 비율/색상은 2D 와 공유되는 단일 소스에서 계산 (필드/색상 drift 방지).
+                // 색상은 carrier 컴포넌트와 동일한 legend(테마)에서 취득.
+                const colors = carrierColorsFromLegend(resolveCarrierLegend(this.component));
+                const [f, e, ee] = carrierSegmentsFromData(data, colors);
                 const total = f.count + e.count + ee.count;
-                const segments = total > 0
-                    ? [f, e, ee].map(s => ({ ratio: s.ratio, color: s.color }))
-                    : [{ ratio: 1, color: '#dddddd' }];
-                return {
-                    segments,
-                    borderColor: CARRIER_COLORS.full,
-                    label: total > 0 ? `F${f.count} E${e.count} EE${ee.count}` : '',
-                };
+                // 접두사 없는 세그먼트별 숫자(%)로 표기 (capacity·2D 와 동일). label(중앙 한 개) 미사용.
+                return total > 0
+                    ? {
+                        segments: [f, e, ee].map(s => ({ ratio: s.ratio, color: s.color })),
+                        borderColor: colors.full,
+                        label: null,
+                        perSegment: true,
+                    }
+                    : { segments: [{ ratio: 1, color: '#dddddd' }], borderColor: colors.full, label: null, perSegment: false };
             }
             case 'abnormal': {
                 const [n, a] = abnormalSegmentsFromData(data);
                 const total = n.count + a.count;
-                const segments = total > 0
-                    ? [n, a].map(s => ({ ratio: s.ratio, color: s.color }))
-                    : [{ ratio: 1, color: '#dddddd' }];
-                return {
-                    segments,
-                    borderColor: a.count > 0 ? ABNORMAL_COLORS.abnormal : ABNORMAL_COLORS.normal,
-                    label: total > 0 ? `N${n.count} A${a.count}` : '',
-                };
+                return total > 0
+                    ? {
+                        segments: [n, a].map(s => ({ ratio: s.ratio, color: s.color })),
+                        borderColor: a.count > 0 ? ABNORMAL_COLORS.abnormal : ABNORMAL_COLORS.normal,
+                        label: null,
+                        perSegment: true,
+                    }
+                    : {
+                        segments: [{ ratio: 1, color: '#dddddd' }],
+                        borderColor: ABNORMAL_COLORS.normal,
+                        label: null,
+                        perSegment: false,
+                    };
             }
-            default: { // capacity
+            default: { // capacity — 전체 중앙에 usage% 한 개
                 const cur = Number(data.CURRENTCAPACITY) || 0;
                 const max = Number(data.MAXCAPACITY) || 100;
                 const fullup = data.FULLUP === 'T';
@@ -636,10 +644,39 @@ class StockerRealObject3D extends MCSRealObject3D {
                     segments: [{ ratio: usage / 100, color }],
                     borderColor: color,
                     label: `${usage}%`,
+                    perSegment: false,
                 };
             }
         }
     }
+    /** 컴포넌트 폰트 설정(fontFamily/bold/italic)으로 CSS font 문자열 조합. size 는 텍스처 스케일 반영값. */
+    gaugeFont(sizePx) {
+        const st = this.component.state || {};
+        const parts = [];
+        if (st.bold)
+            parts.push('bold');
+        if (st.italic)
+            parts.push('italic');
+        parts.push(`${sizePx}px`);
+        parts.push(st.fontFamily || 'sans-serif');
+        return parts.join(' ');
+    }
+    /** 세그먼트 영역 중심에 숫자(%)만 표기. 좁으면 값% → 값 → 생략 (2D _drawSegmentLabel 과 동일 정책). */
+    drawGaugeSegmentNumber(ctx, ratio, x, y, w, h, font, fontSize) {
+        ctx.font = font;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = '#333333';
+        const value = `${Math.round(ratio * 100)}`;
+        const cx = x + w / 2;
+        const cy = y + h / 2;
+        if (fontSize <= h && ctx.measureText(`${value}%`).width <= w) {
+            ctx.fillText(`${value}%`, cx, cy);
+        }
+        else if (fontSize <= h && ctx.measureText(value).width <= w) {
+            ctx.fillText(value, cx, cy);
+        }
+    }
     update() {
         this.clearGauge();
         super.update();