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

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

@@ -1,263 +0,0 @@
-import './confidential-overlay'
-import './ox-scene-layer'
-import './ox-scene-handler'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { Component, create as createScene, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene'
-
-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 && 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)
-
-    this.focus()
-  }
-
-  _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)
-    }
-
-    switch (after) {
-      case 1:
-        this.style.cursor = 'default'
-        break
-      case 2:
-        this.style.cursor = 'all-scroll'
-        break
-      case 3:
-        this.style.cursor = 'crosshair'
-        break
-      case 4:
-        this.style.cursor = 'copy'
-        break
-      case 5:
-        this.style.cursor = 'context-menu'
-        break
-    }
-  }
-
-  _onBaseUrlChanged(after: string) {
-    if (!this.scene) {
-      return
-    }
-
-    this.scene.baseUrl = after
-  }
-}

package/src/ox-board-component-info.ts

@@ -1,236 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/property-editor/ox-properties-dynamic-view.js'
-import '@operato/markdown'
-
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import * as XLSX from 'xlsx'
-
-import { ScrollbarStyles } from '@operato/styles'
-import { i18next } from '@operato/i18n'
-
-const ICON_EXCEL_EXPORT = new URL('../../icons/icon-excel-export.png', import.meta.url).href
-
-@customElement('ox-board-component-info')
-export class BoardComponentInfo extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        background-color: var(--md-sys-color-surface);
-        font-size: 12px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        border: 2px solid var(--md-sys-color-on-primary-container);
-        border-radius: 3px;
-
-        --md-icon-size: 12px;
-      }
-
-      [header] {
-        background-color: var(--md-sys-color-on-primary-container);
-        user-select: none;
-        align-items: center;
-        color: #eee;
-        padding: 0 2px;
-
-        display: flex;
-      }
-
-      [header] md-icon {
-        margin-left: auto;
-        align-self: center;
-      }
-
-      [content] {
-        overflow: auto;
-      }
-
-      table {
-        border-collapse: collapse;
-        background-color: var(--md-sys-color-surface);
-        width: 100%;
-        margin: auto;
-        table-layout: fixed;
-      }
-
-      tr {
-        border-bottom: var(--border-dim-color);
-      }
-
-      td {
-        padding: var(--spacing-small);
-        border-right: var(--border-dim-color);
-        font-size: 0.8em;
-      }
-
-      [subTh] {
-        text-align: center !important;
-        font-weight: bold;
-        width: 40px;
-        text-transform: capitalize;
-        background-color: rgba(0, 0, 0, 0.05);
-      }
-
-      span.export {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        top: 4px;
-        right: 4px;
-        background: var(--url-icon-excel-export) no-repeat;
-      }
-
-      a {
-        text-decoration: none;
-      }
-    `
-  ]
-
-  @property({ type: Object }) component?: any
-
-  private dragEndHandler = this.onDragEnd.bind(this) as EventListener
-  private dragMoveHandler = this.onDragMove.bind(this) as EventListener
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this.style.setProperty('--url-icon-excel-export', `url(${ICON_EXCEL_EXPORT})`)
-
-    document.addEventListener('mouseup', this.dragEndHandler)
-    document.addEventListener('mousemove', this.dragMoveHandler)
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    document.removeEventListener('mouseup', this.dragEndHandler)
-    document.removeEventListener('mousemove', this.dragMoveHandler)
-  }
-
-  render() {
-    const { state, data, value } = this.component || {}
-    const { id, type } = state || {}
-
-    return html`
-      <div header @mousedown=${this.onDragStart.bind(this)} draggable="false">
-        Component Inspection<md-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))}
-          >close</md-icon
-        >
-      </div>
-      <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>
-        <table>
-          <tr>
-            <td subTh>${i18next.t('label.id')}</td>
-            <td>
-              <a
-                @click=${(e: MouseEvent) => {
-                  this.component.trigger('reactionreset')
-                  this.component.trigger('reaction')
-                  return false
-                }}
-                >${id}</a
-              >
-            </td>
-          </tr>
-          <tr>
-            <td subTh>${i18next.t('label.type')}</td>
-            <td>${type}</td>
-          </tr>
-          <tr>
-            <td subTh>${i18next.t('label.value')}</td>
-            <td>${value === data ? 'equal to data' : html`<pre>${JSON.stringify(value, null, 2)}</pre>`}</td>
-          </tr>
-
-          <tr>
-            <td colspan="2" style="position: relative;">
-              <pre>${JSON.stringify(data, null, 2)}</pre>
-              ${data && Array.isArray(data)
-                ? html`<span class="export" @tap=${() => this.exportData()}></span>`
-                : nothing}
-            </td>
-          </tr>
-        </table>
-      </div>
-    `
-  }
-
-  private dragStart?: { x: number; y: number }
-
-  onWheel(e: WheelEvent) {
-    const scrollableDiv = e.currentTarget! as HTMLElement
-    const contentDiv = scrollableDiv.querySelector('table')!
-
-    // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴
-    if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {
-      // 수직 스크롤 가능한 경우
-      scrollableDiv.scrollTop += e.deltaY
-    } else {
-      // 수직 스크롤이 없는 경우
-      scrollableDiv.scrollLeft += e.deltaY
-    }
-  }
-
-  onDragStart(e: MouseEvent) {
-    e.stopPropagation()
-
-    if (e.button == 0) {
-      this.dragStart = {
-        x: e.clientX,
-        y: e.clientY
-      }
-    }
-
-    return false
-  }
-
-  onDragMove(e: Event) {
-    if (!this.dragStart) {
-      return false
-    }
-
-    e.stopPropagation()
-    e.preventDefault()
-
-    var x = (e as MouseEvent).clientX,
-      y = (e as MouseEvent).clientY
-
-    const dragStart = { x, y }
-
-    x -= this.dragStart.x
-    y -= this.dragStart.y
-
-    this.dragStart = dragStart
-
-    this.style.left =
-      Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'
-    this.style.top =
-      Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'
-
-    return false
-  }
-
-  onDragEnd(e: Event) {
-    if (this.dragStart) {
-      e.stopPropagation()
-      e.preventDefault()
-
-      delete this.dragStart
-    }
-  }
-
-  async exportData() {
-    try {
-      const { id = 'board-component', data } = this.component || {}
-      const filename = `${id}.xlsx`
-
-      const worksheet = XLSX.utils.json_to_sheet(data)
-      const workbook = XLSX.utils.book_new()
-      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
-      XLSX.writeFile(workbook, filename)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-}