@operato/board 0.2.44 → 0.2.48

package/src/modeller/scene-viewer/ox-scene-player.ts

@@ -0,0 +1,104 @@
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { Scene } from '@hatiolab/things-scene'
+
+@customElement('things-scene-player')
+class OxScenePlayer extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      #root {
+        width: 100%;
+        height: 100%;
+      }
+    `
+  ]
+
+  @property({ type: String }) sceneId: string = ''
+  /*
+   * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.
+   *
+   * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.
+   * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.
+   * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+   * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+   * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.
+   * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.
+   *
+   * @todo things-real 에서는 enumeration type 이며, FitMode.RATIO | FitMode.BOTH 중 하나로 정의한다.
+   */
+  @property({ type: String }) fit: 'none' | 'both' | 'width' | 'height' | 'center' | 'ratio' = 'ratio'
+  @property({ type: Object }) provider: any
+
+  private scene?: Scene
+
+  render() {
+    return html` <div id="root"></div> `
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    window.addEventListener('resize', () => {
+      requestAnimationFrame(() => {
+        if (this.scene) {
+          this.scene.resize()
+
+          if (this.offsetWidth) {
+            this.scene.fit(this.fit)
+          }
+        }
+      })
+    })
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._releaseRef()
+  }
+
+  updated(change: PropertyValues<this>) {
+    change.has('sceneId') && this._onSceneIdChanged()
+  }
+
+  _releaseRef() {
+    if (this.scene) {
+      this.scene.target = null
+      this.scene.release()
+      delete this.scene
+    }
+  }
+
+  _onSceneIdChanged() {
+    if (!this.provider) return
+
+    this._releaseRef()
+
+    if (!this.sceneId) return
+
+    this.provider.get(this.sceneId, true).then(
+      (scene: Scene) => {
+        this.scene = scene
+
+        if (!this.scene) {
+          return
+        }
+
+        this.scene.target = this.renderRoot.querySelector('#root')
+
+        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
+         * 이 때는 정상적으로 그려주고,
+         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
+         */
+        if (this.scene.target?.offsetWidth) this.scene.fit(this.fit)
+      },
+      (e: any) => {}
+    )
+  }
+}

package/src/modeller/scene-viewer/ox-scene-property.ts

@@ -0,0 +1,10 @@
+import { customElement, property } from 'lit/decorators.js'
+
+import { LitElement } from 'lit'
+
+@customElement('ox-scene-property')
+export default class OxSceneProperty extends LitElement {
+  @property({ type: String }) name!: string
+  @property({ type: String }) value!: string
+  @property({ type: String }) type!: string
+}

package/src/modeller/scene-viewer/ox-scene-viewer.ts

@@ -0,0 +1,248 @@
+import './confidential-overlay'
+import './ox-scene-layer'
+import './ox-scene-handler'
+
+import { Component, FITMODE, Model, Properties, SCENE_MODE, Scene, create as createScene } from '@hatiolab/things-scene'
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import OxSceneLayer from './ox-scene-layer'
+
+@customElement('ox-scene-viewer')
+export default class OxSceneViewer extends LitElement {
+  static styles = css`
+    :host {
+      outline: none;
+    }
+  `
+
+  @property({ type: Object }) scene: Scene | null = null
+  @property({ type: Object }) model?: Model
+  /* Scene Mode - mode 0 : view mode, mode 1 : edit mode, mode 2 : shift mode */
+  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
+  @property({ type: Number }) screenSize: number = 13.3
+  @property({ type: Object }) variables: Properties = {}
+  @property({ type: Object }) data: any
+  /*
+   * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.
+   *
+   * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.
+   * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.
+   * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+   * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+   * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.
+   * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.
+   */
+  @property({ type: String }) fit: FITMODE = 'none'
+  @property({ type: Array }) selected: Component[] = []
+  @property({ type: Boolean }) disposeWhenDetached: boolean = false
+  @property({ type: String }) baseUrl: string = ''
+  @property({ type: Object }) provider: any
+  @property({ type: String }) name: string = 'noname'
+  @property({ type: Boolean }) enableInspector: boolean = true
+  @property({ type: Boolean }) showInspector: boolean = false
+
+  private lastOffsetWidth?: number
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    if (this.scene && this.disposeWhenDetached) {
+      this._disposeScene()
+    }
+  }
+
+  render() {
+    return html` <slot></slot> `
+  }
+
+  updated(change: PropertyValues<this>) {
+    change.has('model') && this._onModelChanged(this.model)
+    change.has('mode') && this._onModeChanged(this.mode)
+    change.has('screenSize') && this._onDisplayChanged(this.screenSize)
+    change.has('data') && this._onDataChanged(this.data)
+    change.has('baseUrl') && this._onBaseUrlChanged(this.baseUrl)
+  }
+
+  _setScene(scene: Scene | null) {
+    this.scene = scene
+    this.dispatchEvent(
+      new CustomEvent('scene-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: scene }
+      })
+    )
+  }
+
+  _setMode(mode: SCENE_MODE) {
+    this.mode = mode
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: mode }
+      })
+    )
+  }
+
+  _setVariables(variables: Properties) {
+    this.variables = variables
+    this.dispatchEvent(
+      new CustomEvent('variables-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: variables }
+      })
+    )
+  }
+
+  _setSelected(selected: Component[]) {
+    this.selected = selected
+    this.dispatchEvent(
+      new CustomEvent('selected-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: selected }
+      })
+    )
+  }
+
+  _disposeScene() {
+    if (this.scene) {
+      this.scene.off('selected', this._onSelectedChanged, this)
+      this.scene.off('mode', this._onSceneModeChanged, this)
+
+      if (this.provider) {
+        this.scene.release()
+      } else {
+        this.scene.dispose()
+      }
+
+      this._setScene(null)
+      this._setSelected([])
+    }
+  }
+
+  resize(force: boolean) {
+    if (typeof this.scene == 'object') {
+      if (force || this.fit === 'both' || Math.abs(this.offsetWidth - (this.lastOffsetWidth || 0)) >= 1) {
+        requestAnimationFrame(() => {
+          if (this.scene) {
+            this.scene.resize()
+            this.scene.fit(this.fit)
+          }
+        })
+      }
+
+      this.lastOffsetWidth = this.offsetWidth
+    }
+  }
+
+  _onModelChanged(model?: Model) {
+    this._disposeScene()
+
+    if (!model) {
+      return
+    }
+
+    const layers = Array.from(this.querySelectorAll('ox-scene-layer')).map(layer => (layer as OxSceneLayer).getModel())
+
+    const handlers = Array.from(this.querySelectorAll('ox-scene-handler')).map(handler => handler.getAttribute('type'))
+
+    this._setScene(
+      createScene({
+        target: this,
+        model: JSON.parse(JSON.stringify(model)),
+        layers,
+        handlers,
+        mode: this.mode,
+        refProvider: this.provider
+      })
+    )
+
+    if (this.provider) {
+      this.provider.add(this.name, this.scene)
+    }
+
+    this.scene!.screen = this.screenSize
+
+    /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
+     * 이 때는 정상적으로 그려주고,
+     * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
+     */
+    this.resize(true)
+
+    this._setVariables(model.variables || this.scene!.variables)
+
+    this.scene!.on('selected', this._onSelectedChanged, this)
+    this.scene!.on('mode', this._onSceneModeChanged, this)
+
+    this._onModeChanged(this.mode)
+    this._onDisplayChanged(this.screenSize)
+    this._onBaseUrlChanged(this.baseUrl)
+  }
+
+  _onDisplayChanged(screenSize: string | number) {
+    if (!this.scene) {
+      return
+    }
+
+    if (screenSize) {
+      this.scene.screen = parseFloat(String(screenSize))
+    }
+  }
+
+  _onModeChanged(mode: SCENE_MODE) {
+    if (!this.scene) {
+      return
+    }
+    this.scene.mode = Number(mode)
+  }
+
+  _onDataChanged(data: any) {
+    if (!this.scene || !data) {
+      return
+    }
+
+    this.scene.data = data
+  }
+
+  _onSelectedChanged(after: Component[]) {
+    /*
+     scene 컴포넌트의 속성을 속성 에디터(input box등)에서 변경하다가,
+     scene의 다른 컴포넌트를 클릭해서 포커스(선택) 컴포넌트를 변경하게되면,
+     속성 에디터(input box등)의 value change 이벤트의 처리와 충돌(레이스)하게된다.
+     
+     기대하는 순서는 먼저 속성 에디터의 value change 이벤트를 처리한 후에,
+     selected 이벤트를 처리할 수 있도록 requestAnimationFrame으로 한 프레임을 지연하도록 하였다.
+     */
+    requestAnimationFrame(() => {
+      this._setSelected(after)
+    })
+  }
+
+  _onSceneModeChanged(after: SCENE_MODE) {
+    if (!this.scene) {
+      return
+    }
+
+    if (this.mode !== after) {
+      this._setMode(after)
+    }
+
+    if (after === 2) {
+      this.style.cursor = 'all-scroll'
+    } else {
+      this.style.cursor = 'default'
+    }
+  }
+
+  _onBaseUrlChanged(after: string) {
+    if (!this.scene) {
+      return
+    }
+
+    this.scene.baseUrl = after
+  }
+}

package/src/ox-board-modeller.ts

@@ -1,37 +1,70 @@
 import '@material/mwc-fab'
-import './scene-viewer/things-scene-viewer'
-import './component-toolbar/component-toolbar'
-import './property-sidebar/property-sidebar'
+import './modeller/scene-viewer/ox-scene-viewer'
+import './modeller/component-toolbar/component-toolbar'
+import './modeller/property-sidebar/property-sidebar'
+import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { LitElement, css, html } from 'lit'
-import { SCENE_MODE, Scene } from '@hatiolab/things-scene'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { saveAs } from 'file-saver'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
 import { OxPopup } from '@operato/popup'
 
+import { EditToolbar } from './modeller/edit-toolbar'
+import { togglefullscreen } from './utils/fullscreen'
+
 const isMacOS = navigator.userAgent.indexOf('Mac') != -1
 
-@customElement('board-modeller')
+@customElement('ox-board-modeller')
 export class BoardModeller extends LitElement {
   static styles = [
     css`
       :host {
-        display: flex;
-        flex-direction: row;
+        display: grid;
+
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';
+        grid-gap: 0;
+
         height: 100%;
         overflow: hidden;
       }
 
