@operato/scene-visualizer 9.1.1 → 10.0.0-beta.1

package/dist/rack-table.js

@@ -2,11 +2,9 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import * as THREE from 'three';
-import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { Component, ContainerAbstract, Layout, Model, sceneComponent } from '@hatiolab/things-scene';
-import { Rack } from './rack.js';
-import { RealObjectGroup } from './threed/real-object-group.js';
+import { RackTable3d } from './rack-table-3d.js';
+import { increaseLocation } from './rack-table-location.js';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -80,6 +78,19 @@ const NATURE = {
             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-table'
@@ -120,7 +131,7 @@ function buildNewCell(app) {
     }, app);
 }
 function buildCopiedCell(copy, app) {
-    var obj = JSON.parse(JSON.stringify(copy));
+    const obj = JSON.parse(JSON.stringify(copy));
     delete obj.text;
     return Model.compile(obj, app);
 }
@@ -161,29 +172,29 @@ function after(columns, i) {
     return !((i + 1) % columns) ? -1 : i + 1;
 }
 function array(value, size) {
-    var arr = [];
+    const arr = [];
     for (let i = 0; i < size; i++)
         arr.push(1);
     return arr;
 }
-var columnControlHandler = {
+const columnControlHandler = {
     ondragmove: function (point, index, component) {
-        var { left, top, width, height } = component.textBounds;
-        var widths_sum = component.widths_sum;
-        var widths = component.widths.slice();
+        const { left, top, width, height } = component.textBounds;
+        const widths_sum = component.widths_sum;
+        const widths = component.widths.slice();
         /* 컨트롤의 원래 위치를 구한다. */
-        var origin_pos_unit = widths.slice(0, index + 1).reduce((sum, width) => sum + width, 0);
-        var origin_offset = left + (origin_pos_unit / widths_sum) * width;
+        const origin_pos_unit = widths.slice(0, index + 1).reduce((sum, width) => sum + width, 0);
+        const origin_offset = left + (origin_pos_unit / widths_sum) * width;
         /*
          * point의 좌표는 부모 레이어 기준의 x, y 값이다.
          * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
          * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
          * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
          */
-        var transcoorded = component.transcoordP2S(point.x, point.y);
-        var diff = transcoorded.x - origin_offset;
-        var diff_unit = (diff / width) * widths_sum;
-        var min_width_unit = (widths_sum / width) * 5; // 5픽셀정도를 최소로
+        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
@@ -193,25 +204,25 @@ var columnControlHandler = {
         component.set('widths', widths);
     }
 };
-var rowControlHandler = {
+const rowControlHandler = {
     ondragmove: function (point, index, component) {
-        var { left, top, width, height } = component.textBounds;
-        var heights_sum = component.heights_sum;
-        var heights = component.heights.slice();
+        const { left, top, width, height } = component.textBounds;
+        const heights_sum = component.heights_sum;
+        const heights = component.heights.slice();
         /* 컨트롤의 원래 위치를 구한다. */
         index -= component.columns - 1;
-        var origin_pos_unit = heights.slice(0, index + 1).reduce((sum, height) => sum + height, 0);
-        var origin_offset = top + (origin_pos_unit / heights_sum) * height;
+        const origin_pos_unit = heights.slice(0, index + 1).reduce((sum, height) => sum + height, 0);
+        const origin_offset = top + (origin_pos_unit / heights_sum) * height;
         /*
          * point의 좌표는 부모 레이어 기준의 x, y 값이다.
          * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
          * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
          * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
          */
-        var transcoorded = component.transcoordP2S(point.x, point.y);
-        var diff = transcoorded.y - origin_offset;
-        var diff_unit = (diff / height) * heights_sum;
-        var min_height_unit = (heights_sum / height) * 5; // 5픽셀정도를 최소로
+        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
@@ -221,99 +232,34 @@ var rowControlHandler = {
         component.set('heights', heights);
     }
 };
-export class RackTable3d extends RealObjectGroup {
-    build() {
-        super.build();
-        this.createRacks();
-    }
-    get position() {
-        var { zPos = 0 } = this.component.state;
-        return {
-            x: this.cx || 0,
-            y: zPos,
-            z: this.cy || 0
-        };
+let RackTable = class RackTable extends ContainerAbstract {
+    _focused_cell;
+    // StockMaterialProvider 구현
+    _stock_materials = [];
+    _default_material;
+    _empty_material;
+    _legendTarget;
+    get legendTarget() {
+        const { legendTarget } = this.state;
+        if (!this._legendTarget && legendTarget) {
+            this._legendTarget = this.root.findById?.(legendTarget);
+            this._legendTarget?.on('change', this._onLegendChanged, this);
+        }
+        return this._legendTarget;
     }
-    createRacks() {
-        var { rotation = 0, shelfLocations, shelves = 1 } = this.component.state;
-        this.object3d.rotation.y = -rotation;
-        const racks = this.component.components
-            .map((cell) => {
-            let { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state;
-            if (!isEmpty) {
-                cell.setState('shelfLocations', shelfLoc);
-                var rack = new Rack(cell);
-                rack.update();
-                this.object3d.add(rack.object3d);
-                return rack;
-            }
-            return;
-        })
-            .filter(rack => !!rack);
-        this.mergeAndAddRackCommonObjects(racks);
+    get hideEmptyStock() {
+        return !!this.getState('hideEmptyStock');
     }
-    mergeAndAddRackCommonObjects(racks) {
-        var framesGeometries = [];
-        var boardsGeometries = [];
-        if (racks.length > 0) {
-            racks.forEach(rack => {
-                const geometry = rack.frame;
-                if (!geometry) {
-                    return;
-                }
-                geometry.translate(rack.position.x, rack.position.y, rack.position.z);
-                geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z);
-                framesGeometries.push(geometry);
-            });
-            if (framesGeometries.length > 0) {
-                const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(framesGeometries), Rack.frameMaterial);
-                this.object3d.add(frameMesh);
-            }
-            racks.forEach(rack => {
-                const geometry = rack.board;
-                if (!geometry) {
-                    return;
-                }
-                geometry.translate(rack.position.x, rack.position.y, rack.position.z);
-                geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z);
-                boardsGeometries.push(geometry);
-            });
-            if (boardsGeometries.length > 0) {
-                const material = Rack.boardMaterial;
-                material.opacity = 0.5;
-                material.transparent = true;
-                const boardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(boardsGeometries), material);
-                this.object3d.add(boardMesh);
-            }
-        }
+    _onLegendChanged() {
+        this._resetMaterials();
+        this.invalidate();
     }
-    makeShelfString(pattern, shelf, length) {
-        /**
-         *  pattern #: 숫자
-         *  pattern 0: 고정 자리수
-         *  pattern -: 역순
-         */
-        if (!pattern || !shelf || !length)
-            return;
-        var isReverse = /^\-/.test(pattern);
-        pattern = pattern.replace(/#+/, '#');
-        var fixedLength = (pattern.match(/0/g) || []).length || 0;
-        var shelfString = String(isReverse ? length - shelf + 1 : shelf);
-        if (shelfString.length > fixedLength && fixedLength > 0) {
-            shelfString = shelfString.substring(shelfString.length - fixedLength);
-        }
-        else {
-            var prefix = '';
-            for (var i = 0; i < fixedLength - shelfString.length; i++) {
-                prefix += '0';
-            }
-            shelfString = prefix + shelfString;
-        }
-        return shelfString;
+    _resetMaterials() {
+        this._stock_materials.forEach(m => m.dispose?.());
+        this._stock_materials = [];
+        delete this._default_material;
+        delete this._empty_material;
     }
-    updateAlpha() { }
-}
-let RackTable = class RackTable extends ContainerAbstract {
     is3dish() {
         return true;
     }
@@ -321,12 +267,15 @@ let RackTable = class RackTable extends ContainerAbstract {
         return new RackTable3d(this);
     }
     dispose() {
+        this._legendTarget?.off('change', this._onLegendChanged, this);
+        delete this._legendTarget;
+        this._resetMaterials();
         super.dispose();
         delete this._focused_cell;
     }
     created() {
-        var tobeSize = this.rows * this.columns;
-        var gap = this.size() - tobeSize;
+        const tobeSize = this.rows * this.columns;
+        const gap = this.size() - tobeSize;
         if (gap == 0) {
             return;
         }
@@ -340,8 +289,8 @@ let RackTable = class RackTable extends ContainerAbstract {
                 newbies.push(buildNewCell(this.app));
             this.add(newbies);
         }
-        var widths = this.getState('widths');
-        var heights = this.getState('heights');
+        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)
@@ -352,7 +301,7 @@ let RackTable = class RackTable extends ContainerAbstract {
         return false;
     }
     get widths() {
-        var widths = this.getState('widths');
+        const widths = this.getState('widths');
         if (!widths)
             return array(1, this.columns);
         if (widths.length < this.columns)
@@ -362,7 +311,7 @@ let RackTable = class RackTable extends ContainerAbstract {
         return widths;
     }
     get heights() {
-        var heights = this.getState('heights');
+        const heights = this.getState('heights');
         if (!heights)
             return array(1, this.rows);
         if (heights.length < this.rows)
@@ -376,7 +325,7 @@ let RackTable = class RackTable extends ContainerAbstract {
             let removals = this.components.slice(oldcolumns * newrows);
             this.remove(removals);
         }
-        var minrows = Math.min(newrows, oldrows);
+        const minrows = Math.min(newrows, oldrows);
         if (newcolumns > oldcolumns) {
             for (let r = 0; r < minrows; r++) {
                 for (let c = oldcolumns; c < newcolumns; c++) {
@@ -414,11 +363,11 @@ let RackTable = class RackTable extends ContainerAbstract {
         return this.getState('rows');
     }
     setCellsStyle(cells, style, where) {
-        var components = this.components;
-        var total = components.length;
-        var columns = this.getState('columns');
+        const components = this.components;
+        const total = components.length;
+        const columns = this.getState('columns');
         // 병합된 셀도 포함시킨다.
-        var _cells = [];
+        const _cells = [];
         cells.forEach(c => {
             _cells.push(c);
             if (c.colspan || c.rowspan) {
@@ -430,9 +379,9 @@ let RackTable = class RackTable extends ContainerAbstract {
                             _cells.push(this.components[i * this.columns + j]);
             }
         });
-        var indices = _cells.map(cell => components.indexOf(cell));
+        const indices = _cells.map(cell => components.indexOf(cell));
         indices.forEach(i => {
-            var cell = components[i];
+            const cell = components[i];
             switch (where) {
                 case 'all':
                     setCellBorder(cell, style, where);
@@ -531,8 +480,7 @@ let RackTable = class RackTable extends ContainerAbstract {
         });
     }
     getRowColumn(cell) {
-        var idx = this.components.indexOf(cell);
-        var length = this.components.length;
+        const idx = this.components.indexOf(cell);
         return {
             column: idx % this.columns,
             row: Math.floor(idx / this.columns)
@@ -542,8 +490,8 @@ let RackTable = class RackTable extends ContainerAbstract {
         return this.components.slice(row * this.columns, (row + 1) * this.columns);
     }
     getCellsByColumn(column) {
-        var cells = [];
-        for (var i = 0; i < this.rows; i++)
+        const cells = [];
+        for (let i = 0; i < this.rows; i++)
             cells.push(this.components[this.columns * i + column]);
         return cells;
     }
@@ -560,7 +508,7 @@ let RackTable = class RackTable extends ContainerAbstract {
             return a - b;
         });
         rows.reverse();
-        var heights = this.heights.slice();
+        const heights = this.heights.slice();
         rows.forEach(row => {
             this.remove(this.getCellsByRow(row));
         });
@@ -581,7 +529,7 @@ let RackTable = class RackTable extends ContainerAbstract {
         });
         columns.reverse();
         columns.forEach(column => {
-            var widths = this.widths.slice();
+            const widths = this.widths.slice();
             this.remove(this.getCellsByColumn(column));
             widths.splice(column, 1);
             this.model.columns -= 1; // 고의적으로, change 이벤트가 발생하지 않도록 set(..)을 사용하지 않음.
@@ -729,268 +677,43 @@ let RackTable = class RackTable extends ContainerAbstract {
         });
     }
     distributeHorizontal(cells) {
-        var columns = [];
+        const columns = [];
         cells.forEach(cell => {
             let rowcolumn = this.getRowColumn(cell);
             if (-1 == columns.indexOf(rowcolumn.column))
                 columns.push(rowcolumn.column);
         });
-        var sum = columns.reduce((sum, column) => {
+        const sum = columns.reduce((sum, column) => {
             return sum + this.widths[column];
         }, 0);
-        var newval = Math.round((sum / columns.length) * 100) / 100;
-        var widths = this.widths.slice();
+        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) {
-        var rows = [];
+        const rows = [];
         cells.forEach(cell => {
             let rowcolumn = this.getRowColumn(cell);
             if (-1 == rows.indexOf(rowcolumn.row))
                 rows.push(rowcolumn.row);
         });
-        var sum = rows.reduce((sum, row) => {
+        const sum = rows.reduce((sum, row) => {
             return sum + this.heights[row];
         }, 0);
-        var newval = Math.round((sum / rows.length) * 100) / 100;
-        var heights = this.heights.slice();
+        const newval = Math.round((sum / rows.length) * 100) / 100;
+        const heights = this.heights.slice();
         rows.forEach(row => {
             heights[row] = newval;
         });
         this.set('heights', heights);
     }
-    /**
-     * visualizer location setting functions
-     */
     increaseLocation(type, skipNumbering, startSection, startUnit) {
-        /**
-         * step 1
-         *
-         * selected collect rack-cell
-         */
-        var selectedCells = this.root.selected;
-        /**
-         * step 2
-         *
-         * classify cells by row
-         */
-        var classified = this.classifyByRow(selectedCells);
-        /**
-         * step 3
-         *
-         * find aisle
-         */
-        var aisleRowIndices = this.getAisleRowIndices(classified);
-        /**
-         * step 4
-         *
-         * classify cells by section
-         */
-        var sections = this.classifyCellsBySection(classified, aisleRowIndices);
-        /**
-         * step 5
-         *
-         * rearrange by aisle
-         */
-        var rearranged = this.rearrangeByAisle(type, sections);
-        /**
-         * step 6
-         *
-         * if skip numbering, remove empty cells
-         */
-        if (skipNumbering)
-            rearranged = this.removeEmptyCells(rearranged);
-        /**
-         * step 7
-         *
-         * merge rows
-         */
-        var merged = this.mergeRows(rearranged);
-        /**
-         * step 8
-         *
-         * set location
-         */
-        this.setLocations(merged, startSection, startUnit);
-    }
-    classifyByRow(cells) {
-        var classified = [];
-        cells.forEach(c => {
-            var index = c.index;
-            var { row, column } = index;
-            if (!classified[row]) {
-                classified[row] = [];
-            }
-            classified[row][column] = c;
-        });
-        return classified;
-    }
-    findAisle(rows) {
-        if (!rows) {
-            return [];
-        }
-        return rows.filter(r => {
-            return r[0] && r[0].isAisle;
-        });
-    }
-    getAisleRowIndices(rows) {
-        var aisles = this.findAisle(rows);
-        var aisleRowIndices = [];
-        aisles.forEach(aisle => {
-            aisleRowIndices.push(rows.indexOf(aisle));
-        });
-        return aisleRowIndices;
-    }
-    classifyCellsBySection(rows, aisleRowIndices) {
-        var sections = [];
-        var wasAisle = false;
-        var section;
-        rows.forEach((row, i) => {
-            var isAisle = aisleRowIndices.indexOf(i) > -1;
-            if (!(wasAisle || isAisle)) {
-                section = [];
-                sections.push(section);
-            }
-            wasAisle = isAisle;
-            section.push(row);
-        });
-        return sections;
-    }
-    rearrangeByAisle(type, sections) {
-        var rearranged = [];
-        switch (type.toLowerCase()) {
-            case 'cw':
-                var reverse = false;
-                sections.forEach((rows, i) => {
-                    var section = [];
-                    rearranged.push(section);
-                    rows.forEach((r, i) => {
-                        if (reverse)
-                            r.reverse();
-                        if (i % 2 === 0) {
-                            section.push(r);
-                            reverse = !reverse;
-                        }
-                    });
-                });
-                break;
-            case 'ccw':
-                var reverse = true;
-                sections.forEach((rows, i) => {
-                    var section = [];
-                    rearranged.push(section);
-                    rows.forEach((r, i) => {
-                        if (reverse)
-                            r.reverse();
-                        if (i % 2 === 0) {
-                            section.push(r);
-                            reverse = !reverse;
-                        }
-                    });
-                });
-                break;
-            case 'zigzag':
-                sections.forEach((rows, i) => {
-                    var section = [];
-                    rows.forEach((r, i) => {
-                        if (i % 2 === 0) {
-                            section.push(r);
-                        }
-                    });
-                    var sectionLength = section.length;
-                    var tempRow = [];
-                    var tempSection = [];
-                    section.forEach((row, rowIdx) => {
-                        row.forEach((cell, idx) => {
-                            tempRow[rowIdx + idx * section.length] = cell;
-                        });
-                    });
-                    var chunkSize = tempRow.length / sectionLength;
-                    for (var idx = 0; idx < sectionLength; idx++) {
-                        tempSection.push(tempRow.slice(idx * chunkSize, (idx + 1) * chunkSize));
-                    }
-                    rearranged.push(tempSection);
-                });
-                break;
-            case 'zigzag-reverse':
-                sections.forEach((rows, i) => {
-                    var section = [];
-                    rows.forEach((r, i) => {
-                        if (i % 2 === 0) {
-                            r.reverse();
-                            section.push(r);
-                        }
-                    });
-                    var sectionLength = section.length;
-                    var tempRow = [];
-                    var tempSection = [];
-                    section.forEach((row, rowIdx) => {
-                        row.forEach((cell, idx) => {
-                            tempRow[rowIdx + idx * section.length] = cell;
-                        });
-                    });
-                    var chunkSize = tempRow.length / sectionLength;
-                    for (var idx = 0; idx < sectionLength; idx++) {
-                        tempSection.push(tempRow.slice(idx * chunkSize, (idx + 1) * chunkSize));
-                    }
-                    rearranged.push(tempSection);
-                });
-                break;
-        }
-        return rearranged;
-    }
-    removeEmptyCells(sections) {
-        var newSections = [];
-        sections.forEach(rows => {
-            var newRows = [];
-            newSections.push(newRows);
-            rows.forEach(row => {
-                var newRow = [];
-                newRows.push(newRow);
-                row.forEach((c, i) => {
-                    if (!c.isEmpty)
-                        newRow.push(c);
-                });
-            });
-        });
-        return newSections;
-    }
-    mergeRows(sections) {
-        var merged = [];
-        sections.forEach(section => {
-            var newSection = [];
-            section.forEach(rows => {
-                var mergedRow = [];
-                rows.forEach(row => {
-                    mergedRow = mergedRow.concat(row);
-                });
-                newSection = newSection.concat(mergedRow);
-            });
-            merged.push(newSection);
-        });
-        return merged;
-    }
-    setLocations(sections, startSection, startUnit) {
-        var { sectionDigits = 2, unitDigits = 2 } = this.state;
-        var sectionNumber = Number(startSection) || 1;
-        sections.forEach(section => {
-            var unitNumber = Number(startUnit) || 1;
-            section.forEach(c => {
-                if (!c.isEmpty) {
-                    c.set('section', String(sectionNumber).padStart(sectionDigits, '0'));
-                    c.set('unit', String(unitNumber).padStart(unitDigits, '0'));
-                }
-                else {
-                    c.set('section', null);
-                    c.set('unit', null);
-                }
-                unitNumber++;
-            });
-            sectionNumber++;
-        });
+        const { sectionDigits = 2, unitDigits = 2 } = this.state;
+        const selectedCells = this.root.selected;
+        increaseLocation(selectedCells, type, skipNumbering, startSection, startUnit, sectionDigits, unitDigits);
     }
     get columns() {
         return this.getState('columns');
@@ -1023,25 +746,25 @@ let RackTable = class RackTable extends ContainerAbstract {
         return this.components;
     }
     get widths_sum() {
-        var widths = this.widths;
+        const widths = this.widths;
         return widths ? widths.filter((width, i) => i < this.columns).reduce((sum, width) => sum + width, 0) : this.columns;
     }
     get heights_sum() {
-        var heights = this.heights;
+        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() {
-        var widths = this.widths;
-        var heights = this.heights;
-        var inside = this.textBounds;
-        var width_unit = inside.width / this.widths_sum;
-        var height_unit = inside.height / this.heights_sum;
-        var x = inside.left;
-        var y = inside.top;
-        var controls = [];
+        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 = [];
         widths.slice(0, this.columns - 1).forEach((width) => {
             x += width * width_unit;
             controls.push({
@@ -1061,6 +784,11 @@ let RackTable = class RackTable extends ContainerAbstract {
         return controls;
     }
     onchange(after, before) {
+        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'));
         }