@things-factory/barcode-ui 8.0.0-beta.0 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/barcode-ui",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@operato/layout": "^8.0.0-beta",
-    "@things-factory/shell": "^8.0.0-beta.0",
+    "@things-factory/shell": "^8.0.0-beta.2",
     "bwip-js": "^4.4.0"
   },
-  "gitHead": "add6fb8224b2cb19cbea47bed6a5ecb0424c9a28"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/components/barcode-input.ts

@@ -1,56 +0,0 @@
-import './barcode-tag'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('barcode-input')
-export class BarcodeInput extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        padding: initial;
-        border: 0;
-      }
-
-      :host * {
-        align-self: stretch;
-      }
-
-      input {
-        margin: 5px 0;
-      }
-
-      barcode-tag {
-        margin: 5px 0;
-      }
-    `
-  ]
-
-  @property({ type: String }) bcid?: string
-  @property({ type: Number }) bcWidth?: number
-  @property({ type: Number }) bcHeight?: number
-  @property({ type: Number }) bcScale?: number
-  @property({ type: String }) value?: string
-
-  render() {
-    return html`
-      <input type="text" @change=${this.onChange.bind(this)} .value=${this.value || ''} />
-      <barcode-tag
-        .bcid=${this.bcid}
-        .value=${this.value}
-        .bcWidth=${this.bcWidth}
-        .bcHeight=${this.bcHeight}
-        .bcScale=${this.bcScale}
-      ></barcode-tag>
-    `
-  }
-
-  onChange(e) {
-    this.value = e.target.value
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}

package/client/components/barcode-scanable-input.ts

@@ -1,177 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { openPopup } from '@operato/layout'
-import { BrowserMultiFormatReader } from '@zxing/library'
-
-const barcodeIcon = new URL('../../assets/images/barcode.png', import.meta.url).href
-
-@customElement('scan-camera-template')
-class ScanCameraTemplate extends LitElement {
-  get video() {
-    return this.renderRoot.querySelector('video')
-  }
-
-  render() {
-    return html` <video></video> `
-  }
-}
-
-/**
- * @deprecated use ox-input-barcode from @operato/input/ox-input-barcode.js
- *
- * BarcodeScanableInput is using mediadevice api of html5
- */
-@customElement('barcode-scanable-input')
-export class BarcodeScanableInput extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        border: none;
-        overflow: hidden;
-        background-color: var(--md-sys-color-surface);
-
-        padding: var(--custom-input-barcode-field-padding) !important;
-      }
-
-      * {
-        align-self: stretch;
-      }
-
-      *:focus {
-        outline: none;
-      }
-
-      input {
-        flex: 1 !important;
-        border: none;
-        font: var(--custom-input-barcode-field-font);
-        width: 10px;
-        flex-grow: 1;
-      }
-
-      #scan-button {
-        display: block;
-        width: 30px;
-        height: 100%;
-        min-height: 24px;
-        border: none;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-image: var(--barcodescan-input-button-icon);
-      }
-
-      #scan-button[hidden] {
-        display: none;
-      }
-    `
-  ]
-
-  @property({ type: String, attribute: true }) name?: string
-  @property({ type: Boolean }) scannable?: boolean
-  @property({ type: Boolean, attribute: 'without-enter' }) withoutEnter?: boolean
-  @property({ type: String }) value?: string
-
-  @query('input') input!: HTMLInputElement
-
-  private stream?: MediaStream
-  private reader?: BrowserMultiFormatReader
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.scannable = false
-
-    if (navigator.mediaDevices) {
-      ;(async () => {
-        try {
-          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
-          if (stream) {
-            stream.getTracks().forEach(track => track.stop())
-            this.scannable = true
-          }
-        } catch (e) {
-          console.warn('this device not support camera for barcode scan', e)
-        }
-      })()
-    }
-  }
-
-  disconnectedCallback() {
-    this.stopScan()
-  }
-
-  render() {
-    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)
-
-    return html`
-      <input type="search" .value=${this.value || ''} maxlength="50" />
-      <button
-        ?hidden=${!this.scannable}
-        id="scan-button"
-        @click=${e => {
-          this.scan(e)
-        }}
-      ></button>
-    `
-  }
-
-  async scan(e) {
-    var popup
-
-    try {
-      var template = document.createElement('scan-camera-template') as any
-
-      popup = openPopup(template, {
-        backdrop: true,
-        size: 'large',
-        closable: false
-      })
-
-      popup.onclosed = () => {
-        /* 뒤로가기 등으로 popup이 종료된 경우에도 scan 자원을 clear해준다. */
-        this.stopScan()
-      }
-
-      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
-      await this.updateComplete
-
-      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */
-      this.stream = await navigator.mediaDevices.getUserMedia(constraints)
-
-      this.reader = new BrowserMultiFormatReader()
-      if (!popup.closed && this.stream) {
-        var result = await this.reader.decodeOnceFromStream(this.stream, template.video)
-
-        this.input.value = result as any
-        if (!this.withoutEnter) {
-          this.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))
-        }
-      } else {
-        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
-        this.stopScan()
-      }
-    } catch (err) {
-      /*
-       * 1. stream device 문제로 예외 발생한 경우.
-       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.
-       */
-      console.warn(err)
-    } finally {
-      popup?.close()
-
-      this.stopScan()
-    }
-  }
-
-  stopScan() {
-    this.stream && this.stream.getTracks().forEach(track => track.stop())
-    this.reader && this.reader.reset()
-
-    delete this.stream
-    delete this.reader
-  }
-}

