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

package/dist/carrier.d.ts

@@ -0,0 +1,263 @@
+import { Component, Properties, ComponentNature, Shape, RealObject } from '@hatiolab/things-scene';
+export declare class Carrier3D extends RealObject {
+    build(): void;
+}
+declare const Carrier_base: (new (...args: any[]) => {
+    contains(x: number, y: number): boolean;
+    get path(): {
+        x: any;
+        y: any;
+    }[];
+    set path(path: {
+        x: any;
+        y: any;
+    }[]): any;
+    get anchors(): {
+        name: string;
+        position: {
+            x: any;
+            y: any;
+        };
+    }[];
+    get bounds(): any;
+    set bounds(bounds: any): any;
+    render(ctx: CanvasRenderingContext2D): void;
+    _app: any;
+    _model: any;
+    _state: any;
+    _delta: any;
+    _animation: any;
+    _animate: any;
+    _parent: any;
+    _disposed: any;
+    _textHidden: any;
+    _text_substitutor: any;
+    _value_substitutor: any;
+    _mappings: any;
+    _realObject: import("@hatiolab/things-scene").IRealObject | undefined;
+    _cachedState: any;
+    updatedAt: any;
+    fontSize: any;
+    __cache__: any;
+    created(): void;
+    added(parent: any): void;
+    removed(parent: any): void;
+    ready(): Promise<void>;
+    touch(): void;
+    clearCache(...attrs: any[]): void;
+    removeSelf(completely: any): void;
+    resetAnimation(): void;
+    dispose(): void;
+    get nature(): import("@hatiolab/things-scene").ComponentNature;
+    get disposed(): boolean;
+    isLayer(): boolean;
+    isGroup(): boolean;
+    isContainer(): this is import("@hatiolab/things-scene/dist-types/types/component").Container;
+    isLine(): boolean;
+    isRoot(): boolean;
+    isRootModel(): boolean;
+    is3dish(): boolean;
+    get is3dMode(): boolean;
+    isIn3DSpace(): boolean;
+    isTemplate(): boolean;
+    isHTMLElement(): boolean;
+    isConnectable(): boolean;
+    isIdentifiable(): boolean;
+    isPositionable(): boolean;
+    replaceRefids(replaceMap: any): void;
+    get(property: any): any;
+    set(props: any, propval?: any): any;
+    getState(property: any): any;
+    setState(props: any, propval?: any): any;
+    get model(): any;
+    get state(): any;
+    get hierarchy(): any;
+    get volatile(): never[];
+    _applyProps(target: any, props: any, options: any): any;
+    move(offset: {
+        x: number;
+        y: number;
+    }, ...args: boolean[]): void;
+    symmetryX(x?: number): void;
+    symmetryY(y: number): void;
+    adjustResize(bounds: import("@hatiolab/things-scene").BOUNDS, origin_bounds: import("@hatiolab/things-scene").BOUNDS, diagonal: boolean): {
+        left: any;
+        top: any;
+        width: any;
+        height: any;
+    };
+    adjustRotation(rotation: number, step: boolean): number;
+    outline(progress: number): any;
+    get center(): import("@hatiolab/things-scene").POINT;
+    set center(p: import("@hatiolab/things-scene").POINT): any;
+    get location(): import("@hatiolab/things-scene").POINT;
+    set location(l: import("@hatiolab/things-scene").POINT): any;
+    get rotate(): import("@hatiolab/things-scene").POINT;
+    set rotate(r: import("@hatiolab/things-scene").POINT): any;
+    get dimension(): import("@hatiolab/things-scene").DIMENSION;
+    set dimension(d: import("@hatiolab/things-scene").DIMENSION): any;
+    get drawPath(): import("@hatiolab/things-scene").POINT[];
+    get rotatePoint(): import("@hatiolab/things-scene").POINT;
+    get mutable(): boolean;
+    get resizable(): boolean;
+    get rotatable(): boolean;
+    buildRealObject(): import("@hatiolab/things-scene").IRealObject | undefined;
+    get realObject(): import("@hatiolab/things-scene").IRealObject | undefined;
+    draw(context?: import("@hatiolab/things-scene").SceneRenderContext): void;
+    prerender(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    postrender(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    prepare(resolve: (component: Component) => void, reject: (reason: any) => void): void;
+    prepareIf(condition: boolean): void;
+    drawText(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    drawStroke(context: import("@hatiolab/things-scene").SceneRenderContext, override?: Record<string, unknown>): void;
+    drawFill(context: import("@hatiolab/things-scene").SceneRenderContext, override?: Record<string, unknown>): void;
+    get strokeStyle(): any;
+    set strokeStyle(v: any): any;
+    get fillStyle(): any;
+    set fillStyle(v: any): any;
+    get fontColor(): string;
+    set fontColor(v: string): any;
+    get rotation(): number;
+    set rotation(v: number): any;
+    get decorators(): string[];
+    get decotag(): string;
+    get hidden(): boolean;
+    set hidden(v: boolean): any;
+    get tag(): string;
+    set tag(v: string): any;
+    get appendum(): any;
+    set appendum(v: any): any;
+    defaultTextSubstitutor(): string;
+    textLines(context?: import("@hatiolab/things-scene").SceneRenderContext): any[][];
+    get font(): string;
+    get lineHeight(): number;
+    get textSubstitutor(): () => string;
+    get text(): string;
+    set text(v: string): any;
+    get textBounds(): import("@hatiolab/things-scene").BOUNDS;
+    get textRotation(): number;
+    get textHidden(): boolean;
+    set textHidden(v: boolean): any;
+    get hasTextProperty(): boolean;
+    animate(opts: import("@hatiolab/things-scene").AnimationConfig): any;
+    effect(context: import("@hatiolab/things-scene").SceneRenderContext, model: any): void;
+    serialize(...others: any[]): string;
+    trim(): void;
+    closeScene(data: any): void;
+    delta(attr?: string | object, value?: any): any;
+    invalidate(): void;
+    get value(): any;
+    set value(v: any): any;
+    get data(): any;
+    set data(v: any): any;
+    set tap(v: any): any;
+    get mappings(): any[];
+    get retention(): number;
+    get animation(): import("@hatiolab/things-scene").AnimationController | undefined;
+    get started(): boolean;
+    set started(v: boolean): any;
+    get controls(): import("@hatiolab/things-scene").Control[] | undefined;
+    findFirst(finder: string | ((c: Component) => boolean), ...others: any[]): Component | undefined;
+    findAll(s: string | ((c: Component) => boolean), ...others: any[]): any[] | undefined;
+    capture(x: number, y: number, except?: (c: Component) => boolean): any;
+    findAnchor(name: string): any;
+    isDescendible(container: Component): boolean;
+    getContext(component?: unknown): any;
+    get root(): Component;
+    get rootModel(): Component;
+    get parent(): Component;
+    set parent(v: Component): any;
+    get scalable(): boolean;
+    get stuck(): boolean;
+    get capturable(): boolean;
+    get position(): string;
+    get origin(): string;
+    get offset(): import("@hatiolab/things-scene").POINT;
+    get app(): import("@hatiolab/things-scene").ApplicationContext;
+    drawEffect(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    prepareFill(resolve: Function, reject: Function): void;
+    prepareFillIf(condition: boolean): void;
+    onchangeFill(after: Record<string, any>, before: Record<string, any>): void;
+    drawImage(context: import("@hatiolab/things-scene").SceneRenderContext, image: HTMLImageElement, left: number, top: number, width: number, height: number): void;
+    mutateBounds(logic: ((bounds: import("@hatiolab/things-scene").BOUNDS) => import("@hatiolab/things-scene").BOUNDS | void) | null, context?: any): void;
+    mutatePath(beforeLogic: ((path: import("@hatiolab/things-scene").POINT[]) => import("@hatiolab/things-scene").POINT[] | void) | null, afterLogic: ((path: import("@hatiolab/things-scene").POINT[]) => import("@hatiolab/things-scene").POINT[] | void) | null, context?: any): void;
+    access(accessor: string): any;
+    substitute(template: string, data: any): string | undefined;
+    onchangeMappings(after: Record<string, any>, before: Record<string, any>): void;
+    onchangeData(after: Record<string, any>, before: Record<string, any>): void;
+    buildMappings(): void;
+    executeMappings(force?: boolean): void;
+    disposeMappings(): void;
+    ondropfile(transfered: FileList, files: string[]): void;
+    transcoordS2P(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    transcoordP2S(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    transcoordS2T(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordT2P(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordT2S(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordS2TR(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordS2O(x: number, y: number, target: Component): import("@hatiolab/things-scene").POINT;
+    transcoordC2S(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordS2C(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toParent(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    fromParent(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    toScene(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    fromScene(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toLocal(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toGlobal(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toOther(x: number, y: number, target: Component): import("@hatiolab/things-scene").POINT;
+    on(name: string | object, callback: Function, context?: any): any;
+    off(name?: string | object, callback?: Function, context?: any): any;
+    once(name: string | object, callback: Function, context?: any): any;
+    trigger(name: string, ...args: any[]): any;
+    delegate_on(delegator: any): any;
+    delegate_off(delegator: any): any;
+    onchange(after: Record<string, any>, before: Record<string, any>): void;
+    calculateBounds?(): void;
+    oncreate_element?(element: HTMLElement): void;
+    removeComponent(component: Component, ghost?: boolean): void;
+    addComponent(component: Component, ghost?: boolean): void;
+    insertComponentAt(component: Component, index: number, ghost?: boolean): void;
+    getOverlay(component: Component): HTMLElement | undefined;
+    findById(id: string): Component | undefined;
+    findByRefid(ref: string | number): Component | undefined;
+    findAllById(id: string): Component[];
+    resize(): void;
+    fit(type?: string): void;
+    get components(): Component[] | undefined;
+    get layout(): any;
+    get auxOverlay(): HTMLElement | undefined;
+    get isReady(): boolean;
+    get unitScale(): number;
+    get selected(): Component[];
+    set selected(_v: Component[]): any;
+    get focused(): Component | null;
+    set focused(_v: Component | null): any;
+    get hasSameParentForAllSelected(): boolean;
+    set hasSameParentForAllSelected(_v: boolean): any;
+    get fitMode(): string | undefined;
+    set fitMode(_v: string | undefined): any;
+    get element(): HTMLElement | null;
+    set element(_v: HTMLElement | null): any;
+}) & typeof Shape;
+export declare class Carrier extends Carrier_base {
+    private _host?;
+    private _syncingToHost;
+    private _animState?;
+    private _animFrameId;
+    is3dish(): boolean;
+    buildRealObject(): RealObject | undefined;
+    get nature(): ComponentNature;
+    get hostComponent(): Component | undefined;
+    private _getHostTarget;
+    private _onHostChanged;
+    private _syncToHost;
+    private _animateToHost;
+    private _animStep;
+    private _cancelAnimation;
+    private _unbindHost;
+    onchange(after: Properties, before: Properties): void;
+    ready(): Promise<void>;
+    dispose(): void;
+    render(ctx: CanvasRenderingContext2D): void;
+}
+export {};

package/dist/carrier.js

@@ -0,0 +1,272 @@
+import { __decorate } from "tslib";
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { RectPath, Shape, sceneComponent, RealObject } from '@hatiolab/things-scene';
+import * as THREE from 'three';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'shelves',
+            name: 'shelves',
+            property: 'shelves'
+        },
+        {
+            type: 'color',
+            label: 'shelf-color',
+            name: 'shelfColor',
+            property: 'shelfColor'
+        },
+        {
+            type: 'color',
+            label: 'post-color',
+            name: 'postColor',
+            property: 'postColor'
+        },
+        {
+            type: 'id-input',
+            label: 'host',
+            name: 'host',
+            property: {
+                component: true
+            }
+        }
+    ],
+    help: 'scene/component/carrier'
+};
+const ANIM_DURATION = 1000;
+const DEFAULT_SHELF_COLOR = '#b0b0b0';
+const DEFAULT_POST_COLOR = '#666666';
+export class Carrier3D extends RealObject {
+    build() {
+        super.build();
+        var { width, height, depth, fillStyle, shelfColor, postColor, shelves = 2 } = this.component.state;
+        var w = width;
+        var h = height;
+        var d = depth || 60;
+        var numShelves = Math.max(1, Math.min(shelves, 5));
+        var shelfThick = Math.max(1.5, d * 0.04);
+        var postR = Math.min(w, h) * 0.03;
+        var totalH = d;
+        var shelfMat = new THREE.MeshStandardMaterial({
+            color: shelfColor || fillStyle || DEFAULT_SHELF_COLOR,
+            roughness: 0.4,
+            metalness: 0.2
+        });
+        var postMat = new THREE.MeshStandardMaterial({
+            color: postColor || DEFAULT_POST_COLOR,
+            roughness: 0.5,
+            metalness: 0.3
+        });
+        // ── 선반판 ──
+        for (var i = 0; i < numShelves; i++) {
+            var shelfY = (i / (numShelves - 1 || 1)) * (totalH - shelfThick);
+            var shelfGeo = new THREE.BoxGeometry(w, shelfThick, h);
+            var shelf = new THREE.Mesh(shelfGeo, shelfMat);
+            shelf.position.y = shelfY + shelfThick / 2;
+            shelf.castShadow = true;
+            shelf.receiveShadow = true;
+            this.object3d.add(shelf);
+        }
+        // ── 기둥 4개 (모서리) ──
+        var postGeo = new THREE.CylinderGeometry(postR, postR, totalH, 8);
+        var insetX = w * 0.42;
+        var insetZ = h * 0.42;
+        for (var px of [-insetX, insetX]) {
+            for (var pz of [-insetZ, insetZ]) {
+                var post = new THREE.Mesh(postGeo, postMat);
+                post.position.set(px, totalH / 2, pz);
+                post.castShadow = true;
+                this.object3d.add(post);
+            }
+        }
+        // 수직 중앙 정렬
+        this.object3d.children.forEach(child => {
+            child.position.y -= totalH / 2;
+        });
+    }
+}
+/* ── 2D 렌더 ── */
+function renderCarrier(ctx, x, y, w, h, fillStyle, shelfColor, postColor, shelves) {
+    var numShelves = Math.max(1, Math.min(shelves || 2, 5));
+    var postW = Math.max(2, w * 0.06);
+    var inset = postW / 2;
+    // ── 기둥 4개 ──
+    ctx.fillStyle = postColor || DEFAULT_POST_COLOR;
+    for (var px of [x + inset, x + w - inset - postW]) {
+        for (var py of [y + inset, y + h - inset - postW]) {
+            ctx.fillRect(px, py, postW, postW);
+        }
+    }
+    // ── 선반판 ──
+    ctx.fillStyle = shelfColor || fillStyle || DEFAULT_SHELF_COLOR;
+    var shelfH = Math.max(2, h * 0.04);
+    for (var i = 0; i < numShelves; i++) {
+        var sy = y + (i / (numShelves - 1 || 1)) * (h - shelfH);
+        ctx.fillRect(x, sy, w, shelfH);
+    }
+    // 외곽선
+    ctx.strokeStyle = '#999999';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, w, h);
+}
+let Carrier = class Carrier extends RectPath(Shape) {
+    _host;
+    _syncingToHost = false;
+    _animState;
+    _animFrameId = 0;
+    is3dish() {
+        return true;
+    }
+    buildRealObject() {
+        return new Carrier3D(this);
+    }
+    get nature() {
+        return NATURE;
+    }
+    get hostComponent() {
+        var { host } = this.state;
+        if (!this._host && host) {
+            this._host = this.root.findById?.(host);
+            this._host?.on('change', this._onHostChanged, this);
+        }
+        return this._host;
+    }
+    _getHostTarget() {
+        var host = this._host;
+        if (!host)
+            return undefined;
+        var hs = host.state;
+        var { width, height } = this.state;
+        return {
+            left: hs.left + (hs.width - width) / 2,
+            top: hs.top + (hs.height - height) / 2,
+            zPos: (hs.zPos || 0) + (hs.depth || 0),
+            rotation: hs.rotation || 0
+        };
+    }
+    _onHostChanged(after) {
+        if (after.hasOwnProperty('left') ||
+            after.hasOwnProperty('top') ||
+            after.hasOwnProperty('zPos') ||
+            after.hasOwnProperty('width') ||
+            after.hasOwnProperty('height') ||
+            after.hasOwnProperty('depth') ||
+            after.hasOwnProperty('rotation')) {
+            if (this._animState) {
+                // 애니메이션 중이면 목표만 갱신
+                var target = this._getHostTarget();
+                if (target)
+                    this._animState.to = target;
+            }
+            else {
+                this._syncToHost();
+            }
+        }
+    }
+    _syncToHost() {
+        var target = this._getHostTarget();
+        if (!target)
+            return;
+        this._syncingToHost = true;
+        this.set(target);
+        this._syncingToHost = false;
+    }
+    _animateToHost() {
+        var target = this._getHostTarget();
+        if (!target)
+            return;
+        this._cancelAnimation();
+        var { left, top, rotation = 0 } = this.state;
+        var zPos = this.state.zPos || 0;
+        this._animState = {
+            startTime: Date.now(),
+            from: { left, top, zPos, rotation },
+            to: target
+        };
+        this._animStep();
+    }
+    _animStep() {
+        var anim = this._animState;
+        if (!anim)
+            return;
+        var t = Math.min((Date.now() - anim.startTime) / ANIM_DURATION, 1);
+        // easeInOutCubic
+        var ease = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+        this._syncingToHost = true;
+        this.set({
+            left: anim.from.left + (anim.to.left - anim.from.left) * ease,
+            top: anim.from.top + (anim.to.top - anim.from.top) * ease,
+            zPos: anim.from.zPos + (anim.to.zPos - anim.from.zPos) * ease,
+            rotation: anim.from.rotation + (anim.to.rotation - anim.from.rotation) * ease
+        });
+        this._syncingToHost = false;
+        if (t < 1) {
+            this._animFrameId = requestAnimationFrame(() => this._animStep());
+        }
+        else {
+            this._animState = undefined;
+            this._animFrameId = 0;
+        }
+    }
+    _cancelAnimation() {
+        if (this._animFrameId) {
+            cancelAnimationFrame(this._animFrameId);
+            this._animFrameId = 0;
+        }
+        this._animState = undefined;
+    }
+    _unbindHost() {
+        this._cancelAnimation();
+        if (this._host) {
+            this._host.off('change', this._onHostChanged, this);
+            delete this._host;
+        }
+    }
+    onchange(after, before) {
+        if (after.hasOwnProperty('host') || before.hasOwnProperty('host')) {
+            this._unbindHost();
+            // 새 호스트로 애니메이션 전환
+            if (this.hostComponent) {
+                this._animateToHost();
+            }
+        }
+        // 호스트에 의한 위치 동기화 중이면 재귀 방지
+        if (!this._syncingToHost && this._host && !this._animState) {
+            if (after.hasOwnProperty('width') ||
+                after.hasOwnProperty('height')) {
+                this._syncToHost();
+            }
+        }
+        super.onchange(after, before);
+    }
+    async ready() {
+        // 초기 로드 시 즉시 바인딩 (애니메이션 없이)
+        if (this.hostComponent) {
+            this._syncToHost();
+        }
+    }
+    dispose() {
+        this._unbindHost();
+        super.dispose();
+    }
+    render(ctx) {
+        var { left, top, width, height } = this.bounds;
+        var fillStyle = this.getState('fillStyle');
+        var shelfColor = this.getState('shelfColor');
+        var postColor = this.getState('postColor');
+        var shelves = this.getState('shelves');
+        renderCarrier(ctx, left, top, width, height, fillStyle, shelfColor, postColor, shelves);
+        ctx.beginPath();
+        ctx.rect(left, top, width, height);
+    }
+};
+Carrier = __decorate([
+    sceneComponent('carrier')
+], Carrier);
+export { Carrier };
+//# sourceMappingURL=carrier.js.map

package/dist/carrier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carrier.js","sourceRoot":"","sources":["../src/carrier.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Properties, ComponentNature, RectPath, Shape, sceneComponent, RealObject } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'shelves',\n      name: 'shelves',\n      property: 'shelves'\n    },\n    {\n      type: 'color',\n      label: 'shelf-color',\n      name: 'shelfColor',\n      property: 'shelfColor'\n    },\n    {\n      type: 'color',\n      label: 'post-color',\n      name: 'postColor',\n      property: 'postColor'\n    },\n    {\n      type: 'id-input',\n      label: 'host',\n      name: 'host',\n      property: {\n        component: true\n      }\n    }\n  ],\n  help: 'scene/component/carrier'\n}\n\nconst ANIM_DURATION = 1000\n\ninterface AnimTarget {\n  left: number\n  top: number\n  zPos: number\n  rotation: number\n}\n\ninterface AnimState {\n  startTime: number\n  from: AnimTarget\n  to: AnimTarget\n}\n\nconst DEFAULT_SHELF_COLOR = '#b0b0b0'\nconst DEFAULT_POST_COLOR = '#666666'\n\nexport class Carrier3D extends RealObject {\n  build() {\n    super.build()\n\n    var { width, height, depth, fillStyle, shelfColor, postColor, shelves = 2 } = this.component.state\n\n    var w = width\n    var h = height\n    var d = depth || 60\n    var numShelves = Math.max(1, Math.min(shelves, 5))\n\n    var shelfThick = Math.max(1.5, d * 0.04)\n    var postR = Math.min(w, h) * 0.03\n    var totalH = d\n\n    var shelfMat = new THREE.MeshStandardMaterial({\n      color: shelfColor || fillStyle || DEFAULT_SHELF_COLOR,\n      roughness: 0.4,\n      metalness: 0.2\n    })\n    var postMat = new THREE.MeshStandardMaterial({\n      color: postColor || DEFAULT_POST_COLOR,\n      roughness: 0.5,\n      metalness: 0.3\n    })\n\n    // ── 선반판 ──\n    for (var i = 0; i < numShelves; i++) {\n      var shelfY = (i / (numShelves - 1 || 1)) * (totalH - shelfThick)\n      var shelfGeo = new THREE.BoxGeometry(w, shelfThick, h)\n      var shelf = new THREE.Mesh(shelfGeo, shelfMat)\n      shelf.position.y = shelfY + shelfThick / 2\n      shelf.castShadow = true\n      shelf.receiveShadow = true\n      this.object3d.add(shelf)\n    }\n\n    // ── 기둥 4개 (모서리) ──\n    var postGeo = new THREE.CylinderGeometry(postR, postR, totalH, 8)\n    var insetX = w * 0.42\n    var insetZ = h * 0.42\n\n    for (var px of [-insetX, insetX]) {\n      for (var pz of [-insetZ, insetZ]) {\n        var post = new THREE.Mesh(postGeo, postMat)\n        post.position.set(px, totalH / 2, pz)\n        post.castShadow = true\n        this.object3d.add(post)\n      }\n    }\n\n    // 수직 중앙 정렬\n    this.object3d.children.forEach(child => {\n      child.position.y -= totalH / 2\n    })\n  }\n}\n\n/* ── 2D 렌더 ── */\n\nfunction renderCarrier(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  fillStyle: string,\n  shelfColor: string,\n  postColor: string,\n  shelves: number\n) {\n  var numShelves = Math.max(1, Math.min(shelves || 2, 5))\n  var postW = Math.max(2, w * 0.06)\n  var inset = postW / 2\n\n  // ── 기둥 4개 ──\n  ctx.fillStyle = postColor || DEFAULT_POST_COLOR\n  for (var px of [x + inset, x + w - inset - postW]) {\n    for (var py of [y + inset, y + h - inset - postW]) {\n      ctx.fillRect(px, py, postW, postW)\n    }\n  }\n\n  // ── 선반판 ──\n  ctx.fillStyle = shelfColor || fillStyle || DEFAULT_SHELF_COLOR\n  var shelfH = Math.max(2, h * 0.04)\n  for (var i = 0; i < numShelves; i++) {\n    var sy = y + (i / (numShelves - 1 || 1)) * (h - shelfH)\n    ctx.fillRect(x, sy, w, shelfH)\n  }\n\n  // 외곽선\n  ctx.strokeStyle = '#999999'\n  ctx.lineWidth = 1\n  ctx.strokeRect(x, y, w, h)\n}\n\n@sceneComponent('carrier')\nexport class Carrier extends RectPath(Shape) {\n  private _host?: Component\n  private _syncingToHost = false\n  private _animState?: AnimState\n  private _animFrameId = 0\n\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Carrier3D(this as any)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hostComponent(): Component | undefined {\n    var { host } = this.state\n\n    if (!this._host && host) {\n      this._host = this.root.findById?.(host)\n      this._host?.on('change', this._onHostChanged, this)\n    }\n\n    return this._host\n  }\n\n  private _getHostTarget(): AnimTarget | undefined {\n    var host = this._host\n    if (!host) return undefined\n\n    var hs = host.state\n    var { width, height } = this.state\n\n    return {\n      left: hs.left + (hs.width - width) / 2,\n      top: hs.top + (hs.height - height) / 2,\n      zPos: (hs.zPos || 0) + (hs.depth || 0),\n      rotation: hs.rotation || 0\n    }\n  }\n\n  private _onHostChanged(after: Properties) {\n    if (\n      after.hasOwnProperty('left') ||\n      after.hasOwnProperty('top') ||\n      after.hasOwnProperty('zPos') ||\n      after.hasOwnProperty('width') ||\n      after.hasOwnProperty('height') ||\n      after.hasOwnProperty('depth') ||\n      after.hasOwnProperty('rotation')\n    ) {\n      if (this._animState) {\n        // 애니메이션 중이면 목표만 갱신\n        var target = this._getHostTarget()\n        if (target) this._animState.to = target\n      } else {\n        this._syncToHost()\n      }\n    }\n  }\n\n  private _syncToHost() {\n    var target = this._getHostTarget()\n    if (!target) return\n\n    this._syncingToHost = true\n    this.set(target)\n    this._syncingToHost = false\n  }\n\n  private _animateToHost() {\n    var target = this._getHostTarget()\n    if (!target) return\n\n    this._cancelAnimation()\n\n    var { left, top, rotation = 0 } = this.state\n    var zPos = this.state.zPos || 0\n\n    this._animState = {\n      startTime: Date.now(),\n      from: { left, top, zPos, rotation },\n      to: target\n    }\n\n    this._animStep()\n  }\n\n  private _animStep() {\n    var anim = this._animState\n    if (!anim) return\n\n    var t = Math.min((Date.now() - anim.startTime) / ANIM_DURATION, 1)\n\n    // easeInOutCubic\n    var ease = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2\n\n    this._syncingToHost = true\n    this.set({\n      left: anim.from.left + (anim.to.left - anim.from.left) * ease,\n      top: anim.from.top + (anim.to.top - anim.from.top) * ease,\n      zPos: anim.from.zPos + (anim.to.zPos - anim.from.zPos) * ease,\n      rotation: anim.from.rotation + (anim.to.rotation - anim.from.rotation) * ease\n    })\n    this._syncingToHost = false\n\n    if (t < 1) {\n      this._animFrameId = requestAnimationFrame(() => this._animStep())\n    } else {\n      this._animState = undefined\n      this._animFrameId = 0\n    }\n  }\n\n  private _cancelAnimation() {\n    if (this._animFrameId) {\n      cancelAnimationFrame(this._animFrameId)\n      this._animFrameId = 0\n    }\n    this._animState = undefined\n  }\n\n  private _unbindHost() {\n    this._cancelAnimation()\n    if (this._host) {\n      this._host.off('change', this._onHostChanged, this)\n      delete this._host\n    }\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if (after.hasOwnProperty('host') || before.hasOwnProperty('host')) {\n      this._unbindHost()\n      // 새 호스트로 애니메이션 전환\n      if (this.hostComponent) {\n        this._animateToHost()\n      }\n    }\n\n    // 호스트에 의한 위치 동기화 중이면 재귀 방지\n    if (!this._syncingToHost && this._host && !this._animState) {\n      if (\n        after.hasOwnProperty('width') ||\n        after.hasOwnProperty('height')\n      ) {\n        this._syncToHost()\n      }\n    }\n\n    super.onchange(after, before)\n  }\n\n  async ready() {\n    // 초기 로드 시 즉시 바인딩 (애니메이션 없이)\n    if (this.hostComponent) {\n      this._syncToHost()\n    }\n  }\n\n  dispose() {\n    this._unbindHost()\n    super.dispose()\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n    var fillStyle = this.getState('fillStyle')\n    var shelfColor = this.getState('shelfColor')\n    var postColor = this.getState('postColor')\n    var shelves = this.getState('shelves')\n\n    renderCarrier(ctx, left, top, width, height, fillStyle, shelfColor, postColor, shelves)\n\n    ctx.beginPath()\n    ctx.rect(left, top, width, height)\n  }\n}\n"]}