@operato/board 8.0.0-alpha.2 → 8.0.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.20",
   "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,17 +99,17 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^8.0.0-alpha.2",
-    "@operato/data-grist": "^8.0.0-alpha.2",
-    "@operato/font": "^8.0.0-alpha.2",
+    "@operato/app": "^8.0.0-alpha.20",
+    "@operato/data-grist": "^8.0.0-alpha.20",
+    "@operato/font": "^8.0.0-alpha.20",
     "@operato/graphql": "^8.0.0-alpha.0",
     "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.2",
-    "@operato/layout": "^8.0.0-alpha.0",
-    "@operato/markdown": "^8.0.0-alpha.0",
-    "@operato/popup": "^8.0.0-alpha.0",
-    "@operato/property-editor": "^8.0.0-alpha.2",
-    "@operato/styles": "^8.0.0-alpha.0",
+    "@operato/input": "^8.0.0-alpha.20",
+    "@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.20",
+    "@operato/styles": "^8.0.0-alpha.4",
     "@operato/utils": "^8.0.0-alpha.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
@@ -123,8 +127,8 @@
     "@hatiolab/things-scene": "^8.0.0-alpha",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
@@ -155,5 +159,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "868f7fd1dfcf1758b0fd8f8c7f198489b3b3bbf8"
+  "gitHead": "c8a1305148d5f9190d79f7107001455e46906b8e"
 }

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-player.ts

@@ -301,7 +301,9 @@ export class BoardPlayer extends LitElement {
   }
 
   async start() {
-    if (!this.boards || this.boards.length == 0) return
+    if (!this.boards || this.boards.length == 0) {
+      return
+    }
 
     this.started = true
     this.playing = true

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)
+    }
+  }
+}

package/src/player/ox-board-wrapper.ts

@@ -81,6 +81,8 @@ class BoardWrapper extends LitElement {
   }
 
   _onBoardChanged() {
+    this.closeScene()
+
     this.initScene()
   }
 
@@ -138,7 +140,7 @@ class BoardWrapper extends LitElement {
     this._scene.target = this._targetEl
 
     requestAnimationFrame(() => {
-      if (this._scene.target.offsetWidth) {
+      if (this._scene?.target.offsetWidth) {
         this._scene.fit()
       }
     })

package/src/selector/ox-board-selector.ts

@@ -1,3 +1,4 @@
+import '@operato/input/ox-input-search.js'
 import './ox-board-creation-card'
 
 import gql from 'graphql-tag'
@@ -9,6 +10,7 @@ import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'
 import { InheritedValueType } from '@operato/shell'
+import { adjustFilters } from '@operato/utils'
 
 const FETCH_BOARD_LIST_GQL = gql`
   query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {
@@ -97,7 +99,7 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
         .card > .name {
           color: var(--md-sys-color-on-secondary);
           background-color: var(--md-sys-color-secondary);
-          opacity: 0.8;
+          opacity: 0.9;
           margin-top: -35px;
           width: 100%;
           font-weight: bolder;
@@ -106,12 +108,11 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
         }
 
         .card > .description {
-          color: var(--md-sys-color-on-surface);
-          background-color: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-secondary);
+          background-color: var(--md-sys-color-secondary);
           width: 100%;
-          min-height: 15px;
+          min-height: 16px;
           font-size: 0.6rem;
-          color: #fff;
           text-indent: 7px;
         }
         .card img {
@@ -120,12 +121,22 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
         }
 
         #filter {
+          display: flex;
+          align-items: center;
           padding: var(--popup-content-padding);
           color: var(--md-sys-color-on-surface-variant);
           background-color: var(--md-sys-color-surface-variant);
           box-shadow: var(--box-shadow);
         }
 
+        #filter > ox-input-search {
+          margin-right: auto;
+          border: var(--md-sys-color-primary) 1px solid;
+          padding: var(--spacing-small) var(--spacing-small);
+          border-radius: 999px;
+          color: var(--md-sys-color-primary);
+        }
+
         #filter > div {
           float: right;
           margin-left: 10px;
@@ -145,6 +156,7 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
   @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []
   @property({ type: Array }) boards: any[] = []
   @property({ type: String }) group?: string
+  @property({ type: String }) search?: string
   @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
   @property({ type: Boolean }) creatable: boolean = false
   @property({ type: String }) value?: string
@@ -161,6 +173,11 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
   render() {
     return html`
       <div id="filter">
+        <ox-input-search
+          @change=${(e: Event) => {
+            this.search = (e.currentTarget as any)?.value
+          }}
+        ></ox-input-search>
         <div>
           <label for="group">Group</label>
           <select
@@ -233,7 +250,7 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
   }
 
   async updated(changed: PropertyValues<this>) {
-    if (changed.has('group') || changed.has('inherited')) {
+    if (changed.has('group') || changed.has('inherited') || changed.has('search')) {
       this.refreshBoards()
     }
   }
@@ -294,12 +311,29 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
       page
     }
 
-    if (this.group)
+    if (this.group) {
       filters.push({
         name: 'groupId',
         operator: 'eq',
         value: this.group
       })
+    }
+
+    if (this.search) {
+      const value = `%${this.search.trim()}%`
+
+      filters.push({
+        name: 'name',
+        operator: 'search',
+        value: this.search
+      })
+
+      filters.push({
+        name: 'description',
+        operator: 'search',
+        value: this.search
+      })
+    }
 
     var variables = {
       filters,
@@ -310,7 +344,6 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
 
     var boardListResponse = await client.query({
       query: FETCH_BOARD_LIST_GQL,
-      context: gqlContext(),
       variables
     })