@operato/scene-visualizer 9.2.2 → 10.0.0-beta.10

package/dist/signal-tower.js

@@ -0,0 +1,275 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { RealObjectGroup, RectPath, Shape, ValueHolder, sceneComponent } from '@hatiolab/things-scene';
+import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'value',
+            name: 'value',
+            property: 'value'
+        },
+        {
+            type: 'checkbox',
+            label: 'blink',
+            name: 'blink',
+            property: 'blink'
+        }
+    ],
+    help: 'scene/component/signal-tower'
+};
+/* ── 색상 상수 ── */
+const LIGHT_COLORS = {
+    red: { on: '#cc0000', off: '#1a0505' },
+    yellow: { on: '#cc8800', off: '#1a1400' },
+    green: { on: '#00bb00', off: '#051a05' }
+};
+const BODY_COLOR = '#333333';
+const POLE_COLOR = '#888888';
+const RING_COLOR = '#222222';
+/* ── 2D 렌더 ── */
+const BLINK_PERIOD = 500; // ms
+function isBlinkOn() {
+    return Math.floor(Date.now() / BLINK_PERIOD) % 2 === 0;
+}
+function renderSignalTower(ctx, x, y, w, h, value, blink) {
+    const sep = Math.max(1, h * 0.01);
+    const poleH = h * 0.08;
+    const lightH = (h - sep * 2 - poleH) / 3;
+    const blinkVisible = !blink || isBlinkOn();
+    const lights = [
+        { color: LIGHT_COLORS.red, on: !!(value & 4) && blinkVisible },
+        { color: LIGHT_COLORS.yellow, on: !!(value & 2) && blinkVisible },
+        { color: LIGHT_COLORS.green, on: !!(value & 1) && blinkVisible }
+    ];
+    let cy = y;
+    for (let i = 0; i < 3; i++) {
+        const light = lights[i];
+        // light band — full width
+        ctx.fillStyle = light.on ? light.color.on : light.color.off;
+        ctx.fillRect(x, cy, w, lightH);
+        // ON glow overlay
+        if (light.on) {
+            const cx = x + w / 2;
+            const my = cy + lightH / 2;
+            const grad = ctx.createRadialGradient(cx, my, 0, cx, my, w * 0.6);
+            grad.addColorStop(0, '#ffffff88');
+            grad.addColorStop(1, '#ffffff00');
+            ctx.fillStyle = grad;
+            ctx.fillRect(x, cy, w, lightH);
+        }
+        cy += lightH;
+        // thin separator between lights
+        if (i < 2) {
+            ctx.fillStyle = RING_COLOR;
+            ctx.fillRect(x, cy, w, sep);
+            cy += sep;
+        }
+    }
+    // pole stub
+    const poleW = w * 0.3;
+    ctx.fillStyle = POLE_COLOR;
+    ctx.fillRect(x + (w - poleW) / 2, cy, poleW, poleH);
+}
+/* ── 3D 렌더 ── */
+export class SignalTower3D extends RealObjectGroup {
+    _lightMeshes = [];
+    build() {
+        super.build();
+        const { width, height } = this.component.bounds;
+        const { depth } = this.component.state;
+        const d = depth || width * 5;
+        const radius = Math.min(width, height) / 2;
+        // 경광등 부분: width 기반 고정 크기
+        const lightH = radius * 1.8;
+        const ringH = radius * 0.12;
+        const capH = radius * 0.25;
+        const baseH = radius * 0.15;
+        // 경광등 헤드 총 높이 (등3 + 링4 + 캡)
+        const headH = lightH * 3 + ringH * 4 + capH;
+        // 폴: 전체 depth에서 헤드+베이스를 뺀 나머지
+        const poleH = Math.max(radius * 0.5, d - headH - baseH);
+        // ── static parts (merged) ──
+        const statics = [];
+        // base
+        const baseGeo = new THREE.CylinderGeometry(radius * 1.4, radius * 1.4, baseH, 24);
+        baseGeo.translate(0, baseH / 2, 0);
+        statics.push(baseGeo);
+        // pole
+        const poleGeo = new THREE.CylinderGeometry(radius * 0.25, radius * 0.25, poleH, 12);
+        poleGeo.translate(0, baseH + poleH / 2, 0);
+        statics.push(poleGeo);
+        let y = baseH + poleH;
+        // ring between pole and first light
+        const ring0Geo = new THREE.CylinderGeometry(radius * 1.05, radius * 1.05, ringH, 24);
+        ring0Geo.translate(0, y + ringH / 2, 0);
+        statics.push(ring0Geo);
+        y += ringH;
+        // rings between lights
+        const lightOrder = ['green', 'yellow', 'red'];
+        for (let i = 0; i < 3; i++) {
+            y += lightH;
+            if (i < 2) {
+                const rGeo = new THREE.CylinderGeometry(radius * 1.05, radius * 1.05, ringH, 24);
+                rGeo.translate(0, y + ringH / 2, 0);
+                statics.push(rGeo);
+                y += ringH;
+            }
+        }
+        // cap
+        const capGeo = new THREE.CylinderGeometry(radius * 0.5, radius * 1.05, capH, 24);
+        capGeo.translate(0, y + capH / 2, 0);
+        statics.push(capGeo);
+        const mergedGeo = BufferGeometryUtils.mergeGeometries(statics);
+        const staticMat = new THREE.MeshStandardMaterial({
+            color: BODY_COLOR,
+            roughness: 0.6,
+            metalness: 0.3
+        });
+        const staticMesh = new THREE.Mesh(mergedGeo, staticMat);
+        staticMesh.castShadow = true;
+        this.object3d.add(staticMesh);
+        // ── light meshes (individual for emissive control) ──
+        this._lightMeshes = [];
+        let ly = baseH + poleH + ringH;
+        const value = this.component.value;
+        const bitMap = [1, 2, 4]; // green, yellow, red
+        for (let i = 0; i < 3; i++) {
+            const colorKey = lightOrder[i];
+            const isOn = !!(value & bitMap[i]);
+            const lightGeo = new THREE.CylinderGeometry(radius, radius, lightH, 24);
+            const lightMat = new THREE.MeshStandardMaterial({
+                color: isOn ? 0x000000 : LIGHT_COLORS[colorKey].off,
+                emissive: isOn ? new THREE.Color(LIGHT_COLORS[colorKey].on) : new THREE.Color(0x000000),
+                emissiveIntensity: isOn ? 1.0 : 0,
+                roughness: isOn ? 0.1 : 0.7,
+                metalness: 0.1
+            });
+            const mesh = new THREE.Mesh(lightGeo, lightMat);
+            mesh.position.y = ly + lightH / 2;
+            mesh.castShadow = true;
+            this.object3d.add(mesh);
+            this._lightMeshes.push(mesh);
+            ly += lightH + (i < 2 ? ringH : 0);
+        }
+        // center vertically
+        const totalH = baseH + poleH + headH;
+        this.object3d.children.forEach(child => {
+            child.position.y -= totalH / 2;
+        });
+    }
+    updateLights(forceOff = false) {
+        const value = this.component.value;
+        const lightOrder = ['green', 'yellow', 'red'];
+        const bitMap = [1, 2, 4]; // green, yellow, red
+        for (let i = 0; i < this._lightMeshes.length; i++) {
+            const mat = this._lightMeshes[i].material;
+            const colorKey = lightOrder[i];
+            const isOn = !!(value & bitMap[i]) && !forceOff;
+            mat.color.set(isOn ? 0x000000 : LIGHT_COLORS[colorKey].off);
+            mat.emissive.set(isOn ? LIGHT_COLORS[colorKey].on : 0x000000);
+            mat.emissiveIntensity = isOn ? 1.0 : 0;
+            mat.roughness = isOn ? 0.1 : 0.7;
+            mat.needsUpdate = true;
+        }
+    }
+    blinkTick() {
+        this.updateLights(!isBlinkOn());
+    }
+    update() {
+        super.update();
+        this.updateLights();
+    }
+    updateDimension() {
+        this.clear();
+        this.build();
+    }
+    onchange(after, before) {
+        super.onchange(after, before);
+        if ('value' in after) {
+            this.updateLights();
+        }
+    }
+}
+/* ── Component 클래스 ── */
+const MixedShape = ValueHolder(RectPath(Shape));
+let SignalTower = class SignalTower extends MixedShape {
+    _blinkRaf = null;
+    _lastBlinkOn = false;
+    is3dish() {
+        return true;
+    }
+    buildRealObject() {
+        return new SignalTower3D(this);
+    }
+    get nature() {
+        return NATURE;
+    }
+    async ready() {
+        await super.ready();
+        if (this.getState('blink')) {
+            this._startBlink();
+        }
+    }
+    dispose() {
+        this._stopBlink();
+        super.dispose();
+    }
+    _startBlink() {
+        if (this._blinkRaf)
+            return;
+        const tick = () => {
+            const on = isBlinkOn();
+            if (on !== this._lastBlinkOn) {
+                this._lastBlinkOn = on;
+                this.invalidate();
+                if (this._realObject) {
+                    ;
+                    this._realObject.blinkTick();
+                }
+            }
+            this._blinkRaf = requestAnimationFrame(tick);
+        };
+        this._blinkRaf = requestAnimationFrame(tick);
+    }
+    _stopBlink() {
+        if (!this._blinkRaf)
+            return;
+        cancelAnimationFrame(this._blinkRaf);
+        this._blinkRaf = null;
+        // 정상 점등 상태로 복원
+        this.invalidate();
+        if (this._realObject) {
+            ;
+            this._realObject.updateLights();
+        }
+    }
+    onchange(after, before) {
+        super.onchange(after, before);
+        if ('value' in after || 'blink' in after) {
+            this.invalidate();
+            if (this.getState('blink')) {
+                this._startBlink();
+            }
+            else {
+                this._stopBlink();
+            }
+        }
+    }
+    render(ctx) {
+        const { left, top, width, height } = this.bounds;
+        renderSignalTower(ctx, left, top, width, height, this.value, !!this.getState('blink'));
+    }
+};
+SignalTower = __decorate([
+    sceneComponent('signal-tower')
+], SignalTower);
+export { SignalTower };
+//# sourceMappingURL=signal-tower.js.map

