@things-factory/reference-app 4.0.4 → 4.0.8

package/attachments/6f9d5fd4-6546-40c6-90c0-0207233ad12f.json

@@ -0,0 +1,145 @@
+[
+  {
+    "type": "simple-switch",
+    "left": 119.16099773242632,
+    "top": 38.95691609977326,
+    "width": 99.99999999999974,
+    "height": 40.00000000000001,
+    "thumbnailColor": "#ffffff",
+    "onColor": "#2196f3",
+    "offColor": "#cccccc",
+    "rotation": 0,
+    "id": "input1"
+  },
+  {
+    "type": "input-text",
+    "top": 91.57596371882084,
+    "left": 119.72789115646258,
+    "width": 255.64625850340076,
+    "height": 30,
+    "paddingLeft": 7,
+    "paddingRight": 7,
+    "fontSize": 14,
+    "fillStyle": "white",
+    "fontColor": "#585858",
+    "strokeStyle": "rgba(0,0,0,.4)",
+    "lineWidth": 1,
+    "lineDash": "solid",
+    "textAlign": "left",
+    "rotation": 0,
+    "id": "input2",
+    "mappings": [
+      {
+        "rule": "value",
+        "target": "(self)",
+        "property": "value"
+      }
+    ]
+  },
+  {
+    "type": "text",
+    "left": 7.4829931972789225,
+    "top": 43.934240362811806,
+    "width": 95.91836734693874,
+    "height": 50,
+    "text": "Input 1",
+    "fillStyle": "#fff",
+    "strokeStyle": "#000",
+    "alpha": 1,
+    "hidden": false,
+    "lineWidth": 5,
+    "lineDash": "solid",
+    "lineCap": "butt",
+    "textAlign": "left",
+    "textBaseline": "top",
+    "textWrap": false,
+    "fontFamily": "serif",
+    "fontSize": 30,
+    "rotation": 0
+  },
+  {
+    "type": "text",
+    "left": 7.4829931972789225,
+    "top": 94.72789115646262,
+    "width": 95.91836734693874,
+    "height": 50,
+    "text": "Input 2",
+    "fillStyle": "#fff",
+    "strokeStyle": "#000",
+    "alpha": 1,
+    "hidden": false,
+    "lineWidth": 5,
+    "lineDash": "solid",
+    "lineCap": "butt",
+    "textAlign": "left",
+    "textBaseline": "top",
+    "textWrap": false,
+    "fontFamily": "serif",
+    "fontSize": 30,
+    "rotation": 0
+  },
+  {
+    "type": "rect",
+    "left": 251.70068027210883,
+    "top": 252.4943310657596,
+    "width": 120.29478458049894,
+    "height": 32.42630385487533,
+    "fillStyle": "#fff",
+    "strokeStyle": "#000",
+    "alpha": 1,
+    "hidden": false,
+    "lineWidth": 1,
+    "lineDash": "solid",
+    "lineCap": "butt",
+    "rotation": 0,
+    "text": "OK",
+    "shadow": {
+      "left": 5,
+      "top": 5,
+      "blurSize": 5,
+      "color": "rgb(217, 13, 75)"
+    },
+    "event": {
+      "tap": {
+        "pressed": true,
+        "action": "close-scene"
+      }
+    },
+    "data": {
+      "result1": true,
+      "result2": "성공했습니다."
+    }
+  },
+  {
+    "type": "rect",
+    "left": 119.72789115646259,
+    "top": 252.4943310657596,
+    "width": 120.29478458049883,
+    "height": 32.42630385487533,
+    "fillStyle": "#fff",
+    "strokeStyle": "#000",
+    "alpha": 1,
+    "hidden": false,
+    "lineWidth": 1,
+    "lineDash": "solid",
+    "lineCap": "butt",
+    "rotation": 0,
+    "text": "NOT OK",
+    "shadow": {
+      "left": 5,
+      "top": 5,
+      "blurSize": 5,
+      "color": "rgb(5, 61, 55)"
+    },
+    "event": {
+      "tap": {
+        "pressed": true,
+        "action": "close-scene"
+      }
+    },
+    "data": {
+      "result1": false,
+      "result2": "실패했습니다."
+    }
+  }
+]

package/client/bootstrap.js

@@ -1,6 +1,7 @@
 import '@things-factory/auth-ui' /* for domain-switch */
 import '@things-factory/barcode-base' /* for <default-label-printer-setting-let> */
 import '@things-factory/notification' /* for notification-badge */
