@operato/process 1.1.7 → 1.1.10

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

@@ -1,41 +0,0 @@
-import './scene-property'
-
-import { LitElement, html } from 'lit'
-import { property } from 'lit/decorators.js'
-
-export default class SceneLayer extends LitElement {
-  @property({ type: String }) type?: String
-  @property({ type: String }) text?: String
-
-  render() {
-    return html` <slot select="scene-property"></slot> `
-  }
-
-  getModel() {
-    let model = {
-      type: this.type
-    }
-
-    model = Array.from(this.querySelectorAll('scene-property')).reduce((model: any, property: any) => {
-      let value: any = property.value
-
-      if (property.name) {
-        switch (property.type) {
-          case 'number':
-            value = Number(value)
-            break
-          case 'boolean':
-            value = Boolean(value)
-            break
-          default:
-        }
-
-        model[property.name] = value
-      }
-
-      return model
-    }, model)
-
-    return model
-  }
-}

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

@@ -1,9 +0,0 @@
-import { property } from 'lit/decorators.js'
-
-import { LitElement } from 'lit'
-
-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/scene-viewer.ts

@@ -1,249 +0,0 @@
-import './scene-layer'
-import './scene-handler'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Component, create as createScene, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene'
-
-import SceneLayer from './scene-layer'
-
-export default class SceneViewer 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 && 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('scene-layer')).map(layer => (layer as SceneLayer).getModel())
-
-    const handlers = Array.from(this.querySelectorAll('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 if (after === 3) {
-      this.style.cursor = 'crosshair'
-    } else {
-      this.style.cursor = 'default'
-    }
-  }
-
-  _onBaseUrlChanged(after: string) {
-    if (!this.scene) {
-      return
-    }
-
-    this.scene.baseUrl = after
-  }
-}