package/client/components/barcode-tag.ts

@@ -1,115 +0,0 @@
-import bwipjs from 'bwip-js'
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-/**
- * @deprecated use ox-barcode from @operato/barcode/ox-barcode.js
- */
-@customElement('barcode-tag')
-export class BarcodeTag extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-
-        position: relative;
-      }
-
-      canvas {
-        width: 100%;
-        height: 100px;
-      }
-
-      [dimmer] {
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        background-color: rgba(255, 0, 0, 0.5);
-      }
-    `
-  ]
-
-  @property({ type: String }) bcid?: string
-  @property({ type: Number }) bcWidth?: number
-  @property({ type: Number }) bcHeight?: number
-  @property({ type: Number }) bcScale?: number
-  @property({ type: String }) value?: string
-  @property({ type: Boolean }) validity?: boolean
-  @property({ type: Number }) padding?: number
-
-  render() {
-    return html`
-      <canvas></canvas>
-
-      ${!this.value || !this.validity ? html` <div dimmer></div> ` : html``}
-    `
-  }
-
-  constructor() {
-    super()
-    this.addEventListener('click', this._downloadQR)
-  }
-
-  _downloadQR() {
-    if (this.value && this.value != '') {
-      let link = document.createElement('a')
-      let canvas = this.renderRoot.querySelector('canvas') as HTMLCanvasElement
-
-      let options = {
-        bcid: this.bcid || 'code128', // Barcode type
-        height: this.bcHeight || 30, // Bar height, in millimeters
-        width: this.bcHeight || 30,
-        padding: this.padding || 5,
-        scale: this.bcScale || 3, // scaling factor
-        text: this.value || '12345678990',
-        // includetext: true,
-        textalign: 'center',
-        backgroundcolor: 'ffffff'
-      }
-      //@ts-ignore
-      canvas = bwipjs.toCanvas(canvas, options)
-
-      link.download = `${this.value}` + '-barcode.png'
-      link.href = canvas.toDataURL()
-      link.click()
-
-      //@ts-ignore
-      bwipjs.toCanvas(canvas, {
-        bcid: this.bcid || 'code128', // Barcode type
-        height: this.bcHeight || 20, // Bar height, in millimeters
-        scale: this.bcScale || 3, // scaling factor
-        text: this.value || '12345678990',
-        // includetext: true,
-        textalign: 'center'
-      })
-    }
-  }
-
-  updated(changes) {
-    var options = {
-      bcid: this.bcid || 'code128', // Barcode type
-      height: this.bcHeight || 20, // Bar height, in millimeters
-      scale: this.bcScale || 3, // scaling factor
-      text: this.value || '12345678990',
-      // includetext: true,
-      textalign: 'center'
-    }
-
-    let canvas = this.renderRoot.querySelector('canvas')
-
-    try {
-      //@ts-ignore
-      bwipjs.toCanvas(canvas, options)
-
-      this.validity = true
-    } catch (err) {
-      console.error(err)
-
-      this.validity = false
-    }
-  }
-}

package/client/index.ts

@@ -1,3 +0,0 @@
-export * from './components/barcode-tag'
-export * from './components/barcode-input'
-export * from './components/barcode-scanable-input'

package/client/themes/barcode-theme.css

@@ -1,4 +0,0 @@
-body {
-  --custom-input-barcode-field-font: normal 18px var(--theme-font);
-  --custom-input-barcode-field-padding: 2px 2px 2px 9px;
-}