+      #toolbar {
+        grid-area: toolbar;
+      }
+
+      edit-toolbar {
+        grid-area: toolbar;
+      }
+
+      component-toolbar {
+        grid-area: palletbar;
+      }
+
+      property-sidebar {
+        grid-area: propertybar;
+        overflow: hidden;
+      }
+
       #scene-wrap {
-        flex: 1;
+        grid-area: scene;
         position: relative;
 
         display: flex;
         flex-direction: row;
       }
 
+      ox-scene-viewer {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+      }
+
       mwc-fab {
         position: absolute;
         right: 15px;
@@ -73,29 +106,46 @@ export class BoardModeller extends LitElement {
   @property({ type: Array }) fonts: any[] = []
   @property({ type: Array }) propertyEditor: any[] = []
 
-  private group: string = ''
+  @query('edit-toolbar') private editToolbar!: EditToolbar
 
-  // @query('#scene-wrap') private modellingContainer!: HTMLElement
+  private group: string = ''
+  private shortcutHandler?: (e: KeyboardEvent) => void
 
   constructor() {
     super()
 
-    // document.addEventListener('get-all-scene-component-ids', e => {
-    //   var { component, callback } = e.detail
+    document.addEventListener('get-all-scene-component-ids', (e: Event) => {
+      var { component, callback } = (e as CustomEvent).detail
 
-    //   if (!this.scene) return
+      if (!this.scene) return
 
-    //   var ids
-    //   if (component) ids = this.scene.findAll(component).map(c => c.model.id)
-    //   else ids = this.scene.ids.map(({ key, value }) => key)
+      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(id => !!id).sort()
-    //   callback(ids)
-    // })
+      ids = ids.filter(id => !!id).sort()
+      callback(ids)
+    })
   }
 
   render() {
     return html`
+      <edit-toolbar
+        id="edittoolbar"
+        .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>
+
       <component-toolbar
         .scene=${this.scene}
         .mode=${this.mode}
@@ -108,7 +158,7 @@ export class BoardModeller extends LitElement {
       </component-toolbar>
 
       <div id="scene-wrap">
-        <things-scene-viewer
+        <ox-scene-viewer
           id="scene"
           .scene=${this.scene}
           @scene-changed=${(e: CustomEvent) => {
@@ -129,26 +179,26 @@ export class BoardModeller extends LitElement {
           .provider=${this.provider}
           name="modeller"
         >
-          <things-scene-layer type="selection-layer"></things-scene-layer>
-          <things-scene-layer type="modeling-layer"></things-scene-layer>
-          <things-scene-layer type="guide-layer">
-            <things-scene-property name="ruler" value="disabled"></things-scene-property>
-          </things-scene-layer>
-          <things-scene-layer type="shift-layer">
-            <things-scene-property name="text" value="${this.overlay}"></things-scene-property>
-            <things-scene-property name="alpha" value="0.3"></things-scene-property>
-            <things-scene-property name="fontFamily" value="arial"></things-scene-property>
-            <things-scene-property name="fontSize" value="30" type="number"></things-scene-property>
-            <things-scene-property name="fontColor" value="navy"></things-scene-property>
-            <things-scene-property name="textBaseline" value="top"></things-scene-property>
-            <things-scene-property name="textAlign" value="left"></things-scene-property>
-            <things-scene-property name="paddingTop" value="50" type="number"></things-scene-property>
-            <things-scene-property name="paddingLeft" value="50" type="number"></things-scene-property>
-          </things-scene-layer>
-          <things-scene-layer type="tag-layer"></things-scene-layer>
-          <things-scene-handler type="text-editor"></things-scene-handler>
-          <things-scene-handler type="move-handler"></things-scene-handler>
-        </things-scene-viewer>
+          <ox-scene-layer type="selection-layer"></ox-scene-layer>
+          <ox-scene-layer type="modeling-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="tag-layer"></ox-scene-layer>
+          <ox-scene-handler type="text-editor"></ox-scene-handler>
+          <ox-scene-handler type="move-handler"></ox-scene-handler>
+        </ox-scene-viewer>
 
         <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
       </div>
@@ -164,6 +214,16 @@ export class BoardModeller extends LitElement {
     `
   }
 
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.bindShortcutEvent()
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.unbindShortcutEvent()
+  }
+
   close() {
     this.model = null
     this.requestUpdate()
@@ -199,9 +259,45 @@ export class BoardModeller extends LitElement {
     })
   }
 
+  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
+    }
+  }
+
   onContextMenu() {}
 }

package/src/types.ts

@@ -0,0 +1,26 @@
+import { Model } from '@hatiolab/things-scene'
+
+export interface PalletItem {
+  type: string
+  description: string
+  icon: HTMLImageElement
+  group:
+    | 'line'
+    | 'shape'
+    | 'textAndMedio'
+    | 'chartAndGauge'
+    | 'table'
+    | 'container'
+    | 'IoT'
+    | '3D'
+    | 'warehouse'
+    | 'form'
+    | 'etc'
+    | string
+  model: Model
+}
+
+export interface Pallet {
+  name: string
+  templates: PalletItem[]
+}