@operato/scene-storage 10.0.0-beta.33 → 10.0.0-beta.35

package/src/rack-grid-cell.ts

@@ -0,0 +1,404 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Properties, RectPath, sceneComponent, RealObject } 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
+  merged?: boolean
+  rowspan?: number
+  colspan?: number
+}
+
+const EMPTY_BORDER = {}
+
+function isBottomMost(idx: number, rows: number, columns: number) {
+  return idx >= (rows - 1) * columns
+}
+
+function isRightMost(idx: number, rows: number, columns: number) {
+  return (idx + 1) % columns == 0
+}
+
+function hasAnyProperty(o: any, ...properties: string[]) {
+  for (let p in properties) {
+    if (o.hasOwnProperty(properties[p])) {
+      return true
+    }
+  }
+}
+
+const EMPTY_CELL_STROKE_STYLE = '#ccc'
+const EMPTY_CELL_LINE_WIDTH = 1
+const EMPTY_CELL_FILL_STYLE = '#efefef'
+
+/**
+ * 1. 스타일을 상속 받아야 함. (cascade-style)
+ * 2. 스타일을 동적처리할 수 있음. (로직처리)
+ * 3. 데이타를 받을 수 있음.
+ */
+@sceneComponent('rack-grid-cell')
+export class RackGridCell extends RectPath(Component) {
+  override get state(): RackGridCellState {
+    return super.state as RackGridCellState
+  }
+
+  _focused: boolean = false
+
+  get hasTextProperty() {
+    return false
+  }
+
+  get nature() {
+    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: 'location-increase-pattern',
+          label: '',
+          name: '',
+          property: {
+            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)
+              }
+            }
+          }
+        },
+        {
+          type: 'editor-table',
+          label: '',
+          name: '',
+          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)
+  }
+
+  set merged(merged) {
+    this.set('merged', !!merged)
+    if (merged) this.set('text', '')
+  }
+
+  get merged() {
+    return this.getState('merged')
+  }
+
+  set rowspan(rowspan) {
+    this.set('rowspan', rowspan)
+  }
+
+  get rowspan() {
+    return this.getState('rowspan')
+  }
+
+  set colspan(colspan) {
+    this.set('colspan', colspan)
+  }
+
+  get colspan() {
+    return this.getState('colspan')
+  }
+
+  get border() {
+    return this.state.border || EMPTY_BORDER
+  }
+
+  get isEmpty() {
+    return this.getState('isEmpty')
+  }
+
+  _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)
+    }
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const { isEmpty } = this.state
+
+    const border = this.border
+
+    if (!isEmpty) {
+      this._draw_rack_cell(context)
+    }
+
+    // Cell 채우기.
+    context.beginPath()
+    context.lineWidth = 0
+    context.rect(left, top, width, height)
+
+    // Border 그리기
+    const parent = this.parent as any
+    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)
+  }
+
+  _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 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 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 rowCells() {
+    const rackTable = this.parent as any
+    return rackTable.getCellsByRow(this.rowIndex)
+  }
+
+  get columnCells() {
+    const rackTable = this.parent as any
+    return rackTable.getCellsByColumn(this.columnIndex)
+  }
+
+  get aboveRowCells() {
+    let aboveCell = this.aboveCell
+    while (1) {
+      const aboveRowCells = aboveCell.notEmptyRowCells
+
+      if (aboveRowCells.length > 0) return aboveRowCells
+
+      aboveCell = aboveCell.aboveCell
+    }
+  }
+
+  get lastUnit() {
+    const rowCells = this.aboveRowCells
+
+    for (let i = rowCells.length - 1; i > 0; i--) {
+      const cell = rowCells[i]
+
+      const unit = cell.getState('unit')
+
+      if (unit) return Number(unit)
+    }
+
+    return 0
+  }
+
+  get firstUnit() {
+    const rowCells = this.aboveRowCells
+
+    for (let i = 0; i < rowCells.length; i++) {
+      const cell = rowCells[i]
+
+      const unit = cell.getState('unit')
+
+      if (unit) return Number(unit)
+    }
+
+    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
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if (hasAnyProperty(after, 'isEmpty')) {
+      // FIXME
+      delete this.model.unit
+      delete this.model.section
+    }
+  }
+
+  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()
+    }
+
+    return contains
+  }
+}
+
+;['border'].forEach(getter => Component.memoize(RackGridCell.prototype, getter, false))

package/src/rack-grid-helpers.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * RackTable pure helpers — separated for unit-testability (no scene-base /
+ * things-scene runtime deps).
+ */
+
+/**
+ * Parse shelf-labels string into an array of length `levels`.
+ *
+ * Format: comma-separated. Empty positions fall back to `String(level + 1)`.
+ *   ',,,04' over 4 levels → ['1', '2', '3', '04']
+ *   '1,2,3'  over 4 levels → ['1', '2', '3', '4']
+ */
+export function parseShelfLabels(input: string | undefined, levels: number): string[] {
+  const out: string[] = []
+  const parts = (input || '').split(',')
+  for (let i = 0; i < levels; i++) {
+    const p = parts[i]
+    out[i] = p && p.trim().length > 0 ? p.trim() : String(i + 1)
+  }
+  return out
+}
+
+/**
+ * Apply a location pattern with the four standard placeholders.
+ *
+ *   {z}  → zone
+ *   {s}  → section (zero-padded outside)
+ *   {u}  → unit (zero-padded outside)
+ *   {sh} → shelf
+ *
+ * Caller is responsible for the zero-padding of section/unit (the digit
+ * widths are state-driven, not part of the pattern itself).
+ */
+export function formatLocationId(
+  zone: string,
+  section: string,
+  unit: string,
+  shelf: string,
+  pattern: string
+): string {
+  return pattern
+    .replace(/\{z\}/g, zone)
+    .replace(/\{s\}/g, section)
+    .replace(/\{u\}/g, unit)
+    .replace(/\{sh\}/g, shelf)
+}
+
+/**
+ * Distribute `total` over `n` slots, honoring per-slot declared sizes when
+ * present. Unspecified slots share the remaining space evenly.
+ *
+ *   distribute(1000, 4, [200, undefined, 300, undefined]) → [200, 250, 300, 250]
+ *   distribute(1000, 4, []) → [250, 250, 250, 250]
+ */
+export function distribute(total: number, n: number, declared: (number | undefined)[] = []): number[] {
+  const out: number[] = []
+  let assigned = 0
+  let auto = 0
+  for (let i = 0; i < n; i++) {
+    const v = declared[i]
+    if (typeof v === 'number' && Number.isFinite(v)) {
+      out[i] = v
+      assigned += v
+    } else {
+      out[i] = -1
+      auto++
+    }
+  }
+  const remaining = Math.max(0, total - assigned)
+  const autoSize = auto > 0 ? remaining / auto : 0
+  for (let i = 0; i < n; i++) {
+    if (out[i] === -1) out[i] = autoSize
+  }
+  return out
+}