@operato/scene-storage 10.0.0-beta.22 → 10.0.0-beta.27

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-storage",
   "description": "Storage-domain components for things-scene (smart factory / logistics) — pallet, box, parcel; AS/RS and shelves planned.",
   "author": "heartyoh",
-  "version": "10.0.0-beta.22",
+  "version": "10.0.0-beta.27",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@hatiolab/things-scene": "^10.0.0-beta.1",
-    "@operato/scene-base": "^10.0.0-beta.22",
+    "@operato/scene-base": "^10.0.0-beta.24",
     "three": "^0.183.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "typescript": "^5.0.4"
   },
   "prettier": "@hatiolab/prettier-config",
-  "gitHead": "f48e52f4f5fdc30ec06af9da7cf253f6e29cfb0e"
+  "gitHead": "17135d7379cf0dee5e36332d08d75b58fbf2ab47"
 }

package/src/asrs-rack.ts

@@ -1,7 +1,7 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, ComponentNature, Container, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import { Component, ComponentNature, ContainerAbstract, RealObject, sceneComponent } from '@hatiolab/things-scene'
 import {
   Placeable,
   type Alignment,
@@ -32,7 +32,10 @@ const NATURE: ComponentNature = {
   help: 'scene/component/asrs-rack'
 }
 
-const Base = Placeable(Container) as unknown as typeof Component
+// `ContainerAbstract` (not `Container`) — Container = MixinHTMLElement(ContainerAbstract),
+// which forces `isHTMLElement(): true` and trips the 3D pipeline's
+// addObject DOM-skip gate. ASRS rack lives only in the 3D scene graph.
+const Base = Placeable(ContainerAbstract) as unknown as typeof Component
 
 /**
  * AsrsRack — a multi-level high-bay storage rack, the structural backbone of

package/src/generic-container-3d.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * GenericContainer3D — RealObjectGLTF 상속, 보관소 (Stocker / Buffer / Rack 류) 의 3D 표현.
+ *
+ * 상속 체인:
+ *   RealObjectGroup → RealObjectExternalModel → RealObjectGLTF → GenericContainer3D
+ *
+ * 재사용:
+ *   - GLB load (`_loadExternal` + 캐시)
+ *   - node index (`getNode`, `nodeNames`)
+ *   - 노드 상태 매핑 (`nodes` state → color/visible/opacity)
+ *   - 애니메이션 (`animations` / `playTargets`)
+ *   - top-view 스냅샷 (2D 렌더용)
+ *   - dispose / clear
+ *
+ * 추가:
+ *   - actuator (state 값 → 노드 transform). rack 의 lift, shutter 열림 등 동적 표현.
+ *
+ * GenericTransport3D 와 차이: mount / cargo reparent 미사용 (cargo holder 가 아니라 placeholder
+ * 단계의 정적 보관소). cargo 보유는 사용자가 구체 type 으로 변환 후에 부여.
+ */
+
+import { RealObjectGLTF } from '@hatiolab/things-scene'
+import { applyActuators } from '@operato/scene-base'
+
+export class GenericContainer3D extends RealObjectGLTF {
+  protected _onLoaded(gltf: any) {
+    super._onLoaded(gltf)
+    this._applyActuators()
+  }
+
+  private _applyActuators() {
+    const state = this.component.state as any
+    applyActuators(this, state.actuators, state.actuatorValues)
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if ('actuatorValues' in after || 'actuators' in after) {
+      this._applyActuators()
+      return
+    }
+    super.onchange(after, before)
+  }
+}

package/src/generic-container.ts

@@ -0,0 +1,126 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * GenericContainer — GLB 모델 기반 범용 보관소 컴포넌트.
+ *
+ * 합성 구조:
+ *   GltfComponent  (things-scene)        — GLB 컨벤션 (src, 2D 스냅샷, ratioLock,
+ *                                          gltf-* 에디터, RealObjectGLTF)
+ *   ⊕ ContainerAbstract (things-scene)  — 자식 보유 (DOM-free 컨테이너)
+ *   ⊕ Placeable    (scene-base)          — floor placement, depth=operation
+ *   ⊕ Legendable   (scene-base)          — fill 별 bodyColor / lampEmissive
+ *
+ * 추가 (이 클래스 고유):
+ *   - state.actuators / actuatorValues — 동적 노드 transform (rack lift, shutter 열림 등)
+ *
+ * 동일 컴포넌트 하나로 stocker / buffer / shelf / rack 모두 표현 가능 — 각 보관소별로
+ * 다른 GLB + 다른 actuator 매핑만 다름.
+ *
+ * GenericTransport / GenericFacility 와의 차이:
+ *   - cargo holder 가 아님 — 사용자가 구체 type (e.g. AsrsRack) 으로 변환 후에 cargo 부여
+ *   - container 카테고리 (정적 보관소). 분류는 동일 floor placement 지만 의미는 다름
+ *
+ * board-import 의 categoryFallback 에서 container 카테고리의 default placeholder. 사용자가
+ * 모델러에서 src 부착하거나 type 변경으로 도메인 type (Stocker / Buffer / AsrsRack 등) 으로 변환.
+ */
+
+import {
+  Component,
+  ComponentNature,
+  ContainerAbstract,
+  GltfComponent,
+  gltfNatureProperties,
+  sceneComponent
+} from '@hatiolab/things-scene'
+import {
+  Legendable,
+  Placeable,
+  type Alignment,
+  type Heights,
+  type LegendBinding,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { GenericContainer3D } from './generic-container-3d.js'
+import type { ActuatorDef } from '@operato/scene-base'
+
+export type ContainerStatus = 'empty' | 'partial' | 'full' | 'error'
+
+const BODY_LEGEND = {
+  empty: '#a8b8c4',
+  partial: '#7d96b0',
+  full: '#5a7c9a',
+  error: '#e9746b',
+  default: '#a8b8c4'
+}
+
+const LAMP_EMISSIVE_LEGEND = {
+  empty: '#222222',
+  partial: '#3388cc',
+  full: '#2266aa',
+  error: '#ff3333',
+  default: '#222222'
+}
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    ...gltfNatureProperties,
+    {
+      type: 'select',
+      label: 'fill',
+      name: 'fill',
+      property: {
+        options: [
+          { display: 'Empty', value: 'empty' },
+          { display: 'Partial', value: 'partial' },
+          { display: 'Full', value: 'full' },
+          { display: 'Error', value: 'error' }
+        ]
+      }
+    }
+  ],
+  help: 'scene/component/generic-container'
+}
+
+// 합성 순서: 안쪽부터 → ContainerAbstract → Placeable → Legendable → GltfComponent
+// (GenericFacility 와 동일 패턴)
+const Base = GltfComponent(Legendable(Placeable(ContainerAbstract))) as unknown as typeof Component
+
+@sceneComponent('container')
+export default class GenericContainer extends Base {
+  static legends: Record<string, LegendBinding> = {
+    bodyColor: { from: 'fill', legend: BODY_LEGEND },
+    lampEmissive: { from: 'fill', legend: LAMP_EMISSIVE_LEGEND }
+  }
+
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (h: Heights) => h.operation - h.floor
+
+  get nature() {
+    return NATURE
+  }
+
+  get anchors() {
+    return []
+  }
+
+  get actuators(): Record<string, ActuatorDef> {
+    return ((this.state as any).actuators as Record<string, ActuatorDef> | undefined) ?? {}
+  }
+
+  get actuatorValues(): Record<string, number> {
+    return ((this.state as any).actuatorValues as Record<string, number> | undefined) ?? {}
+  }
+
+  containable(component: Component): boolean {
+    return component.isDescendible(this as any)
+  }
+
+  buildRealObject() {
+    return new GenericContainer3D(this as any)
+  }
+}

