@operato/scene-storage 10.0.0-beta.22

package/src/asrs-rack.ts

@@ -0,0 +1,109 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ComponentNature, Container, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import {
+  Placeable,
+  type Alignment,
+  type Heights,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { AsrsRack3D } from './asrs-rack-3d.js'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'levels',
+      name: 'levels',
+      placeholder: '# of vertical levels (default 4)'
+    },
+    {
+      type: 'number',
+      label: 'bays',
+      name: 'bays',
+      placeholder: '# of horizontal bays (default 5)'
+    }
+  ],
+  help: 'scene/component/asrs-rack'
+}
+
+const Base = Placeable(Container) as unknown as typeof Component
+
+/**
+ * AsrsRack — a multi-level high-bay storage rack, the structural backbone of
+ * an AS/RS (Automated Storage / Retrieval System).
+ *
+ * `levels` × `bays` cells form a vertical grid. Each cell holds one logistics
+ * package (Pallet / Box / Parcel). A pair of AsrsRacks separated by an aisle
+ * (where an AsrsCrane runs) is the typical AS/RS configuration; v1 ships the
+ * single-rack unit and lets users compose multi-rack systems by placing them
+ * side by side. A future `AsrsAisle` composite may bundle the pair + crane.
+ *
+ * **Placement**: `floor` archetype, full ceiling depth by default — AS/RS
+ * racks typically span floor to ceiling, with levels sized to fit the tallest
+ * pallet load. Users can shorten via explicit `state.depth` for warehouses
+ * with smaller envelopes.
+ *
+ * **Container-based**. Cells host stored cargo as children — each child's
+ * left/top within the rack's bounds determines which cell it occupies. The
+ * stacking pass in `Placeable.computeDefaultZPos` ensures each child cargo's
+ * z lands on the rack's overall bottom (parent.zPos + parent.depth = ceiling),
+ * which isn't quite cell-level resolution — true per-cell z positioning is
+ * a v3 concern (the cargo would need to know which cell-row it's in).
+ *
+ * No Legendable for v1 — racks are passive structures; their per-cell
+ * occupancy state is implicit in the children, not a status flag.
+ */
+@sceneComponent('asrs-rack')
+export default class AsrsRack extends Base {
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (h: Heights) => h.ceiling - h.floor
+
+  get nature() {
+    return NATURE
+  }
+
+  get anchors() {
+    return []
+  }
+
+  /** Operation cargo (pallets / boxes / parcels) goes in the rack's cells. */
+  containable(component: Component) {
+    const archetype = (component.constructor as any).placement
+    if (archetype === 'operation') return true
+    return component.isDescendible(this as any)
+  }
+
+  /**
+   * 2D — top-down rectangle showing the rack footprint, with subdivisions
+   * suggesting the bay layout (lines parallel to the aisle).
+   */
+  render(ctx: CanvasRenderingContext2D) {
+    const { width, height, left, top } = this.state
+    const bays = Math.max(1, Math.floor((this.state.bays as number) || 5))
+
+    ctx.beginPath()
+    // Outer rectangle
+    ctx.rect(left, top, width, height)
+    // Bay subdivisions (vertical lines)
+    for (let i = 1; i < bays; i++) {
+      const x = left + (width * i) / bays
+      ctx.moveTo(x, top)
+      ctx.lineTo(x, top + height)
+    }
+  }
+
+  get fillStyle() {
+    return '#a0a0a8'
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new AsrsRack3D(this as any)
+  }
+}

package/src/box-3d.ts