+import './components/ocr-viewpart'
 
 import { TOOL_POSITION, VIEWPART_POSITION, appendViewpart, toggleOverlay } from '@things-factory/layout-base'
 import { getEditor, registerEditor, registerRenderer } from '@operato/data-grist'
@@ -134,6 +135,24 @@ export default function bootstrap() {
   })
 
   /* setting app-tools */
+  store.dispatch({
+    type: APPEND_APP_TOOL,
+    tool: {
+      name: 'ocr-toggler',
+      template: html`
+        <mwc-icon
+          @click=${e => {
+            toggleOverlay('ocr-viewpart', {
+              backdrop: false
+            })
+          }}
+          >camera_enhance
+        </mwc-icon>
+      `,
+      position: TOOL_POSITION.REAR
+    }
+  })
+
   store.dispatch({
     type: APPEND_APP_TOOL,
     tool: {
@@ -162,6 +181,17 @@ export default function bootstrap() {
     position: VIEWPART_POSITION.HEADERBAR
   })
 
+  appendViewpart({
+    name: 'ocr-viewpart',
+    viewpart: {
+      show: false,
+      hovering: false,
+      resizable: true,
+      template: html` <ocr-viewpart style="min-width: 300px; height: 100%; width: 50vw;"></ocr-viewpart> `
+    },
+    position: VIEWPART_POSITION.ASIDEBAR
+  })
+
   appendViewpart({
     name: 'notification',
     viewpart: {

package/client/components/camera-capturer.js

@@ -119,8 +119,16 @@ export class CameraCapturer extends LitElement {
                   - ${file.name}
                   <mwc-icon
                     @click=${e => {
-                      this._files.splice(this._files.indexOf(file), 1)
-                      this.requestUpdate()
+                      this._files = [...this._files.splice(this._files.indexOf(file), 1)]
+                      this.dispatchEvent(
+                        new CustomEvent('files-change', {
+                          bubbles: true,
+                          composed: true,
+                          detail: {
+                            files: this._files
+                          }
+                        })
+                      )
                     }}
                     >delete_outline</mwc-icon
                   >
@@ -137,6 +145,15 @@ export class CameraCapturer extends LitElement {
 
     this.addEventListener('file-drop', e => {
       this._files = this.multiple ? e.detail : e.detail[0] ? [e.detail[0]] : []
+      this.dispatchEvent(
+        new CustomEvent('files-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            files: this._files
+          }
+        })
+      )
     })
   }
 
@@ -151,6 +168,16 @@ export class CameraCapturer extends LitElement {
   reset() {
     this.fileInput.value = ''
     this._files = []
+
+    this.dispatchEvent(
+      new CustomEvent('files-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          files: this._files
+        }
+      })
+    )
   }
 }
 

package/client/components/ocr-viewpart.js

@@ -0,0 +1,94 @@
+import './camera-capturer'
+import '@material/mwc-button'
+import '@operato/ocr'
+
+import { gql } from 'graphql-tag'
+import { css, html, LitElement } from 'lit-element'
+
+import { client } from '@things-factory/shell'
+
+var FILES = []
+var RESULT = []
+
+class OCRViewPart extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          min-width: 240px;
+        }
+
+        ox-ocr-helper {
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _result: Array,
+      _files: Array
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this._files = FILES
+    this._result = RESULT
+  }
+
+  render() {
+    const files = this._files || []
+    const index = this.index || 0
+    const file = files[index]
+    const image = file && URL.createObjectURL(file)
+    if (image) {
+      requestAnimationFrame(() => URL.revokeObjectURL(image))
+    }
+
+    return html`
+      <ox-ocr-helper @attached=${this.upload.bind(this)} .files=${this._files} .result=${this._result}> </ox-ocr-helper>
+    `
+  }
+
+  async upload(e) {
+    FILES = this._files = e.detail
+
+    const response = await client.query({
+      query: gql`
+        query ocrRequest($images: [Upload!]!) {
+          ocrRequest(images: $images)
+        }
+      `,
+      variables: {
+        images: this._files
+      },
+      context: { hasUpload: true }
+    })
+
+    if (!response.errors) {
+      const helper = this.shadowRoot.querySelector('ox-ocr-helper')
+      RESULT = helper.result = response.data.ocrRequest.map(result => {
+        return {
+          ...result,
+          boundaries: JSON.parse(result.boundaries)
+        }
+      })
+    } else {
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            level: 'error',
+            message: response.errors
+          }
+        })
+      )
+    }
+  }
+}
+
+customElements.define('ocr-viewpart', OCRViewPart)

