@operato/board 8.0.0-alpha.9 → 8.0.0-beta.1

package/src/ox-board-modeller.ts

@@ -1,408 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/fab/fab.js'
-import '@hatiolab/things-scene'
-import './modeller/scene-viewer/ox-scene-handler.js'
-import './modeller/scene-viewer/ox-scene-layer.js'
-import './modeller/scene-viewer/ox-scene-property.js'
-import './modeller/scene-viewer/ox-scene-viewer.js'
-import './ox-board-viewer'
-
-import { saveAs } from 'file-saver'
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { MODE_EDIT, Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { OxPopup } from '@operato/popup'
-import { isMacOS, togglefullscreen } from '@operato/utils'
-
-import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'
-import { EditToolbar } from './modeller/edit-toolbar'
-import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
-import { ComponentGroup, ComponentTemplate } from './types'
-import OxSceneViewer from './modeller/scene-viewer/ox-scene-viewer.js'
-
-const MACOS = isMacOS()
-
-const ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href
-const ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href
-const ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href
-const ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href
-const ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href
-
-const ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href
-const ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href
-const ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href
-const ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href
-
-const ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href
-
-var Registry: ComponentGroup[] = []
-
-@customElement('ox-board-modeller')
-export class BoardModeller extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        height: 100%;
-        overflow: hidden;
-      }
-
-      edit-toolbar {
-        flex: 45px;
-        max-height: 45px;
-      }
-
-      div[content] {
-        flex: 1;
-        max-height: calc(100% - 45px);
-
-        display: flex;
-        flex-direction: row;
-      }
-
-      component-toolbar {
-        max-height: 100%;
-      }
-
-      property-sidebar {
-        overflow: hidden;
-      }
-
-      #scene-wrap {
-        position: relative;
-
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-      }
-
-      ox-scene-viewer {
-        flex: 1;
-        width: 100%;
-        height: 100%;
-      }
-
-      md-fab {
-        position: absolute;
-        right: 15px;
-        bottom: 15px;
-      }
-
-      ox-popup {
-        width: 90%;
-        height: 90%;
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-        background: var(--md-sys-color-on-secondary-container, black);
-
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-      }
-
-      ox-board-viewer {
-        width: 98%;
-        height: 98%;
-        margin: auto;
-        padding: 0;
-      }
-    `
-  ]
-
-  static registerGroup(group: ComponentGroup) {
-    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)
-
-    if (found) {
-      found = {
-        ...found,
-        ...group
-      }
-    } else {
-      Registry.push(group)
-    }
-  }
-
-  static registerTemplate(templates: ComponentTemplate[]): void {
-    templates &&
-      templates.forEach(template => {
-        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group
-
-        Registry.filter(group => groups.includes(group.name)).forEach(group => {
-          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {
-            group.templates.push(template)
-          }
-        })
-      })
-  }
-
-  static get groups(): ComponentGroup[] {
-    return Registry
-  }
-
-  static getGroup(name: string) {
-    return Registry.find(group => group.name === name)
-  }
-
-  @property({ type: String }) boardName: string = ''
-  @property({ type: Object }) model: any = null
-  @property({ type: String }) baseUrl: string = ''
-  @property({ type: Array }) selected: any[] = []
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
-  @property({ type: Object }) provider: any = null
-  @property({ type: Boolean }) hideProperty: boolean = false
-  @property({ type: String }) overlay: string = ''
-  @property({ type: Object }) scene?: Scene
-  @property({ type: Array }) componentGroupList: any[] = []
-  @property({ type: Array }) fonts: any[] = []
-  @property({ type: Array }) propertyEditor: any[] = []
-
-  @query('edit-toolbar') private editToolbar!: EditToolbar
-  @query('ox-scene-viewer') private viewer!: OxSceneViewer
-
-  private group: string = ''
-  private shortcutHandler?: (e: KeyboardEvent) => void
-
-  constructor() {
-    super()
-
-    document.addEventListener('get-all-scene-component-ids', (e: Event) => {
-      var { component, callback } = (e as CustomEvent).detail
-
-      if (!this.scene) return
-
-      var ids
-      if (component) {
-        ids = this.scene.findAll(component).map(c => c.model.id)
-      } else {
-        // @ts-ignore
-        ids = this.scene.ids.map(({ key }) => key)
-      }
-
-      ids = ids.filter(Boolean).sort()
-      callback(ids)
-    })
-
-    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)
-    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)
-    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)
-    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)
-    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)
-
-    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)
-    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)
-    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)
-    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)
-
-    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)
-  }
-
-  static get scopedElements() {
-    return {
-      'edit-toolbar': EditToolbar,
-      'property-sidebar': PropertySidebar,
-      'component-toolbar': ComponentToolbar
-    }
-  }
-
-  render() {
-    return html`
-      <edit-toolbar
-        .scene=${this.scene}
-        .selected=${this.selected}
-        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}
-        @open-preview=${() => this.preview()}
-        @download-model=${() => this.downloadModel()}
-        @modeller-fullscreen=${() => togglefullscreen(this)}
-      >
-        ${this.renderBrandingZone()}
-      </edit-toolbar>
-
-      <div content>
-        <component-toolbar
-          .scene=${this.scene}
-          .mode=${this.mode}
-          @mode-changed=${(e: CustomEvent) => {
-            this.mode = e.detail.value
-          }}
-          .componentGroupList=${this.componentGroupList}
-          .group=${this.group}
-        >
-        </component-toolbar>
-
-        <div id="scene-wrap">
-          <ox-scene-viewer
-            id="scene"
-            .scene=${this.scene}
-            @scene-changed=${(e: CustomEvent) => {
-              this.scene = e.detail.value
-            }}
-            .model=${this.model}
-            .selected=${this.selected}
-            @selected-changed=${(e: CustomEvent) => {
-              this.selected = e.detail.value
-            }}
-            .mode=${this.mode}
-            @mode-changed=${(e: CustomEvent) => {
-              this.mode = e.detail.value
-            }}
-            fit="ratio"
-            .baseUrl=${this.baseUrl}
-            @contextmenu=${() => this.onContextMenu()}
-            .provider=${this.provider}
-            name="modeller"
-          >
-            <ox-scene-layer type="selection-layer"></ox-scene-layer>
-            <ox-scene-layer type="modeling-layer"></ox-scene-layer>
-            <ox-scene-layer type="add-layer"> </ox-scene-layer>
-            <ox-scene-layer type="guide-layer">
-              <ox-scene-property name="ruler" value="disabled"></ox-scene-property>
-            </ox-scene-layer>
-            <ox-scene-layer type="shift-layer">
-              <ox-scene-property name="text" value="${this.overlay}"></ox-scene-property>
-              <ox-scene-property name="alpha" value="0.3"></ox-scene-property>
-              <ox-scene-property name="fontFamily" value="arial"></ox-scene-property>
-              <ox-scene-property name="fontSize" value="30" type="number"></ox-scene-property>
-              <ox-scene-property name="fontColor" value="navy"></ox-scene-property>
-              <ox-scene-property name="textBaseline" value="top"></ox-scene-property>
-              <ox-scene-property name="textAlign" value="left"></ox-scene-property>
-              <ox-scene-property name="paddingTop" value="50" type="number"></ox-scene-property>
-              <ox-scene-property name="paddingLeft" value="50" type="number"></ox-scene-property>
-            </ox-scene-layer>
-            <ox-scene-layer type="decotag-layer"></ox-scene-layer>
-            <ox-scene-handler type="text-editor"></ox-scene-handler>
-            <ox-scene-handler type="move-handler"></ox-scene-handler>
-            <ox-scene-handler type="paste-handler"></ox-scene-handler>
-          </ox-scene-viewer>
-
-          <md-fab @click=${() => this.onTapSave()} title="save">
-            <md-icon slot="icon">save</md-icon>
-          </md-fab>
-        </div>
-
-        <property-sidebar
-          .scene=${this.scene}
-          .selected=${this.selected}
-          .collapsed=${this.hideProperty}
-          .fonts=${this.fonts}
-          .propertyEditor=${this.propertyEditor}
-        >
-        </property-sidebar>
-      </div>
-    `
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.bindShortcutEvent()
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.unbindShortcutEvent()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('scene') && this.scene) {
-      this.scene.mode = MODE_EDIT
-    }
-  }
-
-  close() {
-    this.model = null
-    this.requestUpdate()
-  }
-
-  onShortcut(e: KeyboardEvent) {
-    if (MACOS) var ctrlKey = e.metaKey
-    else var ctrlKey = e.ctrlKey
-
-    switch (e.code) {
-      case 'KeyS':
-        if (ctrlKey) {
-          this.onTapSave()
-          e.preventDefault()
-        }
-        break
-    }
-  }
-
-  preview() {
-    const board = {
-      id: 'preview',
-      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null
-    }
-
-    OxPopup.open({
-      template: html` <ox-board-viewer style="flex: 1;" .provider=${this.provider} .board=${board}></ox-board-viewer> `,
-      style: 'width: 80vw; height: 80vh;',
-      backdrop: true
-    })
-
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
-  }
-
-  downloadModel() {
-    if (!this.scene) return
-
-    var model = JSON.stringify(this.model, null, 2)
-    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'
-    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)
-  }
-
-  renderBrandingZone() {
-    return html``
-  }
-
-  onTapSave() {
-    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))
-  }
-
-  bindShortcutEvent() {
-    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.
-    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']
-
-    this.shortcutHandler = (e: KeyboardEvent) => {
-      const target = e.composedPath()[0] as HTMLElement
-      var tagName = target.tagName
-      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'
-      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)
-
-      if (!isGlobalHotkey && isInput) return
-      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)
-    }
-
-    document.addEventListener('keydown', this.shortcutHandler)
-  }
-
-  unbindShortcutEvent() {
-    if (this.shortcutHandler) {
-      document.removeEventListener('keydown', this.shortcutHandler)
-      delete this.shortcutHandler
-    }
-  }
-
-  undoable(): boolean {
-    return !!this.scene?.undoable()
-  }
-
-  redoable(): boolean {
-    return !!this.scene?.redoable()
-  }
-
-  preserve(): void {
-    this.scene?.preserve()
-  }
-
-  hasUnpreservedChanges(): boolean {
-    return !!this.scene?.hasUnpreservedChanges()
-  }
-
-  onContextMenu() {}
-}

package/src/ox-board-player-style.ts

@@ -1,200 +0,0 @@
-import { css } from 'lit'
-
-export const style = css`
-  :host {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    justify-content: center;
-    align-items: center;
-  }
-
-  ::slotted(*) {
-    border: none;
-  }
-
-  ::slotted > * {
-    flex: 1;
-  }
-
-  board-wrapper {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  board-wrapper[front] {
-    background: black;
-  }
-
-  board-wrapper[back] {
-    background: black;
-  }
-
-  #control {
-    position: absolute;
-    bottom: 1vh;
-    width: 100vw;
-    max-width: 435px;
-    display: grid;
-    grid-template-columns: 42px 42px 1fr;
-    color: white;
-    justify-content: center;
-    align-items: center;
-    grid-auto-flow: dense;
-    padding: 5px;
-    box-sizing: border-box;
-    grid-template-rows: 12px 60px 12px;
-  }
-
-  #control[hidden] {
-    display: none;
-  }
-
-  #control > div > * {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  #joystick {
-    position: relative;
-    box-sizing: border-box;
-    border: 2px solid tomato;
-    background-color: #c34827;
-    box-shadow: 0 0 5px #000;
-    width: 100%;
-    height: 100%;
-    grid-column: 1 / span 2;
-    border-radius: 50%;
-    z-index: 2;
-    grid-row: 1 / span 3;
-  }
-
-  #joystick md-icon {
-    position: absolute;
-    display: block;
-    width: 20px;
-    height: 20px;
-    font-size: 25px;
-    line-height: 0.7;
-  }
-
-  md-icon#up {
-    left: 29px;
-  }
-
-  md-icon#left {
-    top: 32px;
-    left: -2px;
-  }
-
-  md-icon#play,
-  md-icon#pause {
-    left: 20px;
-    top: 20px;
-    width: 40px;
-    height: 40px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.15);
-    font-size: 45px;
-    line-height: 0.9;
-  }
-
-  md-icon#right {
-    top: 31px;
-    left: 60px;
-  }
-
-  md-icon#down {
-    left: 29px;
-    top: 63px;
-  }
-
-  md-icon#pause {
-    text-indent: -2px;
-  }
-
-  #setting-container {
-    grid-column: 2 / span 2;
-    grid-row: 2;
-    gap: 0 10px;
-    border-radius: 12px;
-    background: rgba(0, 0, 0, 0.7);
-    height: 100%;
-    box-shadow: rgb(0, 0, 0) 0px 0px 5px;
-    display: grid;
-    grid-template-columns: 1fr 60px;
-    align-items: center;
-    padding-left: 60px;
-    padding-right: 5px;
-  }
-
-  #setting {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0 10px;
-  }
-
-  #setting md-icon {
-    font-size: 22px;
-    color: rgba(255, 174, 53, 0.8);
-  }
-
-  #setting input {
-    width: 50px;
-    margin-right: 5px;
-    font-size: 14px;
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid #fff;
-    color: #fff;
-    text-align: right;
-  }
-
-  #setting select {
-    border: none;
-    font-size: 14px;
-  }
-
-  #setting input:focus {
-    outline: none;
-  }
-
-  #schedule-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  #grid-setting-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  #etc {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    justify-items: center;
-  }
-
-  #etc md-icon {
-    font-size: 30px;
-  }
-
-  #control [hidden] {
-    display: none;
-  }
-
-  @media screen and (max-width: 460px) {
-    #setting {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-    }
-  }
-`