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

package/dist/rack-grid-cell.d.ts

@@ -1,7 +1,7 @@
-import { Component, Properties, RealObject } from '@hatiolab/things-scene';
+import { Component, ComponentNature, Properties } from '@hatiolab/things-scene';
 import type { State } from '@hatiolab/things-scene';
-/** RackGridCell 컴포넌트 state */
 export interface RackGridCellState extends State {
+    cellId?: string;
     section?: string;
     unit?: string;
     shelfLocations?: string;
@@ -253,89 +253,38 @@ declare const RackGridCell_base: (new (...args: any[]) => {
     get element(): HTMLElement | null;
     set element(_v: HTMLElement | null): any;
 }) & typeof Component;
-/**
- * 1. 스타일을 상속 받아야 함. (cascade-style)
- * 2. 스타일을 동적처리할 수 있음. (로직처리)
- * 3. 데이타를 받을 수 있음.
- */
-export declare class RackGridCell extends RackGridCell_base {
+export default class RackGridCell extends RackGridCell_base {
     get state(): RackGridCellState;
     _focused: boolean;
+    constructor(model: any, context: any);
     get hasTextProperty(): boolean;
-    get nature(): {
-        mutable: boolean;
-        resizable: boolean;
-        rotatable: boolean;
-        properties: ({
-            type: string;
-            label: string;
-            name: string;
-            placeholder?: undefined;
-            property?: undefined;
-        } | {
-            type: string;
-            label: string;
-            name: string;
-            placeholder: string;
-            property?: undefined;
-        } | {
-            type: string;
-            label: string;
-            name: string;
-            property: {
-                event: {
-                    'increase-location-pattern': (event: CustomEvent) => void;
-                };
-                merge?: undefined;
-                split?: undefined;
-            };
-            placeholder?: undefined;
-        } | {
-            type: string;
-            label: string;
-            name: string;
-            property: {
-                merge: boolean;
-                split: boolean;
-                event?: undefined;
-            };
-            placeholder?: undefined;
-        })[];
-    };
-    buildRealObject(): RealObject | undefined;
-    set merged(merged: any);
-    get merged(): any;
-    set rowspan(rowspan: any);
-    get rowspan(): any;
-    set colspan(colspan: any);
-    get colspan(): any;
+    get nature(): ComponentNature;
+    /** 3D mesh 미생성 — view mode 의 리소스 0. */
+    buildRealObject(): undefined;
+    get isEmpty(): boolean;
     get border(): any;
-    get isEmpty(): any;
-    _drawBorder(context: CanvasRenderingContext2D, x: number, y: number, to_x: number, to_y: number, style: any): void;
-    render(context: CanvasRenderingContext2D): void;
-    _draw_rack_cell(context: CanvasRenderingContext2D): void;
-    get decotag(): string;
+    set merged(v: boolean);
+    get merged(): boolean;
+    set rowspan(v: number);
+    get rowspan(): number;
+    set colspan(v: number);
+    get colspan(): number;
+    /** Parent (RackGrid) 안에서 자기 (col, row) 인덱스 — components 순서 = row * columns + col. */
     get index(): {
         row: number;
         column: number;
     };
     get rowIndex(): number;
     get columnIndex(): number;
-    get leftCell(): any;
-    get rightCell(): any;
-    get aboveCell(): any;
-    get belowCell(): any;
-    get rowCells(): any;
-    get columnCells(): any;
-    get aboveRowCells(): any;
-    get lastUnit(): number;
-    get firstUnit(): number;
-    get notEmptyRowCells(): any;
-    get emptyRowCells(): any;
+    get rowCells(): Component[];
+    get columnCells(): Component[];
+    get notEmptyRowCells(): Component[];
     get isAisle(): boolean;
-    onchange(after: Properties, before: Properties): void;
+    onchange(after: Properties, _before: Properties): void;
     onmouseenter(): void;
     onmouseleave(): void;
     contains(x: number, y: number): boolean;
+    render(context: CanvasRenderingContext2D): void;
+    private _drawSide;
 }
 export {};

package/dist/rack-grid-cell.js

@@ -1,36 +1,56 @@
-import { __decorate } from "tslib";
 /*
  * 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 { __decorate } from "tslib";
 import { Component, RectPath, sceneComponent } from '@hatiolab/things-scene';
-import { Rack } from './rack-column.js';
 const EMPTY_BORDER = {};
-function isBottomMost(idx, rows, columns) {
-    return idx >= (rows - 1) * columns;
+const EMPTY_CELL_FILL = '#efefef';
+const EMPTY_CELL_STROKE = '#ccc';
+function hasAnyProperty(o, ...props) {
+    for (const p of props)
+        if (Object.prototype.hasOwnProperty.call(o, p))
+            return true;
+    return false;
 }
-function isRightMost(idx, rows, columns) {
-    return (idx + 1) % columns == 0;
+function isRightMost(idx, _rows, columns) {
+    return (idx + 1) % columns === 0;
 }
-function hasAnyProperty(o, ...properties) {
-    for (let p in properties) {
-        if (o.hasOwnProperty(properties[p])) {
-            return true;
-        }
-    }
+function isBottomMost(idx, rows, columns) {
+    return idx >= (rows - 1) * columns;
 }
-const EMPTY_CELL_STROKE_STYLE = '#ccc';
-const EMPTY_CELL_LINE_WIDTH = 1;
-const EMPTY_CELL_FILL_STYLE = '#efefef';
-/**
- * 1. 스타일을 상속 받아야 함. (cascade-style)
- * 2. 스타일을 동적처리할 수 있음. (로직처리)
- * 3. 데이타를 받을 수 있음.
- */
+// 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;
 let RackGridCell = class RackGridCell extends RectPath(Component) {
     get state() {
         return super.state;
     }
     _focused = false;
+    constructor(model, context) {
+        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;
     }
@@ -40,33 +60,11 @@ let RackGridCell = class RackGridCell extends RectPath(Component) {
             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: '',
@@ -75,8 +73,16 @@ let RackGridCell = class RackGridCell extends RectPath(Component) {
                         event: {
                             'increase-location-pattern': (event) => {
                                 const { increasingDirection, skipNumbering, startSection, startUnit } = event.detail;
-                                const rackTable = this.parent;
-                                rackTable.increaseLocation(increasingDirection, skipNumbering, startSection, startUnit);
+                                const parent = this.parent;
+                                if (typeof parent?.increaseLocation === 'function') {
+                                    // RackGrid 의 root.selected 활용 — framework 가 자동 갱신
+                                    const selected = this.root?.selected;
+                                    const keys = (selected || [])
+                                        .filter(c => c?.state?.type === 'rack-grid-cell')
+                                        .map(c => c.state.cellId)
+                                        .filter((k) => !!k);
+                                    parent.increaseLocation(keys, increasingDirection, skipNumbering, startSection, startUnit);
+                                }
                             }
                         }
                     }
@@ -85,237 +91,135 @@ let RackGridCell = class RackGridCell extends RectPath(Component) {
                     type: 'editor-table',
                     label: '',
                     name: '',
-                    property: {
-                        merge: false,
-                        split: false
-                    }
+                    property: { merge: false, split: false }
                 }
             ]
         };
     }
+    /** 3D mesh 미생성 — view mode 의 리소스 0. */
     buildRealObject() {
-        // 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);
+        return undefined;
     }
-    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');
+    // ── Domain getters ────────────────────────────────────
+    get isEmpty() {
+        return !!this.getState('isEmpty');
     }
     get border() {
         return this.state.border || EMPTY_BORDER;
     }
-    get isEmpty() {
-        return this.getState('isEmpty');
+    set merged(v) {
+        this.set('merged', !!v);
+        if (v)
+            this.set('text', '');
     }
-    _drawBorder(context, x, y, to_x, to_y, style) {
-        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() {
+        return !!this.getState('merged');
     }
-    render(context) {
-        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 그리기
+    set rowspan(v) { this.set('rowspan', v); }
+    get rowspan() { return this.getState('rowspan') ?? 1; }
+    set colspan(v) { this.set('colspan', v); }
+    get colspan() { return this.getState('colspan') ?? 1; }
+    /** Parent (RackGrid) 안에서 자기 (col, row) 인덱스 — components 순서 = row * columns + col. */
+    get index() {
         const parent = this.parent;
+        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);
-    }
-    _draw_rack_cell(context) {
-        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;
-        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;
-        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;
-        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;
-        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;
-        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;
+        const cols = parent.columns ?? 1;
+        return { row: Math.floor(idx / cols), column: idx % cols };
     }
+    get rowIndex() { return this.index.row; }
+    get columnIndex() { return this.index.column; }
     get rowCells() {
-        const rackTable = this.parent;
-        return rackTable.getCellsByRow(this.rowIndex);
+        const parent = this.parent;
+        return parent?.getCellsByRow?.(this.rowIndex) ?? [];
     }
     get columnCells() {
-        const rackTable = this.parent;
-        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;
+        const parent = this.parent;
+        return parent?.getCellsByColumn?.(this.columnIndex) ?? [];
     }
     get notEmptyRowCells() {
-        return this.rowCells.filter((c) => {
-            return !c.getState('isEmpty');
-        });
-    }
-    get emptyRowCells() {
-        return this.rowCells.filter((c) => {
-            return c.getState('isEmpty');
-        });
+        return this.rowCells.filter(c => !c.getState?.('isEmpty'));
     }
     get isAisle() {
         return this.notEmptyRowCells.length === 0;
     }
-    onchange(after, before) {
+    // ── Lifecycle ─────────────────────────────────────────
+    onchange(after, _before) {
         if (hasAnyProperty(after, 'isEmpty')) {
-            // FIXME
+            // isEmpty 토글 시 section/unit 클리어 (rack-table-cell 동작)
             delete this.model.unit;
             delete this.model.section;
         }
+        // Parent 의 location index 무효화 (RackGrid 가 onchange 다시 안 받으므로 자식이 알림)
+        const parent = this.parent;
+        parent?.invalidateLocationIndex?.();
     }
-    onmouseenter() {
-        this.trigger('deco');
-    }
-    onmouseleave() {
-        this.trigger('decoreset');
-    }
+    onmouseenter() { this.trigger('deco'); }
+    onmouseleave() { this.trigger('decoreset'); }
     contains(x, y) {
-        const contains = super.contains(x, y);
-        if (!contains) {
+        const c = super.contains(x, y);
+        if (!c) {
             this._focused = false;
             this.invalidate();
         }
-        return contains;
+        return c;
+    }
+    // ── 2D rendering (modeling editor) ────────────────────
+    //
+    // *view mode* (= app.isViewMode) 면 안 그림 — *configuration storage 만*. modeling
+    // 시에만 사각형 + border + isEmpty 패턴 시각화.
+    render(context) {
+        if (this.app?.isViewMode)
+            return;
+        const { left, top, width, height } = this.bounds;
+        const { isEmpty } = this.state;
+        const border = this.border;
+        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();
+        }
+        // 명시적 cell 영역 표시 (border default — 자식 cell 의 미니 frame)
+        context.beginPath();
+        context.lineWidth = 0;
+        context.rect(left, top, width, height);
+        const parent = this.parent;
+        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);
+        }
+        if (isBottomMost(idx, rows, columns)) {
+            this._drawSide(context, left + width, top + height, left, top + height, border.bottom);
+        }
+    }
+    _drawSide(ctx, x, y, tx, ty, style) {
+        if (!style?.strokeStyle || !style.lineWidth)
+            return;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(tx, ty);
+        Component.drawStroke(ctx, style);
     }
 };
 RackGridCell = __decorate([
     sceneComponent('rack-grid-cell')
 ], RackGridCell);
-export { RackGridCell };
+export default RackGridCell;
 ;
-['border'].forEach(getter => Component.memoize(RackGridCell.prototype, getter, false));
+['border'].forEach(g => Component.memoize(RackGridCell.prototype, g, false));
 //# sourceMappingURL=rack-grid-cell.js.map