@fmsim/board 1.0.83 → 2.0.0-beta.10

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

@@ -3,7 +3,7 @@
  */
 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 { style } from './edit-toolbar-style';
 const MACOS = isMacOS();
@@ -12,9 +12,17 @@ export class EditToolbar extends LitElement {
         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 +32,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 +45,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 +208,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 +227,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();
@@ -270,31 +259,31 @@ 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');
+                if (this._dimension === '2d') {
+                    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');
+                }
                 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)
+                if (this._dimension === '2d') {
+                    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');
+                }
+                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 +330,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 +342,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 +420,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();
@@ -476,10 +503,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 +574,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