@operato/scene-storage 10.0.0-beta.41 → 10.0.0-beta.42

package/src/rack-grid-cell.ts

@@ -1,95 +1,94 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * RackGridCell — RackGrid 의 *configuration storage* 단위 = 한 bay 의 메타데이터 핸들.
+ *
+ * 모드별 역할:
+ *   - modeling (2D editor): 자체 사각형 render + click + nature.properties UI
+ *     (rack-table-cell 패턴 그대로)
+ *   - 2D / 3D view: *data holder 만* — render/mesh 모두 X. 외부 location API 가
+ *     이 cell 의 state.section/unit/isEmpty 등을 *configuration source of truth* 로 lookup.
+ *
+ * 3D mesh 는 *없음* (buildRealObject = undefined). 3D stock 시각화는 *RackGrid
+ * 자체의 RackGrid3D + InstancedMesh* 가 처리. cell-component 는 *3D 리소스 0*.
+ *
+ * 영속 데이터: cellId (bay 위치), section, unit, shelfLocations, isEmpty, border 등.
+ * RackGrid 의 hierarchy override 가 *redundant 좌표 (left/top/width/height)* 만 제거 —
+ * 위 own 데이터는 그대로 직렬화 (저장/로드 시 복원).
  */
-import { Component, Properties, RectPath, sceneComponent, RealObject } from '@hatiolab/things-scene'
+
+import {
+  Component, ComponentNature, Properties, RectPath, sceneComponent
+} from '@hatiolab/things-scene'
 import type { State } from '@hatiolab/things-scene'
-import { Rack } from './rack-column.js'
 
-/** RackGridCell 컴포넌트 state */
 export interface RackGridCellState extends State {
-  section?: string
-  unit?: string
-  shelfLocations?: string
-  binLocations?: string
-  isEmpty?: boolean
-  border?: any
+  cellId?: string                 // bayKey 형식: `${col-1}-${row-1}` (0-based, 2 segments)
+  section?: string                // location 의 {s}
+  unit?: string                   // location 의 {u}
+  shelfLocations?: string         // cell 별 shelf 명시 (CSV); 미지정 시 parent.shelfLocations
+  binLocations?: string           // cell 내 bin 명시 (CSV) — rack-table 호환
+  isEmpty?: boolean               // 통로/공실 표시
+  border?: any                    // 4-side border (top/left/bottom/right)
   merged?: boolean
   rowspan?: number
   colspan?: number
 }
 
 const EMPTY_BORDER = {}
+const EMPTY_CELL_FILL = '#efefef'
+const EMPTY_CELL_STROKE = '#ccc'
 