@@ -0,0 +1,189 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Box 3D — wood crate and plastic tote variants.
+ *
+ * Wood crate: 4 vertical corner posts + horizontal slats with gaps → the
+ *             typical industrial wooden crate look. Forklift-friendly.
+ * Plastic tote: solid 4 walls + visible top lip / handle cutouts. Stackable.
+ *
+ * Both have a defined floor (so they look like containers, not just walls)
+ * and an opening at top — as you'd expect from a real crate / tote that's
+ * open or has a removable lid.
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+export class Box3D extends RealObjectGroup {
+  build() {
+    super.build()
+
+    const { width, height, depth = 300 } = this.component.state
+    const material = (this.component.state.material as string) || 'wood'
+    const bodyColor = (this.component.state.bodyColor as string) || '#a87644'
+
+    if (material === 'plastic') {
+      this.buildPlasticTote(width, height, depth, bodyColor)
+    } else {
+      this.buildWoodCrate(width, height, depth, bodyColor)
+    }
+  }
+
+  /** Wood crate — visible slats, 4 corner posts, open top. */
+  private buildWoodCrate(width: number, height: number, depth: number, bodyColor: string) {
+    const baseY = -depth / 2
+    const wallThickness = Math.min(width, height) * 0.04
+    const postW = wallThickness * 1.6
+    const slatH = depth * 0.10
+    const slatGap = slatH * 0.6
+    const floorH = depth * 0.05
+
+    const woodMaterial = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      metalness: 0,
+      roughness: 0.85
+    })
+    const postColor = new THREE.Color(bodyColor).multiplyScalar(0.8)
+    const postMaterial = new THREE.MeshStandardMaterial({
+      color: postColor,
+      metalness: 0,
+      roughness: 0.9
+    })
+
+    // ── 4 corner posts ───────────────────────────────────────────────
+    const postGeos: THREE.BufferGeometry[] = []
+    for (const xSign of [-1, 1]) {
+      for (const zSign of [-1, 1]) {
+        const post = new THREE.BoxGeometry(postW, depth, postW)
+        post.translate(
+          xSign * (width / 2 - postW / 2),
+          baseY + depth / 2,
+          zSign * (height / 2 - postW / 2)
+        )
+        postGeos.push(post)
+      }
+    }
+    const postMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(postGeos), postMaterial)
+    postMesh.castShadow = true
+    this.object3d.add(postMesh)
+
+    // ── Slatted walls (horizontal slats with gaps) ───────────────────
+    const slatRowCount = Math.max(2, Math.floor((depth - floorH) / (slatH + slatGap)))
+    const slatGeos: THREE.BufferGeometry[] = []
+
+    for (let row = 0; row < slatRowCount; row++) {
+      const y = baseY + floorH + slatGap + row * (slatH + slatGap) + slatH / 2
+      // Long walls (front / back)
+      for (const zSign of [-1, 1]) {
+        const slat = new THREE.BoxGeometry(width - postW * 2, slatH, wallThickness)
+        slat.translate(0, y, zSign * (height / 2 - wallThickness / 2))
+        slatGeos.push(slat)
+      }
+      // Short walls (left / right)
+      for (const xSign of [-1, 1]) {
+        const slat = new THREE.BoxGeometry(wallThickness, slatH, height - postW * 2)
+        slat.translate(xSign * (width / 2 - wallThickness / 2), y, 0)
+        slatGeos.push(slat)
+      }
+    }
+    const slatMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(slatGeos), woodMaterial)
+    slatMesh.castShadow = true
+    slatMesh.receiveShadow = true
+    this.object3d.add(slatMesh)
+
+    // ── Floor (bottom panel) ─────────────────────────────────────────
+    const floorGeo = new THREE.BoxGeometry(width - postW * 2, floorH, height - postW * 2)
+    const floorMesh = new THREE.Mesh(floorGeo, woodMaterial)
+    floorMesh.position.set(0, baseY + floorH / 2, 0)
+    floorMesh.receiveShadow = true
+    this.object3d.add(floorMesh)
+  }
+
+  /** Plastic tote — solid molded walls + top stackable lip. */
+  private buildPlasticTote(width: number, height: number, depth: number, bodyColor: string) {
+    const baseY = -depth / 2
+    const wallThickness = Math.min(width, height) * 0.05
+    const lipH = depth * 0.06
+    const floorH = depth * 0.06
+
+    const totMaterial = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      metalness: 0.05,
+      roughness: 0.55
+    })
+    const lipColor = new THREE.Color(bodyColor).multiplyScalar(0.85)
+    const lipMaterial = new THREE.MeshStandardMaterial({
+      color: lipColor,
+      metalness: 0.05,
+      roughness: 0.55
+    })
+
+    // ── 4 solid walls ────────────────────────────────────────────────
+    const wallGeos: THREE.BufferGeometry[] = []
+    const wallH = depth - lipH - floorH
+    const wallY = baseY + floorH + wallH / 2
+
+    // Long walls
+    for (const zSign of [-1, 1]) {
+      const wall = new THREE.BoxGeometry(width, wallH, wallThickness)
+      wall.translate(0, wallY, zSign * (height / 2 - wallThickness / 2))
+      wallGeos.push(wall)
+    }
+    // Short walls
+    for (const xSign of [-1, 1]) {
+      const wall = new THREE.BoxGeometry(wallThickness, wallH, height - 2 * wallThickness)
+      wall.translate(xSign * (width / 2 - wallThickness / 2), wallY, 0)
+      wallGeos.push(wall)
+    }
+    const wallMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(wallGeos), totMaterial)
+    wallMesh.castShadow = true
+    wallMesh.receiveShadow = true
+    this.object3d.add(wallMesh)
+
+    // ── Top lip (stackable rim — slightly wider than walls) ──────────
+    const lipGeos: THREE.BufferGeometry[] = []
+    const lipY = baseY + depth - lipH / 2
+    // Long sides
+    for (const zSign of [-1, 1]) {
+      const lip = new THREE.BoxGeometry(width * 1.02, lipH, wallThickness * 1.5)
+      lip.translate(0, lipY, zSign * (height / 2 - wallThickness * 0.75))
+      lipGeos.push(lip)
+    }
+    // Short sides
+    for (const xSign of [-1, 1]) {
+      const lip = new THREE.BoxGeometry(wallThickness * 1.5, lipH, height * 1.02 - 2 * wallThickness * 1.5)
+      lip.translate(xSign * (width / 2 - wallThickness * 0.75), lipY, 0)
+      lipGeos.push(lip)
+    }
+    const lipMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(lipGeos), lipMaterial)
+    lipMesh.castShadow = true
+    this.object3d.add(lipMesh)
+
+    // ── Floor (solid bottom) ─────────────────────────────────────────
+    const floorGeo = new THREE.BoxGeometry(width, floorH, height)
+    const floorMesh = new THREE.Mesh(floorGeo, totMaterial)
+    floorMesh.position.set(0, baseY + floorH / 2, 0)
+    floorMesh.receiveShadow = true
+    this.object3d.add(floorMesh)
+  }
+
+  updateDimension() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'material' in after ||
+      'bodyColor' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateAlpha() {}
+}