package/client/menu.js

@@ -80,7 +80,7 @@ export function getMenuTemplate() {
         },
         {
           name: 'Label Scan',
-          path: 'bizplace-register'
+          path: 'label-scan-page'
         },
         {
           name: 'Ghost Print',

package/client/pages/context-menu-page.js

@@ -1,9 +1,10 @@
 import '@material/mwc-icon'
-import '@operato/mini-popup'
+import '@operato/popup'
 
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
+import { PopupMenu } from '@operato/popup'
 import { PageView, store } from '@things-factory/shell'
 
 import { referencePageStyles } from './reference-page-styles'
@@ -39,93 +40,114 @@ class ContextMenuPage extends connect(store)(PageView) {
         페이지내에 엘리먼트를 위치시키고 open method로 활성화 시키는 방법을 예시합니다. 데스크톱 브라우저 페이지 내 어느
         위치에서든 마우스 우측버튼을 클릭하고, 모바일 디바이스에서는 탭을 오래누르면(longpress) 팝업메뉴가 동작합니다.
       </p>
+    `
+  }
 
-      <popup-menu>
-        <popup-menuitem label="article">
-          <mwc-icon slot="icon">article</mwc-icon>
-        </popup-menuitem>
-
-        <popup-menuitem label="home">
-          <mwc-icon slot="icon">home</mwc-icon>
-        </popup-menuitem>
-
-        <popup-menuitem label="empty"> </popup-menuitem>
-
-        <popup-menuitem
-          label="click me to toggle"
-          @click=${function (e) {
-            const target = e.currentTarget
-            const icon = target.querySelector('mwc-icon')
-            icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
-          }}
-        >
-          <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-        </popup-menuitem>
-
-        <popup-menuitem label="verified">
-          <mwc-icon slot="icon">verified</mwc-icon>
-          <popup-menu>
-            <popup-menuitem label="article">
+  firstUpdated() {
+    this.addEventListener('contextmenu', e => {
+      e.preventDefault()
+
+      PopupMenu.open({
+        template: html`
+            <ox-popup-menuitem
+              label="article - click me"
+              @selected=${function (e) {
+                console.log('first level article selected')
+              }}
+            >
               <mwc-icon slot="icon">article</mwc-icon>
-            </popup-menuitem>
+            </ox-popup-menuitem>
 
-            <popup-menuitem label="home">
+            <ox-popup-menuitem label="home">
               <mwc-icon slot="icon">home</mwc-icon>
-            </popup-menuitem>
-
-            <popup-menuitem label="verified">
+            </ox-popup-menuitem>
+
+            <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
+
+            <ox-popup-menuitem
+              label="click me to toggle"
+              @selected=${function (e) {
+                const icon = this.querySelector('mwc-icon')
+                icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
+              }}
+              alive-on-select
+            >
+              <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+            </ox-popup-menuitem>
+
+            <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
               <mwc-icon slot="icon">verified</mwc-icon>
-              <popup-menu>
-                <popup-menuitem label="article">
+              <ox-popup-menu>
+                <ox-popup-menuitem
+                  label="article"
+                  @selected=${function (e) {
+                    console.log('article selected')
+                  }}
+                  alive-on-select
+                >
                   <mwc-icon slot="icon">article</mwc-icon>
-                </popup-menuitem>
+                </ox-popup-menuitem>
 
-                <popup-menuitem label="home">
+                <ox-popup-menuitem label="home">
                   <mwc-icon slot="icon">home</mwc-icon>
-                </popup-menuitem>
+                </ox-popup-menuitem>
 
-                <popup-menuitem label="verified">
+                <ox-popup-menuitem label="verified">
                   <mwc-icon slot="icon">verified</mwc-icon>
-                </popup-menuitem>
+                  <ox-popup-menu>
+                    <ox-popup-menuitem label="article">
+                      <mwc-icon slot="icon">article</mwc-icon>
+                    </ox-popup-menuitem>
 
-                <popup-menuitem label="checkbox">
-                  <input type="checkbox" slot="icon" />
-                </popup-menuitem>
-
-                <div separator></div>
-              </popup-menu>
-            </popup-menuitem>
+                    <ox-popup-menuitem label="home">
+                      <mwc-icon slot="icon">home</mwc-icon>
+                    </ox-popup-menuitem>
 
-            <div separator></div>
+                    <ox-popup-menuitem label="verified">
+                      <mwc-icon slot="icon">verified</mwc-icon>
+                    </ox-popup-menuitem>
 
-            <popup-menuitem label="checkbox">
-              <input type="checkbox" slot="icon" />
-            </popup-menuitem>
-          </popup-menu>
-        </popup-menuitem>
+                    <ox-popup-menuitem label="checkbox">
+                      <input type="checkbox" slot="icon" />
+                    </ox-popup-menuitem>
 
-        <popup-menuitem label="checkbox">
-          <input type="checkbox" slot="icon" />
-        </popup-menuitem>
+                    <div separator></div>
+                  </ox-popup-menu>
+                </ox-popup-menuitem>
 
-        <div separator></div>
+                <div separator></div>
 
-        <div menu>Plain DIV</div>
-        <input type="checkbox" menu />
-        <input type="text" menu value="Plain text input" />
-      </popup-menu>
-    `
-  }
+                <ox-popup-menuitem label="checkbox">
+                  <input type="checkbox" slot="icon" />
+                </ox-popup-menuitem>
+              </ox-popup-menu>
+            </ox-popup-menuitem>
 
-  firstUpdated() {
-    this.addEventListener('contextmenu', e => {
-      const popupMenu = this.renderRoot.querySelector('popup-menu')
+            <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
+              <input type="checkbox" slot="icon" />
+            </ox-popup-menuitem>
 
-      if (popupMenu) {
-        e.preventDefault()
+            <div separator></div>
 
-        popupMenu.open({ left: e.offsetX, top: e.offsetY })
-      }
+            <div menu>Plain Text</div>
+
+            <div menu alive-on-select>
+              <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
+            </div>
+
+            <div menu alive-on-select>
+              <input id="checkbox-01" type="checkbox" />
+              <label for="checkbox-01">custom menu</label>
+            </div>
+            <div menu alive-on-select>
+              <label for="text-01">value</label>
+              <input id="text-01" type="text" value="Plain text input" />
+            </div>
+          `,
+        top: e.offsetY,
+        left: e.offsetX,
+        parent: this.renderRoot
+      })
     })
   }
 }

