@operato/board 7.1.8 → 7.1.10

package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json

@@ -0,0 +1,15 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 2
+    },
+    "auditLog": "logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json",
+    "files": [
+        {
+            "date": 1678554687533,
+            "name": "logs/application-2023-03-12-02.log",
+            "hash": "18a5f510d18baef83ee3c5cc0c77fc539d9d5c32761143d3b32bb3cf840cf98d"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json

@@ -0,0 +1,15 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 14
+    },
+    "auditLog": "logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json",
+    "files": [
+        {
+            "date": 1678554689069,
+            "name": "logs/connections-2023-03-12-02.log",
+            "hash": "54653b8db093fea29f7281ec55e91f143d0a4c66fc835d2c238e355b9ba81756"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/application-2023-03-12-02.log

@@ -0,0 +1,14 @@
+2023-03-12T02:11:28+09:00 info: File Storage is Ready.
+2023-03-12T02:11:29+09:00 error: oracledb module loading failed
+2023-03-12T02:11:30+09:00 info: Default DataSource established
+2023-03-12T02:11:30+09:00 info: Transaction DataSource established
+2023-03-12T02:11:30+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2023-03-12T02:11:30+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
+2023-03-12T02:13:18+09:00 info: File Storage is Ready.
+2023-03-12T02:13:18+09:00 error: oracledb module loading failed
+2023-03-12T02:13:28+09:00 info: File Storage is Ready.
+2023-03-12T02:13:28+09:00 error: oracledb module loading failed
+2023-03-12T02:13:29+09:00 info: Default DataSource established
+2023-03-12T02:13:29+09:00 info: Transaction DataSource established
+2023-03-12T02:13:29+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2023-03-12T02:13:29+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/connections-2023-03-12-02.log

@@ -0,0 +1,70 @@
+2023-03-12T02:11:30+09:00 info: Initializing ConnectionManager...
+2023-03-12T02:11:30+09:00 info: Connector 'echo-back-server' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'echo-back' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'http-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'graphql-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'sqlite-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'postgresql-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'mqtt-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'mssql-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'oracle-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'mysql-connector' started to ready
+2023-03-12T02:11:30+09:00 info: Connector 'socket-server' started to ready
+2023-03-12T02:11:30+09:00 info: echo-back-servers are ready
+2023-03-12T02:11:30+09:00 info: echo-back connections are ready
+2023-03-12T02:11:30+09:00 info: http-connector connections are ready
+2023-03-12T02:11:30+09:00 info: graphql-connector connections are ready
+2023-03-12T02:11:30+09:00 info: sqlite-connector connections are ready
+2023-03-12T02:11:30+09:00 info: postgresql-connector connections are ready
+2023-03-12T02:11:30+09:00 info: mqtt-connector connections are ready
+2023-03-12T02:11:30+09:00 info: mssql-connector connections are ready
+2023-03-12T02:11:30+09:00 info: oracle-connector connections are ready
+2023-03-12T02:11:30+09:00 info: mysql-connector connections are ready
+2023-03-12T02:11:30+09:00 info: socket servers are ready
+2023-03-12T02:11:30+09:00 info: All connector for 'echo-back-server' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'echo-back' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'http-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'graphql-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'sqlite-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'postgresql-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'mqtt-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'mssql-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'oracle-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'mysql-connector' ready
+2023-03-12T02:11:30+09:00 info: All connector for 'socket-server' ready
+2023-03-12T02:11:30+09:00 info: ConnectionManager initialization done:
+2023-03-12T02:13:29+09:00 info: Initializing ConnectionManager...
+2023-03-12T02:13:29+09:00 info: Connector 'echo-back-server' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'echo-back' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'http-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'graphql-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'sqlite-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'postgresql-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'mqtt-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'mssql-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'oracle-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'mysql-connector' started to ready
+2023-03-12T02:13:29+09:00 info: Connector 'socket-server' started to ready
+2023-03-12T02:13:29+09:00 info: echo-back-servers are ready
+2023-03-12T02:13:29+09:00 info: echo-back connections are ready
+2023-03-12T02:13:29+09:00 info: http-connector connections are ready
+2023-03-12T02:13:29+09:00 info: graphql-connector connections are ready
+2023-03-12T02:13:29+09:00 info: sqlite-connector connections are ready
+2023-03-12T02:13:29+09:00 info: postgresql-connector connections are ready
+2023-03-12T02:13:29+09:00 info: mqtt-connector connections are ready
+2023-03-12T02:13:29+09:00 info: mssql-connector connections are ready
+2023-03-12T02:13:29+09:00 info: oracle-connector connections are ready
+2023-03-12T02:13:29+09:00 info: mysql-connector connections are ready
+2023-03-12T02:13:29+09:00 info: socket servers are ready
+2023-03-12T02:13:29+09:00 info: All connector for 'echo-back-server' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'echo-back' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'http-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'graphql-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'sqlite-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'postgresql-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'mqtt-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'mssql-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'oracle-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'mysql-connector' ready
+2023-03-12T02:13:29+09:00 info: All connector for 'socket-server' ready
+2023-03-12T02:13:29+09:00 info: ConnectionManager initialization done:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "7.1.8",
+  "version": "7.1.10",
   "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": "^7.1.8",
-    "@operato/data-grist": "^7.1.6",
-    "@operato/font": "^7.1.8",
+    "@operato/app": "^7.1.10",
+    "@operato/data-grist": "^7.1.10",
+    "@operato/font": "^7.1.10",
     "@operato/graphql": "^7.1.1",
     "@operato/i18n": "^7.1.1",
     "@operato/input": "^7.1.6",
     "@operato/layout": "^7.1.6",
     "@operato/markdown": "^7.1.6",
     "@operato/popup": "^7.1.6",
-    "@operato/property-editor": "^7.1.8",
+    "@operato/property-editor": "^7.1.10",
     "@operato/styles": "^7.1.6",
     "@operato/utils": "^7.1.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -155,5 +159,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6769e9f397f39285ad2e331c7496cb5a5cfababc"
+  "gitHead": "a6ba2accbe707049f1c8631face8c3bc4573448d"
 }

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

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