package/dist/signal-tower.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal-tower.js","sourceRoot":"","sources":["../src/signal-tower.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport {\n  Component,\n  ComponentNature,\n  RealObjectGroup,\n  RealObject,\n  RectPath,\n  Shape,\n  ValueHolder,\n  sceneComponent\n} from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'value',\n      name: 'value',\n      property: 'value'\n    },\n    {\n      type: 'checkbox',\n      label: 'blink',\n      name: 'blink',\n      property: 'blink'\n    }\n  ],\n  help: 'scene/component/signal-tower'\n}\n\n/* ── 색상 상수 ── */\nconst LIGHT_COLORS = {\n  red: { on: '#cc0000', off: '#1a0505' },\n  yellow: { on: '#cc8800', off: '#1a1400' },\n  green: { on: '#00bb00', off: '#051a05' }\n} as const\n\nconst BODY_COLOR = '#333333'\nconst POLE_COLOR = '#888888'\nconst RING_COLOR = '#222222'\n\n/* ── 2D 렌더 ── */\n\nconst BLINK_PERIOD = 500 // ms\n\nfunction isBlinkOn() {\n  return Math.floor(Date.now() / BLINK_PERIOD) % 2 === 0\n}\n\nfunction renderSignalTower(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, value: number, blink: boolean) {\n  const sep = Math.max(1, h * 0.01)\n  const poleH = h * 0.08\n  const lightH = (h - sep * 2 - poleH) / 3\n\n  const blinkVisible = !blink || isBlinkOn()\n  const lights = [\n    { color: LIGHT_COLORS.red, on: !!(value & 4) && blinkVisible },\n    { color: LIGHT_COLORS.yellow, on: !!(value & 2) && blinkVisible },\n    { color: LIGHT_COLORS.green, on: !!(value & 1) && blinkVisible }\n  ]\n\n  let cy = y\n\n  for (let i = 0; i < 3; i++) {\n    const light = lights[i]\n\n    // light band — full width\n    ctx.fillStyle = light.on ? light.color.on : light.color.off\n    ctx.fillRect(x, cy, w, lightH)\n\n    // ON glow overlay\n    if (light.on) {\n      const cx = x + w / 2\n      const my = cy + lightH / 2\n      const grad = ctx.createRadialGradient(cx, my, 0, cx, my, w * 0.6)\n      grad.addColorStop(0, '#ffffff88')\n      grad.addColorStop(1, '#ffffff00')\n      ctx.fillStyle = grad\n      ctx.fillRect(x, cy, w, lightH)\n    }\n\n    cy += lightH\n\n    // thin separator between lights\n    if (i < 2) {\n      ctx.fillStyle = RING_COLOR\n      ctx.fillRect(x, cy, w, sep)\n      cy += sep\n    }\n  }\n\n  // pole stub\n  const poleW = w * 0.3\n  ctx.fillStyle = POLE_COLOR\n  ctx.fillRect(x + (w - poleW) / 2, cy, poleW, poleH)\n}\n\n/* ── 3D 렌더 ── */\n\nexport class SignalTower3D extends RealObjectGroup {\n  private _lightMeshes: THREE.Mesh[] = []\n\n  build() {\n    super.build()\n\n    const { width, height } = this.component.bounds\n    const { depth } = this.component.state\n    const d = depth || width * 5\n\n    const radius = Math.min(width, height) / 2\n\n    // 경광등 부분: width 기반 고정 크기\n    const lightH = radius * 1.8\n    const ringH = radius * 0.12\n    const capH = radius * 0.25\n    const baseH = radius * 0.15\n\n    // 경광등 헤드 총 높이 (등3 + 링4 + 캡)\n    const headH = lightH * 3 + ringH * 4 + capH\n\n    // 폴: 전체 depth에서 헤드+베이스를 뺀 나머지\n    const poleH = Math.max(radius * 0.5, d - headH - baseH)\n\n    // ── static parts (merged) ──\n    const statics: THREE.BufferGeometry[] = []\n\n    // base\n    const baseGeo = new THREE.CylinderGeometry(radius * 1.4, radius * 1.4, baseH, 24)\n    baseGeo.translate(0, baseH / 2, 0)\n    statics.push(baseGeo)\n\n    // pole\n    const poleGeo = new THREE.CylinderGeometry(radius * 0.25, radius * 0.25, poleH, 12)\n    poleGeo.translate(0, baseH + poleH / 2, 0)\n    statics.push(poleGeo)\n\n    let y = baseH + poleH\n\n    // ring between pole and first light\n    const ring0Geo = new THREE.CylinderGeometry(radius * 1.05, radius * 1.05, ringH, 24)\n    ring0Geo.translate(0, y + ringH / 2, 0)\n    statics.push(ring0Geo)\n    y += ringH\n\n    // rings between lights\n    const lightOrder = ['green', 'yellow', 'red'] as const\n    for (let i = 0; i < 3; i++) {\n      y += lightH\n      if (i < 2) {\n        const rGeo = new THREE.CylinderGeometry(radius * 1.05, radius * 1.05, ringH, 24)\n        rGeo.translate(0, y + ringH / 2, 0)\n        statics.push(rGeo)\n        y += ringH\n      }\n    }\n\n    // cap\n    const capGeo = new THREE.CylinderGeometry(radius * 0.5, radius * 1.05, capH, 24)\n    capGeo.translate(0, y + capH / 2, 0)\n    statics.push(capGeo)\n\n    const mergedGeo = BufferGeometryUtils.mergeGeometries(statics)\n    const staticMat = new THREE.MeshStandardMaterial({\n      color: BODY_COLOR,\n      roughness: 0.6,\n      metalness: 0.3\n    })\n    const staticMesh = new THREE.Mesh(mergedGeo, staticMat)\n    staticMesh.castShadow = true\n    this.object3d.add(staticMesh)\n\n    // ── light meshes (individual for emissive control) ──\n    this._lightMeshes = []\n    let ly = baseH + poleH + ringH\n    const value = (this.component as unknown as SignalTower).value\n    const bitMap = [1, 2, 4] // green, yellow, red\n\n    for (let i = 0; i < 3; i++) {\n      const colorKey = lightOrder[i]\n      const isOn = !!(value & bitMap[i])\n\n      const lightGeo = new THREE.CylinderGeometry(radius, radius, lightH, 24)\n      const lightMat = new THREE.MeshStandardMaterial({\n        color: isOn ? 0x000000 : LIGHT_COLORS[colorKey].off,\n        emissive: isOn ? new THREE.Color(LIGHT_COLORS[colorKey].on) : new THREE.Color(0x000000),\n        emissiveIntensity: isOn ? 1.0 : 0,\n        roughness: isOn ? 0.1 : 0.7,\n        metalness: 0.1\n      })\n\n      const mesh = new THREE.Mesh(lightGeo, lightMat)\n      mesh.position.y = ly + lightH / 2\n      mesh.castShadow = true\n      this.object3d.add(mesh)\n      this._lightMeshes.push(mesh)\n\n      ly += lightH + (i < 2 ? ringH : 0)\n    }\n\n    // center vertically\n    const totalH = baseH + poleH + headH\n    this.object3d.children.forEach(child => {\n      child.position.y -= totalH / 2\n    })\n  }\n\n  updateLights(forceOff = false) {\n    const value = (this.component as unknown as SignalTower).value\n    const lightOrder = ['green', 'yellow', 'red'] as const\n    const bitMap = [1, 2, 4] // green, yellow, red\n\n    for (let i = 0; i < this._lightMeshes.length; i++) {\n      const mat = this._lightMeshes[i].material as THREE.MeshStandardMaterial\n      const colorKey = lightOrder[i]\n      const isOn = !!(value & bitMap[i]) && !forceOff\n\n      mat.color.set(isOn ? 0x000000 : LIGHT_COLORS[colorKey].off)\n      mat.emissive.set(isOn ? LIGHT_COLORS[colorKey].on : 0x000000)\n      mat.emissiveIntensity = isOn ? 1.0 : 0\n      mat.roughness = isOn ? 0.1 : 0.7\n      mat.needsUpdate = true\n    }\n  }\n\n  blinkTick() {\n    this.updateLights(!isBlinkOn())\n  }\n\n  update() {\n    super.update()\n    this.updateLights()\n  }\n\n  updateDimension() {\n    this.clear()\n    this.build()\n  }\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    super.onchange(after, before)\n\n    if ('value' in after) {\n      this.updateLights()\n    }\n  }\n}\n\n/* ── Component 클래스 ── */\n\nconst MixedShape = ValueHolder(RectPath(Shape))\n\n@sceneComponent('signal-tower')\nexport class SignalTower extends MixedShape {\n  private _blinkRaf: number | null = null\n  private _lastBlinkOn: boolean = false\n\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new SignalTower3D(this as any)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  async ready() {\n    await super.ready()\n    if (this.getState('blink')) {\n      this._startBlink()\n    }\n  }\n\n  dispose() {\n    this._stopBlink()\n    super.dispose()\n  }\n\n  private _startBlink() {\n    if (this._blinkRaf) return\n\n    const tick = () => {\n      const on = isBlinkOn()\n      if (on !== this._lastBlinkOn) {\n        this._lastBlinkOn = on\n        this.invalidate()\n        if (this._realObject) {\n          ;(this._realObject as SignalTower3D).blinkTick()\n        }\n      }\n      this._blinkRaf = requestAnimationFrame(tick)\n    }\n\n    this._blinkRaf = requestAnimationFrame(tick)\n  }\n\n  private _stopBlink() {\n    if (!this._blinkRaf) return\n    cancelAnimationFrame(this._blinkRaf)\n    this._blinkRaf = null\n    // 정상 점등 상태로 복원\n    this.invalidate()\n    if (this._realObject) {\n      ;(this._realObject as SignalTower3D).updateLights()\n    }\n  }\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    super.onchange(after, before)\n\n    if ('value' in after || 'blink' in after) {\n      this.invalidate()\n\n      if (this.getState('blink')) {\n        this._startBlink()\n      } else {\n        this._stopBlink()\n      }\n    }\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    renderSignalTower(ctx, left, top, width, height, this.value, !!this.getState('blink'))\n  }\n\n}\n"]}

