@operato/board 0.2.15

package/src/ox-board-viewer.ts

@@ -0,0 +1,534 @@
+import '@material/mwc-fab'
+import '@material/mwc-icon'
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { create } from '@hatiolab/things-scene'
+import { isIOS } from './utils/os'
+import { togglefullscreen } from './utils/fullscreen'
+
+@customElement('ox-board-viewer')
+export class BoardViewer extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      position: relative;
+
+      width: 100%; /* 전체화면보기를 위해서 필요함. */
+      overflow: hidden;
+    }
+
+    #target {
+      flex: 1;
+
+      width: 100%; /* 전체화면보기를 위해서 필요함. */
+      height: 100%;
+
+      outline: 0;
+    }
+
+    /* navigation buttons */
+    mwc-icon {
+      z-index: 10;
+      position: absolute;
+      top: 45%;
+      min-width: 50px;
+      width: 50px;
+      height: 50px;
+      margin: 0;
+      padding: 0;
+      color: #fff;
+      user-select: none;
+
+      --mdc-icon-size: 3em;
+    }
+
+    mwc-icon[hidden] {
+      display: none;
+    }
+
+    mwc-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;
+    }
+
+    /* for scroller */
+    ::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #aa866a;
+    }
+
+    [hidden] {
+      display: none;
+    }
+
+    @media print {
+      mwc-fab,
+      mwc-icon {
+        display: none;
+      }
+    }
+  `
+
+  @property({ type: String }) baseUrl = ''
+  @property({ type: Object }) board: any = {}
+  @property({ type: Object }) provider: any = null
+  @property({ type: Object }) data = {}
+
+  @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: Array<any> = []
+  @state() backward: Array<any> = []
+
+  @state() _oldtarget?: HTMLElement
+  @state() _fade_animations?: Array<Animation>
+
+  @query('#target') target!: HTMLElement
+  @query('#prev') prev!: HTMLElement
+  @query('#next') next!: HTMLElement
+  @query('#fullscreen') fullscreen!: HTMLElement
+
+  render() {
+    var fullscreen =
+      !isIOS() && !this.hideFullscreen
+        ? html`
+            <mwc-fab
+              id="fullscreen"
+              .icon=${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}
+              @click=${(e: Event) => this.onTapFullscreen()}
+              @mouseover=${(e: Event) => this.transientShowButtons(true)}
+              @mouseout=${(e: Event) => this.transientShowButtons()}
+              title="fullscreen"
+            ></mwc-fab>
+          `
+        : html``
+
+    var prev = !this.hideNavigation
+      ? html`
+          <mwc-icon
+            id="prev"
+            @click=${(e: Event) => this.onTapPrev()}
+            @mouseover=${(e: Event) => this.transientShowButtons(true)}
+            @mouseout=${(e: Event) => this.transientShowButtons()}
+            hidden
+            >keyboard_arrow_left</mwc-icon
+          >
+        `
+      : html``
+
+    var next = !this.hideNavigation
+      ? html`
+          <mwc-icon
+            id="next"
+            @click=${(e: Event) => this.onTapNext()}
+            @mouseover=${(e: Event) => this.transientShowButtons(true)}
+            @mouseout=${(e: Event) => this.transientShowButtons()}
+            hidden
+            >keyboard_arrow_right</mwc-icon
+          >
+        `
+      : html``
+
+    return html`
+      ${prev}
+
+      <div
+        id="target"
+        @touchstart=${(e: Event) => this.transientShowButtons()}
+        @mousemove=${(e: Event) => this.transientShowButtons()}
+      ></div>
+
+      ${next} ${fullscreen}
+    `
+  }
+
+  firstUpdated() {
+    window.addEventListener('resize', () => {
+      this.scene && this.scene.fit()
+    })
+
+    this.renderRoot.addEventListener(
+      'close-scene',
+      e => {
+        e.preventDefault()
+        this.onTapPrev()
+      },
+      false
+    )
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('board')) {
+      if (this.board && this.board.id) {
+        this.initScene()
+      } else {
+        this.closeScene()
+      }
+    }
+
+    if (changes.has('data') && this.scene && this.data) {
+      this.scene.data = this.data
+    }
+  }
+
+  initScene() {
+    if (!this.board || !this.board.id) return
+
+    var scene = create({
+      model: {
+        ...this.board.model
+      },
+      mode: 0,
+      refProvider: this.provider
+    })
+
+    if (this.baseUrl) {
+      scene.baseUrl = this.baseUrl
+    }
+
+    this.provider.add(this.board.id, scene)
+
+    this.showScene(this.board.id)
+
+    /* provider.add 시에 추가된 레퍼런스 카운트를 다운시켜주어야 함 */
+    scene.release()
+  }
+
+  closeScene() {
+    if (this.scene) {
+      this.unbindSceneEvents(this.scene)
+
+      this.scene.target = null
+      this.scene.release()
+
+      delete this.scene
+    }
+
+    // delete queued scenes
+    this.forward.forEach(scene => scene.release())
+    this.forward = []
+
+    this.backward.forEach(scene => scene.release())
+    this.backward = []
+  }
+
+  releaseScene() {
+    if (this.scene) {
+      this.unbindSceneEvents(this.scene)
+
+      this.scene.target = null
+      this.scene.release()
+
+      delete this.scene
+
+      // delete queued scenes
+      this.forward.forEach(scene => {
+        scene.release()
+      })
+      this.forward = []
+
+      this.backward.forEach(scene => {
+        scene.release()
+      })
+      this.backward = []
+
+      this.transientShowButtons()
+    }
+  }
+
+  setupScene(scene: any) {
+    this.scene = scene
+
+    /* scene의 기존 target을 보관한다. */
+    this._oldtarget = this.scene.target
+
+    this.scene.fit(this.board.model.fitMode)
+    this.scene.target = this.target
+
+    if (this.data) {
+      this.scene.data = this.data
+    }
+
+    this.bindSceneEvents()
+
+    this.transientShowButtons()
+  }
+
+  async showScene(boardId: string, bindingData?: any) {
+    if (!boardId) return
+
+    try {
+      var scene = await this.provider.get(boardId, true)
+
+      var old_scene = this.scene
+      this.scene = scene
+
+      if (scene.target === this.target) {
+        scene.release()
+        return
+      }
+
+      if (old_scene) {
+        /* old scene을 backward에 보관한다. */
+        this.unbindSceneEvents(old_scene)
+        /* 원래의 target에 되돌린다. */
+        old_scene.target = this._oldtarget
+        this.backward.push(old_scene)
+      }
+
+      this.forward.forEach(scene => {
+        scene.release()
+      })
+
+      /* forward를 비운다. */
+      this.forward = []
+
+      this.setupScene(scene)
+
+      if (bindingData) {
+        scene.data = bindingData
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  bindSceneEvents() {
+    this.scene.on('goto', this.onLinkGoto, 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)
+  }
+
+  unbindSceneEvents(scene: any) {
+    scene.off('goto', this.onLinkGoto, this)
+    scene.off('link-open', this.onLinkOpen, this)
+    scene.off('link-move', this.onLinkMove, this)
+    scene.off('route-page', this.onRoutePage, 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 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(this.scene)
+    }
+
+    this.setupScene(scene)
+  }
+
+  onTapPrev() {
+    var 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(this.scene)
+    }
+
+    this.setupScene(scene)
+  }
+
+  onTapFullscreen() {
+    togglefullscreen(
+      this,
+      () => {
+        this.requestUpdate()
+      },
+      () => {
+        this.requestUpdate()
+      }
+    )
+  }
+
+  onLinkGoto(targetBoardId: string, value: any, fromComponent: any) {
+    this.showScene(targetBoardId, fromComponent.data)
+  }
+
+  onLinkOpen(url: string, value: any, fromComponent: any) {
+    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: any) {
+    if (!url) return
+
+    location.href = url
+  }
+
+  onRoutePage(page: string) {
+    if (!page) {
+      return
+    }
+
+    history.pushState({}, '', page)
+    window.dispatchEvent(new Event('popstate'))
+  }
+
+  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.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)
+    }
+  }
+}

package/src/ox-board-wrapper.ts

@@ -0,0 +1,93 @@
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+/**
+ * @class BoardWrapper
+ *
+ * @description scene provider로부터 제공받은 scene의 reference count control을 담당하며, resize 이벤트 발생시 scene의 사이즈를 fit 시키는 역할을 담당한다.
+ */
+@customElement('ox-board-wrapper')
+class BoardWrapper extends LitElement {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+      }
+
+      #target {
+        display: block;
+        width: 100%;
+        height: 100%;
+        outline: 0;
+      }
+    `
+  ]
+
+  @property({ type: String }) sceneId!: string
+  @property({ type: Object }) provider!: any
+
+  @state() _scene: any
+
+  @query('#target') _targetEl!: HTMLElement
+
+  render() {
+    return html` <div id="target"></div> `
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    window.addEventListener('resize', () => {
+      requestAnimationFrame(() => {
+        if (this._scene) {
+          this._scene.resize()
+
+          if (this.offsetWidth) {
+            this._scene.fit()
+          }
+        }
+      })
+    })
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._releaseRef()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    changes.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: any) => {
+        this._scene = scene
+        this._scene.target = this._targetEl
+
+        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
+         * 이 때는 정상적으로 그려주고,
+         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
+         */
+        if (this._scene.target.offsetWidth) {
+          this._scene.fit()
+        }
+      },
+      (e: any) => {}
+    )
+  }
+}