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

package/src/ox-board-viewer.ts

@@ -1,727 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/fab/fab.js'
-import './ox-board-component-info.js'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import * as XLSX from 'xlsx'
-
-import { Component, create, ReferenceProvider, SCENE_MODE } from '@hatiolab/things-scene'
-import { isIOS, togglefullscreen } from '@operato/utils'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { BoardDataStorage } from './data-storage/data-storage.js'
-import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
-import { runScenario, startScenario } from './graphql/scenario.js'
-
-import { BoardComponentInfo } from './ox-board-component-info.js'
-import { fetchPlayGroupByName } from './graphql/play-group.js'
-
-function objectToQueryString(obj: any) {
-  const keyValuePairs = []
-  for (const key in obj) {
-    if (Object.hasOwnProperty.call(obj, key)) {
-      const value = obj[key]
-      if (typeof value === 'object') {
-        keyValuePairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(value))}`)
-      } else {
-        keyValuePairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-      }
-    }
-  }
-  return keyValuePairs.join('&')
-}
-
-@customElement('ox-board-viewer')
-export class BoardViewer extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        position: relative;
-
-        width: 100%; /* 전체화면보기를 위해서 필요함. */
-        overflow: hidden;
-      }
-
-      #target {
-        flex: 1;
-
-        width: 100%; /* 전체화면보기를 위해서 필요함. */
-        height: 100%;
-
-        outline: 0;
-      }
-
-      ::slotted(ox-board-component-info) {
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        width: 240px;
-        opacity: 0.9;
-        box-shadow: 2px 2px 4px gray;
-        max-height: 600px;
-        overflow: auto;
-      }
-
-      /* navigation buttons */
-      #prev,
-      #next {
-        z-index: 10;
-        position: absolute;
-        top: 45%;
-        min-width: 50px;
-        width: 50px;
-        height: 50px;
-        margin: 0;
-        padding: 0;
-        color: #fff;
-        user-select: none;
-
-        --md-icon-size: 3em;
-      }
-
-      md-icon[hidden] {
-        display: none;
-      }
-
-      md-icon:hover {
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-      }
-
-      #prev {
-        left: 5px;
-      }
-
-      #next {
-        right: 5px;
-      }
-
-      #fullscreen {
-        position: absolute;
-        bottom: 15px;
-        right: 16px;
-      }
-
-      [hidden] {
-        display: none;
-      }
-
-      @media print {
-        md-fab,
-        md-icon {
-          display: none;
-        }
-      }
-    `
-  ]
-
-  @property({ type: String }) baseUrl: string = ''
-  @property({ type: Object }) board: any = {}
-  @property({ type: Object }) provider: ReferenceProvider | null = null
-  @property({ type: Object }) data: any
-  @property({ type: Object }) values: any
-  @property({ type: Boolean }) history: boolean = false
-
-  @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
-  @property({ type: Boolean, reflect: true, attribute: 'hide-navigation' }) hideNavigation = false
-
-  @state() _scene: any = null
-  @state() _forward: { id: string; scene: any }[] = []
-  @state() _backward: { id: string; scene: any }[] = []
-
-  @state() _oldtarget?: HTMLElement
-  @state() _fade_animations?: Array<Animation>
-
-  public currentBoardId?: string = this.board?.id
-  private popup?: BoardComponentInfo
-
-  @query('#target') _target!: HTMLElement
-  @query('#prev') _prev!: HTMLElement
-  @query('#next') _next!: HTMLElement
-  @query('#fullscreen') _fullscreen!: HTMLElement
-
-  render() {
-    var fullscreen =
-      !isIOS() && !this.hideFullscreen
-        ? html`
-            <md-fab
-              id="fullscreen"
-              @click=${(e: Event) => this.onTapFullscreen()}
-              @mouseover=${(e: Event) => this.transientShowButtons(true)}
-              @mouseout=${(e: Event) => this.transientShowButtons()}
-              title="fullscreen"
-            >
-              <md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
-            </md-fab>
-          `
-        : html``
-
-    var prev = !this.hideNavigation
-      ? html`
-          <md-icon
-            id="prev"
-            @click=${(e: Event) => this.onTapPrev()}
-            @mouseover=${(e: Event) => this.transientShowButtons(true)}
-            @mouseout=${(e: Event) => this.transientShowButtons()}
-            hidden
-            >keyboard_arrow_left</md-icon
-          >
-        `
-      : html``
-
-    var next = !this.hideNavigation
-      ? html`
-          <md-icon
-            id="next"
-            @click=${(e: Event) => this.onTapNext()}
-            @mouseover=${(e: Event) => this.transientShowButtons(true)}
-            @mouseout=${(e: Event) => this.transientShowButtons()}
-            hidden
-            >keyboard_arrow_right</md-icon
-          >
-        `
-      : html``
-
-    return html`
-      ${prev}
-
-      <div
-        id="target"
-        @touchstart=${(e: Event) => this.transientShowButtons()}
-        @mousemove=${(e: Event) => this.transientShowButtons()}
-      ></div>
-
-      <slot></slot>
-      ${next} ${fullscreen}
-    `
-  }
-
-  private resizeHandler = () => {
-    this._scene && this._scene.fit()
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    window.addEventListener('resize', this.resizeHandler)
-
-    window.addEventListener('orientationchange', this.resizeHandler)
-
-    this.renderRoot.addEventListener(
-      'close-scene',
-      e => {
-        e.preventDefault()
-        this.onTapPrev()
-      },
-      false
-    )
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.resizeHandler)
-    window.removeEventListener('orientationchange', this.resizeHandler)
-
-    super.disconnectedCallback()
-
-    this.closeScene()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('board')) {
-      this.hidePopup()
-      this.closeScene()
-
-      if (this.board && this.board.id) {
-        if (this.board.model) {
-          this.initScene()
-        } else {
-          this.initSceneAsync()
-        }
-      }
-    }
-
-    if (changes.has('data') && this._scene && this.data) {
-      this._scene.data = this.data
-    }
-
-    if (changes.has('values') && this._scene && this.values) {
-      this._scene.values = this.values
-    }
-  }
-
-  async initSceneAsync() {
-    if (!this.board || !this.board.id) return
-
-    this._scene = await this.provider!.create(this.board.id)
-    this.setupScene({ id: this.board.id, scene: this._scene })
-  }
-
-  initScene() {
-    if (!this.board || !this.board.id) return
-
-    this._scene = create({
-      model: {
-        ...this.board.model
-      },
-      mode: SCENE_MODE.VIEW,
-      refProvider: this.provider!,
-      dataStorage: this.board.id !== 'preview' ? new BoardDataStorage(this.board.id) : undefined,
-      dataSubscriptionProvider: new DataSubscriptionProviderImpl()
-    })
-
-    if (this.baseUrl) {
-      this._scene.baseUrl = this.baseUrl
-    }
-
-    // this.provider!.add(this.board.id, this._scene)
-
-    this.setupScene({ id: this.board.id, scene: this._scene })
-  }
-
-  closeScene() {
-    if (this._scene) {
-      this.unbindSceneEvents(this._scene)
-
-      this._scene.target = null
-      this._scene.release && this._scene.release()
-
-      this._scene = null
-    }
-
-    // delete queued scenes
-    this._forward.forEach(({ scene }) => scene.release && scene.release())
-    this._forward = []
-
-    this._backward.forEach(({ scene }) => scene.release && scene.release())
-    this._backward = []
-  }
-
-  releaseScene() {
-    this.closeScene()
-    this.transientShowButtons()
-  }
-
-  setupScene({ id, scene }: { id: string; scene: any }, history?: -1 | 0 | 1) {
-    this._scene = scene
-
-    const backgroundColor = this._scene?.root.state.fillStyle
-    if (typeof backgroundColor === 'string') {
-      this.style.backgroundColor = backgroundColor
-    } else {
-      this.style.backgroundColor = 'initial'
-    }
-
-    /* scene의 기존 target을 보관한다. */
-    this._oldtarget = this._scene.target
-
-    this._scene.fit(this._scene.fitMode)
-    this._scene.target = this._target
-
-    if (this.data) {
-      this._scene.data = this.data
-    }
-    if (this.values) {
-      this._scene.values = this.values
-    }
-    this.currentBoardId = id
-
-    this.bindSceneEvents()
-
-    this.transientShowButtons()
-
-    if (this.history && typeof history !== 'undefined' /* && document.querySelector('things-app') */) {
-      const currentUrl = new URL(window.location.href)
-      const paths = currentUrl.pathname.split('/')
-
-      paths[paths.length - 1] = this.currentBoardId
-      window.history.replaceState({}, '', `${currentUrl.origin}${paths.join('/')}${currentUrl.search}`)
-    }
-  }
-
-  async showScene(boardId: string, bindingData?: any) {
-    if (!boardId) return
-
-    try {
-      var scene = await this.provider!.get(boardId, true)
-
-      if (scene === this._scene) {
-        scene.release && scene.release()
-        return
-      }
-
-      if (this._scene) {
-        /* old scene을 _backward에 보관한다. */
-        this.unbindSceneEvents(this._scene)
-        /* 원래의 target에 되돌린다. */
-        this._scene.target = this._oldtarget
-        this._backward.push({ id: this.currentBoardId!, scene: this._scene })
-      }
-
-      this._scene = scene
-
-      this._forward.forEach(({ scene }) => scene.release && scene.release())
-
-      /* forward를 비운다. */
-      this._forward = []
-
-      this.setupScene({ id: boardId, scene }, 0)
-
-      if (bindingData) {
-        scene.data = bindingData
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async gotoPlayer(playGroupName: string, bindingData?: any) {
-    const id = (await fetchPlayGroupByName(playGroupName))?.id
-    const queryString = bindingData ? objectToQueryString(bindingData) : ''
-
-    if (document.querySelector('things-app')) {
-      history.pushState({}, '', `board-player/${id}?${queryString}`)
-      window.dispatchEvent(new Event('popstate'))
-    } else {
-      location.href = `headless-player/${id}?${queryString}`
-    }
-  }
-
-  bindSceneEvents() {
-    this._scene.on('run', this.onRunBoard, this)
-    this._scene.on('goto', this.onLinkGoto, this)
-    this._scene.on('goto-playlist', this.onLinkGotoPlaylist, this)
-    this._scene.on('link-open', this.onLinkOpen, this)
-    this._scene.on('link-move', this.onLinkMove, this)
-    this._scene.on('route-page', this.onRoutePage, this)
-    this._scene.on('start-scenario', this.onStartScenario, this)
-    this._scene.on('run-scenario', this.onRunScenario, this)
-    this._scene.on('export-data', this.onExportData, this)
-    this._scene.on('import-data', this.onImportData, this)
-    this._scene.on('click', this.onClickEvent, this)
-  }
-
-  unbindSceneEvents(scene: any) {
-    scene.off('run', this.onRunBoard, this)
-    scene.off('goto', this.onLinkGoto, this)
-    scene.off('goto-playlist', this.onLinkGotoPlaylist, this)
-    scene.off('link-open', this.onLinkOpen, this)
-    scene.off('link-move', this.onLinkMove, this)
-    scene.off('route-page', this.onRoutePage, this)
-    scene.off('start-scenario', this.onStartScenario, this)
-    scene.off('run-scenario', this.onRunScenario, this)
-    scene.off('export-data', this.onExportData, this)
-    scene.off('import-data', this.onImportData, this)
-    scene.off('click', this.onClickEvent, this)
-  }
-
-  transientShowButtons(stop?: boolean) {
-    var buttons = []
-    !this.hideNavigation && buttons.push(this._next, this._prev)
-    !this.hideFullscreen && buttons.push(this._fullscreen)
-
-    if (buttons.length == 0) {
-      return
-    }
-
-    if (!this._fade_animations) {
-      this._fade_animations = buttons
-        .filter(button => button)
-        .map(button => {
-          let animation = button.animate(
-            [
-              {
-                opacity: 1,
-                easing: 'ease-in'
-              },
-              { opacity: 0 }
-            ],
-            { delay: 1000, duration: 2000 }
-          )
-
-          animation.onfinish = () => {
-            button.setAttribute('hidden', '')
-          }
-
-          return animation
-        })
-    }
-
-    this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden')
-    this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden')
-    this._fullscreen && this._fullscreen.removeAttribute('hidden')
-
-    this._fade_animations.forEach(animation => {
-      animation.cancel()
-      if (stop) return
-
-      animation.play()
-    })
-  }
-
-  /* event handlers */
-
-  onTapNext() {
-    var { id, scene } = this._forward.pop() || {}
-    if (!scene) return
-
-    if (this._scene) {
-      this._scene.target = null
-      /* 원래의 target에 되돌린다. */
-      this._scene.target = this._oldtarget
-      this.unbindSceneEvents(this._scene)
-      this._backward.push({ id: this.currentBoardId!, scene: this._scene })
-    }
-
-    this.setupScene({ id: id!, scene }, 1)
-  }
-
-  onTapPrev() {
-    var { id, scene } = this._backward.pop() || {}
-    if (!scene) return
-
-    if (this._scene) {
-      this._scene.target = null
-      /* 원래의 target에 되돌린다. */
-      this._scene.target = this._oldtarget
-      this.unbindSceneEvents(this._scene)
-      this._forward.push({ id: this.currentBoardId!, scene: this._scene })
-    }
-
-    this.setupScene({ id: id!, scene }, -1)
-  }
-
-  onTapFullscreen() {
-    togglefullscreen(
-      this,
-      () => this.requestUpdate(),
-      () => this.requestUpdate()
-    )
-  }
-
-  onRunBoard() {
-    this.dispatchEvent(new CustomEvent('run-board', { bubbles: true, composed: true, detail: this.board.id }))
-  }
-
-  onLinkGoto(targetBoardId: string, options: any, fromComponent: any) {
-    const { input, output } = options || { input: '(self)' }
-    const data = input && fromComponent.root.findFirst(input, fromComponent)?.data
-    this.showScene(targetBoardId, data)
-  }
-
-  onLinkGotoPlaylist(targetPlayGroupName: string, options: any, fromComponent: any) {
-    const { input, output } = options || { input: '(self)' }
-    const data = input && fromComponent.root.findFirst(input, fromComponent)?.data
-    this.gotoPlayer(targetPlayGroupName, data)
-  }
-
-  onLinkOpen(url: string, value: any, fromComponent: Component) {
-    if (!url) return
-
-    try {
-      window.open(url)
-    } catch (ex) {
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            level: 'error',
-            message: ex,
-            ex
-          }
-        })
-      )
-    }
-  }
-
-  onLinkMove(url: string, value: any, fromComponent: Component) {
-    if (!url) {
-      return
-    }
-
-    location.href = url
-  }
-
-  onRoutePage(page: string) {
-    if (!page) {
-      return
-    }
-
-    history.pushState({}, '', page)
-    window.dispatchEvent(new Event('popstate'))
-  }
-
-  async onStartScenario(scenario: string, value: string | number | object, component: Component) {
-    try {
-      await startScenario(scenario, scenario, value)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async onRunScenario(scenario: string, value: string | number | object, component: Component) {
-    try {
-      component.data = await runScenario(scenario, value)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async onExportData(filename: string, value: string | number | object, component: Component) {
-    try {
-      const data = component.data
-
-      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 || 'export-data.xlsx')
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async onImportData(_: string, value: string | number | object, component: Component) {
-    const fileInput = document.createElement('input')
-    fileInput.type = 'file'
-    fileInput.accept = '.xlsx, .xls'
-    fileInput.style.display = 'none'
-
-    fileInput.addEventListener(
-      'change',
-      (event: Event) => {
-        const input = event.target as HTMLInputElement
-        const file = input.files?.[0]
-        if (!file) {
-          return
-        }
-
-        const reader = new FileReader()
-        reader.onload = function (event) {
-          const data = new Uint8Array(event.target?.result as ArrayBuffer)
-          const workbook = XLSX.read(data, { type: 'array' })
-
-          // 첫 번째 시트의 데이타만 가져온다.
-          const firstSheetName = workbook.SheetNames[0]
-          const worksheet = workbook.Sheets[firstSheetName]
-          component.data = XLSX.utils.sheet_to_json(worksheet)
-
-          input.remove()
-        }
-        reader.readAsArrayBuffer(file)
-      },
-      false
-    )
-
-    document.body.appendChild(fileInput)
-    fileInput.click()
-  }
-
-  onClickEvent(e: MouseEvent, hint: any) {
-    const component = hint.origin
-
-    if (!this.popup && e.altKey) {
-      const popup = document.createElement('ox-board-component-info') as BoardComponentInfo
-      popup.addEventListener('close', e => {
-        e.stopPropagation()
-        this.hidePopup()
-      })
-
-      this.appendChild(popup)
-      this.popup = popup
-    }
-
-    if (this.popup) {
-      this.popup.component = component
-    }
-  }
-
-  hidePopup() {
-    if (this.popup) {
-      this.removeChild(this.popup)
-      delete this.popup
-    }
-  }
-
-  getSceneData() {
-    return this._scene?.data
-  }
-
-  getSceneValues() {
-    return this._scene?.values
-  }
-
-  async getSceneImageData(base64 = false) {
-    if (!this._scene) {
-      return
-    }
-
-    var { width, height } = this._scene.model
-    var pixelRatio = window.devicePixelRatio
-
-    // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
-    var canvas = document.createElement('canvas')
-    canvas.width = Number(width)
-    canvas.height = Number(height)
-
-    var root = this._scene.root
-    // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
-    var translate = root.get('translate')
-    var scale = root.get('scale')
-
-    // 3. 위치와 스케일 기본 설정.
-    root.set('translate', { x: 0, y: 0 })
-    root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio })
-
-    // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.
-    var context = canvas.getContext('2d')
-
-    root.draw(context)
-
-    root.set('translate', translate)
-    root.set('scale', scale)
-
-    var data = base64 ? canvas.toDataURL() : context!.getImageData(0, 0, width, height).data
-
-    return {
-      width,
-      height,
-      data
-    }
-  }
-
-  async printTrick(image: string) {
-    var viewTarget: HTMLElement | null = null
-    var printTarget: HTMLImageElement | null = null
-
-    if (!image) {
-      image = (await this.getSceneImageData(true))?.data as string
-    }
-
-    printTarget = document.createElement('img')
-    printTarget.id = 'target'
-    printTarget.src = image
-    printTarget.style.width = '100%'
-    printTarget.style.height = '100%'
-
-    const x = (mql: MediaQueryListEvent) => {
-      if (mql.matches) {
-        if (!viewTarget) {
-          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')
-          this.renderRoot.replaceChild(printTarget!, viewTarget!)
-        }
-      } else {
-        this.renderRoot.replaceChild(viewTarget!, printTarget!)
-        printTarget!.remove()
-        mediaQueryList.removeEventListener('change', x)
-      }
-    }
-
-    if (window.matchMedia) {
-      var mediaQueryList = window.matchMedia('print')
-      mediaQueryList.addEventListener('change', x)
-    }
-  }
-}