@operato/board 0.2.44 → 0.2.48

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

@@ -0,0 +1,644 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
+import { style } from './edit-toolbar-style';
+const _isMacOS = navigator.userAgent.indexOf('Mac') != -1;
+let EditToolbar = class EditToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = [];
+        this.hideProperty = false;
+    }
+    firstUpdated() {
+        this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false);
+        window.addEventListener('paste', (e) => {
+            var _a;
+            this.cliped = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+        });
+        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('#symmetry-x')
+            .addEventListener('tap', this.onTapSymmetryX.bind(this));
+        this.renderRoot
+            .querySelector('#symmetry-y')
+            .addEventListener('tap', this.onTapSymmetryY.bind(this));
+        this.renderRoot.querySelector('#rotate-cw').addEventListener('tap', this.onTapRotateCW.bind(this));
+        this.renderRoot
+            .querySelector('#rotate-ccw')
+            .addEventListener('tap', this.onTapRotateCCW.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));
+    }
+    updated(changes) {
+        changes.has('scene') && this.onSceneChanged(this.scene, changes.get('scene'));
+        changes.has('selected') && this.onSelectedChanged(this.selected, changes.get('selected'));
+    }
+    render() {
+        return html `
+      <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 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 class="vline"></span>
+
+        <!-- TODO Implement style-copy
+        <span button id="style-copy" title="format painter"></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-distribute="HORIZONTAL"
+          id="distribute-horizontal"
+          title="distribute horizontally (${this.getShortcutString('alt', 'shift', 'h')})"
+        >
+        </span>
+
+        <span
+          button
+          data-distribute="VERTICAL"
+          id="distribute-vertical"
+          title="distribute vertically (${this.getShortcutString('alt', 'shift', 'v')})"
+        >
+        </span>
+
+        <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 class="vline"></span>
+
+        <span button id="symmetry-x" title="symmetry-x (${this.getShortcutString('alt', 'shift', 'x')})"> </span>
+        <span button id="symmetry-y" title="symmetry-y (${this.getShortcutString('alt', 'shift', 'y')})"> </span>
+        <span button id="rotate-cw" title="rotate clockwise (${this.getShortcutString('alt', 'shift', 'e')})"> </span>
+        <span button id="rotate-ccw" title="rotate counter clockwise (${this.getShortcutString('alt', 'shift', 'w')})">
+        </span>
+
+        <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 class="vline"></span>
+
+        <span button id="font-increase" title="increase font size"></span>
+        <span button id="font-decrease" title="decrease font size"></span>
+
+        <span class="vline"></span>
+        <span padding></span>
+
+        <span button id="fit-scene" title="fit scene (${this.getShortcutString('cmd', 'd')})"> </span>
+
+        <span class="vline"></span>
+
+        <span button id="preview" title="preview (${this.getShortcutString('ctrl', 'p')})"> </span>
+
+        <span button id="fullscreen" title="fullscreen (${this.getShortcutString('f11')})"> </span>
+
+        <span
+          button
+          id="toggle-property"
+          title="toggle property panel (${this.getShortcutString('cmd', 'h')})"
+          toggles="true"
+        >
+        </span>
+      </div>
+    `;
+    }
+    onWheelEvent(e) {
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        this.scrollLeft -= delta * 40;
+        e.preventDefault();
+    }
+    getSymbol(key) {
+        var symbol;
+        switch (key) {
+            case 'cmd':
+            case 'ctrl':
+                symbol = _isMacOS ? '⌘' : 'Ctrl';
+                break;
+            case 'shift':
+                symbol = _isMacOS ? '⇧' : 'Shift';
+                break;
+            case 'alt':
+            case 'option':
+                symbol = _isMacOS ? '⌥' : 'Alt';
+                break;
+            case 'backspace':
+                symbol = _isMacOS ? '⌫' : 'BackSpace';
+                break;
+            case 'delete':
+                symbol = _isMacOS ? '⌦' : 'Del';
+                break;
+            default:
+                symbol = key.toUpperCase();
+                break;
+        }
+        return symbol;
+    }
+    getShortcutString(...keys) {
+        var symbols = [];
+        for (var i = 0; i < arguments.length; i++) {
+            symbols.push(this.getSymbol(arguments[i]));
+        }
+        return symbols.join(_isMacOS ? '' : '+');
+    }
+    onShortcut(e) {
+        var _a, _b, _c, _d;
+        if (_isMacOS)
+            var ctrlKey = e.metaKey;
+        else
+            var ctrlKey = e.ctrlKey;
+        var altKey = e.altKey;
+        var shiftKey = e.shiftKey;
+        var defaultPrevent = ctrlKey || altKey;
+        switch (e.code) {
+            case 'KeyZ':
+                if (ctrlKey && !shiftKey)
+                    this.onTapUndo();
+                else if (ctrlKey && shiftKey)
+                    this.onTapRedo();
+                break;
+            case 'KeyY':
+                if (ctrlKey && !shiftKey)
+                    this.onTapRedo();
+                else if (altKey && shiftKey)
+                    this.onTapSymmetryY();
+                break;
+            case 'KeyC':
+                if (ctrlKey && !shiftKey)
+                    this.onTapCopy();
+                else if (altKey && shiftKey)
+                    this.onTapAlign('center');
+                break;
+            case 'KeyX':
+                if (ctrlKey && !shiftKey)
+                    this.onTapCut();
+                else if (altKey && shiftKey)
+                    this.onTapSymmetryX();
+                break;
+            case 'KeyV':
+                if (ctrlKey && !shiftKey) {
+                    this.onTapPaste();
+                    defaultPrevent = false;
+                }
+                else if (altKey && shiftKey)
+                    this.onTapDistribute('VERTICAL');
+                break;
+            case 'Delete':
+            case 'Backspace':
+                this.onTapDelete();
+                defaultPrevent = true;
+                break;
+            case 'KeyG':
+                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');
+                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)
+                    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();
+                else if (altKey && shiftKey)
+                    this.onTapDistribute('HORIZONTAL');
+                break;
+            case 'F11':
+                this.onTapFullscreen();
+                defaultPrevent = true;
+                break;
+            case 'KeyP':
+                if (ctrlKey) {
+                    this.onTapPreview();
+                    defaultPrevent = true;
+                }
+                break;
+            case 'KeyA':
+                if (ctrlKey)
+                    this.onTapSelectAll();
+                break;
+            case 'KeyL':
+                if (altKey && shiftKey)
+                    this.onTapAlign('left');
+                break;
+            case 'KeyR':
+                if (altKey && shiftKey)
+                    this.onTapAlign('right');
+                break;
+            case 'KeyM':
+                if (altKey && shiftKey)
+                    this.onTapAlign('middle');
+                break;
+            case 'KeyT':
+                if (altKey && shiftKey)
+                    this.onTapAlign('top');
+                break;
+            case 'KeyY':
+                if (altKey && shiftKey)
+                    this.onTapSymmetryY();
+                break;
+            case 'KeyD':
+                if (ctrlKey) {
+                    this.onTapFitScene();
+                    defaultPrevent = true;
+                }
+                break;
+            case 'KeyE':
+                if (altKey && shiftKey)
+                    this.onTapRotateCW();
+                else if (ctrlKey && shiftKey)
+                    this.onTapDownloadModel();
+                break;
+            case 'KeyW':
+                if (altKey && shiftKey)
+                    this.onTapRotateCCW();
+                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;
+                }
+                break;
+            default:
+                return false;
+        }
+        if (defaultPrevent)
+            e.preventDefault();
+        return true;
+    }
+    onExecute(command, undoable, redoable) {
+        !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled');
+        !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled');
+    }
+    onUndo(undoable, redoable) {
+        !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled');
+        !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled');
+    }
+    onRedo(undoable, redoable) {
+        !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled');
+        !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled');
+    }
+    onSceneChanged(after, before) {
+        // if (before) {
+        //   before.off('execute', this.onExecute, this)
+        //   before.off('undo', this.onUndo, this)
+        //   before.off('redo', this.onRedo, this)
+        // }
+        if (after) {
+            after.on('execute', this.onExecute, this);
+            after.on('undo', this.onUndo, this);
+            after.on('redo', this.onRedo, this);
+        }
+    }
+    // @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
+    onSelectedChanged(after, before) {
+        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');
+    }
+    onTapUndo() {
+        var _a;
+        (_a = this.scene) === null || _a === void 0 ? void 0 : _a.undo();
+    }
+    onTapRedo() {
+        var _a;
+        (_a = this.scene) === null || _a === void 0 ? void 0 : _a.redo();
+    }
+    onTapCut() {
+        var _a;
+        (_a = this.scene) === null || _a === void 0 ? void 0 : _a.cut();
+    }
+    onTapCopy() {
+        var _a;
+        var copied = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.copy();
+        if (!copied)
+            return;
+        navigator.clipboard.writeText(copied);
+        this.cliped = copied;
+    }
+    onTapPaste() {
+        setTimeout(() => {
+            var _a;
+            this.cliped && ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.paste(this.cliped));
+        }, 100);
+    }
+    onTapDelete() {
+        var _a;
+        (_a = this.scene) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    onTapSelectAll() {
+        var _a;
+        (_a = this.scene) === null || _a === void 0 ? void 0 : _a.select('(child)');
+    }
+    onTapFontIncrease(e) {
+        var _a, _b;
+        var selected = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.selected;
+        if (!selected || !selected.length) {
+            return;
+        }
+        (_b = this.scene) === null || _b === void 0 ? void 0 : _b.undoableChange(function () {
+            selected.forEach(function (component) {
+                var fontSize = component.get('fontSize');
+                if (!fontSize)
+                    fontSize = '15';
+                if (fontSize) {
+                    var size = parseInt(fontSize);
+                    component.set('fontSize', size + 1);
+                }
+            });
+        });
+    }
+    onTapFontDecrease(e) {
+        var _a, _b;
+        var selected = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.selected;
+        if (!selected || !selected.length) {
+            return;
+        }
+        (_b = this.scene) === null || _b === void 0 ? void 0 : _b.undoableChange(function () {
+            selected.forEach(function (component) {
+                var fontSize = component.get('fontSize');
+                if (!fontSize)
+                    fontSize = '15';
+                if (fontSize) {
+                    var size = parseInt(fontSize);
+                    if (size > 1)
+                        component.set('fontSize', size - 1);
+                }
+            });
+        });
+    }
+    onTapAlign(e) {
+        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);
+    }
+    onTapZorder(e) {
+        if (!this.scene)
+            return;
+        var selected = this.scene.selected;
+        if (selected.length < 1)
+            return;
+        var zorder = typeof e === 'string' ? e : e.target.getAttribute('data-zorder');
+        zorder && this.scene.zorder(zorder);
+    }
+    onTapSymmetryX() {
+        this.scene && this.scene.symmetryX();
+    }
+    onTapSymmetryY() {
+        this.scene && this.scene.symmetryY();
+    }
+    onTapRotateCW() {
+        if (!this.scene)
+            return;
+        var selected = this.scene.selected;
+        if (selected.length && selected[0].isRootModel())
+            return;
+        this.scene.undoableChange(function () {
+            selected.forEach(function (component) {
+                var rotation = component.get('rotation');
+                if (!rotation)
+                    rotation = 0;
+                component.set('rotation', (rotation + Math.PI / 2) % (Math.PI * 2));
+            });
+        });
+    }
+    onTapRotateCCW() {
+        if (!this.scene)
+            return;
+        var selected = this.scene.selected;
+        if (selected.length && selected[0].isRootModel())
+            return;
+        this.scene.undoableChange(function () {
+            selected.forEach(function (component) {
+                var rotation = component.get('rotation');
+                if (!rotation)
+                    rotation = 0;
+                component.set('rotation', (rotation - Math.PI / 2) % (Math.PI * 2));
+            });
+        });
+    }
+    onTapGroup() {
+        this.scene && this.scene.group();
+    }
+    onTapUngroup() {
+        this.scene && this.scene.ungroup();
+    }
+    onTapFullscreen() {
+        this.dispatchEvent(new CustomEvent('modeller-fullscreen'));
+    }
+    onTapToggle() {
+        this.hideProperty = !this.hideProperty;
+        this.dispatchEvent(new CustomEvent('hide-property-changed', {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.hideProperty }
+        }));
+    }
+    onTapFitScene() {
+        if (this.scene) {
+            this.scene.resize();
+            this.scene.fit('ratio');
+        }
+    }
+    onTapPreview() {
+        this.dispatchEvent(new CustomEvent('open-preview'));
+    }
+    onTapDownloadModel() {
+        this.dispatchEvent(new CustomEvent('download-model'));
+    }
+    onTapDistribute(e) {
+        if (!this.scene)
+            return;
+        var selected = this.scene.selected;
+        if (selected.length <= 1) {
+            return;
+        }
+        var distribute = typeof e === 'string' ? e : e.target.getAttribute('data-distribute');
+        distribute && this.scene.distribute(distribute);
+    }
+};
+EditToolbar.styles = [style];
+__decorate([
+    property({ type: Object })
+], EditToolbar.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array })
+], EditToolbar.prototype, "selected", void 0);
+__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);
+__decorate([
+    queryAll('[data-distribute]')
+], EditToolbar.prototype, "distributes", void 0);
+EditToolbar = __decorate([
+    customElement('edit-toolbar')
+], EditToolbar);
+export { EditToolbar };
+//# sourceMappingURL=edit-toolbar.js.map