@things-factory/board-ui 4.0.0 → 4.0.5

package/client/board-player/board-player.js

@@ -1,279 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-
-import '@material/mwc-fab/mwc-fab'
-import '@material/mwc-icon/mwc-icon'
-import SwipeListener from 'swipe-listener'
-
-import './board-wrapper'
-
-import './player/board-player-carousel'
-
-import { togglefullscreen, exitfullscreen } from '@things-factory/utils'
-
-import { style } from './board-player-style'
-
-export class BoardPlayer extends LitElement {
-  constructor() {
-    super()
-
-    this.boards = []
-
-    this.playtime = 30
-    this.columns = 1
-    this.rows = 1
-    this.started = false
-    this.fullscreened = false
-  }
-
-  static get properties() {
-    return {
-      boards: Array,
-
-      playtime: Number,
-      columns: Number,
-      rows: Number,
-      started: Boolean,
-      playing: Boolean,
-      fullscreened: Boolean
-    }
-  }
-
-  static get styles() {
-    return [style]
-  }
-
-  render() {
-    return html`
-      <slot @mousemove=${e => this.onMousemove(e)} @transform=${e => this.onTransform(e)} tabindex="-1">
-        ${
-          this.started
-            ? html`
-                <board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
-                  ${this.boards.map(
-                    item => html`
-                      <board-wrapper page .sceneId=${item.id}> </board-wrapper>
-                    `
-                  )}
-                </board-player-carousel>
-              `
-            : html``
-        }
-      </slot>
-
-      <div id="control" @mouseover=${e => this.onMouseoverControl(e)} hidden>
-        <div id="joystick">
-          <mwc-icon id="up" @click=${e => this.onTapUp(e)}>keyboard_arrow_up</mwc-icon>
-          <mwc-icon id="left" @click=${e => this.onTapLeft(e)}>keyboard_arrow_left</mwc-icon>
-          <mwc-icon id="play" @click=${e => this.onTapPlay(e)} ?hidden=${this.playing}>play_arrow</mwc-icon>
-          <mwc-icon id="pause" @click=${e => this.onTapPause(e)} ?hidden=${!this.playing}>pause</mwc-icon>
-          <mwc-icon id="right" @click=${e => this.onTapRight(e)}>keyboard_arrow_right</mwc-icon>
-          <mwc-icon id="down" @click=${e => this.onTapDown(e)}>keyboard_arrow_down</mwc-icon>
-        </div>  
-
-        <div id="setting-container">
-          <div id="setting">
-            <div id="schedule-container">
-              <mwc-icon id="schedule">schedule</mwc-icon>
-              <input .value=${this.playtime} @change=${e => (this.playtime = e.target.value)}></input>
-                sec.
-            </div>
-            <div id="grid-setting-container">
-              <mwc-icon id="view_module">view_module</mwc-icon>            
-              <select .value=${this.rows} @change=${e => (this.rows = e.target.value)}>
-                ${[1, 2, 3, 4, 5].map(
-                  row => html`
-                    <option>${row}</option>
-                  `
-                )}
-              </select>
-              x
-              <select .value=${this.columns} @change=${e => (this.columns = e.target.value)}>
-                ${[1, 2, 3, 4, 5].map(
-                  column => html`
-                    <option>${column}</option>
-                  `
-                )}
-              </select>
-            </div>
-          </div>
-
-          <div id="etc">
-            <mwc-icon id="fullscreen" @click=${e => this.onTapFullscreen(e)} ?hidden=${this.fullscreened}
-            >fullscreen</mwc-icon>
-            <mwc-icon id="fullscreen-exit" @click=${e => this.onTapFullscreen(e)} ?hidden=${!this.fullscreened}
-            >fullscreen_exit</mwc-icon>
-            <mwc-icon id="close" @click=${e => this.onTapClose(e)}>close</mwc-icon>
-          </div>     
-        </div>   
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    SwipeListener(this)
-
-    this.addEventListener('swipe', e => {
-      var directions = e.detail.directions
-
-      if (directions.left) {
-        this.onTapRight()
-      } else if (directions.right) {
-        this.onTapLeft()
-      } else if (directions.top) {
-        this.onTapDown()
-      } else if (directions.bottom) {
-        this.onTapUp()
-      }
-    })
-  }
-
-  updated(changes) {
-    if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {
-      this.boards && this.boards.length > 0 ? this.restart() : this.stop()
-    } else if (changes.has('playtime') && this.playing) {
-      this._resetTransformTimer()
-    }
-  }
-
-  get control() {
-    return this.shadowRoot.getElementById('control')
-  }
-
-  get fullscreen() {
-    return this.shadowRoot.getElementById('fullscreen')
-  }
-
-  async _resetFadeTimer(stop) {
-    if (!this._control_animation) {
-      this._control_animation = this.control.animate(
-        [
-          {
-            opacity: 1,
-            easing: 'ease-in'
-          },
-          { opacity: 0 }
-        ],
-        { delay: 1000, duration: 2000 }
-      )
-    }
-
-    this.control.hidden = false
-
-    this._control_animation.cancel()
-    if (stop) return
-
-    try {
-      this._control_animation.play()
-      await this._control_animation.finished
-      this.control.hidden = true
-    } catch (e) {
-      /* cancelled */
-    }
-  }
-
-  _resetTransformTimer() {
-    clearTimeout(this._transfer_timer)
-
-    this.playing = true
-
-    if (this.currentPlayer) {
-      this._transfer_timer = setTimeout(() => {
-        if (this._transfer_timer) this.currentPlayer.next()
-      }, this.playtime * 1000)
-    }
-  }
-
-  onMousemove() {
-    this._resetFadeTimer()
-  }
-
-  onMouseoverControl() {
-    this._resetFadeTimer(true)
-  }
-
-  onTapFullscreen() {
-    togglefullscreen(
-      this,
-      () => {
-        this.fullscreened = true
-        this.focus()
-      },
-      () => {
-        this.fullscreened = false
-        this.focus()
-      }
-    )
-  }
-
-  onTransform() {
-    requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())
-  }
-
-  onTapPlay(e) {
-    this._resetTransformTimer()
-  }
-
-  onTapPause(e) {
-    clearTimeout(this._transfer_timer)
-    this.playing = false
-  }
-
-  onTapLeft(e) {
-    this.currentPlayer.axis = 'y'
-    this.currentPlayer.previous()
-  }
-
-  onTapRight(e) {
-    this.currentPlayer.axis = 'y'
-    this.currentPlayer.next()
-  }
-
-  onTapUp(e) {
-    this.currentPlayer.axis = 'x'
-    this.currentPlayer.next()
-  }
-
-  onTapDown(e) {
-    this.currentPlayer.axis = 'x'
-    this.currentPlayer.previous()
-  }
-
-  onTapClose(e) {
-    if (this.fullscreened) {
-      exitfullscreen()
-    }
-
-    window.history.back()
-  }
-
-  async restart() {
-    await this.stop()
-    await this.start()
-  }
-
-  async start() {
-    if (!this.boards || this.boards.length == 0) return
-
-    this.started = true
-    this.playing = true
-
-    await this.renderComplete
-    this.currentPlayer = this.shadowRoot.querySelector(':not([style*="display: none"])[player]')
-
-    this._resetTransformTimer()
-    this._resetFadeTimer()
-
-    this.focus()
-  }
-
-  async stop() {
-    clearTimeout(this._transfer_timer)
-
-    this.currentPlayer && this.currentPlayer.stop()
-
-    await this.renderComplete
-    this.started = false
-  }
-}
-
-customElements.define('board-player', BoardPlayer)

package/client/board-player/board-wrapper.js

@@ -1,126 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-import { createBoardProvider } from '../board-provider'
-
-class BoardWrapper extends LitElement {
-  constructor() {
-    super()
-
-    this.sceneId = ''
-  }
-
-  static get properties() {
-    return {
-      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 중 하나로 정의한다.
-       */
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          position: relative;
-          width: 100%;
-          height: 100%;
-        }
-
-        #target {
-          display: block;
-          width: 100%;
-          height: 100%;
-          outline: 0;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <div id="target"></div>
-      <slot></slot>
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    window.addEventListener('resize', () => {
-      requestAnimationFrame(() => {
-        if (this.scene) {
-          this.scene.resize()
-
-          if (this.offsetWidth) {
-            this.scene.fit()
-          }
-        }
-      })
-    })
-
-    if (!this.provicer) {
-      this.provider = createBoardProvider()
-    }
-  }
-
-  get targetEl() {
-    return this.shadowRoot.getElementById('target')
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._releaseRef()
-  }
-
-  updated(change) {
-    change.has('sceneId') && this._onSceneIdChanged()
-  }
-
-  _releaseRef() {
-    if (this.scene) {
-      this.scene.target = null
-      this.scene.release()
-      delete this.scene
-
-      this.provider.dispose()
-      delete this.provider
-    }
-  }
-
-  _onSceneIdChanged() {
-    if (!this.provider) return
-
-    this._releaseRef()
-
-    if (!this.sceneId) return
-
-    this.provider.get(this.sceneId, true).then(
-      scene => {
-        this.scene = scene
-        this.scene.target = this.targetEl
-
-        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
-         * 이 때는 정상적으로 그려주고,
-         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
-         */
-        if (this.scene.target.offsetWidth) {
-          this.scene.fit()
-        }
-      },
-      e => {}
-    )
-  }
-}
-
-customElements.define('board-wrapper', BoardWrapper)

package/client/board-player/player/board-player-carousel.js

@@ -1,187 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer'
-
-import './board-player-grid'
-
-class BoardPlayerCarousel extends LitElement {
-  static get is() {
-    return 'board-player-carousel'
-  }
-
-  static get properties() {
-    return {
-      axis: String,
-      rows: Number,
-      columns: Number
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          width: 100%;
-          height: 100%;
-          position: relative;
-          margin: 0 auto 0px;
-          -webkit-perspective: 1200px;
-          -moz-perspective: 1200px;
-          -o-perspective: 1200px;
-          perspective: 1200px;
-        }
-
-        #carousel {
-          width: 100%;
-          height: 100%;
-          margin: 0px auto 0px;
-
-          position: absolute;
-          -webkit-transform-style: preserve-3d;
-          -moz-transform-style: preserve-3d;
-          -o-transform-style: preserve-3d;
-          transform-style: preserve-3d;
-          -webkit-transition: -webkit-transform 1.5s;
-          -moz-transition: -moz-transform 1.5s;
-          -o-transition: -o-transform 1.5s;
-          transition: transform 1.5s;
-        }
-
-        #carousel > * {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          font-weight: bold;
-          -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
-          -moz-transition: opacity 1.5s, -moz-transform 1.5s;
-          -o-transition: opacity 1.5s, -o-transform 1.5s;
-          transition: opacity 1.5s, transform 1.5s;
-
-          -webkit-backface-visibility: hidden;
-          -moz-backface-visibility: hidden;
-          -o-backface-visibility: hidden;
-          backface-visibility: hidden;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <slot id="slot" select="[page]"></slot>
-
-      <div id="carousel"></div>
-    `
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._slotObserver.disconnect()
-
-    if (this.boundResize) {
-      window.removeEventListener('resize', this.boundResize)
-      delete this.boundResize
-    }
-  }
-
-  firstUpdated() {
-    this.rotation = 0
-    this._slotObserver = new FlattenedNodesObserver(this.shadowRoot.querySelector('#slot'), info => {
-      this.build()
-    })
-
-    this.boundResize = this.build.bind(this)
-
-    window.addEventListener('resize', this.boundResize)
-  }
-
-  get carousel() {
-    return this.shadowRoot.querySelector('#carousel')
-  }
-
-  updated(change) {
-    change.has('axis') && this._onAxisChanged(this.axis)
-  }
-
-  build() {
-    var pages = Array.from(this.querySelectorAll('[page]'))
-    var panel = Array.from(this.carousel.querySelectorAll('board-player-grid')).pop()
-
-    var rows = this.rows || 1
-    var columns = this.columns || 1
-
-    var i = panel ? panel.querySelectorAll('[page]').length : 0
-    var page = pages.shift()
-
-    while (page) {
-      if (!(i++ % (rows * columns))) {
-        panel = document.createElement('board-player-grid')
-        panel.rows = rows
-        panel.columns = columns
-
-        this.carousel.appendChild(panel)
-      }
-      panel.appendChild(page)
-
-      page = pages.shift()
-    }
-
-    this.start()
-  }
-
-  start() {
-    var panels = this.carousel.querySelectorAll('board-player-grid')
-
-    this.isHorizontal = this.axis === 'y'
-
-    this.panelCount = panels.length
-
-    this.panelSize = this.carousel[this.isHorizontal ? 'offsetWidth' : 'offsetHeight'] || '640'
-    this.rotateFn = this.isHorizontal ? 'rotateY' : 'rotateX'
-    this.theta = 360 / (this.panelCount || 1)
-
-    // do some trig to figure out how big the carousel is in 3D space
-    this.radius = Math.round(this.panelSize / 2 / Math.tan(Math.PI / (this.panelCount < 2 ? 2 : this.panelCount)))
-
-    for (let i = 0; i < this.panelCount; i++) {
-      let panel = panels[i]
-      let angle = this.theta * i
-      panel.style.opacity = 1
-
-      panel.style.backgroundColor = 'white'
-
-      panel.style.transform = this.rotateFn + '(' + angle + 'deg) translateZ(' + this.radius + 'px)'
-    }
-
-    // adjust rotation so panels are always flat
-    this.rotation = Math.round(this.rotation / this.theta) * this.theta
-    this._transform()
-  }
-
-  stop() {
-    this.carousel.innerHTML = ''
-  }
-
-  _onAxisChanged(after) {
-    this.start()
-  }
-
-  _transform() {
-    // push the carousel back in 3D space, and rotate it
-    this.carousel.style.transform = 'translateZ(-' + this.radius + 'px) ' + this.rotateFn + '(' + this.rotation + 'deg)'
-    this.dispatchEvent(new CustomEvent('transform', { bubbles: true, composed: true }))
-  }
-
-  previous() {
-    this.rotation += this.theta
-    this._transform()
-  }
-
-  next() {
-    this.rotation -= this.theta
-    this._transform()
-  }
-}
-
-customElements.define(BoardPlayerCarousel.is, BoardPlayerCarousel)