package/src/box.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ComponentNature, RealObject, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
+import {
+  Carriable,
+  Legendable,
+  Placeable,
+  type Alignment,
+  type LegendBinding,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { Box3D } from './box-3d.js'
+
+/**
+ * Box material — drives 3D structure and color.
+ *
+ * - `wood`     — wood crate: visible vertical slats, gaps between, open or
+ *                semi-open top. Used for heavy / industrial parts.
+ * - `plastic`  — plastic tote / bin: solid molded walls with stackable lip
+ *                at top. Used for fulfillment, parts kitting.
+ *
+ * Cardboard parcels are a separate component (see `parcel.ts`) — they have
+ * different proportions, taping, and labels that warrant a distinct class.
+ */
+export type BoxMaterial = 'wood' | 'plastic'
+
+const BODY_LEGEND = {
+  wood: '#a87644',
+  plastic: '#3a5078',
+  default: '#a87644'
+}
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'material',
+      name: 'material',
+      property: {
+        options: [
+          { display: 'Wood', value: 'wood' },
+          { display: 'Plastic', value: 'plastic' }
+        ]
+      }
+    }
+  ],
+  help: 'scene/component/box'
+}
+
+// Carriable: a box can be a child of any CarrierHolder (Pallet for stacking,
+// AGV deck, robot-arm gripper, Spot for staging).
+const Base = Carriable(Legendable(Placeable(RectPath(Shape)))) as unknown as typeof Component
+
+/**
+ * Box — a generic stackable container for goods. Wood crate or plastic tote
+ * variants distinguished by `material` prop.
+ *
+ * Shape-based (not Container) — boxes nesting other components is rare in
+ * logistics visualization (a *case* of items inside a box is data, not
+ * scene-tree). If a future use case needs nested boxes, extend Container.
+ */
+@sceneComponent('box')
+export default class Box extends Base {
+  static legends: Record<string, LegendBinding> = {
+    bodyColor: { from: 'material', legend: BODY_LEGEND }
+  }
+
+  static placement: PlacementArchetype = 'operation'
+  static align: Alignment = 'bottom'
+  static defaultDepth = 300
+
+  get nature() {
+    return NATURE
+  }
+
+  get anchors() {
+    return []
+  }
+
+  /** 2D — top-down rectangle. */
+  render(ctx: CanvasRenderingContext2D) {
+    const { width, height, left, top } = this.state
+    ctx.beginPath()
+    ctx.rect(left, top, width, height)
+  }
+
+  get fillStyle() {
+    return (this.state.bodyColor as string) || '#a87644'
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new Box3D(this as any)
+  }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as Pallet } from './pallet.js'
+export type { PalletMaterial } from './pallet.js'
+
+export { default as Box } from './box.js'
+export type { BoxMaterial } from './box.js'
+
+export { default as Parcel } from './parcel.js'
+
+export { default as AsrsRack } from './asrs-rack.js'
+export { default as AsrsCrane } from './asrs-crane.js'
+export type { AsrsCraneStatus } from './asrs-crane.js'
+
+export { default as Spot } from './spot.js'
+export { Spot3D } from './spot-3d.js'

