@fmsim/board 1.0.88 → 2.0.0-beta.101

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

@@ -3,18 +3,72 @@
  */
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { property, 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';
+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);
         this.selected = [];
         this.hideProperty = false;
+        this._dimension = null;
+        this._gizmoAttached = false;
     }
     firstUpdated() {
         this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false);
+        // 툴바 버튼 클릭 후 씬으로 포커스를 돌려서 키보드 단축키가 계속 작동하도록 한다
+        this.addEventListener('click', () => {
+            var _a, _b, _c;
+            ;
+            (_c = (_b = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.focus();
+        });
         window.addEventListener('paste', (e) => {
             var _a;
             try {
@@ -24,29 +78,7 @@ export class EditToolbar extends LitElement {
                 console.error('model paste failed', e);
             }
         });
-        this.aligners.forEach(aligner => aligner.addEventListener('tap', this.onTapAlign.bind(this)));
-        this.zorders.forEach(zorder => zorder.addEventListener('tap', this.onTapZorder.bind(this)));
-        this.distributes.forEach(distribute => distribute.addEventListener('tap', this.onTapDistribute.bind(this)));
-        this.undo.addEventListener('tap', this.onTapUndo.bind(this));
-        this.redo.addEventListener('tap', this.onTapRedo.bind(this));
-        this.fullscreen.addEventListener('tap', this.onTapFullscreen.bind(this));
-        this.cut.addEventListener('tap', this.onTapCut.bind(this));
-        this.copy.addEventListener('tap', this.onTapCopy.bind(this));
-        this.paste.addEventListener('tap', this.onTapPaste.bind(this));
-        this.delete.addEventListener('tap', this.onTapDelete.bind(this));
-        this.renderRoot
-            .querySelector('#font-increase')
-            .addEventListener('tap', this.onTapFontIncrease.bind(this));
-        this.renderRoot
-            .querySelector('#font-decrease')
-            .addEventListener('tap', this.onTapFontDecrease.bind(this));
-        this.renderRoot.querySelector('#group').addEventListener('tap', this.onTapGroup.bind(this));
-        this.renderRoot.querySelector('#ungroup').addEventListener('tap', this.onTapUngroup.bind(this));
-        this.renderRoot
-            .querySelector('#toggle-property')
-            .addEventListener('tap', this.onTapToggle.bind(this));
-        this.renderRoot.querySelector('#fit-scene').addEventListener('tap', this.onTapFitScene.bind(this));
-        this.renderRoot.querySelector('#preview').addEventListener('tap', this.onTapPreview.bind(this));
+        // 모든 버튼은 템플릿 @click 디렉티브로 바인딩 — 조건부 렌더링 시에도 정상 작동
     }
     updated(changes) {
         changes.has('scene') && this.onSceneChanged(this.scene, changes.get('scene'));
@@ -59,128 +91,123 @@ export class EditToolbar extends LitElement {
 
         ${this.hasEmptySlot() ? html `` : html `<span class="vline"></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="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"
-          title="delete (${this.getShortcutString('backspace')}, ${this.getShortcutString('delete')})"
-        >
-        </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>
 
-        <!-- TODO Implement style-copy
-        <span button id="style-copy" title="format painter"></span>
+        <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')})"
+          @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="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-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="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="HORIZONTAL"
-          id="distribute-horizontal"
-          title="distribute horizontally (${this.getShortcutString('alt', 'shift', 'h')})"
-        >
-        </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>
 
-        <span
-          button
-          data-distribute="VERTICAL"
-          id="distribute-vertical"
-          title="distribute vertically (${this.getShortcutString('alt', 'shift', 'v')})"
-        >
-        </span>
+        ${this._dimension === '3d'
+            ? html `
+              <span class="vline"></span>
 
-        <span class="vline"></span>
+              <span button data-align="z-front" id="align-z-front" title="align Z front" @click=${this.onTapAlign}> </span>
+              <span button data-align="z-middle" id="align-z-middle" title="align Z middle" @click=${this.onTapAlign}> </span>
+              <span button data-align="z-back" id="align-z-back" title="align Z back" @click=${this.onTapAlign}> </span>
+              <span button data-distribute="Z" id="distribute-z" title="distribute Z" @click=${this.onTapDistribute}> </span>
+            `
+            : this._dimension === '2d'
+                ? 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>
+              `
+                : ''}
 
-        <span class="vline"></span>
+        ${this._dimension === '2d' ? html `
+          <span class="vline"></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>
 
-        <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 class="gizmo-btn" data-gizmo="translate" title="Move (W)"
+            @click=${() => this._setGizmoMode('translate')}>
+            <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8">
+              <line x1="10" y1="2" x2="10" y2="18"/><line x1="2" y1="10" x2="18" y2="10"/>
+              <polyline points="10,2 7.5,5"/><polyline points="10,2 12.5,5"/>
+              <polyline points="18,10 15,7.5"/><polyline points="18,10 15,12.5"/>
+              <polyline points="10,18 7.5,15"/><polyline points="10,18 12.5,15"/>
+              <polyline points="2,10 5,7.5"/><polyline points="2,10 5,12.5"/>
+            </svg>
+          </span>
+          <span button class="gizmo-btn" data-gizmo="rotate" title="Rotate (E)"
+            @click=${() => this._setGizmoMode('rotate')}>
+            <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8">
+              <path d="M14.5 3.5A7 7 0 1 0 17 10"/>
+              <polyline points="14,1 15,3.5 12.5,4.5"/>
+            </svg>
+          </span>
+          <span button class="gizmo-btn" data-gizmo="scale" title="Scale (R)"
+            @click=${() => this._setGizmoMode('scale')}>
+            <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8">
+              <line x1="4" y1="16" x2="16" y2="4"/>
+              <rect x="2" y="13" width="4" height="4" rx="0.5" fill="currentColor"/>
+              <rect x="14" y="2" width="4" height="4" rx="0.5" fill="currentColor"/>
+            </svg>
+          </span>
+        ` : ''}
 
         <span class="vline"></span>
 
-        <span button id="font-increase" title="increase font size"></span>
-        <span button id="font-decrease" title="decrease font size"></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>(v${process.env['APP-VERSION']})</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>
     `;
     }
@@ -227,7 +254,7 @@ export class EditToolbar extends LitElement {
         return symbols.join(MACOS ? '' : '+');
     }
     onShortcut(e) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (MACOS)
             var ctrlKey = e.metaKey;
         else
@@ -246,6 +273,14 @@ export class EditToolbar extends LitElement {
                 if (ctrlKey && !shiftKey)
                     this.onTapRedo();
                 break;
+            case 'Digit1':
+                if (ctrlKey)
+                    this.onStartStylePasteMode();
+                break;
+            case 'Digit2':
+                if (ctrlKey)
+                    this.onStartDatabindPasteMode();
+                break;
             case 'KeyC':
                 if (ctrlKey && !shiftKey)
                     this.onTapCopy();
@@ -257,7 +292,13 @@ export class EditToolbar extends LitElement {
                     this.onTapCut();
                 break;
             case 'KeyV':
-                if (ctrlKey && !shiftKey) {
+                if (ctrlKey && shiftKey && !altKey) {
+                    // Ctrl+Shift+V = Bulk Paste (Paste Special 컨벤션) — 클립보드의
+                    // 단일 컴포넌트를 N개로 일괄 붙여넣기.
+                    this.onBulkPaste();
+                    defaultPrevent = true;
+                }
+                else if (ctrlKey && !shiftKey) {
                     this.onTapPaste();
                     defaultPrevent = false;
                 }
@@ -270,31 +311,45 @@ export class EditToolbar extends LitElement {
                 defaultPrevent = true;
                 break;
             case 'KeyG':
-                if (ctrlKey && !shiftKey)
-                    this.onTapGroup();
-                else if (ctrlKey && shiftKey)
-                    this.onTapUngroup();
+                if (this._dimension === '2d') {
+                    if (ctrlKey && !shiftKey)
+                        this.onTapGroup();
+                    else if (ctrlKey && shiftKey)
+                        this.onTapUngroup();
+                }
                 break;
-            case 'KeyF':
-                if (ctrlKey && !shiftKey)
-                    (_a = this.scene) === null || _a === void 0 ? void 0 : _a.zorder('forward');
-                else if (ctrlKey && shiftKey)
-                    (_b = this.scene) === null || _b === void 0 ? void 0 : _b.zorder('front');
+            case 'BracketRight':
+                // Ctrl+] = Bring Forward, Ctrl+Shift+] = Bring to Front
+                // (Photoshop / Illustrator 표준 컨벤션)
+                if (this._dimension === '2d') {
+                    if (ctrlKey && !shiftKey) {
+                        (_a = this.scene) === null || _a === void 0 ? void 0 : _a.zorder('forward');
+                        defaultPrevent = true;
+                    }
+                    else if (ctrlKey && shiftKey) {
+                        (_b = this.scene) === null || _b === void 0 ? void 0 : _b.zorder('front');
+                        defaultPrevent = true;
+                    }
+                }
+                break;
+            case 'BracketLeft':
+                // Ctrl+[ = Send Backward, Ctrl+Shift+[ = Send to Back
+                if (this._dimension === '2d') {
+                    if (ctrlKey && !shiftKey) {
+                        (_c = this.scene) === null || _c === void 0 ? void 0 : _c.zorder('backward');
+                        defaultPrevent = true;
+                    }
+                    else if (ctrlKey && shiftKey) {
+                        (_d = this.scene) === null || _d === void 0 ? void 0 : _d.zorder('back');
+                        defaultPrevent = true;
+                    }
+                }
                 break;
             case 'KeyB':
-                if (ctrlKey && !shiftKey)
-                    (_c = this.scene) === null || _c === void 0 ? void 0 : _c.zorder('backward');
-                else if (ctrlKey && shiftKey)
-                    (_d = this.scene) === null || _d === void 0 ? void 0 : _d.zorder('back');
-                else if (altKey && shiftKey)
+                // zorder 는 BracketLeft 로 이동. KeyB 의 Alt+Shift+B = align bottom 만 유지.
+                if (altKey && shiftKey)
                     this.onTapAlign('bottom');
                 break;
-            // case 'Equal':
-            //   if (ctrlKey) this.onTapZoom(zoomin)
-            //   break
-            // case 'Minus':
-            //   if (ctrlKey) this.onTapZoom(zoomout)
-            //   break
             case 'KeyH':
                 if (ctrlKey && !shiftKey)
                     this.onTapToggle();
@@ -341,17 +396,10 @@ export class EditToolbar extends LitElement {
                 if (ctrlKey && shiftKey)
                     this.onTapDownloadModel();
                 break;
-            case 'Digit1':
-                if (ctrlKey) {
-                    console.log('MODEL', this.scene && this.scene.model);
-                    defaultPrevent = true;
-                }
-                break;
-            case 'Digit2':
-                if (ctrlKey) {
-                    console.log('SELECTED', this.scene && this.scene.selected);
-                    defaultPrevent = true;
-                }
+            case 'Escape':
+                (_e = this.scene) === null || _e === void 0 ? void 0 : _e.stopStylePasteMode();
+                (_f = this.scene) === null || _f === void 0 ? void 0 : _f.stopDatabindPasteMode();
+                defaultPrevent = true;
                 break;
             default:
                 return false;
@@ -360,46 +408,75 @@ 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);
             before.off('redo', this.onRedo, this);
+            before.off('dimension', this._onDimensionChanged, this);
+            before.off('gizmoattach', this._onGizmoAttachChanged, this);
         }
         if (after) {
             after.on('execute', this.onExecute, this);
             after.on('undo', this.onUndo, this);
             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';
         }
     }
-    // @query('#align-left') private alignLeft!: HTMLElement
-    // @query('#align-center') private alignCenter!: HTMLElement
-    // @query('#align-right') private alignRight!: HTMLElement
-    // @query('#align-top') private alignTop!: HTMLElement
-    // @query('#align-middle') private alignMiddle!: HTMLElement
-    // @query('#align-bottom') private alignBottom!: HTMLElement
+    _onDimensionChanged(dimension) {
+        this._dimension = dimension;
+    }
+    _onGizmoAttachChanged(isAttached) {
+        this._gizmoAttached = isAttached;
+    }
+    _setGizmoMode(mode) {
+        var _a, _b;
+        ;
+        (_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 hasSelection = after.length > 0;
         var alignable = after.length > 1;
-        this.aligners.forEach(aligner => alignable ? aligner.removeAttribute('disabled') : aligner.setAttribute('disabled', ''));
-        var movable = after.length === 1;
-        /* forward, backward 이동은 한 컴포넌트만 가능하다. */
-        !movable ? this.forward.setAttribute('disabled', '') : this.forward.removeAttribute('disabled');
-        !movable ? this.backward.setAttribute('disabled', '') : this.backward.removeAttribute('disabled');
-        /* 여러 컴포넌트는 front, back 이동이 가능하다. */
-        !(alignable || movable) ? this.front.setAttribute('disabled', '') : this.front.removeAttribute('disabled');
-        !(alignable || movable) ? this.back.setAttribute('disabled', '') : this.back.removeAttribute('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 이동은 한 컴포넌트만 가능하다. */
+            this._setDisabled('forward', !movable);
+            this._setDisabled('backward', !movable);
+            /* 여러 컴포넌트는 front, back 이동이 가능하다. */
+            this._setDisabled('front', !(alignable || movable));
+            this._setDisabled('back', !(alignable || movable));
+        }
+        // 분배 버튼
+        this.renderRoot.querySelectorAll('[data-distribute]').forEach(el => alignable ? el.removeAttribute('disabled') : el.setAttribute('disabled', ''));
+        if (this._dimension === '3d') {
+            this.renderRoot.querySelectorAll('.gizmo-btn').forEach(btn => {
+                hasSelection ? btn.removeAttribute('disabled') : btn.setAttribute('disabled', '');
+            });
+        }
     }
     onTapUndo() {
         var _a;
@@ -409,6 +486,22 @@ export class EditToolbar extends LitElement {
         var _a;
         (_a = this.scene) === null || _a === void 0 ? void 0 : _a.redo();
     }
+    onStartStylePasteMode() {
+        var _a, _b, _c;
+        if (((_a = this.selected) === null || _a === void 0 ? void 0 : _a.length) !== 1)
+            return;
+        if (this.selected[0] === ((_b = this.scene) === null || _b === void 0 ? void 0 : _b.root))
+            return;
+        (_c = this.scene) === null || _c === void 0 ? void 0 : _c.startStylePasteMode();
+    }
+    onStartDatabindPasteMode() {
+        var _a, _b, _c;
+        if (((_a = this.selected) === null || _a === void 0 ? void 0 : _a.length) !== 1)
+            return;
+        if (this.selected[0] === ((_b = this.scene) === null || _b === void 0 ? void 0 : _b.root))
+            return;
+        (_c = this.scene) === null || _c === void 0 ? void 0 : _c.startDatabindPasteMode();
+    }
     onTapCut() {
         var _a;
         (_a = this.scene) === null || _a === void 0 ? void 0 : _a.cut();
@@ -431,6 +524,101 @@ 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) {
+            console.warn('bulk-paste: 클립보드 비어있음');
+            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 수집.
+        // (scene.ids 는 indexMap 기반인데 fmsim 의 일부 컴포넌트는 indexMap 미등록
+        //  되는 케이스가 있어 직접 컴포넌트 트리 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)');
@@ -476,10 +664,16 @@ export class EditToolbar extends LitElement {
         if (!this.scene)
             return;
         var selected = this.scene.selected;
-        if (selected.length <= 1)
-            return;
         var align = typeof e === 'string' ? e : e.target.getAttribute('data-align');
-        align && this.scene.align(align);
+        if (!align) {
+            return;
+        }
+        if (selected.length <= 1) {
+            this.scene.place(align);
+        }
+        else {
+            this.scene.align(align);
+        }
     }
     onTapZorder(e) {
         if (!this.scene)
@@ -541,45 +735,9 @@ __decorate([
     property({ type: Boolean })
 ], EditToolbar.prototype, "hideProperty", 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('#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);
+    state()
+], EditToolbar.prototype, "_dimension", void 0);
 __decorate([
-    queryAll('[data-distribute]')
-], EditToolbar.prototype, "distributes", void 0);
+    state()
+], EditToolbar.prototype, "_gizmoAttached", void 0);
 //# sourceMappingURL=edit-toolbar.js.map