@operato/board 10.0.0-beta.9 → 10.0.0

package/dist/src/modeller/edit-toolbar.js

@@ -3,10 +3,56 @@
  */
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { property, state, query, queryAll } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { copyToClipboard, isMacOS } from '@operato/utils';
+import { OxPopup } from '@operato/popup';
 import { style } from './edit-toolbar-style.js';
+import './bulk-create-dialog.js';
 const MACOS = isMacOS();
+/**
+ * 컴포넌트 model JSON 만으로 type-aware bounding box (width, height) 추출.
+ *
+ * things-scene 의 component.bounds 는 *path 의 bounding box* 인데, model JSON 만
+ * 으로는 path 를 그릴 수 없으므로 type-specific 필드를 직접 본다.
+ *   - width/height 명시 (Rect, Container 등) → 그대로
+ *   - rx/ry (Ellipse 등) → 2*rx, 2*ry
+ *   - points 배열 (Line, Polygon 등) → 점들의 bounding box
+ *   - 그 외 → 50x50 fallback
+ *
+ * bulk-paste 가 영역 안에 N 개 복제할 때 *원본 크기를 보존* 하기 위해 사용.
+ */
+function deriveBoundsFromModel(model) {
+    if (typeof model.width === 'number' && typeof model.height === 'number') {
+        return { width: model.width, height: model.height };
+    }
+    if (typeof model.rx === 'number' && typeof model.ry === 'number') {
+        return { width: 2 * Math.abs(model.rx), height: 2 * Math.abs(model.ry) };
+    }
+    if (Array.isArray(model.points) && model.points.length > 0) {
+        let minX = Infinity;
+        let maxX = -Infinity;
+        let minY = Infinity;
+        let maxY = -Infinity;
+        for (const p of model.points) {
+            if (typeof (p === null || p === void 0 ? void 0 : p.x) === 'number') {
+                if (p.x < minX)
+                    minX = p.x;
+                if (p.x > maxX)
+                    maxX = p.x;
+            }
+            if (typeof (p === null || p === void 0 ? void 0 : p.y) === 'number') {
+                if (p.y < minY)
+                    minY = p.y;
+                if (p.y > maxY)
+                    maxY = p.y;
+            }
+        }
+        if (isFinite(minX) && isFinite(maxX) && isFinite(minY) && isFinite(maxY)) {
+            return { width: maxX - minX, height: maxY - minY };
+        }
+    }
+    return { width: 50, height: 50 };
+}
 export class EditToolbar extends LitElement {
     constructor() {
         super(...arguments);
@@ -16,7 +62,6 @@ export class EditToolbar extends LitElement {
         this._gizmoAttached = false;
     }
     firstUpdated() {
-        var _a, _b;
         this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false);
         // 툴바 버튼 클릭 후 씬으로 포커스를 돌려서 키보드 단축키가 계속 작동하도록 한다
         this.addEventListener('click', () => {
@@ -33,33 +78,7 @@ export class EditToolbar extends LitElement {
                 console.error('model paste failed', e);
             }
         });
-        this.aligners.forEach(aligner => aligner.addEventListener('click', this.onTapAlign.bind(this)));
-        this.zorders.forEach(zorder => zorder.addEventListener('click', this.onTapZorder.bind(this)));
-        this.distributes.forEach(distribute => distribute.addEventListener('click', this.onTapDistribute.bind(this)));
-        this.undo.addEventListener('click', this.onTapUndo.bind(this));
-        this.redo.addEventListener('click', this.onTapRedo.bind(this));
-        this.fullscreen.addEventListener('click', this.onTapFullscreen.bind(this));
-        this.styleCopy.addEventListener('click', this.onStartStylePasteMode.bind(this));
-        this.databindCopy.addEventListener('click', this.onStartDatabindPasteMode.bind(this));
-        this.cut.addEventListener('click', this.onTapCut.bind(this));
-        this.copy.addEventListener('click', this.onTapCopy.bind(this));
-        this.paste.addEventListener('click', this.onTapPaste.bind(this));
-        this.delete.addEventListener('click', this.onTapDelete.bind(this));
-        this.renderRoot
-            .querySelector('#font-increase')
-            .addEventListener('click', this.onTapFontIncrease.bind(this));
-        this.renderRoot
-            .querySelector('#font-decrease')
-            .addEventListener('click', this.onTapFontDecrease.bind(this));
-        (_a = this.renderRoot.querySelector('#group')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.onTapGroup.bind(this));
-        (_b = this.renderRoot.querySelector('#ungroup')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.onTapUngroup.bind(this));
-        this.renderRoot
-            .querySelector('#toggle-property')
-            .addEventListener('click', this.onTapToggle.bind(this));
-        this.renderRoot
-            .querySelector('#fit-scene')
-            .addEventListener('click', this.onTapFitScene.bind(this));
-        this.renderRoot.querySelector('#preview').addEventListener('click', this.onTapPreview.bind(this));
+        // 모든 버튼은 템플릿 @click 디렉티브로 바인딩 — 조건부 렌더링 시에도 정상 작동
     }
     updated(changes) {
         changes.has('scene') && this.onSceneChanged(this.scene, changes.get('scene'));
@@ -70,82 +89,43 @@ export class EditToolbar extends LitElement {
       <div tools>
         <span><slot></slot></span>
 
-        <span button id="undo" title="undo (${this.getShortcutString('cmd', 'z')})"> </span>
-        <span button id="redo" title="redo (${this.getShortcutString('cmd', 'shift', 'z')})"> </span>
+        <span button id="undo" title="undo (${this.getShortcutString('cmd', 'z')})" @click=${this.onTapUndo}> </span>
+        <span button id="redo" title="redo (${this.getShortcutString('cmd', 'shift', 'z')})" @click=${this.onTapRedo}> </span>
 
         <span class="vline"></span>
 
-        <span button id="style-copy" title="style copy (${this.getShortcutString('cmd', '1')})"> </span>
-        <span button id="databind-copy" title="databind copy (${this.getShortcutString('cmd', '2')})"> </span>
+        <span button id="style-copy" title="style copy (${this.getShortcutString('cmd', '1')})" @click=${this.onStartStylePasteMode}> </span>
+        <span button id="databind-copy" title="databind copy (${this.getShortcutString('cmd', '2')})" @click=${this.onStartDatabindPasteMode}> </span>
 
         <span class="vline"></span>
 
-        <span button id="cut" title="cut (${this.getShortcutString('cmd', 'x')})"> </span>
-        <span button id="copy" title="copy (${this.getShortcutString('cmd', 'c')})"> </span>
-        <span button id="paste" title="paste (${this.getShortcutString('cmd', 'v')})"> </span>
-        <span
-          button
-          id="delete"
+        <span button id="cut" title="cut (${this.getShortcutString('cmd', 'x')})" @click=${this.onTapCut}> </span>
+        <span button id="copy" title="copy (${this.getShortcutString('cmd', 'c')})" @click=${this.onTapCopy}> </span>
+        <span button id="paste" title="paste (${this.getShortcutString('cmd', 'v')})" @click=${this.onTapPaste}> </span>
+        <span button id="delete"
           title="delete (${this.getShortcutString('backspace')}, ${this.getShortcutString('delete')})"
-        >
-        </span>
+          @click=${this.onTapDelete}> </span>
 
         <span class="vline"></span>
 
-        <span
-          button
-          data-align="left"
-          id="align-left"
-          title="align left (${this.getShortcutString('alt', 'shift', 'l')})"
-        >
-        </span>
-        <span
-          button
-          data-align="center"
-          id="align-center"
-          title="align center (${this.getShortcutString('alt', 'shift', 'c')})"
-        >
-        </span>
-        <span
-          button
-          data-align="right"
-          id="align-right"
-          title="align right (${this.getShortcutString('alt', 'shift', 'r')})"
-        >
-        </span>
-
-        <span button data-align="top" id="align-top" title="align top (${this.getShortcutString('alt', 'shift', 't')})">
-        </span>
-        <span
-          button
-          data-align="middle"
-          id="align-middle"
-          title="align middle (${this.getShortcutString('alt', 'shift', 'm')})"
-        >
-        </span>
-        <span
-          button
-          data-align="bottom"
-          id="align-bottom"
-          title="align bottom (${this.getShortcutString('alt', 'shift', 'b')})"
-        >
-        </span>
+        <span button data-align="left" id="align-left"
+          title="align left (${this.getShortcutString('alt', 'shift', 'l')})" @click=${this.onTapAlign}> </span>
+        <span button data-align="center" id="align-center"
+          title="align center (${this.getShortcutString('alt', 'shift', 'c')})" @click=${this.onTapAlign}> </span>
+        <span button data-align="right" id="align-right"
+          title="align right (${this.getShortcutString('alt', 'shift', 'r')})" @click=${this.onTapAlign}> </span>
 
-        <span
-          button
-          data-distribute="HORIZONTAL"
-          id="distribute-horizontal"
-          title="distribute horizontally (${this.getShortcutString('alt', 'shift', 'h')})"
-        >
-        </span>
+        <span button data-align="top" id="align-top"
+          title="align top (${this.getShortcutString('alt', 'shift', 't')})" @click=${this.onTapAlign}> </span>
+        <span button data-align="middle" id="align-middle"
+          title="align middle (${this.getShortcutString('alt', 'shift', 'm')})" @click=${this.onTapAlign}> </span>
+        <span button data-align="bottom" id="align-bottom"
+          title="align bottom (${this.getShortcutString('alt', 'shift', 'b')})" @click=${this.onTapAlign}> </span>
 
-        <span
-          button
-          data-distribute="VERTICAL"
-          id="distribute-vertical"
-          title="distribute vertically (${this.getShortcutString('alt', 'shift', 'v')})"
-        >
-        </span>
+        <span button data-distribute="HORIZONTAL" id="distribute-horizontal"
+          title="distribute horizontally (${this.getShortcutString('alt', 'shift', 'h')})" @click=${this.onTapDistribute}> </span>
+        <span button data-distribute="VERTICAL" id="distribute-vertical"
+          title="distribute vertically (${this.getShortcutString('alt', 'shift', 'v')})" @click=${this.onTapDistribute}> </span>
 
         ${this._dimension === '3d'
             ? html `
@@ -160,42 +140,22 @@ export class EditToolbar extends LitElement {
                 ? html `
                 <span class="vline"></span>
 
-                <span
-                  button
-                  id="front"
-                  data-zorder="front"
-                  title="bring to front (${this.getShortcutString('cmd', 'shift', 'f')})"
-                >
-                </span>
-                <span
-                  button
-                  id="back"
-                  data-zorder="back"
-                  title="send to back (${this.getShortcutString('cmd', 'shift', 'b')})"
-                >
-                </span>
-                <span
-                  button
-                  id="forward"
-                  data-zorder="forward"
-                  title="bring forward (${this.getShortcutString('cmd', 'f')})"
-                >
-                </span>
-                <span
-                  button
-                  id="backward"
-                  data-zorder="backward"
-                  title="send backward (${this.getShortcutString('cmd', 'b')})"
-                >
-                </span>
+                <span button id="front" data-zorder="front"
+                  title="bring to front (${this.getShortcutString('cmd', 'shift', 'f')})" @click=${this.onTapZorder}> </span>
+                <span button id="back" data-zorder="back"
+                  title="send to back (${this.getShortcutString('cmd', 'shift', 'b')})" @click=${this.onTapZorder}> </span>
+                <span button id="forward" data-zorder="forward"
+                  title="bring forward (${this.getShortcutString('cmd', 'f')})" @click=${this.onTapZorder}> </span>
+                <span button id="backward" data-zorder="backward"
+                  title="send backward (${this.getShortcutString('cmd', 'b')})" @click=${this.onTapZorder}> </span>
               `
                 : ''}
 
         ${this._dimension === '2d' ? html `
           <span class="vline"></span>
 
-          <span button id="group" title="group (${this.getShortcutString('cmd', 'g')})"> </span>
-          <span button id="ungroup" title="ungroup (${this.getShortcutString('cmd', 'shift', 'g')})"> </span>
+          <span button id="group" title="group (${this.getShortcutString('cmd', 'g')})" @click=${this.onTapGroup}> </span>
+          <span button id="ungroup" title="ungroup (${this.getShortcutString('cmd', 'shift', 'g')})" @click=${this.onTapUngroup}> </span>
         ` : this._dimension === '3d' ? html `
           <span class="vline"></span>
 
@@ -228,27 +188,23 @@ export class EditToolbar extends LitElement {
 
         <span class="vline"></span>
 
-        <span button id="font-increase" title="increase font size"></span>
-        <span button id="font-decrease" title="decrease font size" style="scale: 0.7;"></span>
+        <span button id="font-increase" title="increase font size" @click=${this.onTapFontIncrease}></span>
+        <span button id="font-decrease" title="decrease font size" style="scale: 0.7;" @click=${this.onTapFontDecrease}></span>
 
         <span class="vline"></span>
         <span padding></span>
 
-        <span button id="fit-scene" title="fit scene (${this.getShortcutString('cmd', 'd')})"> </span>
+        <span button id="fit-scene" title="fit scene (${this.getShortcutString('cmd', 'd')})" @click=${this.onTapFitScene}> </span>
 
         <span class="vline"></span>
 
-        <span button id="preview" title="preview (${this.getShortcutString('ctrl', 'p')})"> </span>
+        <span button id="preview" title="preview (${this.getShortcutString('ctrl', 'p')})" @click=${this.onTapPreview}> </span>
 
-        <span button id="fullscreen" title="fullscreen (${this.getShortcutString('f11')})"> </span>
+        <span button id="fullscreen" title="fullscreen (${this.getShortcutString('f11')})" @click=${this.onTapFullscreen}> </span>
 
-        <span
-          button
-          id="toggle-property"
+        <span button id="toggle-property"
           title="toggle property panel (${this.getShortcutString('cmd', 'h')})"
-          toggles="true"
-        >
-        </span>
+          toggles="true" @click=${this.onTapToggle}> </span>
       </div>
     `;
     }
@@ -329,7 +285,12 @@ export class EditToolbar extends LitElement {
                     this.onTapCut();
                 break;
             case 'KeyV':
-                if (ctrlKey && !shiftKey) {
+                if (ctrlKey && shiftKey && !altKey) {
+                    // Ctrl+Shift+V = Bulk Paste — 클립보드의 *단일* 컴포넌트를 N개로 일괄 붙여넣기.
+                    this.onBulkPaste();
+                    defaultPrevent = true;
+                }
+                else if (ctrlKey && !shiftKey) {
                     this.onTapPaste();
                     defaultPrevent = false;
                 }
@@ -349,21 +310,35 @@ export class EditToolbar extends LitElement {
                         this.onTapUngroup();
                 }
                 break;
-            case 'KeyF':
+            case 'BracketRight':
+                // Ctrl+] = Bring Forward, Ctrl+Shift+] = Bring to Front
+                // (Photoshop / Illustrator 표준 컨벤션)
                 if (this._dimension === '2d') {
-                    if (ctrlKey && !shiftKey)
+                    if (ctrlKey && !shiftKey) {
                         (_a = this.scene) === null || _a === void 0 ? void 0 : _a.zorder('forward');
-                    else if (ctrlKey && shiftKey)
+                        defaultPrevent = true;
+                    }
+                    else if (ctrlKey && shiftKey) {
                         (_b = this.scene) === null || _b === void 0 ? void 0 : _b.zorder('front');
+                        defaultPrevent = true;
+                    }
                 }
                 break;
-            case 'KeyB':
+            case 'BracketLeft':
+                // Ctrl+[ = Send Backward, Ctrl+Shift+[ = Send to Back
                 if (this._dimension === '2d') {
-                    if (ctrlKey && !shiftKey)
+                    if (ctrlKey && !shiftKey) {
                         (_c = this.scene) === null || _c === void 0 ? void 0 : _c.zorder('backward');
-                    else if (ctrlKey && shiftKey)
+                        defaultPrevent = true;
+                    }
+                    else if (ctrlKey && shiftKey) {
                         (_d = this.scene) === null || _d === void 0 ? void 0 : _d.zorder('back');
+                        defaultPrevent = true;
+                    }
                 }
+                break;
+            case 'KeyB':
+                // zorder 는 BracketLeft 로 이동. KeyB 의 Alt+Shift+B = align bottom 만 유지.
                 if (altKey && shiftKey)
                     this.onTapAlign('bottom');
                 break;
@@ -408,11 +383,23 @@ export class EditToolbar extends LitElement {
                     this.onTapFitScene();
                     defaultPrevent = true;
                 }
+                else if (!shiftKey && !altKey) {
+                    const target = e.composedPath()[0];
+                    const tagName = target.tagName;
+                    if (!target.isContentEditable && tagName !== 'INPUT' && tagName !== 'SELECT' && tagName !== 'TEXTAREA') {
+                        this.onTapDataBinding();
+                        defaultPrevent = true;
+                    }
+                }
                 break;
             case 'KeyE':
                 if (ctrlKey && shiftKey)
                     this.onTapDownloadModel();
                 break;
+            case 'F10':
+                this.onTapEditModel();
+                defaultPrevent = true;
+                break;
             case 'Digit1':
                 if (ctrlKey) {
                     defaultPrevent = true;
@@ -435,19 +422,24 @@ export class EditToolbar extends LitElement {
             e.preventDefault();
         return true;
     }
+    _setDisabled(id, disabled) {
+        const el = this.renderRoot.querySelector(`#${id}`);
+        disabled ? el === null || el === void 0 ? void 0 : el.setAttribute('disabled', '') : el === null || el === void 0 ? void 0 : el.removeAttribute('disabled');
+    }
     onExecute(command, undoable, redoable) {
-        !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled');
-        !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled');
+        this._setDisabled('undo', !undoable);
+        this._setDisabled('redo', !redoable);
     }
     onUndo(undoable, redoable) {
-        !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled');
-        !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled');
+        this._setDisabled('undo', !undoable);
+        this._setDisabled('redo', !redoable);
     }
     onRedo(undoable, redoable) {
-        !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled');
-        !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled');
+        this._setDisabled('undo', !undoable);
+        this._setDisabled('redo', !redoable);
     }
     onSceneChanged(after, before) {
+        var _a, _b;
         if (before) {
             before.off('execute', this.onExecute, this);
             before.off('undo', this.onUndo, this);
@@ -461,6 +453,9 @@ export class EditToolbar extends LitElement {
             after.on('redo', this.onRedo, this);
             after.on('dimension', this._onDimensionChanged, this);
             after.on('gizmoattach', this._onGizmoAttachChanged, this);
+            // scene 설정 시 현재 dimension을 즉시 반영 (초기 이벤트를 놓친 경우 대비)
+            const threed = (_b = (_a = after.model_layer) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.threed;
+            this._dimension = threed ? '3d' : '2d';
         }
     }
     _onDimensionChanged(dimension) {
@@ -475,27 +470,23 @@ export class EditToolbar extends LitElement {
         (_b = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.setGizmoMode(mode);
     }
     onSelectedChanged(after, before) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         var hasSelection = after.length > 0;
         var alignable = after.length > 1;
-        // 선택 필요 버튼: 스타일 복사, 데이터바인드 복사, cut, copy, delete
-        const selectionButtons = [this.styleCopy, this.databindCopy, this.cut, this.copy, this.delete];
-        selectionButtons.forEach(btn => {
-            hasSelection ? btn === null || btn === void 0 ? void 0 : btn.removeAttribute('disabled') : btn === null || btn === void 0 ? void 0 : btn.setAttribute('disabled', '');
-        });
-        this.aligners.forEach(aligner => alignable ? aligner.removeAttribute('disabled') : aligner.setAttribute('disabled', ''));
+        ['style-copy', 'databind-copy', 'cut', 'copy', 'delete'].forEach(id => this._setDisabled(id, !hasSelection));
+        // 정렬 버튼
+        this.renderRoot.querySelectorAll('[data-align]').forEach(el => alignable ? el.removeAttribute('disabled') : el.setAttribute('disabled', ''));
         if (this._dimension === '2d') {
             var movable = after.length === 1;
             /* forward, backward 이동은 한 컴포넌트만 가능하다. */
-            !movable ? (_a = this.forward) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', '') : (_b = this.forward) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
-            !movable ? (_c = this.backward) === null || _c === void 0 ? void 0 : _c.setAttribute('disabled', '') : (_d = this.backward) === null || _d === void 0 ? void 0 : _d.removeAttribute('disabled');
+            this._setDisabled('forward', !movable);
+            this._setDisabled('backward', !movable);
             /* 여러 컴포넌트는 front, back 이동이 가능하다. */
-            !(alignable || movable) ? (_e = this.front) === null || _e === void 0 ? void 0 : _e.setAttribute('disabled', '') : (_f = this.front) === null || _f === void 0 ? void 0 : _f.removeAttribute('disabled');
-            !(alignable || movable) ? (_g = this.back) === null || _g === void 0 ? void 0 : _g.setAttribute('disabled', '') : (_h = this.back) === null || _h === void 0 ? void 0 : _h.removeAttribute('disabled');
+            this._setDisabled('front', !(alignable || movable));
+            this._setDisabled('back', !(alignable || movable));
         }
-        this.distributes.forEach(distribute => alignable ? distribute.removeAttribute('disabled') : distribute.setAttribute('disabled', ''));
+        // 분배 버튼
+        this.renderRoot.querySelectorAll('[data-distribute]').forEach(el => alignable ? el.removeAttribute('disabled') : el.setAttribute('disabled', ''));
         if (this._dimension === '3d') {
-            const hasSelection = after.length > 0;
             this.renderRoot.querySelectorAll('.gizmo-btn').forEach(btn => {
                 hasSelection ? btn.removeAttribute('disabled') : btn.setAttribute('disabled', '');
             });
@@ -547,6 +538,97 @@ export class EditToolbar extends LitElement {
         var _a;
         (_a = this.scene) === null || _a === void 0 ? void 0 : _a.remove();
     }
+    /**
+     * 멀티 컴포넌트 일괄 붙여넣기 — Ctrl+Shift+V 진입점.
+     *
+     * 흐름:
+     *   1. 클립보드 (this.cliped) 검증 — *단일* 컴포넌트만 허용
+     *   2. scene.startBulkCreateMode → AddLayer 가 캔버스 위에 드래그 박스 그림
+     *   3. 사용자가 영역 드래그 → Promise resolve({area, template})
+     *      ESC/취소 → Promise resolve(null)
+     *   4. 영역이 결정되면 dialog 오픈
+     */
+    async onBulkPaste() {
+        var _a;
+        if (!this.cliped) {
+            console.warn('bulk-paste: 먼저 Ctrl+C 로 컴포넌트를 복사하세요.');
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(this.cliped);
+        }
+        catch (e) {
+            console.warn('bulk-paste: 클립보드 파싱 실패', e);
+            return;
+        }
+        if (!Array.isArray(parsed) || parsed.length === 0)
+            return;
+        if (parsed.length > 1) {
+            console.warn('bulk-paste: 단일 컴포넌트만 일괄 붙여넣기 가능. 다중은 일반 paste 사용.');
+            return;
+        }
+        const template = parsed[0];
+        // bulk 모드 임을 시각 구분하기 위해 파란 점선 (일반 add 의 검정과 색만 차별).
+        const result = await ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.startBulkCreateMode(template, { boxStrokeStyle: '#2964c2' }));
+        if (result) {
+            this._openBulkCreateDialog(template, result.area);
+        }
+    }
+    _openBulkCreateDialog(template, initialArea) {
+        var _a;
+        const dialogEl = document.createElement('bulk-create-dialog');
+        dialogEl.template = template;
+        dialogEl.initialArea = initialArea;
+        // scene 의 모든 id 수집 — indexMap 기반 scene.ids 대신 트리 walk 로 안정성 확보.
+        const existingIds = new Set();
+        const collectIds = (comp) => {
+            var _a, _b, _c;
+            if (!comp)
+                return;
+            const id = (_b = (_a = comp === null || comp === void 0 ? void 0 : comp.state) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : (_c = comp === null || comp === void 0 ? void 0 : comp.model) === null || _c === void 0 ? void 0 : _c.id;
+            if (typeof id === 'string' && id)
+                existingIds.add(id);
+            const children = comp.components || [];
+            for (const c of children)
+                collectIds(c);
+        };
+        const root = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (root)
+            collectIds(root);
+        dialogEl.existingIds = existingIds;
+        dialogEl.onConfirm = (models) => {
+            const scene = this.scene;
+            if (!scene || !models.length) {
+                popup === null || popup === void 0 ? void 0 : popup.close();
+                return;
+            }
+            // cliped 의 template model 자체에서 type-aware bounds 추출. things-scene 의
+            // component.bounds (= path bounding box) 와 동일 결과를 model JSON 의
+            // type-specific 필드 (width/height, rx/ry, points) 만으로 계산.
+            const bounds = deriveBoundsFromModel(template);
+            scene.undoableChange(() => {
+                for (const m of models) {
+                    const cx = m.left + m.width / 2;
+                    const cy = m.top + m.height / 2;
+                    scene.add(m, {
+                        left: cx - bounds.width / 2,
+                        top: cy - bounds.height / 2,
+                        width: bounds.width,
+                        height: bounds.height
+                    });
+                }
+            });
+            popup === null || popup === void 0 ? void 0 : popup.close();
+        };
+        dialogEl.onCancel = () => {
+            popup === null || popup === void 0 ? void 0 : popup.close();
+        };
+        const popup = OxPopup.open({
+            template: dialogEl,
+            backdrop: true
+        });
+    }
     onTapSelectAll() {
         var _a;
         (_a = this.scene) === null || _a === void 0 ? void 0 : _a.select('(child)');
@@ -638,9 +720,15 @@ export class EditToolbar extends LitElement {
     onTapPreview() {
         this.dispatchEvent(new CustomEvent('open-preview'));
     }
+    onTapDataBinding() {
+        this.dispatchEvent(new CustomEvent('open-data-binding'));
+    }
     onTapDownloadModel() {
         this.dispatchEvent(new CustomEvent('download-model'));
     }
+    onTapEditModel() {
+        this.dispatchEvent(new CustomEvent('edit-model'));
+    }
     onTapDistribute(e) {
         if (!this.scene)
             return;
@@ -668,52 +756,4 @@ __decorate([
 __decorate([
     state()
 ], EditToolbar.prototype, "_gizmoAttached", void 0);
-__decorate([
-    query('#redo')
-], EditToolbar.prototype, "redo", void 0);
-__decorate([
-    query('#undo')
-], EditToolbar.prototype, "undo", void 0);
-__decorate([
-    query('#fullscreen')
-], EditToolbar.prototype, "fullscreen", void 0);
-__decorate([
-    query('#style-copy')
-], EditToolbar.prototype, "styleCopy", void 0);
-__decorate([
-    query('#databind-copy')
-], EditToolbar.prototype, "databindCopy", void 0);
-__decorate([
-    query('#cut')
-], EditToolbar.prototype, "cut", void 0);
-__decorate([
-    query('#copy')
-], EditToolbar.prototype, "copy", void 0);
-__decorate([
-    query('#paste')
-], EditToolbar.prototype, "paste", void 0);
-__decorate([
-    query('#delete')
-], EditToolbar.prototype, "delete", void 0);
-__decorate([
-    query('#forward')
-], EditToolbar.prototype, "forward", void 0);
-__decorate([
-    query('#backward')
-], EditToolbar.prototype, "backward", void 0);
-__decorate([
-    query('#front')
-], EditToolbar.prototype, "front", void 0);
-__decorate([
-    query('#back')
-], EditToolbar.prototype, "back", void 0);
-__decorate([
-    queryAll('[data-align]')
-], EditToolbar.prototype, "aligners", void 0);
-__decorate([
-    queryAll('[data-zorder]')
-], EditToolbar.prototype, "zorders", void 0);
-__decorate([
-    queryAll('[data-distribute]')
-], EditToolbar.prototype, "distributes", void 0);
 //# sourceMappingURL=edit-toolbar.js.map