@operato/board 0.2.44 → 0.2.48

package/src/modeller/edit-toolbar.ts

@@ -0,0 +1,640 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, Scene } from '@hatiolab/things-scene'
+import { LitElement, PropertyValues, html } from 'lit'
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
+
+import { style } from './edit-toolbar-style'
+
+const _isMacOS = navigator.userAgent.indexOf('Mac') != -1
+
+@customElement('edit-toolbar')
+export class EditToolbar extends LitElement {
+  static styles = [style]
+
+  @property({ type: Object }) scene?: Scene
+  @property({ type: Array }) selected: any[] = []
+  @property({ type: Boolean }) hideProperty: boolean = false
+
+  private cliped?: string
+
+  @query('#redo') private redo!: HTMLElement
+  @query('#undo') private undo!: HTMLElement
+
+  @query('#fullscreen') private fullscreen!: HTMLElement
+  @query('#cut') private cut!: HTMLElement
+  @query('#copy') private copy!: HTMLElement
+  @query('#paste') private paste!: HTMLElement
+  @query('#delete') private delete!: HTMLElement
+
+  @query('#forward') private forward!: HTMLElement
+  @query('#backward') private backward!: HTMLElement
+  @query('#front') private front!: HTMLElement
+  @query('#back') private back!: HTMLElement
+
+  @queryAll('[data-align]') private aligners!: NodeListOf<HTMLSpanElement>
+  @queryAll('[data-zorder]') private zorders!: NodeListOf<HTMLSpanElement>
+  @queryAll('[data-distribute]') private distributes!: NodeListOf<HTMLSpanElement>
+
+  firstUpdated() {
+    this.addEventListener('mousewheel', this.onWheelEvent.bind(this) as EventListener, false)
+
+    window.addEventListener('paste', (e: Event) => {
+      this.cliped = (e as ClipboardEvent).clipboardData?.getData('text/plain')
+    })
+
+    this.aligners.forEach(aligner => aligner.addEventListener('tap', this.onTapAlign.bind(this) as EventListener))
+    this.zorders.forEach(zorder => zorder.addEventListener('tap', this.onTapZorder.bind(this) as EventListener))
+    this.distributes.forEach(distribute =>
+      distribute.addEventListener('tap', this.onTapDistribute.bind(this) as EventListener)
+    )
+
+    this.undo.addEventListener('tap', this.onTapUndo.bind(this) as EventListener)
+    this.redo.addEventListener('tap', this.onTapRedo.bind(this) as EventListener)
+    this.fullscreen.addEventListener('tap', this.onTapFullscreen.bind(this) as EventListener)
+    this.cut.addEventListener('tap', this.onTapCut.bind(this) as EventListener)
+    this.copy.addEventListener('tap', this.onTapCopy.bind(this) as EventListener)
+    this.paste.addEventListener('tap', this.onTapPaste.bind(this) as EventListener)
+    this.delete.addEventListener('tap', this.onTapDelete.bind(this) as EventListener)
+
+    this.renderRoot
+      .querySelector('#font-increase')!
+      .addEventListener('tap', this.onTapFontIncrease.bind(this) as EventListener)
+    this.renderRoot
+      .querySelector('#font-decrease')!
+      .addEventListener('tap', this.onTapFontDecrease.bind(this) as EventListener)
+    this.renderRoot.querySelector('#group')!.addEventListener('tap', this.onTapGroup.bind(this) as EventListener)
+    this.renderRoot.querySelector('#ungroup')!.addEventListener('tap', this.onTapUngroup.bind(this) as EventListener)
+    this.renderRoot
+      .querySelector('#symmetry-x')!
+      .addEventListener('tap', this.onTapSymmetryX.bind(this) as EventListener)
+    this.renderRoot
+      .querySelector('#symmetry-y')!
+      .addEventListener('tap', this.onTapSymmetryY.bind(this) as EventListener)
+    this.renderRoot.querySelector('#rotate-cw')!.addEventListener('tap', this.onTapRotateCW.bind(this) as EventListener)
+    this.renderRoot
+      .querySelector('#rotate-ccw')!
+      .addEventListener('tap', this.onTapRotateCCW.bind(this) as EventListener)
+    this.renderRoot
+      .querySelector('#toggle-property')!
+      .addEventListener('tap', this.onTapToggle.bind(this) as EventListener)
+    this.renderRoot.querySelector('#fit-scene')!.addEventListener('tap', this.onTapFitScene.bind(this) as EventListener)
+    this.renderRoot.querySelector('#preview')!.addEventListener('tap', this.onTapPreview.bind(this) as EventListener)
+  }
+
+  updated(changes: PropertyValues<this>) {
+    changes.has('scene') && this.onSceneChanged(this.scene, changes.get('scene') as Scene)
+    changes.has('selected') && this.onSelectedChanged(this.selected, changes.get('selected') as Component[])
+  }
+
+  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: Event) {
+    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
+    this.scrollLeft -= delta * 40
+
+    e.preventDefault()
+  }
+
+  getSymbol(key: string) {
+    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
+  }
+
+  private getShortcutString(...keys: string[]) {
+    var symbols = []
+    for (var i = 0; i < arguments.length; i++) {
+      symbols.push(this.getSymbol(arguments[i]))
+    }
+
+    return symbols.join(_isMacOS ? '' : '+')
+  }
+
+  onShortcut(e: KeyboardEvent) {
+    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) this.scene?.zorder('forward')
+        else if (ctrlKey && shiftKey) this.scene?.zorder('front')
+        break
+      case 'KeyB':
+        if (ctrlKey && !shiftKey) this.scene?.zorder('backward')
+        else if (ctrlKey && shiftKey) this.scene?.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: string, undoable: boolean, redoable: boolean) {
+    !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled')
+    !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled')
+  }
+
+  onUndo(undoable: boolean, redoable: boolean) {
+    !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled')
+    !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled')
+  }
+
+  onRedo(undoable: boolean, redoable: boolean) {
+    !undoable ? this.undo.setAttribute('disabled', '') : this.undo.removeAttribute('disabled')
+    !redoable ? this.redo.setAttribute('disabled', '') : this.redo.removeAttribute('disabled')
+  }
+
+  onSceneChanged(after?: Scene, before?: Scene) {
+    // 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: Component[], before: Component[]) {
+    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() {
+    this.scene?.undo()
+  }
+
+  onTapRedo() {
+    this.scene?.redo()
+  }
+
+  onTapCut() {
+    this.scene?.cut()
+  }
+
+  onTapCopy() {
+    var copied = this.scene?.copy()
+
+    if (!copied) return
+
+    navigator.clipboard.writeText(copied)
+    this.cliped = copied
+  }
+
+  onTapPaste() {
+    setTimeout(() => {
+      this.cliped && this.scene?.paste(this.cliped)
+    }, 100)
+  }
+
+  onTapDelete() {
+    this.scene?.remove()
+  }
+
+  onTapSelectAll() {
+    this.scene?.select('(child)')
+  }
+
+  onTapFontIncrease(e: TouchEvent) {
+    var selected = this.scene?.selected
+    if (!selected || !selected.length) {
+      return
+    }
+
+    this.scene?.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: TouchEvent) {
+    var selected = this.scene?.selected
+
+    if (!selected || !selected.length) {
+      return
+    }
+
+    this.scene?.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: TouchEvent | string) {
+    if (!this.scene) return
+
+    var selected = this.scene.selected
+    if (selected.length <= 1) return
+
+    var align = typeof e === 'string' ? e : (e.target as HTMLElement).getAttribute('data-align')
+
+    align && this.scene.align(align)
+  }
+
+  onTapZorder(e: TouchEvent | string) {
+    if (!this.scene) return
+
+    var selected = this.scene.selected
+    if (selected.length < 1) return
+
+    var zorder = typeof e === 'string' ? e : (e.target as HTMLElement).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: TouchEvent | string) {
+    if (!this.scene) return
+
+    var selected = this.scene.selected
+    if (selected.length <= 1) {
+      return
+    }
+
+    var distribute = typeof e === 'string' ? e : (e.target as HTMLElement)!.getAttribute('data-distribute')
+
+    distribute && this.scene.distribute(distribute)
+  }
+}