package/dist/stock-hub.d.ts

@@ -0,0 +1,25 @@
+import { Component, ComponentNature, Properties, RealObject, ServiceComponent } from '@hatiolab/things-scene';
+import * as THREE from 'three';
+import { type StockMaterialProvider } from './stock.js';
+export declare class StockHub extends ServiceComponent implements StockMaterialProvider {
+    static _icon?: HTMLImageElement;
+    static get icon(): HTMLImageElement;
+    _stock_materials: THREE.Material[];
+    _default_material?: THREE.Material;
+    _empty_material?: THREE.Material;
+    private _legendTarget?;
+    _objects: {
+        [id: string]: RealObject;
+    };
+    get nature(): ComponentNature;
+    get serviceName(): string;
+    get hideEmptyStock(): boolean;
+    get legendTarget(): Component | undefined;
+    putObject(id: string, object: RealObject): void;
+    getObject(id: string): RealObject;
+    dispose(): void;
+    onchangeData(): void;
+    onchange(after: Properties, before: Properties): void;
+    private _onLegendChanged;
+    private _resetMaterials;
+}

package/dist/stock-hub.js

@@ -0,0 +1,147 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+var StockHub_1;
+import { __decorate } from "tslib";
+import { ServiceComponent, sceneComponent } from '@hatiolab/things-scene';
+const STOCK_HUB_ICON_SRC = 'data:image/svg+xml;base64,' +
+    btoa(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="#d09050">
+  <rect x="8" y="28" width="18" height="28" rx="2" opacity="0.8"/>
+  <rect x="23" y="18" width="18" height="38" rx="2" opacity="0.6"/>
+  <rect x="38" y="8" width="18" height="48" rx="2" opacity="0.9"/>
+  <rect x="4" y="56" width="56" height="4" rx="1"/>
+</svg>`);
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'location-field',
+            name: 'locationField',
+            placeholder: 'location'
+        },
+        {
+            type: 'id-input',
+            label: 'legend-target',
+            name: 'legendTarget',
+            property: {
+                component: 'legend'
+            }
+        },
+        {
+            type: 'checkbox',
+            label: 'hide-empty-stock',
+            name: 'hideEmptyStock'
+        }
+    ],
+    help: 'scene/component/stock-hub'
+};
+let StockHub = class StockHub extends ServiceComponent {
+    static { StockHub_1 = this; }
+    static _icon;
+    static get icon() {
+        if (!StockHub_1._icon) {
+            StockHub_1._icon = new Image();
+            StockHub_1._icon.src = STOCK_HUB_ICON_SRC;
+        }
+        return StockHub_1._icon;
+    }
+    // === StockMaterialProvider ===
+    _stock_materials = [];
+    _default_material;
+    _empty_material;
+    _legendTarget;
+    // === Stock 레지스트리 ===
+    _objects = {};
+    get nature() {
+        return NATURE;
+    }
+    get serviceName() {
+        return 'stock';
+    }
+    get hideEmptyStock() {
+        return !!this.getState('hideEmptyStock');
+    }
+    get legendTarget() {
+        const { legendTarget } = this.state;
+        if (!this._legendTarget && legendTarget) {
+            this._legendTarget = this.root.findById?.(legendTarget);
+            this._legendTarget?.on('change', this._onLegendChanged, this);
+        }
+        return this._legendTarget;
+    }
+    /* === Stock 레지스트리 메서드 === */
+    putObject(id, object) {
+        id && (this._objects[id] = object);
+    }
+    getObject(id) {
+        return this._objects[id];
+    }
+    /* === 라이프사이클 === */
+    dispose() {
+        this._legendTarget?.off('change', this._onLegendChanged, this);
+        delete this._legendTarget;
+        this._resetMaterials();
+        this._objects = {};
+        super.dispose();
+    }
+    /* === 데이터 분배 === */
+    onchangeData() {
+        if (typeof this.data !== 'object') {
+            return;
+        }
+        let data = this.data;
+        const locationField = this.getState('locationField') || 'location';
+        if (data instanceof Array) {
+            data = data.reduce((acc, value) => {
+                const location = value[locationField];
+                if (!location) {
+                    return acc;
+                }
+                if (acc[location]) {
+                    acc[location]['items'].push(value);
+                }
+                else {
+                    acc[location] = { items: [value] };
+                }
+                return acc;
+            }, {});
+        }
+        for (const key in data) {
+            if (data.hasOwnProperty(key)) {
+                const d = data[key];
+                const object = this.getObject(key);
+                if (object) {
+                    ;
+                    object.onchangeStockData(d);
+                }
+            }
+        }
+    }
+    /* === 이벤트 핸들러 === */
+    onchange(after, before) {
+        if ('legendTarget' in before || 'legendTarget' in after) {
+            this._legendTarget?.off('change', this._onLegendChanged, this);
+            delete this._legendTarget;
+            this._resetMaterials();
+        }
+        this.invalidate();
+    }
+    _onLegendChanged() {
+        this._resetMaterials();
+        this.invalidate();
+    }
+    _resetMaterials() {
+        this._stock_materials.forEach(m => m.dispose?.());
+        this._stock_materials = [];
+        delete this._default_material;
+        delete this._empty_material;
+    }
+};
+StockHub = StockHub_1 = __decorate([
+    sceneComponent('stock-hub')
+], StockHub);
+export { StockHub };
+//# sourceMappingURL=stock-hub.js.map

package/dist/stock-hub.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stock-hub.js","sourceRoot":"","sources":["../src/stock-hub.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport {\n  Component,\n  ComponentNature,\n  Properties,\n  RealObject,\n  ServiceComponent,\n  sceneComponent\n} from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { Stock, type StockMaterialProvider } from './stock.js'\n\nconst STOCK_HUB_ICON_SRC =\n  'data:image/svg+xml;base64,' +\n  btoa(\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\" fill=\"#d09050\">\n  <rect x=\"8\" y=\"28\" width=\"18\" height=\"28\" rx=\"2\" opacity=\"0.8\"/>\n  <rect x=\"23\" y=\"18\" width=\"18\" height=\"38\" rx=\"2\" opacity=\"0.6\"/>\n  <rect x=\"38\" y=\"8\" width=\"18\" height=\"48\" rx=\"2\" opacity=\"0.9\"/>\n  <rect x=\"4\" y=\"56\" width=\"56\" height=\"4\" rx=\"1\"/>\n</svg>`\n  )\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'location-field',\n      name: 'locationField',\n      placeholder: 'location'\n    },\n    {\n      type: 'id-input',\n      label: 'legend-target',\n      name: 'legendTarget',\n      property: {\n        component: 'legend'\n      }\n    },\n    {\n      type: 'checkbox',\n      label: 'hide-empty-stock',\n      name: 'hideEmptyStock'\n    }\n  ],\n  help: 'scene/component/stock-hub'\n}\n\n@sceneComponent('stock-hub')\nexport class StockHub extends ServiceComponent implements StockMaterialProvider {\n  static _icon?: HTMLImageElement\n\n  static get icon(): HTMLImageElement {\n    if (!StockHub._icon) {\n      StockHub._icon = new Image()\n      StockHub._icon.src = STOCK_HUB_ICON_SRC\n    }\n    return StockHub._icon\n  }\n\n  // === StockMaterialProvider ===\n  _stock_materials: THREE.Material[] = []\n  _default_material?: THREE.Material\n  _empty_material?: THREE.Material\n  private _legendTarget?: Component\n\n  // === Stock 레지스트리 ===\n  _objects: { [id: string]: RealObject } = {}\n\n  get nature(): ComponentNature {\n    return NATURE\n  }\n\n  get serviceName(): string {\n    return 'stock'\n  }\n\n  get hideEmptyStock(): boolean {\n    return !!this.getState('hideEmptyStock')\n  }\n\n  get legendTarget(): Component | undefined {\n    const { legendTarget } = this.state\n\n    if (!this._legendTarget && legendTarget) {\n      this._legendTarget = this.root.findById?.(legendTarget)\n      this._legendTarget?.on('change', this._onLegendChanged, this)\n    }\n\n    return this._legendTarget\n  }\n\n  /* === Stock 레지스트리 메서드 === */\n\n  putObject(id: string, object: RealObject): void {\n    id && (this._objects[id] = object)\n  }\n\n  getObject(id: string): RealObject {\n    return this._objects[id]\n  }\n\n  /* === 라이프사이클 === */\n\n  dispose(): void {\n    this._legendTarget?.off('change', this._onLegendChanged, this)\n    delete this._legendTarget\n    this._resetMaterials()\n    this._objects = {}\n\n    super.dispose()\n  }\n\n  /* === 데이터 분배 === */\n\n  onchangeData(): void {\n    if (typeof this.data !== 'object') {\n      return\n    }\n\n    let data = this.data as any\n    const locationField = this.getState('locationField') || 'location'\n\n    if (data instanceof Array) {\n      data = data.reduce((acc: any, value: any) => {\n        const location = value[locationField]\n\n        if (!location) {\n          return acc\n        }\n\n        if (acc[location]) {\n          acc[location]['items'].push(value)\n        } else {\n          acc[location] = { items: [value] }\n        }\n\n        return acc\n      }, {})\n    }\n\n    for (const key in data) {\n      if (data.hasOwnProperty(key)) {\n        const d = data[key]\n        const object = this.getObject(key)\n        if (object) {\n          ;(object as Stock).onchangeStockData(d)\n        }\n      }\n    }\n  }\n\n  /* === 이벤트 핸들러 === */\n\n  onchange(after: Properties, before: Properties): void {\n    if ('legendTarget' in before || 'legendTarget' in after) {\n      this._legendTarget?.off('change', this._onLegendChanged, this)\n      delete this._legendTarget\n      this._resetMaterials()\n    }\n\n    this.invalidate()\n  }\n\n  private _onLegendChanged(): void {\n    this._resetMaterials()\n    this.invalidate()\n  }\n\n  private _resetMaterials(): void {\n    this._stock_materials.forEach(m => m.dispose?.())\n    this._stock_materials = []\n    delete this._default_material\n    delete this._empty_material\n  }\n}\n"]}

package/dist/stock.d.ts

@@ -1,29 +1,73 @@
-import { Component, Model } from '@hatiolab/things-scene';
+import { Component, RealObject } from '@hatiolab/things-scene';
 import * as THREE from 'three';
-import { RealObject } from './threed/real-object.js';
-import { Visualizer } from './visualizer.js';
+/**
+ * Stock material/legend 정보를 제공하는 컴포넌트 인터페이스.
+ * Visualizer와 RackTable 모두 이를 구현한다.
+ */
+export interface StockMaterialProvider {
+    _stock_materials: THREE.Material[];
+    _default_material?: THREE.Material;
+    _empty_material?: THREE.Material;
+    legendTarget?: Component;
+    hideEmptyStock?: boolean;
+}
 export declare class Stock extends RealObject<THREE.Mesh> {
     static defaultMaterial: THREE.MeshStandardMaterial;
+    static defaultEmptyMaterial: THREE.MeshStandardMaterial;
     static stockGeometry: THREE.BoxGeometry;
     _hideEmptyStock: boolean;
     _focused: boolean;
     _focusedAt?: number;
-    model: Model;
-    constructor(component: Component, model: Model);
-    protected getObject3dInstance(): THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[], THREE.Object3DEventMap>;
+    _instancedMesh?: THREE.InstancedMesh;
+    _instanceIndex: number;
+    _basePosition?: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    _baseScale?: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    model: any;
+    _data?: any;
+    constructor(component: Component, model: any);
+    get isInstanced(): boolean;
+    protected getObject3dInstance(): THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>, THREE.Material | THREE.Material[], THREE.Object3DEventMap>;
+    /**
+     * 가장 가까운 StockMaterialProvider 조상을 찾는다 (RackTable 또는 Visualizer).
+     */
+    get provider(): StockMaterialProvider | undefined;
+    private get _legendStatus();
+    /**
+     * InstancedMesh의 해당 인스턴스 색상을 설정한다.
+     */
+    private _setInstanceColor;
+    /**
+     * 색상을 결정하고 InstancedMesh에 반영한다.
+     */
+    private _applyMaterialColor;
+    private _getDefaultColor;
     getMaterial(index: number): THREE.Material;
-    get visualizer(): Visualizer | undefined;
     get stockMaterials(): THREE.Material[];
     get userDefineDefaultMaterial(): THREE.Material;
     get emptyMaterial(): THREE.Material;
     build(): void;
     createStock(w: number, h: number, d: number): void;
     onchangeStockData(data: any): void;
+    /**
+     * InstancedMesh 모드에서의 데이터 변경 처리.
+     * 개별 mesh의 material 대신 instanceColor를 변경한다.
+     */
+    private _onchangeStockDataInstanced;
+    private _aggregate;
     onBeforeRender: () => void;
-    onmouseup(e: MouseEvent, visualizer: Visualizer, callback: (arg: {
+    onmouseup(e: MouseEvent, _context: unknown, callback: (arg: {
         data: any;
         location: string;
     }) => void): void;
+    private _getCurrentColorHex;
     updateTransform(): void;
     updateDimension(): void;
     updateAlpha(): void;