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

package/src/rack-grid.ts

@@ -0,0 +1,994 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import {
+  ApplicationContext,
+  Component,
+  ComponentNature,
+  ContainerAbstract,
+  Control,
+  Layout,
+  Model,
+  POINT,
+  Properties,
+  sceneComponent,
+  RealObject
+} from '@hatiolab/things-scene'
+import type { State } from '@hatiolab/things-scene'
+import * as THREE from 'three'
+
+/** RackGrid 컴포넌트 state */
+export interface RackGridState extends State {
+  rows?: number
+  columns?: number
+  zone?: string
+  shelves?: number
+  locPattern?: string
+  sectionDigits?: number
+  unitDigits?: number
+  shelfLocations?: string
+  stockScale?: number
+  hideRackFrame?: boolean
+  legendTarget?: string
+  hideEmptyStock?: boolean
+  widths?: number[]
+  heights?: number[]
+}
+import { RackGridCell } from './rack-grid-cell.js'
+import { RackGrid3D } from './rack-grid-3d.js'
+import { increaseLocation } from './rack-grid-location.js'
+import type { StockMaterialProvider } from './stock.js'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'rows',
+      name: 'rows',
+      property: 'rows'
+    },
+    {
+      type: 'number',
+      label: 'columns',
+      name: 'columns',
+      property: 'columns'
+    },
+    {
+      type: 'string',
+      label: 'zone',
+      name: 'zone',
+      property: 'zone'
+    },
+    {
+      type: 'number',
+      label: 'shelves',
+      name: 'shelves',
+      property: 'shelves'
+    },
+    {
+      type: 'number',
+      label: 'depth',
+      name: 'depth',
+      property: 'depth'
+    },
+    {
+      type: 'string',
+      label: 'location-pattern',
+      name: 'locPattern',
+      placeholder: '{z}{s}-{u}-{sh}'
+    },
+    {
+      type: 'number',
+      label: 'section-digits',
+      name: 'sectionDigits',
+      placeholder: '1, 2, 3, ...'
+    },
+    {
+      type: 'number',
+      label: 'unit-digits',
+      name: 'unitDigits',
+      placeholder: '1, 2, 3, ...'
+    },
+    {
+      type: 'string',
+      label: 'shelf-locations',
+      name: 'shelfLocations',
+      placeholder: '1,2,3,... / ,,,04'
+    },
+    {
+      type: 'number',
+      label: 'stock-scale',
+      name: 'stockScale',
+      property: {
+        step: 0.01,
+        min: 0,
+        max: 1
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'hide-rack-frame',
+      name: 'hideRackFrame'
+    },
+    {
+      type: 'id-input',
+      label: 'legend-target',
+      name: 'legendTarget',
+      property: {
+        component: 'legend'
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'hide-empty-stock',
+      name: 'hideEmptyStock'
+    }
+  ],
+  help: 'scene/component/rack-grid'
+}
+
+type SIDE_KEY = 'all' | 'out' | 'left' | 'right' | 'top' | 'bottom' | 'leftright' | 'topbottom'
+
+const SIDES = {
+  all: ['top', 'left', 'bottom', 'right'],
+  out: ['top', 'left', 'bottom', 'right'],
+  left: ['left'],
+  right: ['right'],
+  top: ['top'],
+  bottom: ['bottom'],
+  leftright: ['left', 'right'],
+  topbottom: ['top', 'bottom']
+} as { [key: string]: SIDE_KEY[] }
+
+const CLEAR_STYLE = {
+  strokeStyle: '',
+  lineDash: 'solid',
+  lineWidth: 0
+}
+
+const DEFAULT_STYLE = {
+  strokeStyle: '#999',
+  lineDash: 'solid',
+  lineWidth: 1
+}
+
+const TABLE_LAYOUT = Layout.get('table')
+
+function buildNewCell(app: ApplicationContext) {
+  return Model.compile(
+    {
+      type: 'rack-grid-cell',
+      strokeStyle: 'black',
+      fillStyle: 'transparent',
+      left: 0,
+      top: 0,
+      width: 1,
+      height: 1,
+      textWrap: true,
+      isEmpty: false,
+      border: buildBorderStyle(DEFAULT_STYLE, 'all')
+    },
+    app
+  )
+}
+
+function buildCopiedCell(copy: any, app: ApplicationContext) {
+  const obj = JSON.parse(JSON.stringify(copy))
+  delete obj.text
+
+  return Model.compile(obj, app)
+}
+
+function buildBorderStyle(style: any, where: SIDE_KEY): { [key: string]: any } {
+  return (SIDES[where] || []).reduce((border: { [key: string]: any }, side: string) => {
+    border[side] = style
+    return border
+  }, {} as { [key: string]: any })
+}
+
+function setCellBorder(cell: RackGridCell, style: any, where: SIDE_KEY) {
+  if (!cell) {
+    return
+  }
+
+  cell.set('border', Object.assign({}, cell.getState('border') || {}, buildBorderStyle(style, where)))
+}
+
+function isLeftMost(total: number, columns: number, indices: number[], i: number) {
+  return i == 0 || !(i % columns) || indices.indexOf(i - 1) == -1
+}
+
+function isRightMost(total: number, columns: number, indices: number[], i: number) {
+  return i == total - 1 || i % columns == columns - 1 || indices.indexOf(i + 1) == -1
+}
+
+function isTopMost(total: number, columns: number, indices: number[], i: number) {
+  return i < columns || indices.indexOf(i - columns) == -1
+}
+
+function isBottomMost(total: number, columns: number, indices: number[], i: number) {
+  return i > total - columns - 1 || indices.indexOf(i + columns) == -1
+}
+
+function above(columns: number, i: number) {
+  return i - columns
+}
+
+function below(columns: number, i: number) {
+  return i + columns
+}
+
+function before(columns: number, i: number) {
+  return !(i % columns) ? -1 : i - 1
+}
+
+function after(columns: number, i: number) {
+  return !((i + 1) % columns) ? -1 : i + 1
+}
+
+function array(value: any, size: number) {
+  const arr = []
+  for (let i = 0; i < size; i++) arr.push(1)
+  return arr
+}
+
+const columnControlHandler = {
+  ondragmove: function (point: POINT, index: number, component: RackGrid) {
+    const { left, top, width, height } = component.textBounds
+    const widths_sum = component.widths_sum
+
+    const widths = component.widths.slice()
+
+    /* 컨트롤의 원래 위치를 구한다. */
+    const origin_pos_unit = widths.slice(0, index + 1).reduce((sum: number, width: number) => sum + width, 0)
+    const origin_offset = left + (origin_pos_unit / widths_sum) * width
+
+    /*
+     * point의 좌표는 부모 레이어 기준의 x, y 값이다.
+     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
+     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
+     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
+     */
+    const transcoorded = component.transcoordP2S(point.x, point.y)
+    const diff = transcoorded.x - origin_offset
+
+    let diff_unit = (diff / width) * widths_sum
+
+    const min_width_unit = (widths_sum / width) * 5 // 5픽셀정도를 최소로
+
+    if (diff_unit < 0) diff_unit = -Math.min(widths[index] - min_width_unit, -diff_unit)
+    else diff_unit = Math.min(widths[index + 1] - min_width_unit, diff_unit)
+
+    widths[index] = Math.round((widths[index] + diff_unit) * 100) / 100
+    widths[index + 1] = Math.round((widths[index + 1] - diff_unit) * 100) / 100
+
+    component.set('widths', widths)
+  }
+}
+
+const rowControlHandler = {
+  ondragmove: function (point: POINT, index: number, component: RackGrid) {
+    const { left, top, width, height } = component.textBounds
+    const heights_sum = component.heights_sum
+
+    const heights = component.heights.slice()
+
+    /* 컨트롤의 원래 위치를 구한다. */
+    index -= component.columns - 1
+    const origin_pos_unit = heights.slice(0, index + 1).reduce((sum: number, height: number) => sum + height, 0)
+    const origin_offset = top + (origin_pos_unit / heights_sum) * height
+
+    /*
+     * point의 좌표는 부모 레이어 기준의 x, y 값이다.
+     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
+     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
+     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
+     */
+    const transcoorded = component.transcoordP2S(point.x, point.y)
+    const diff = transcoorded.y - origin_offset
+
+    let diff_unit = (diff / height) * heights_sum
+
+    const min_height_unit = (heights_sum / height) * 5 // 5픽셀정도를 최소로
+
+    if (diff_unit < 0) diff_unit = -Math.min(heights[index] - min_height_unit, -diff_unit)
+    else diff_unit = Math.min(heights[index + 1] - min_height_unit, diff_unit)
+
+    heights[index] = Math.round((heights[index] + diff_unit) * 100) / 100
+    heights[index + 1] = Math.round((heights[index + 1] - diff_unit) * 100) / 100
+
+    component.set('heights', heights)
+  }
+}
+
+@sceneComponent('rack-grid')
+export default class RackGrid extends ContainerAbstract implements StockMaterialProvider {
+  override get state(): RackGridState {
+    return super.state as RackGridState
+  }
+
+  _focused_cell?: RackGridCell
+
+  // StockMaterialProvider 구현
+  _stock_materials: THREE.Material[] = []
+  _default_material?: THREE.Material
+  _empty_material?: THREE.Material
+  private _legendTarget?: Component
+
+  get legendTarget(): Component | undefined {
+    const { legendTarget } = this.state
+
+    if (!this._legendTarget && legendTarget) {
+      this._legendTarget = this.root.findById?.(legendTarget)
+      this._legendTarget?.on('change', this._onLegendChanged, this)
+    }
+
+    // 하위호환: 자체 legendTarget이 없으면 부모(Visualizer)의 legendTarget 폴백
+    if (!this._legendTarget) {
+      let ancestor = this.parent as any
+      while (ancestor) {
+        if (ancestor.legendTarget) return ancestor.legendTarget
+        ancestor = ancestor.parent
+      }
+      // 서비스 레지스트리 폴백: stock-hub의 legendTarget
+      const stockHub = (this.root as any)?.getService?.('stock')
+      if (stockHub?.legendTarget) return stockHub.legendTarget
+    }
+
+    return this._legendTarget
+  }
+
+  get hideEmptyStock(): boolean {
+    return !!this.getState('hideEmptyStock')
+  }
+
+  private _onLegendChanged() {
+    this._resetMaterials()
+    this.invalidate()
+  }
+
+  private _resetMaterials() {
+    this._stock_materials.forEach(m => m.dispose?.())
+    this._stock_materials = []
+    delete this._default_material
+    delete this._empty_material
+  }
+  buildRealObject(): RealObject | undefined {
+    return new RackGrid3D(this)
+  }
+
+  dispose() {
+    this._legendTarget?.off('change', this._onLegendChanged, this)
+    delete this._legendTarget
+    this._resetMaterials()
+
+    super.dispose()
+
+    delete this._focused_cell
+  }
+
+  created() {
+    const tobeSize = this.rows * this.columns
+    const gap = this.size() - tobeSize
+
+    if (gap == 0) {
+      return
+    } else if (gap > 0) {
+      let removals = this.components.slice(gap)
+      this.remove(removals)
+    } else {
+      let newbies = []
+
+      for (let i = 0; i < -gap; i++) newbies.push(buildNewCell(this.app))
+
+      this.add(newbies)
+    }
+
+    const widths = this.getState('widths')
+    const heights = this.getState('heights')
+
+    if (!widths || widths.length < this.columns) this.set('widths', this.widths)
+    if (!heights || heights.length < this.rows) this.set('heights', this.heights)
+  }
+
+  // 컴포넌트를 임의로 추가 및 삭제할 수 있는 지를 지정하는 속성임.
+  get focusible() {
+    return false
+  }
+
+  get widths(): number[] {
+    const widths = this.getState('widths')
+
+    if (!widths) return array(1, this.columns)
+
+    if (widths.length < this.columns) return widths.concat(array(1, this.columns - widths.length))
+    else if (widths.length > this.columns) return widths.slice(0, this.columns)
+
+    return widths
+  }
+
+  get heights(): number[] {
+    const heights = this.getState('heights')
+
+    if (!heights) return array(1, this.rows)
+
+    if (heights.length < this.rows) return heights.concat(array(1, this.rows - heights.length))
+    else if (heights.length > this.rows) return heights.slice(0, this.rows)
+
+    return heights
+  }
+
+  buildCells(newrows: number, newcolumns: number, oldrows: number, oldcolumns: number) {
+    if (newrows < oldrows) {
+      let removals = this.components.slice(oldcolumns * newrows)
+      this.remove(removals)
+    }
+
+    const minrows = Math.min(newrows, oldrows)
+
+    if (newcolumns > oldcolumns) {
+      for (let r = 0; r < minrows; r++) {
+        for (let c = oldcolumns; c < newcolumns; c++) {
+          this.insertComponentAt(buildNewCell(this.app), r * newcolumns + c)
+        }
+      }
+    } else if (newcolumns < oldcolumns) {
+      let removals = []
+
+      for (let r = 0; r < minrows; r++) {
+        for (let c = newcolumns; c < oldcolumns; c++) {
+          removals.push(this.components[r * oldcolumns + c])
+        }
+      }
+      this.remove(removals)
+    }
+
+    if (newrows > oldrows) {
+      let newbies = []
+
+      for (let r = oldrows; r < newrows; r++) {
+        for (let i = 0; i < newcolumns; i++) {
+          newbies.push(buildNewCell(this.app))
+        }
+      }
+      this.add(newbies)
+    }
+
+    this.set({
+      widths: this.widths,
+      heights: this.heights
+    })
+  }
+
+  get layout(): any {
+    return TABLE_LAYOUT
+  }
+
+  get rows() {
+    return this.getState('rows')
+  }
+
+  setCellsStyle(cells: RackGridCell[], style: any, where: string) {
+    const components = this.components
+    const total = components.length
+    const columns = this.getState('columns')
+
+    // 병합된 셀도 포함시킨다.
+    const _cells = [] as RackGridCell[]
+    cells.forEach(c => {
+      _cells.push(c)
+      if (c.colspan || c.rowspan) {
+        let col = this.getRowColumn(c).column
+        let row = this.getRowColumn(c).row
+        for (let i = row; i < row + c.rowspan; i++)
+          for (let j = col; j < col + c.colspan; j++)
+            if (i != row || j != col) _cells.push(this.components[i * this.columns + j] as RackGridCell)
+      }
+    })
+
+    const indices = _cells.map(cell => components.indexOf(cell))
+    indices.forEach(i => {
+      const cell = components[i] as RackGridCell
+
+      switch (where) {
+        case 'all':
+          setCellBorder(cell, style, where)
+
+          if (isLeftMost(total, columns, indices, i))
+            setCellBorder(components[before(columns, i)] as RackGridCell, style, 'right')
+          if (isRightMost(total, columns, indices, i))
+            setCellBorder(components[after(columns, i)] as RackGridCell, style, 'left')
+          if (isTopMost(total, columns, indices, i))
+            setCellBorder(components[above(columns, i)] as RackGridCell, style, 'bottom')
+          if (isBottomMost(total, columns, indices, i))
+            setCellBorder(components[below(columns, i)] as RackGridCell, style, 'top')
+          break
+        case 'in':
+          if (!isLeftMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'left')
+          }
+          if (!isRightMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'right')
+          }
+          if (!isTopMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'top')
+          }
+          if (!isBottomMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'bottom')
+          }
+          break
+        case 'out':
+          if (isLeftMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'left')
+            setCellBorder(components[before(columns, i)] as RackGridCell, style, 'right')
+          }
+          if (isRightMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'right')
+            setCellBorder(components[after(columns, i)] as RackGridCell, style, 'left')
+          }
+          if (isTopMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'top')
+            setCellBorder(components[above(columns, i)] as RackGridCell, style, 'bottom')
+          }
+          if (isBottomMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'bottom')
+            setCellBorder(components[below(columns, i)] as RackGridCell, style, 'top')
+          }
+          break
+        case 'left':
+          if (isLeftMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'left')
+            setCellBorder(components[before(columns, i)] as RackGridCell, style, 'right')
+          }
+          break
+        case 'right':
+          if (isRightMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'right')
+            setCellBorder(components[after(columns, i)] as RackGridCell, style, 'left')
+          }
+          break
+        case 'center':
+          if (!isLeftMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'left')
+          }
+          if (!isRightMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'right')
+          }
+          break
+        case 'middle':
+          if (!isTopMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'top')
+          }
+          if (!isBottomMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'bottom')
+          }
+          break
+        case 'top':
+          if (isTopMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'top')
+            setCellBorder(components[above(columns, i)] as RackGridCell, style, 'bottom')
+          }
+          break
+        case 'bottom':
+          if (isBottomMost(total, columns, indices, i)) {
+            setCellBorder(cell, style, 'bottom')
+            setCellBorder(components[below(columns, i)] as RackGridCell, style, 'top')
+          }
+          break
+        case 'clear':
+          setCellBorder(cell, CLEAR_STYLE, 'all')
+
+          if (isLeftMost(total, columns, indices, i))
+            setCellBorder(components[before(columns, i)] as RackGridCell, CLEAR_STYLE, 'right')
+          if (isRightMost(total, columns, indices, i))
+            setCellBorder(components[after(columns, i)] as RackGridCell, CLEAR_STYLE, 'left')
+          if (isTopMost(total, columns, indices, i))
+            setCellBorder(components[above(columns, i)] as RackGridCell, CLEAR_STYLE, 'bottom')
+          if (isBottomMost(total, columns, indices, i))
+            setCellBorder(components[below(columns, i)] as RackGridCell, CLEAR_STYLE, 'top')
+      }
+    })
+  }
+
+  getRowColumn(cell: RackGridCell) {
+    const idx = this.components.indexOf(cell)
+
+    return {
+      column: idx % this.columns,
+      row: Math.floor(idx / this.columns)
+    }
+  }
+
+  getCellsByRow(row: number) {
+    return this.components.slice(row * this.columns, (row + 1) * this.columns)
+  }
+
+  getCellsByColumn(column: number) {
+    const cells = []
+    for (let i = 0; i < this.rows; i++) cells.push(this.components[this.columns * i + column])
+
+    return cells
+  }
+
+  deleteRows(cells: RackGridCell[]) {
+    // 먼저 cells 위치의 행을 구한다.
+    let rows = [] as number[]
+
+    cells.forEach(cell => {
+      let row = this.getRowColumn(cell).row
+      if (-1 == rows.indexOf(row)) {
+        rows.push(row)
+      }
+    })
+
+    rows.sort((a, b) => {
+      return a - b
+    })
+
+    rows.reverse()
+
+    const heights = this.heights.slice()
+    rows.forEach(row => {
+      this.remove(this.getCellsByRow(row))
+    })
+
+    rows.forEach(row => heights.splice(row, 1))
+
+    this.model.rows -= rows.length // 고의적으로, change 이벤트가 발생하지 않도록 set(..)을 사용하지 않음.
+    this.set('heights', heights)
+  }
+
+  deleteColumns(cells: RackGridCell[]) {
+    // 먼저 cells 위치의 열을 구한다.
+    let columns = [] as number[]
+    cells.forEach(cell => {
+      let column = this.getRowColumn(cell).column
+      if (-1 == columns.indexOf(column)) columns.push(column)
+    })
+    columns.sort((a, b) => {
+      return a - b
+    })
+    columns.reverse()
+
+    columns.forEach(column => {
+      const widths = this.widths.slice()
+      this.remove(this.getCellsByColumn(column))
+      widths.splice(column, 1)
+      this.model.columns -= 1 // 고의적으로, change 이벤트가 발생하지 않도록 set(..)을 사용하지 않음.
+      this.set('widths', widths)
+    })
+  }
+
+  insertCellsAbove(cells: RackGridCell[]) {
+    // 먼저 cells 위치의 행을 구한다.
+    let rows = [] as number[]
+    cells.forEach(cell => {
+      let row = this.getRowColumn(cell).row
+      if (-1 == rows.indexOf(row)) rows.push(row)
+    })
+    rows.sort((a, b) => {
+      return a - b
+    })
+    rows.reverse()
+    // 행 2개 이상은 추가 안함. 임시로 막아놓음
+    if (rows.length >= 2) return false
+    let insertionRowPosition = rows[0]
+    let newbieRowHeights = [] as number[]
+    let newbieCells = [] as RackGridCell[]
+    rows.forEach(row => {
+      for (let i = 0; i < this.columns; i++)
+        newbieCells.push(buildCopiedCell(this.components[row * this.columns + i].model, this.app) as RackGridCell)
+
+      newbieRowHeights.push(this.heights[row])
+
+      newbieCells.reverse().forEach(cell => {
+        this.insertComponentAt(cell, insertionRowPosition * this.columns)
+      })
+
+      let heights = this.heights.slice()
+      heights.splice(insertionRowPosition, 0, ...newbieRowHeights)
+      this.set('heights', heights)
+
+      this.model.rows += rows.length
+
+      this.clearCache()
+    })
+  }
+
+  insertCellsBelow(cells: RackGridCell[]) {
+    // 먼저 cells 위치의 행을 구한다.
+    let rows = [] as number[]
+    cells.forEach(cell => {
+      let row = this.getRowColumn(cell).row
+      if (-1 == rows.indexOf(row)) rows.push(row)
+    })
+    rows.sort((a, b) => {
+      return a - b
+    })
+    rows.reverse()
+    // 행 2개 이상은 추가 안함. 임시로 막아놓음
+    if (rows.length >= 2) return false
+    let insertionRowPosition = rows[rows.length - 1] + 1
+    let newbieRowHeights = [] as number[]
+    let newbieCells = [] as RackGridCell[]
+    rows.forEach(row => {
+      for (let i = 0; i < this.columns; i++)
+        newbieCells.push(buildCopiedCell(this.components[row * this.columns + i].model, this.app) as RackGridCell)
+      newbieRowHeights.push(this.heights[row])
+
+      newbieCells.reverse().forEach(cell => {
+        this.insertComponentAt(cell, insertionRowPosition * this.columns)
+      })
+
+      let heights = this.heights.slice()
+      heights.splice(insertionRowPosition, 0, ...newbieRowHeights)
+      this.set('heights', heights)
+
+      this.model.rows += 1
+
+      this.clearCache()
+    })
+  }
+
+  insertCellsLeft(cells: RackGridCell[]) {
+    // 먼저 cells 위치의 열을 구한다.
+    let columns = [] as number[]
+    cells.forEach(cell => {
+      let column = this.getRowColumn(cell).column
+      if (-1 == columns.indexOf(column)) columns.push(column)
+    })
+    columns.sort((a, b) => {
+      return a - b
+    })
+    columns.reverse()
+    // 열 2개 이상은 추가 안함. 임시로 막아놓음
+    if (columns.length >= 2) return false
+    let insertionColumnPosition = columns[0]
+    let newbieColumnWidths = [] as number[]
+    let newbieCells = [] as RackGridCell[]
+    columns.forEach(column => {
+      for (let i = 0; i < this.rows; i++)
+        newbieCells.push(buildCopiedCell(this.components[column + this.columns * i].model, this.app) as RackGridCell)
+      newbieColumnWidths.push(this.widths[column])
+
+      let increasedColumns = this.columns
+      let index = this.rows
+      newbieCells.reverse().forEach(cell => {
+        if (index == 0) {
+          index = this.rows
+          increasedColumns++
+        }
+
+        index--
+        this.insertComponentAt(cell, insertionColumnPosition + index * increasedColumns)
+      })
+
+      let widths = this.widths.slice()
+      this.model.columns += columns.length // 고의적으로, change 이벤트가 발생하지 않도록 set(..)을 사용하지 않음.
+
+      widths.splice(insertionColumnPosition, 0, ...newbieColumnWidths)
+
+      this.set('widths', widths)
+    })
+  }
+
+  insertCellsRight(cells: RackGridCell[]) {
+    // 먼저 cells 위치의 열을 구한다.
+    let columns = [] as number[]
+    cells.forEach(cell => {
+      let column = this.getRowColumn(cell).column
+      if (-1 == columns.indexOf(column)) columns.push(column)
+    })
+    columns.sort((a, b) => {
+      return a - b
+    })
+    columns.reverse()
+    // 열 2개 이상은 추가 안함. 임시로 막아놓음
+    if (columns.length >= 2) return false
+    let insertionColumnPosition = columns[columns.length - 1] + 1
+    let newbieColumnWidths = [] as number[]
+    let newbieCells = [] as RackGridCell[]
+    columns.forEach(column => {
+      for (let i = 0; i < this.rows; i++)
+        newbieCells.push(buildCopiedCell(this.components[column + this.columns * i].model, this.app) as RackGridCell)
+      newbieColumnWidths.push(this.widths[column])
+
+      let increasedColumns = this.columns
+      let index = this.rows
+      newbieCells.reverse().forEach(cell => {
+        if (index == 0) {
+          index = this.rows
+          increasedColumns++
+        }
+
+        index--
+        this.insertComponentAt(cell, insertionColumnPosition + index * increasedColumns)
+      })
+
+      let widths = this.widths.slice()
+      this.model.columns += columns.length // 고의적으로, change 이벤트가 발생하지 않도록 set(..)을 사용하지 않음.
+
+      widths.splice(insertionColumnPosition, 0, ...newbieColumnWidths)
+
+      this.set('widths', widths)
+    })
+  }
+
+  distributeHorizontal(cells: RackGridCell[]) {
+    const columns = [] as number[]
+
+    cells.forEach(cell => {
+      let rowcolumn = this.getRowColumn(cell)
+
+      if (-1 == columns.indexOf(rowcolumn.column)) columns.push(rowcolumn.column)
+    })
+
+    const sum = columns.reduce((sum, column) => {
+      return sum + this.widths[column]
+    }, 0)
+
+    const newval = Math.round((sum / columns.length) * 100) / 100
+    const widths = this.widths.slice()
+    columns.forEach(column => {
+      widths[column] = newval
+    })
+
+    this.set('widths', widths)
+  }
+
+  distributeVertical(cells: RackGridCell[]) {
+    const rows = [] as number[]
+
+    cells.forEach(cell => {
+      let rowcolumn = this.getRowColumn(cell)
+
+      if (-1 == rows.indexOf(rowcolumn.row)) rows.push(rowcolumn.row)
+    })
+
+    const sum = rows.reduce((sum, row) => {
+      return sum + this.heights[row]
+    }, 0)
+
+    const newval = Math.round((sum / rows.length) * 100) / 100
+    const heights = this.heights.slice()
+    rows.forEach(row => {
+      heights[row] = newval
+    })
+
+    this.set('heights', heights)
+  }
+
+  increaseLocation(type: string, skipNumbering: boolean, startSection: number, startUnit: number) {
+    const { sectionDigits = 2, unitDigits = 2 } = this.state
+    const selectedCells = this.root.selected as RackGridCell[]
+
+    increaseLocation(selectedCells, type, skipNumbering, startSection, startUnit, sectionDigits, unitDigits)
+  }
+
+  get columns() {
+    return this.getState('columns')
+  }
+
+  get lefts() {
+    return this.components.filter((c: any, i: any) => {
+      return !(i % this.columns)
+    })
+  }
+
+  get centers() {
+    return this.components.filter((c: any, i: any) => {
+      return i % this.columns && (i + 1) % this.columns
+    })
+  }
+
+  get rights() {
+    return this.components.filter((c: any, i: any) => {
+      return !((i + 1) % this.columns)
+    })
+  }
+
+  get tops() {
+    return this.components.slice(0, this.columns)
+  }
+
+  get middles() {
+    return this.components.slice(this.columns, this.columns * (this.rows - 1))
+  }
+
+  get bottoms() {
+    return this.components.slice(this.columns * (this.rows - 1))
+  }
+
+  get all() {
+    return this.components
+  }
+
+  get widths_sum() {
+    const widths = this.widths
+    return widths ? widths.filter((width, i) => i < this.columns).reduce((sum, width) => sum + width, 0) : this.columns
+  }
+
+  get heights_sum() {
+    const heights = this.heights
+    return heights ? heights.filter((height, i) => i < this.rows).reduce((sum, height) => sum + height, 0) : this.rows
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  get controls(): Array<Control> | undefined {
+    const widths = this.widths
+    const heights = this.heights
+    const inside = this.textBounds
+
+    const width_unit = inside.width / this.widths_sum
+    const height_unit = inside.height / this.heights_sum
+
+    let x = inside.left
+    let y = inside.top
+
+    const controls: Array<Control> = []
+
+    widths.slice(0, this.columns - 1).forEach((width: number) => {
+      x += width * width_unit
+      controls.push({
+        x: x,
+        y: inside.top,
+        handler: columnControlHandler
+      })
+    })
+
+    heights.slice(0, this.rows - 1).forEach((height: number) => {
+      y += height * height_unit
+      controls.push({
+        x: inside.left,
+        y: y,
+        handler: rowControlHandler
+      })
+    })
+
+    return controls
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if ('legendTarget' in after || 'legendTarget' in before) {
+      this._legendTarget?.off('change', this._onLegendChanged, this)
+      delete this._legendTarget
+      this._resetMaterials()
+    }
+
+    if ('rows' in after || 'columns' in after) {
+      this.buildCells(
+        this.getState('rows'),
+        this.getState('columns'),
+        before.hasOwnProperty('rows') ? before.rows : this.getState('rows'),
+        before.hasOwnProperty('columns') ? before.columns : this.getState('columns')
+      )
+    }
+
+    this.invalidate()
+  }
+
+  get eventMap() {
+    return {
+      '(self)': {
+        '(descendant)': {
+          change: this.oncellchanged
+        }
+      }
+    }
+  }
+
+  oncellchanged(after: Properties, before: Properties) {
+    this.invalidate()
+  }
+}
+
+;['rows', 'columns', 'widths', 'heights', 'widths_sum', 'heights_sum', 'controls'].forEach(getter =>
+  Component.memoize(RackGrid.prototype, getter, false)
+)