-function isBottomMost(idx: number, rows: number, columns: number) {
-  return idx >= (rows - 1) * columns
+function hasAnyProperty(o: any, ...props: string[]): boolean {
+  for (const p of props) if (Object.prototype.hasOwnProperty.call(o, p)) return true
+  return false
 }
 
-function isRightMost(idx: number, rows: number, columns: number) {
-  return (idx + 1) % columns == 0
+function isRightMost(idx: number, _rows: number, columns: number): boolean {
+  return (idx + 1) % columns === 0
 }
-
-function hasAnyProperty(o: any, ...properties: string[]) {
-  for (let p in properties) {
-    if (o.hasOwnProperty(properties[p])) {
-      return true
-    }
-  }
+function isBottomMost(idx: number, rows: number, columns: number): boolean {
+  return idx >= (rows - 1) * columns
 }
 
-const EMPTY_CELL_STROKE_STYLE = '#ccc'
-const EMPTY_CELL_LINE_WIDTH = 1
-const EMPTY_CELL_FILL_STYLE = '#efefef'
+// RackGridCell 의 refid 충돌 회피 — load 시 root.onadded → _addTraverse 가 자식부터
+// addRefidIndex 호출. cell 의 model.refid 가 *비어있으면* root.getNewRefid() = 1,2,3...
+// 작은 값 부여 → 부모 RackGrid (refid 7) / Crane (202) 등 *기존 refid 와 충돌*.
+// constructor 에서 *큰 시작값 + monotonic counter* 로 자체 부여 → 충돌 0.
+let _cellRefidCounter = 100_000_000
 
-/**
- * 1. 스타일을 상속 받아야 함. (cascade-style)
- * 2. 스타일을 동적처리할 수 있음. (로직처리)
- * 3. 데이타를 받을 수 있음.
- */
 @sceneComponent('rack-grid-cell')
-export class RackGridCell extends RectPath(Component) {
+export default class RackGridCell extends RectPath(Component) {
   override get state(): RackGridCellState {
     return super.state as RackGridCellState
   }
 
   _focused: boolean = false
 
+  constructor(model: any, context: any) {
+    super(model, context)
+    // refid 미부여 시 큰 값 자체 부여 — root.getNewRefid() 의 1,2,3... 충돌 회피.
+    // hierarchy override 가 save 시 refid 제거 → load 마다 fresh.
+    if (this.model.refid == null) {
+      this.model.refid = _cellRefidCounter++
+    }
+  }
+
   get hasTextProperty() {
     return false
   }
 
-  get nature() {
+  get nature(): ComponentNature {
     return {
       mutable: false,
       resizable: true,
       rotatable: true,
       properties: [
-        {
-          type: 'string',
-          label: 'section',
-          name: 'section'
-        },
-        {
-          type: 'string',
-          label: 'unit',
-          name: 'unit'
-        },
-        {
-          type: 'string',
-          label: 'shelf-locations',
-          name: 'shelfLocations',
-          placeholder: '1,2,3,... / ,,,04'
-        },
-        {
-          type: 'textarea',
-          label: 'bin-locations',
-          name: 'binLocations',
-          placeholder: '1,2,3,...'
-        },
-        {
-          type: 'checkbox',
-          label: 'is-empty',
-          name: 'isEmpty'
-        },
+        { type: 'string', label: 'section', name: 'section' },
+        { type: 'string', label: 'unit', name: 'unit' },
+        { type: 'string', label: 'shelf-locations', name: 'shelfLocations', placeholder: '1,2,3 또는 ,,,04' },
+        { type: 'textarea', label: 'bin-locations', name: 'binLocations', placeholder: '1,2,3,...' },
+        { type: 'checkbox', label: 'is-empty', name: 'isEmpty' },
         {
           type: 'location-increase-pattern',
           label: '',
@@ -98,8 +97,16 @@ export class RackGridCell extends RectPath(Component) {
             event: {
               'increase-location-pattern': (event: CustomEvent) => {
                 const { increasingDirection, skipNumbering, startSection, startUnit } = event.detail
-                const rackTable = this.parent as any
-                rackTable.increaseLocation(increasingDirection, skipNumbering, startSection, startUnit)
+                const parent: any = this.parent
+                if (typeof parent?.increaseLocation === 'function') {
+                  // RackGrid 의 root.selected 활용 — framework 가 자동 갱신
+                  const selected = (this.root as any)?.selected as RackGridCell[] | undefined
+                  const keys = (selected || [])
+                    .filter(c => (c as any)?.state?.type === 'rack-grid-cell')
+                    .map(c => c.state.cellId)
+                    .filter((k): k is string => !!k)
+                  parent.increaseLocation(keys, increasingDirection, skipNumbering, startSection, startUnit)
+                }
               }
             }
           }
@@ -108,297 +115,146 @@ export class RackGridCell extends RectPath(Component) {
           type: 'editor-table',
           label: '',
           name: '',
-          property: {
-            merge: false,
-            split: false
-          }
+          property: { merge: false, split: false }
         }
       ]
     }
   }
 
-  buildRealObject(): RealObject | undefined {
-    // isEmpty cell 은 3D 에 mesh 를 만들지 않는다. v9 에서는 RackGrid3D.createRacks 가
-    // cell._realObject 를 사전 설정하면 3D pipeline 이 자동 buildRealObject 호출을 skip
-    // 하던 것을, v10 의 ThreeCapability 도입 이후로는 *항상* 자동 호출됨. RackGrid3D
-    // createRacks 의 isEmpty 체크와 이 자동 경로 사이의 불일치로 isEmpty=true cell 도
-    // 3D 에 그려지던 regression — 여기 isEmpty 체크 추가로 두 경로 정합.
-    if (this.getState('isEmpty')) return undefined
-    return new Rack(this)
+  /** 3D mesh 미생성 — view mode 의 리소스 0. */
+  buildRealObject(): undefined {
+    return undefined
   }
 
-  set merged(merged) {
-    this.set('merged', !!merged)
-    if (merged) this.set('text', '')
-  }
-
-  get merged() {
-    return this.getState('merged')
-  }
+  // ── Domain getters ────────────────────────────────────
 
-  set rowspan(rowspan) {
-    this.set('rowspan', rowspan)
+  get isEmpty(): boolean {
+    return !!this.getState('isEmpty')
   }
 
-  get rowspan() {
-    return this.getState('rowspan')
-  }
-
-  set colspan(colspan) {
-    this.set('colspan', colspan)
-  }
-
-  get colspan() {
-    return this.getState('colspan')
-  }
-
-  get border() {
+  get border(): any {
     return this.state.border || EMPTY_BORDER
   }
 
-  get isEmpty() {
-    return this.getState('isEmpty')
+  set merged(v: boolean) {
+    this.set('merged', !!v)
+    if (v) this.set('text', '')
   }
-
-  _drawBorder(context: CanvasRenderingContext2D, x: number, y: number, to_x: number, to_y: number, style: any) {
-    if (style && style.strokeStyle && style.lineWidth && style.lineDash) {
-      context.beginPath()
-      context.moveTo(x, y)
-      context.lineTo(to_x, to_y)
-
-      Component.drawStroke(context, style)
-    }
+  get merged(): boolean {
+    return !!this.getState('merged')
   }
 
-  render(context: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-    const { isEmpty } = this.state
+  set rowspan(v: number) { this.set('rowspan', v) }
+  get rowspan(): number { return (this.getState('rowspan') as number) ?? 1 }
 
-    const border = this.border
+  set colspan(v: number) { this.set('colspan', v) }
+  get colspan(): number { return (this.getState('colspan') as number) ?? 1 }
 
-    if (!isEmpty) {
-      this._draw_rack_cell(context)
-    }
-
-    // Cell 채우기.
-    context.beginPath()
-    context.lineWidth = 0
-    context.rect(left, top, width, height)
-
-    // Border 그리기
+  /** Parent (RackGrid) 안에서 자기 (col, row) 인덱스 — components 순서 = row * columns + col. */
+  get index(): { row: number; column: number } {
     const parent = this.parent as any
+    if (!parent) return { row: 0, column: 0 }
     const idx = parent.components.indexOf(this)
-    const columns = parent.columns || 1
-    const rows = parent.rows || 1
-
-    this._drawBorder(context, left, top, left + width, top, border.top)
-    this._drawBorder(context, left, top + height, left, top, border.left)
-    if (isRightMost(idx, rows, columns))
-      this._drawBorder(context, left + width, top, left + width, top + height, border.right)
-    if (isBottomMost(idx, rows, columns))
-      this._drawBorder(context, left + width, top + height, left, top + height, border.bottom)
+    const cols = parent.columns ?? 1
+    return { row: Math.floor(idx / cols), column: idx % cols }
   }
 
-  _draw_rack_cell(context: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-
-    context.save()
-    context.fillStyle = EMPTY_CELL_FILL_STYLE
-    context.fillRect(left, top, width, height)
-
-    context.beginPath()
-    context.lineWidth = EMPTY_CELL_LINE_WIDTH
-    context.strokeStyle = EMPTY_CELL_STROKE_STYLE
-
-    context.moveTo(left, top)
-    context.lineTo(left + width, top + height)
-    context.moveTo(left + width, top)
-    context.lineTo(left, top + height)
-
-    context.stroke()
-    context.closePath()
-    context.restore()
-  }
-
-  get decotag() {
-    const rackTable = this.parent
-    let { locPattern, zone = '' } = rackTable.model
-
-    locPattern = locPattern.substring(0, locPattern.indexOf('{u}') + 3)
-
-    let locationString = ''
-    if (this.getState('section') && this.getState('unit'))
-      locationString = locPattern
-        .replace('{z}', zone)
-        .replace('{s}', this.getState('section'))
-        .replace('{u}', this.getState('unit'))
-
-    return locationString || ''
-  }
-
-  get index() {
-    const rackTable = this.parent as any
-    const index = rackTable.components.indexOf(this)
-
-    const rowIndex = Math.floor(index / rackTable.columns)
-    const columnIndex = index % rackTable.columns
-
-    return {
-      row: rowIndex,
-      column: columnIndex
-    }
-  }
-
-  get rowIndex() {
-    return this.index.row
-  }
-
-  get columnIndex() {
-    return this.index.column
-  }
+  get rowIndex(): number { return this.index.row }
+  get columnIndex(): number { return this.index.column }
 
-  get leftCell() {
-    const rackTable = this.parent as any
-
-    const rowIndex = this.rowIndex
-    const columnIndex = this.columnIndex
-
-    if (columnIndex === 0) return null
-
-    const leftCell = rackTable.components[rowIndex * rackTable.columns + columnIndex - 1]
-
-    return leftCell
-  }
-
-  get rightCell() {
-    const rackTable = this.parent as any
-
-    const rowIndex = this.rowIndex
-    const columnIndex = this.columnIndex
-
-    if (columnIndex === rackTable.columns) return null
-
-    const rightCell = rackTable.components[rowIndex * rackTable.columns + columnIndex + 1]
-
-    return rightCell
-  }
-
-  get aboveCell() {
-    const rackTable = this.parent as any
-
-    const rowIndex = this.rowIndex
-    const columnIndex = this.columnIndex
-
-    if (rowIndex === 0) return null
-
-    const aboveCell = rackTable.components[(rowIndex - 1) * rackTable.columns + columnIndex]
-
-    return aboveCell
+  get rowCells(): Component[] {
+    const parent = this.parent as any
+    return parent?.getCellsByRow?.(this.rowIndex) ?? []
   }
-
-  get belowCell() {
-    const rackTable = this.parent as any
-
-    const rowIndex = this.rowIndex
-    const columnIndex = this.columnIndex
-
-    if (rowIndex === rackTable.rows) return null
-
-    const belowCell = rackTable.components[(rowIndex + 1) * rackTable.columns + columnIndex]
-
-    return belowCell
+  get columnCells(): Component[] {
+    const parent = this.parent as any
+    return parent?.getCellsByColumn?.(this.columnIndex) ?? []
   }
-
-  get rowCells() {
-    const rackTable = this.parent as any
-    return rackTable.getCellsByRow(this.rowIndex)
+  get notEmptyRowCells(): Component[] {
+    return this.rowCells.filter(c => !(c as any).getState?.('isEmpty'))
   }
-
-  get columnCells() {
-    const rackTable = this.parent as any
-    return rackTable.getCellsByColumn(this.columnIndex)
+  get isAisle(): boolean {
+    return this.notEmptyRowCells.length === 0
   }
 
-  get aboveRowCells() {
-    let aboveCell = this.aboveCell
-    while (1) {
-      const aboveRowCells = aboveCell.notEmptyRowCells
-
-      if (aboveRowCells.length > 0) return aboveRowCells
+  // ── Lifecycle ─────────────────────────────────────────
 
-      aboveCell = aboveCell.aboveCell
+  onchange(after: Properties, _before: Properties) {
+    if (hasAnyProperty(after, 'isEmpty')) {
+      // isEmpty 토글 시 section/unit 클리어 (rack-table-cell 동작)
+      delete this.model.unit
+      delete this.model.section
     }
+    // Parent 의 location index 무효화 (RackGrid 가 onchange 다시 안 받으므로 자식이 알림)
+    const parent: any = this.parent
+    parent?.invalidateLocationIndex?.()
   }
 
-  get lastUnit() {
-    const rowCells = this.aboveRowCells
-
-    for (let i = rowCells.length - 1; i > 0; i--) {
-      const cell = rowCells[i]
+  onmouseenter() { this.trigger('deco') }
+  onmouseleave() { this.trigger('decoreset') }
 
-      const unit = cell.getState('unit')
-
-      if (unit) return Number(unit)
+  contains(x: number, y: number) {
+    const c = super.contains(x, y)
+    if (!c) {
+      this._focused = false
+      this.invalidate()
     }
-
-    return 0
+    return c
   }
 
-  get firstUnit() {
-    const rowCells = this.aboveRowCells
+  // ── 2D rendering (modeling editor) ────────────────────
+  //
+  // *view mode* (= app.isViewMode) 면 안 그림 — *configuration storage 만*. modeling
+  // 시에만 사각형 + border + isEmpty 패턴 시각화.
 
-    for (let i = 0; i < rowCells.length; i++) {
-      const cell = rowCells[i]
+  render(context: CanvasRenderingContext2D) {
+    if ((this as any).app?.isViewMode) return
 
-      const unit = cell.getState('unit')
+    const { left, top, width, height } = this.bounds
+    const { isEmpty } = this.state
+    const border = this.border
 
-      if (unit) return Number(unit)
+    if (isEmpty) {
+      // 빈 cell — 회색 fill + 대각선
+      context.save()
+      context.fillStyle = EMPTY_CELL_FILL
+      context.fillRect(left, top, width, height)
+      context.strokeStyle = EMPTY_CELL_STROKE
+      context.lineWidth = 1
+      context.beginPath()
+      context.moveTo(left, top); context.lineTo(left + width, top + height)
+      context.moveTo(left + width, top); context.lineTo(left, top + height)
+      context.stroke()
+      context.restore()
     }
 
-    return 0
-  }
-
-  get notEmptyRowCells() {
-    return this.rowCells.filter((c: Component) => {
-      return !c.getState('isEmpty')
-    })
-  }
-
-  get emptyRowCells() {
-    return this.rowCells.filter((c: Component) => {
-      return c.getState('isEmpty')
-    })
-  }
-
-  get isAisle() {
-    return this.notEmptyRowCells.length === 0
-  }
+    // 명시적 cell 영역 표시 (border default — 자식 cell 의 미니 frame)
+    context.beginPath()
+    context.lineWidth = 0
+    context.rect(left, top, width, height)
 
-  onchange(after: Properties, before: Properties) {
-    if (hasAnyProperty(after, 'isEmpty')) {
-      // FIXME
-      delete this.model.unit
-      delete this.model.section
+    const parent = this.parent as any
+    const idx = parent?.components?.indexOf?.(this) ?? 0
+    const columns = parent?.columns ?? 1
+    const rows = parent?.rackRows ?? 1
+
+    this._drawSide(context, left, top, left + width, top, border.top)
+    this._drawSide(context, left, top + height, left, top, border.left)
+    if (isRightMost(idx, rows, columns)) {
+      this._drawSide(context, left + width, top, left + width, top + height, border.right)
     }
-  }
-
-  onmouseenter() {
-    this.trigger('deco')
-  }
-
-  onmouseleave() {
-    this.trigger('decoreset')
-  }
-
-  contains(x: number, y: number) {
-    const contains = super.contains(x, y)
-    if (!contains) {
-      this._focused = false
-      this.invalidate()
+    if (isBottomMost(idx, rows, columns)) {
+      this._drawSide(context, left + width, top + height, left, top + height, border.bottom)
     }
+  }
 
-    return contains
+  private _drawSide(ctx: CanvasRenderingContext2D, x: number, y: number, tx: number, ty: number, style: any) {
+    if (!style?.strokeStyle || !style.lineWidth) return
+    ctx.beginPath()
+    ctx.moveTo(x, y)
+    ctx.lineTo(tx, ty)
+    Component.drawStroke(ctx, style)
   }
 }
 
-;['border'].forEach(getter => Component.memoize(RackGridCell.prototype, getter, false))
+;['border'].forEach(g => Component.memoize(RackGridCell.prototype, g, false))