@operato/board 8.0.0-beta.0 → 8.0.0-beta.1

package/src/modeller/edit-toolbar.ts

@@ -1,587 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { html, LitElement, PropertyValues } from 'lit'
-import { property, query, queryAll } from 'lit/decorators.js'
-
-import { Component, Scene } from '@hatiolab/things-scene'
-import { copyToClipboard, isMacOS } from '@operato/utils'
-
-import { style } from './edit-toolbar-style'
-
-const MACOS = isMacOS()
-
-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('#style-copy') private styleCopy!: HTMLElement
-  @query('#databind-copy') private databindCopy!: 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) => {
-      try {
-        this.cliped = (e as ClipboardEvent).clipboardData?.getData('text/plain')
-      } catch (e) {
-        console.error('model paste failed', e)
-      }
-    })
-
-    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.styleCopy.addEventListener('tap', this.onStartStylePasteMode.bind(this) as EventListener)
-    this.databindCopy.addEventListener('tap', this.onStartDatabindPasteMode.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('#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="style-copy" title="style copy (${this.getShortcutString('cmd', '1')})"> </span>
-        <span button id="databind-copy" title="databind copy (${this.getShortcutString('cmd', '2')})"> </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>
-
-        <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="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" style="scale: 0.7;"></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 = MACOS ? '⌘' : 'Ctrl'
-        break
-      case 'shift':
-        symbol = MACOS ? '⇧' : 'Shift'
-        break
-      case 'alt':
-      case 'option':
-        symbol = MACOS ? '⌥' : 'Alt'
-        break
-      case 'backspace':
-        symbol = MACOS ? '⌫' : 'BackSpace'
-        break
-      case 'delete':
-        symbol = MACOS ? '⌦' : '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(MACOS ? '' : '+')
-  }
-
-  onShortcut(e: KeyboardEvent) {
-    if (MACOS) 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()
-        break
-      case 'Digit1':
-        if (ctrlKey) this.onStartStylePasteMode()
-        break
-      case 'Digit2':
-        if (ctrlKey) this.onStartDatabindPasteMode()
-        break
-      case 'KeyC':
-        if (ctrlKey && !shiftKey) this.onTapCopy()
-        else if (altKey && shiftKey) this.onTapAlign('center')
-        break
-      case 'KeyX':
-        if (ctrlKey && !shiftKey) this.onTapCut()
-        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 '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 'KeyD':
-        if (ctrlKey) {
-          this.onTapFitScene()
-          defaultPrevent = true
-        }
-        break
-      case 'KeyE':
-        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
-        }
-        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)
-    }
-  }
-
-  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()
-  }
-
-  onStartStylePasteMode() {
-    this.scene?.startStylePasteMode()
-  }
-
-  onStartDatabindPasteMode() {
-    this.scene?.startDatabindPasteMode()
-  }
-
-  onTapCut() {
-    this.scene?.cut()
-  }
-
-  async onTapCopy() {
-    var copied = this.scene?.copy()
-
-    if (!copied) return
-
-    await copyToClipboard(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
-
-    var align = typeof e === 'string' ? e : (e.target as HTMLElement).getAttribute('data-align')
-    if (!align) {
-      return
-    }
-
-    if (selected.length <= 1) {
-      this.scene.place(align)
-    } else {
-      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)
-  }
-
-  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)
-  }
-}

package/src/modeller/property-sidebar/abstract-property.ts

@@ -1,69 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement } from 'lit'
-
-export class AbstractProperty extends LitElement {
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  _onValueChange(e: Event) {
-    var element = e.target as HTMLElement
-    var key = element.getAttribute('value-key')
-
-    if (!key) {
-      return
-    }
-
-    var value = this._getValueFromEventTarget(element)
-
-    this._onAfterValueChange(key, value)
-  }
-
-  _getValueFromEventTarget(element: HTMLElement) {
-    var value
-
-    switch (element.tagName) {
-      case 'INPUT':
-        switch ((element as any).type) {
-          case 'checkbox':
-            value = (element as any).checked
-            break
-          case 'number':
-            value = Number((element as any).valueAsNumber)
-            break
-          case 'text':
-            value = String((element as any).value)
-        }
-        break
-
-      case 'PAPER-BUTTON':
-        value = (element as any).active
-        break
-
-      case 'PAPER-LISTBOX':
-        value = (element as any).selected
-        break
-
-      default:
-        value = (element as any).value
-        break
-    }
-
-    return value
-  }
-
-  _onAfterValueChange(key: string, value: any) {
-    this.dispatchEvent(
-      new CustomEvent('property-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          [key]: value
-        }
-      })
-    )
-  }
-}