@operato/board 8.0.0-alpha.7 → 8.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.9",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -26,6 +26,7 @@
     "./ox-board-list.js": "./dist/src/ox-board-list.js",
     "./ox-board-template-list.js": "./dist/src/ox-board-template-list.js",
     "./ox-board-viewer.js": "./dist/src/ox-board-viewer.js",
+    "./ox-board-template-viewer.js": "./dist/src/ox-board-template-viewer.js",
     "./ox-board-player.js": "./dist/src/ox-board-player.js",
     "./ox-board-modeller.js": "./dist/src/ox-board-modeller.js",
     "./ox-editor-board-selector.js": "./dist/src/ox-editor-board-selector.js",
@@ -57,6 +58,9 @@
       "ox-board-viewer.js": [
         "./dist/src/ox-board-viewer.d.ts"
       ],
+      "ox-board-template-viewer.js": [
+        "./dist/src/ox-board-template-viewer.d.ts"
+      ],
       "ox-board-player.js": [
         "./dist/src/ox-board-player.d.ts"
       ],
@@ -95,16 +99,16 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^8.0.0-alpha.6",
-    "@operato/data-grist": "^8.0.0-alpha.6",
-    "@operato/font": "^8.0.0-alpha.6",
+    "@operato/app": "^8.0.0-alpha.9",
+    "@operato/data-grist": "^8.0.0-alpha.8",
+    "@operato/font": "^8.0.0-alpha.9",
     "@operato/graphql": "^8.0.0-alpha.0",
     "@operato/i18n": "^8.0.0-alpha.0",
     "@operato/input": "^8.0.0-alpha.4",
     "@operato/layout": "^8.0.0-alpha.4",
     "@operato/markdown": "^8.0.0-alpha.4",
     "@operato/popup": "^8.0.0-alpha.4",
-    "@operato/property-editor": "^8.0.0-alpha.6",
+    "@operato/property-editor": "^8.0.0-alpha.9",
     "@operato/styles": "^8.0.0-alpha.4",
     "@operato/utils": "^8.0.0-alpha.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -155,5 +159,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "69bcec82b28333b750e85dd55d38f5ef113a07a8"
+  "gitHead": "2347cd63c237f73d1dae009e739b3c408afd58f3"
 }

package/src/index.ts

@@ -7,3 +7,4 @@ export * from './ox-board-viewer.js'
 export * from './ox-board-player.js'
 export * from './ox-board-modeller.js'
 export * from './ox-board-list.js'
+export * from './ox-board-template-viewer.js'

package/src/ox-board-template-viewer.ts

@@ -0,0 +1,198 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { create, SCENE_MODE } from '@hatiolab/things-scene'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('ox-board-template-viewer')
+export class BoardTemplateViewer 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;
+      }
+
+      @media print {
+        md-fab,
+        md-icon {
+          display: none;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) boardTemplate: any = {}
+
+  @state() _scene: any = null
+
+  @query('#target') _target!: HTMLElement
+
+  render() {
+    return html` <div id="target"></div> `
+  }
+
+  private resizeHandler = () => {
+    this._scene && this._scene.fit()
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    window.addEventListener('resize', this.resizeHandler)
+
+    window.addEventListener('orientationchange', this.resizeHandler)
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.resizeHandler)
+    window.removeEventListener('orientationchange', this.resizeHandler)
+
+    super.disconnectedCallback()
+
+    this.closeScene()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('boardTemplate')) {
+      this.closeScene()
+
+      if (this.boardTemplate && this.boardTemplate.id) {
+        this.initScene()
+      }
+    }
+  }
+
+  initScene() {
+    if (!this.boardTemplate || !this.boardTemplate.id) return
+
+    this._scene = create({
+      model: {
+        ...this.boardTemplate.model
+      },
+      mode: SCENE_MODE.VIEW
+    })
+
+    this.setupScene({ id: this.boardTemplate.id, scene: this._scene })
+  }
+
+  closeScene() {
+    if (this._scene) {
+      this._scene.target = null
+      this._scene.release && this._scene.release()
+
+      this._scene = null
+    }
+  }
+
+  releaseScene() {
+    this.closeScene()
+  }
+
+  setupScene({ id, scene }: { id: string; scene: any }) {
+    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._scene.fit(this._scene.fitMode)
+    this._scene.target = this._target
+  }
+
+  /* event handlers */
+  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)
+    }
+  }
+}