package/src/pallet-3d.ts

@@ -0,0 +1,181 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Pallet 3D — wood and plastic variants.
+ *
+ * LO-POLY but structurally distinguishing the two materials:
+ *
+ *   - wood:    parallel top slats with gaps between + 3 perpendicular
+ *              stringers (the classic EUR pallet silhouette) + parallel
+ *              bottom slats. The forklift entry holes between stringers are
+ *              the wood pallet's visual signature.
+ *   - plastic: solid molded top deck (with a few suggestion cutouts as visual
+ *              detail) + ribbed underside / feet. No discrete slats — the
+ *              plastic pallet's signature is the seamless one-piece look.
+ *
+ * Color comes from `state.bodyColor` (Legendable, driven by `material`).
+ * Stringer / underside colors are slightly darker tints derived from bodyColor.
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+export class Pallet3D extends RealObjectGroup {
+  build() {
+    super.build()
+
+    const { width, height, depth = 150 } = this.component.state
+    const material = (this.component.state.material as string) || 'wood'
+    const bodyColor = (this.component.state.bodyColor as string) || '#a87644'
+
+    if (material === 'plastic') {
+      this.buildPlastic(width, height, depth, bodyColor)
+    } else {
+      this.buildWood(width, height, depth, bodyColor)
+    }
+  }
+
+  /** Wood EUR-style: 7 top slats + 3 stringers + 5 bottom slats. */
+  private buildWood(width: number, height: number, depth: number, bodyColor: string) {
+    const baseY = -depth / 2
+    const slatThickness = depth * 0.15
+    const stringerThickness = depth * 0.45
+    const bottomSlatThickness = depth * 0.13
+
+    const woodMaterial = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      metalness: 0.0,
+      roughness: 0.85
+    })
+    const stringerColor = new THREE.Color(bodyColor).multiplyScalar(0.85)
+    const stringerMaterial = new THREE.MeshStandardMaterial({
+      color: stringerColor,
+      metalness: 0.0,
+      roughness: 0.9
+    })
+
+    // ── Top + bottom slats — same count, same z-positions, paired vertically ─
+    // EUR-pallet style: 5 boards on top, 5 below (under the same z ranges so
+    // they read as a single skeleton rather than two unrelated grids).
+    const slatCount = 5
+    const slatW = width
+    const slatD = (height * 0.92) / (slatCount + (slatCount - 1) * 0.4)
+    const gapD = slatD * 0.4
+    const totalSpan = slatCount * slatD + (slatCount - 1) * gapD
+    const startZ = -totalSpan / 2
+
+    const slatPositions: number[] = []
+    for (let i = 0; i < slatCount; i++) {
+      slatPositions.push(startZ + i * (slatD + gapD) + slatD / 2)
+    }
+
+    const topSlatGeos: THREE.BufferGeometry[] = []
+    for (const z of slatPositions) {
+      const slat = new THREE.BoxGeometry(slatW, slatThickness, slatD)
+      slat.translate(0, baseY + depth - slatThickness / 2, z)
+      topSlatGeos.push(slat)
+    }
+    const topSlatMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(topSlatGeos), woodMaterial)
+    topSlatMesh.castShadow = true
+    topSlatMesh.receiveShadow = true
+    this.object3d.add(topSlatMesh)
+
+    // ── Stringers (3 perpendicular blocks between top and bottom decks) ─
+    const stringerCount = 3
+    const stringerW = width * 0.07
+    const stringerY = baseY + bottomSlatThickness + stringerThickness / 2
+    const stringerGeos: THREE.BufferGeometry[] = []
+    for (let i = 0; i < stringerCount; i++) {
+      const xFrac = i / (stringerCount - 1) - 0.5
+      const x = xFrac * (width * 0.85)
+      const stringer = new THREE.BoxGeometry(stringerW, stringerThickness, height)
+      stringer.translate(x, stringerY, 0)
+      stringerGeos.push(stringer)
+    }
+    const stringerMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(stringerGeos), stringerMaterial)
+    stringerMesh.castShadow = true
+    this.object3d.add(stringerMesh)
+
+    // ── Bottom slats — same z-positions as top so the deck reads as paired ─
+    const botSlatGeos: THREE.BufferGeometry[] = []
+    for (const z of slatPositions) {
+      const slat = new THREE.BoxGeometry(width, bottomSlatThickness, slatD)
+      slat.translate(0, baseY + bottomSlatThickness / 2, z)
+      botSlatGeos.push(slat)
+    }
+    const botSlatMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(botSlatGeos), woodMaterial)
+    botSlatMesh.receiveShadow = true
+    this.object3d.add(botSlatMesh)
+  }
+
+  /** Plastic molded: solid top deck + ribbed underside / feet. */
+  private buildPlastic(width: number, height: number, depth: number, bodyColor: string) {
+    const baseY = -depth / 2
+    const deckThickness = depth * 0.30
+    const footH = depth * 0.55
+    const footW = width * 0.12
+
+    const deckMaterial = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      metalness: 0.1,
+      roughness: 0.55
+    })
+    const footColor = new THREE.Color(bodyColor).multiplyScalar(0.85)
+    const footMaterial = new THREE.MeshStandardMaterial({
+      color: footColor,
+      metalness: 0.1,
+      roughness: 0.65
+    })
+
+    // ── Solid top deck ───────────────────────────────────────────────
+    const deckGeo = new THREE.BoxGeometry(width * 0.98, deckThickness, height * 0.98)
+    const deckMesh = new THREE.Mesh(deckGeo, deckMaterial)
+    deckMesh.position.set(0, baseY + depth - deckThickness / 2, 0)
+    deckMesh.castShadow = true
+    deckMesh.receiveShadow = true
+    this.object3d.add(deckMesh)
+
+    // ── 9 feet (3×3 grid — typical plastic pallet underside) ─────────
+    const footGeos: THREE.BufferGeometry[] = []
+    for (let i = -1; i <= 1; i++) {
+      for (let j = -1; j <= 1; j++) {
+        const x = i * (width * 0.4)
+        const z = j * (height * 0.4)
+        const foot = new THREE.BoxGeometry(footW, footH, footW)
+        foot.translate(x, baseY + footH / 2, z)
+        footGeos.push(foot)
+      }
+    }
+    const footMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(footGeos), footMaterial)
+    footMesh.castShadow = true
+    this.object3d.add(footMesh)
+
+    // ── Cross-bracing along underside (suggests molded reinforcement) ─
+    const braceH = depth * 0.10
+    const braceGeo = new THREE.BoxGeometry(width * 0.95, braceH, height * 0.04)
+    for (const zSign of [-1, 0, 1]) {
+      const brace = new THREE.Mesh(braceGeo.clone(), footMaterial)
+      brace.position.set(0, baseY + footH - braceH / 2, zSign * height * 0.4)
+      this.object3d.add(brace)
+    }
+  }
+
+  updateDimension() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'material' in after ||
+      'bodyColor' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateAlpha() {}
+}