package/client/pages/grist-mode-page.js

@@ -1,12 +1,10 @@
-import '@operato/mini-popup'
+import '@operato/popup'
 import '@operato/data-grist'
 
 import { css, html } from 'lit-element'
-import { getEditor, getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
 
+import { i18next, localize } from '@things-factory/i18n-base'
 import { PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
 
 class GristModePage extends localize(i18next)(PageView) {
   static get styles() {
@@ -113,7 +111,7 @@ class GristModePage extends localize(i18next)(PageView) {
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('popup-menu').open({
+                this.renderRoot.querySelector('ox-popup-list').open({
                   left: target.offsetLeft,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -123,7 +121,7 @@ class GristModePage extends localize(i18next)(PageView) {
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('popup-menu').open({
+                this.renderRoot.querySelector('ox-popup-list').open({
                   left: target.offsetLeft,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -133,7 +131,7 @@ class GristModePage extends localize(i18next)(PageView) {
             <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
-                this.renderRoot.querySelector('popup-menu').open({
+                this.renderRoot.querySelector('ox-popup-list').open({
                   left: target.offsetLeft,
                   top: target.offsetTop + target.offsetHeight
                 })
@@ -141,26 +139,28 @@ class GristModePage extends localize(i18next)(PageView) {
               >sort</mwc-icon
             >
 
-            <popup-menu>
-              <popup-menuitem
-                label="click me to toggle"
+            <ox-popup-list alive-on-select>
+              <div
+                option
                 @click=${function (e) {
                   const icon = e.currentTarget.querySelector('mwc-icon')
                   icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
                 }}
               >
                 <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-              </popup-menuitem>
-              <popup-menuitem
-                label="click me to toggle"
+                <span>click me to toggle</span>
+              </div>
+              <div
+                option
                 @click=${function (e) {
                   const icon = e.currentTarget.querySelector('mwc-icon')
                   icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
                 }}
               >
                 <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-              </popup-menuitem>
-            </popup-menu>
+                <span>click me to toggle</span>
+              </div>
+            </ox-popup-list>
           </div>
         </div>
       </ox-grist>