package/src/index.ts

@@ -15,3 +15,7 @@ export type { AsrsCraneStatus } from './asrs-crane.js'
 
 export { default as Spot } from './spot.js'
 export { Spot3D } from './spot-3d.js'
+
+export { default as GenericContainer } from './generic-container.js'
+export type { ContainerStatus } from './generic-container.js'
+export { GenericContainer3D } from './generic-container-3d.js'

package/src/pallet.ts

@@ -1,7 +1,7 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, ComponentNature, Container, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import { Component, ComponentNature, ContainerAbstract, RealObject, sceneComponent } from '@hatiolab/things-scene'
 import {
   Carriable,
   Legendable,
@@ -53,9 +53,14 @@ const NATURE: ComponentNature = {
 }
 
 // Carriable: a pallet can sit on AGV / Forklift / robot-arm gripper / Spot
-// and also accept boxes / parcels as children (Container base provides the
-// child-container behavior; Carriable only adds the holder-mount hook).
-const Base = Carriable(Legendable(Placeable(Container))) as unknown as typeof Component
+// and also accept boxes / parcels as children (ContainerAbstract base
+// provides the child-container behavior; Carriable only adds the
+// holder-mount hook).
+//
+// `ContainerAbstract` (not `Container`) — Container = MixinHTMLElement(ContainerAbstract),
+// which forces `isHTMLElement(): true` and trips the 3D pipeline's
+// addObject DOM-skip gate. Pallet renders only as a 3D mesh.
+const Base = Carriable(Legendable(Placeable(ContainerAbstract))) as unknown as typeof Component
 
 /**
  * Pallet — a flat transport structure that goods are stacked and stored on.
@@ -108,13 +113,77 @@ export default class Pallet extends Base {
     return component.isDescendible(this as any)
   }
 
-  /** 2D — top-down rectangle. */
+  /**
+   * 2D — top-down silhouette. Body is a flat rectangle (wood/plastic deck);
+   * `postrender()` adds the deck pattern + edge stroke so the pallet reads
+   * as a pallet instead of a featureless rectangle.
+   */
   render(ctx: CanvasRenderingContext2D) {
     const { width, height, left, top } = this.state
     ctx.beginPath()
     ctx.rect(left, top, width, height)
   }
 
+  /**
+   * Deck pattern + edge stroke. Wood: parallel slats with darker grooves
+   * between (typical EUR pallet deck). Plastic: cross-cutout pattern
+   * suggesting the molded reinforcement ribs.
+   *
+   * Slats run along the *short* axis of the rectangle (= along the longer
+   * stringer direction in real life), so a 1200×800 pallet shows multiple
+   * narrow slats across the 1200mm dimension — matching the EUR layout.
+   */
+  postrender(ctx: CanvasRenderingContext2D) {
+    super.postrender?.(ctx)
+
+    const { width, height, left, top } = this.state
+    const isPlastic = ((this.state as any).material as PalletMaterial) === 'plastic'
+
+    ctx.save()
+
+    if (!isPlastic) {
+      // Wood — slats. Run them along the longer axis so the grooves are
+      // perpendicular to the longer side (typical pallet appearance).
+      const longAxisHorizontal = width >= height
+      const slatCount = 5
+      const grooveColor = '#7a4f25'
+      ctx.fillStyle = grooveColor
+      if (longAxisHorizontal) {
+        // grooves vertical (X direction across the width)
+        const grooveW = Math.max(1, width * 0.012)
+        const slatW = (width - grooveW * (slatCount - 1)) / slatCount
+        for (let i = 1; i < slatCount; i++) {
+          const x = left + i * slatW + (i - 1) * grooveW
+          ctx.fillRect(x, top + height * 0.05, grooveW, height * 0.9)
+        }
+      } else {
+        const grooveH = Math.max(1, height * 0.012)
+        const slatH = (height - grooveH * (slatCount - 1)) / slatCount
+        for (let i = 1; i < slatCount; i++) {
+          const y = top + i * slatH + (i - 1) * grooveH
+          ctx.fillRect(left + width * 0.05, y, width * 0.9, grooveH)
+        }
+      }
+    } else {
+      // Plastic — cross + corner cutouts hint
+      ctx.strokeStyle = '#3a4956'
+      ctx.lineWidth = Math.max(1, Math.min(width, height) * 0.012)
+      ctx.beginPath()
+      ctx.moveTo(left + width * 0.5, top + height * 0.1)
+      ctx.lineTo(left + width * 0.5, top + height * 0.9)
+      ctx.moveTo(left + width * 0.1, top + height * 0.5)
+      ctx.lineTo(left + width * 0.9, top + height * 0.5)
+      ctx.stroke()
+    }
+
+    // Edge stroke
+    ctx.strokeStyle = isPlastic ? '#2a3946' : '#5e3818'
+    ctx.lineWidth = 1
+    ctx.strokeRect(left, top, width, height)
+
+    ctx.restore()
+  }
+
   get fillStyle() {
     return (this.state.bodyColor as string) || '#a87644'
   }

package/src/spot.ts

@@ -29,7 +29,7 @@
  * the top face of the pad (overrides default attachPointFor).
  */
 
-import { Component, ComponentNature, Container, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import { Component, ComponentNature, ContainerAbstract, RealObject, sceneComponent } from '@hatiolab/things-scene'
 import {
   CarrierHolder,
   Placeable,
@@ -51,10 +51,14 @@ const NATURE: ComponentNature = {
   help: 'scene/component/spot'
 }
 
-// Container base — Spot accepts carrier children (parcel/box/pallet/...).
+// ContainerAbstract base — Spot accepts carrier children (parcel/box/pallet/...).
 // CarrierHolder mixin only publishes the attach-point hook; the actual
-// child-list management comes from the things-scene Container.
-const Base = CarrierHolder(Placeable(Container)) as unknown as typeof Component
+// child-list management comes from things-scene's container abstract.
+//
+// `ContainerAbstract` (not `Container`) — Container = MixinHTMLElement(ContainerAbstract),
+// which forces `isHTMLElement(): true` and trips the 3D pipeline's
+// addObject DOM-skip gate. Spot is purely 3D.
+const Base = CarrierHolder(Placeable(ContainerAbstract)) as unknown as typeof Component
 
 @sceneComponent('spot')
 export default class Spot extends Base {

package/src/templates/index.ts

@@ -21,7 +21,7 @@ export default [
       type: 'pallet',
       top: 100,
       left: 100,
-      width: 120,
+      width: 80,
       height: 80,
       material: 'wood'
     }
@@ -35,7 +35,7 @@ export default [
       type: 'pallet',
       top: 100,
       left: 250,
-      width: 120,
+      width: 80,
       height: 80,
       material: 'plastic'
     }
@@ -78,7 +78,7 @@ export default [
       top: 100,
       left: 640,
       width: 60,
-      height: 90
+      height: 80
     }
   },
   {