@operato/scene-label 8.0.0-beta.1 → 8.0.0-beta.2

package/src/barcode-scanner.ts

@@ -1,127 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, HTMLOverlayElement } from '@hatiolab/things-scene'
-import { OxInputBarcode } from '@operato/input' // TODO make '@operato/input/ox-input-barcode.js' work.
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'checkbox',
-      label: 'without-enter',
-      name: 'withoutEnter'
-    },
-    {
-      type: 'checkbox',
-      label: 'english-only',
-      name: 'englishOnly'
-    },
-    {
-      type: 'checkbox',
-      label: 'select-after-change',
-      name: 'selectAfterChange'
-    },
-    {
-      type: 'checkbox',
-      label: 'autofocus',
-      name: 'autofocus'
-    },
-    {
-      type: 'checkbox',
-      label: 'hide-keyboard',
-      name: 'hideKeyboard'
-    }
-  ],
-  help: 'scene/component/barcode-scanner'
-}
-
-export default class BarcodeScanner extends HTMLOverlayElement {
-  private _data: any
-
-  get nature() {
-    return NATURE
-  }
-
-  get data() {
-    return this._data
-  }
-
-  set data(data) {
-    this._data = data
-    this.executeMappings() // 이전 데이터와 비교하지 않고 매핑을 실행하기 위함
-  }
-
-  select() {
-    ;(this.element as OxInputBarcode).input.select()
-  }
-
-  dispose() {
-    super.dispose()
-  }
-
-  ready() {
-    super.ready()
-    var scanInput = this.element as OxInputBarcode
-
-    scanInput.addEventListener('change', (e: Event) => {
-      this.data = scanInput.value
-    })
-
-    // 스캔 시 컴포넌트 데이터 세팅
-    var scan = scanInput.scan
-    scanInput.scan = (e: MouseEvent) =>
-      scan.call(scanInput, e).then(() => {
-        if (scanInput.input) this.data = scanInput.input.value
-      })
-  }
-
-  createElement() {
-    super.createElement()
-
-    if (this.app.isViewMode) {
-      const { hideKeyboard, autofocus } = this.state
-
-      if (hideKeyboard) {
-        requestAnimationFrame(() => {
-          const input = (this.element as OxInputBarcode).input
-          input.addEventListener('focusin', e => {
-            input.setAttribute('readonly', '')
-            this.select()
-
-            requestAnimationFrame(() => {
-              input.removeAttribute('readonly')
-            })
-          })
-        })
-      }
-
-      if (autofocus) {
-        requestAnimationFrame(() => {
-          this.select()
-        })
-      }
-    }
-  }
-
-  setElementProperties(input: OxInputBarcode) {
-    const { withoutEnter = false, englishOnly = false, selectAfterChange = false } = this.state
-
-    input.style.setProperty('--input-font', 'initial')
-
-    input.withoutEnter = withoutEnter
-    input.englishOnly = englishOnly
-    input.selectAfterChange = selectAfterChange
-
-    input.value = this._data = this.text
-  }
-
-  get tagName() {
-    return 'ox-input-barcode'
-  }
-}
-
-Component.register('barcode-scanner', BarcodeScanner)

package/src/barcode.ts

@@ -1,328 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-// 참고 웹페이지.
-// http://www.neodynamic.com/Products/Help/BarcodeWinControl2.5/working_barcode_symbologies.htm
-// const BARCODE_REGEXP = {
-//   'code11': /^[0-9\-]*$/,
-//   'codebar': /^[A-D][0-9\+$:\-/.]*[A-D]$/,
-//   'code39': {
-//     'normal': /^[0-9A-Z\-.$/\+%\*\s]*$/,
-//     'extended': /^[\000-\177]*$/
-//   },
-//   'code93': {
-//     'normal': /^[0-9A-Z\-.$/\+%\*\s]*$/,
-//     'extended': /^[\000-\177]*$/
-//   },
-//   'code128': {
-//     'auto': /^[\000-\177]*$/,
-//     'A': /^[\000-\137]*$/,
-//     'B': /^[\040-\177]*$/,
-//     'C': /^(([0-9]{2})+?)*$/
-//   },
-//   'datamatrix': /^[\x00-\xff]*$/, // 멀티바이트 캐릭터는 안됨 ?
-//   'ean8': /^\d{1,}$/,
-//   'ean13': /^\d{1,}$/,
-//   'industrial2of5': /^\d{1,}$/,
-//   'interleaved2of5': /^\d{1,}$/,
-//   'isbn': /((978[\--– ])?[0-9][0-9\--– ]{10}[\--– ][0-9xX])|((978)?[0-9]{9}[0-9Xx])/,
-//   'msi': /^\d{1,}$/,
-//   'pdf417': {
-//     'text-compaction': /^[\011\012\015\040-\177]*$/,
-//     'binary-compaction': /^[\x00-\xff]*$/
-//   },
-//   'planet': /^\d{1,}$/,
-//   'postnet': /^\d{1,}$/,
-//   'ean128': /^[\000-\177\xC8\xCA-\xCD]*$/,
-//   'upca': /^\d{1,}$/,
-//   'upce': /^\d{1,}$/
-// };
-
-/*  opts 예제 - https://github.com/bwipp/postscriptbarcode/wiki/Options-Reference
- *  includecheck, includecheckintext, includetext, textfont, textsize, textgaps, textxalign, textyalign, textxoffset, textyoffset
- *  showborder, borderwidth, borderleft, borderright, bordertop, borderbottom, barcolor, backgroundcolor, bordercolor, textcolor
- *  parse, parsefnc, height, width, inkspread, inkspreadh, inkspreadv,
- *  addontextxoffset, addontextyoffset, addontextfont, addontextsize
- *  guardwhitespace, guardwidth, guardheight, guardleftpos, guardrightpos, guardleftypos, guardrightypos
- */
-
-// symdesc["code39"].opts = "includetext textxalign=center textgaps=2";
-// symdesc["interleaved2of5"].opts = "includetext textxalign=center textgaps=1.5";
-// symdesc["code93"].opts = "includetext textxalign=center textgaps=2";
-// symdesc["ean13"].opts = "includetext";
-// symdesc["ean8"].opts = "includetext";
-
-import bwipjs from 'bwip-js'
-
-import { Component, ComponentNature, error, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'symbol',
-      name: 'symbol',
-      property: {
-        options: [
-          { value: 'auspost', display: 'AusPost 4 State Customer Code' },
-          { value: 'azteccode', display: 'Aztec Code' },
-          { value: 'azteccodecompact', display: 'Compact Aztec Code' },
-          { value: 'aztecrune', display: 'Aztec Runes' },
-          { value: 'bc412', display: 'BC412' },
-          { value: 'channelcode', display: 'Channel Code' },
-          { value: 'codablockf', display: 'Codablock F' },
-          { value: 'code11', display: 'Code 11' },
-          { value: 'code128', display: 'Code 128' },
-          { value: 'code16k', display: 'Code 16K' },
-          { value: 'code2of5', display: 'Code 25' },
-          { value: 'code32', display: 'Italian Pharmacode' },
-          { value: 'code39', display: 'Code 39' },
-          { value: 'code39ext', display: 'Code 39 Extended' },
-          { value: 'code49', display: 'Code 49' },
-          { value: 'code93', display: 'Code 93' },
-          { value: 'code93ext', display: 'Code 93 Extended' },
-          { value: 'codeone', display: 'Code One' },
-          { value: 'coop2of5', display: 'COOP 2 of 5' },
-          { value: 'daft', display: 'Custom 4 state symbology' },
-          { value: 'databarexpanded', display: 'GS1 DataBar Expanded' },
-          {
-            value: 'databarexpandedcomposite',
-            display: 'GS1 DataBar Expanded Composite'
-          },
-          {
-            value: 'databarexpandedstacked',
-            display: 'GS1 DataBar Expanded Stacked'
-          },
-          {
-            value: 'databarexpandedstackedcomposite',
-            display: 'GS1 DataBar Expanded Stacked Composite'
-          },
-          { value: 'databarlimited', display: 'GS1 DataBar Limited' },
-          {
-            value: 'databarlimitedcomposite',
-            display: 'GS1 DataBar Limited Composite'
-          },
-          { value: 'databaromni', display: 'GS1 DataBar Omnidirectional' },
-          {
-            value: 'databaromnicomposite',
-            display: 'GS1 DataBar Omnidirectional Composite'
-          },
-          { value: 'databarstacked', display: 'GS1 DataBar Stacked' },
-          {
-            value: 'databarstackedcomposite',
-            display: 'GS1 DataBar Stacked Composite'
-          },
-          {
-            value: 'databarstackedomni',
-            display: 'GS1 DataBar Stacked Omnidirectional'
-          },
-          {
-            value: 'databarstackedomnicomposite',
-            display: 'GS1 DataBar Stacked Omnidirectional Composite'
-          },
-          { value: 'databartruncated', display: 'GS1 DataBar Truncated' },
-          {
-            value: 'databartruncatedcomposite',
-            display: 'GS1 DataBar Truncated Composite'
-          },
-          { value: 'datalogic2of5', display: 'Datalogic 2 of 5' },
-          { value: 'datamatrix', display: 'Data Matrix' },
-          {
-            value: 'datamatrixrectangular',
-            display: 'Data Matrix Rectangular'
-          },
-          { value: 'dotcode', display: 'DotCode' },
-          { value: 'ean13', display: 'EAN-13' },
-          { value: 'ean13composite', display: 'EAN-13 Composite' },
-          { value: 'ean14', display: 'GS1-14' },
-          { value: 'ean2', display: 'EAN-2 (2 digit addon)' },
-          { value: 'ean5', display: 'EAN-5 (5 digit addon)' },
-          { value: 'ean8', display: 'EAN-8' },
-          { value: 'ean8composite', display: 'EAN-8 Composite' },
-          { value: 'flattermarken', display: 'Flattermarken' },
-          { value: 'gs1-128', display: 'GS1-128' },
-          { value: 'gs1-128composite', display: 'GS1-128 Composite' },
-          { value: 'gs1-cc', display: 'GS1 Composite 2D Component' },
-          { value: 'gs1datamatrix', display: 'GS1 Data Matrix' },
-          {
-            value: 'gs1datamatrixrectangular',
-            display: 'GS1 Data Matrix Rectangular'
-          },
-          {
-            value: 'gs1northamericancoupon',
-            display: 'GS1 North American Coupon'
-          },
-          { value: 'gs1qrcode', display: 'GS1 QR Code' },
-          { value: 'hanxin', display: 'Han Xin Code' },
-          { value: 'hibcazteccode', display: 'HIBC Aztec Code' },
-          { value: 'hibccodablockf', display: 'HIBC Codablock F' },
-          { value: 'hibccode128', display: 'HIBC Code 128' },
-          { value: 'hibccode39', display: 'HIBC Code 39' },
-          { value: 'hibcdatamatrix', display: 'HIBC Data Matrix' },
-          {
-            value: 'hibcdatamatrixrectangular',
-            display: 'HIBC Data Matrix Rectangular'
-          },
-          { value: 'hibcmicropdf417', display: 'HIBC MicroPDF417' },
-          { value: 'hibcpdf417', display: 'HIBC PDF417' },
-          { value: 'hibcqrcode', display: 'HIBC QR Code' },
-          { value: 'iata2of5', display: 'IATA 2 of 5' },
-          { value: 'identcode', display: 'Deutsche Post Identcode' },
-          { value: 'industrial2of5', display: 'Industrial 2 of 5' },
-          { value: 'interleaved2of5', display: 'Interleaved 2 of 5 (ITF)' },
-          { value: 'isbn', display: 'ISBN' },
-          { value: 'ismn', display: 'ISMN' },
-          { value: 'issn', display: 'ISSN' },
-          { value: 'itf14', display: 'ITF-14' },
-          { value: 'japanpost', display: 'Japan Post 4 State Customer Code' },
-          { value: 'kix', display: 'Royal Dutch TPG Post KIX' },
-          { value: 'leitcode', display: 'Deutsche Post Leitcode' },
-          { value: 'matrix2of5', display: 'Matrix 2 of 5' },
-          { value: 'maxicode', display: 'MaxiCode' },
-          { value: 'micropdf417', display: 'MicroPDF417' },
-          { value: 'microqrcode', display: 'Micro QR Code' },
-          { value: 'msi', display: 'MSI Modified Plessey' },
-          { value: 'onecode', display: 'USPS Intelligent Mail' },
-          { value: 'pdf417', display: 'PDF417' },
-          { value: 'pdf417compact', display: 'Compact PDF417' },
-          { value: 'pharmacode', display: 'Pharmaceutical Binary Code' },
-          { value: 'pharmacode2', display: 'Two-track Pharmacode' },
-          { value: 'planet', display: 'USPS PLANET' },
-          { value: 'plessey', display: 'Plessey UK' },
-          { value: 'posicode', display: 'PosiCode' },
-          { value: 'postnet', display: 'USPS POSTNET' },
-          { value: 'pzn', display: 'Pharmazentralnummer (PZN)' },
-          { value: 'qrcode', display: 'QR Code' },
-          { value: 'rationalizedCodabar', display: 'Codabar' },
-          { value: 'raw', display: 'Custom 1D symbology' },
-          { value: 'royalmail', display: 'Royal Mail 4 State Customer Code' },
-          { value: 'sscc18', display: 'SSCC-18' },
-          { value: 'symbol', display: 'Miscellaneous symbols' },
-          { value: 'telepen', display: 'Telepen' },
-          { value: 'telepennumeric', display: 'Telepen Numeric' },
-          { value: 'ultracode', display: 'Ultracode' },
-          { value: 'upca', display: 'UPC-A' },
-          { value: 'upcacomposite', display: 'UPC-A Composite' },
-          { value: 'upce', display: 'UPC-E' },
-          { value: 'upcecomposite', display: 'UPC-E Composite' }
-        ]
-      }
-    },
-    {
-      type: 'number',
-      label: 'paddingwidth',
-      name: 'paddingwidth'
-    },
-    {
-      type: 'number',
-      label: 'paddingheight',
-      name: 'paddingheight'
-    },
-    {
-      type: 'checkbox',
-      label: 'monochrome',
-      name: 'monochrome'
-    },
-    {
-      type: 'checkbox',
-      label: 'show-text',
-      name: 'showText'
-    }
-  ],
-  'value-property': 'text'
-}
-
-const REDRAW_PROPS = ['symbol', 'text', 'showText', 'height', 'width', 'paddingwidth', 'paddingheight']
-
-export default class Barcode extends RectPath(Shape) {
-  private _canvas?: HTMLCanvasElement
-  private _image: any
-
-  get nature() {
-    return NATURE
-  }
-
-  get canvas() {
-    if (!this._canvas) {
-      this._canvas = document.createElement('canvas')
-
-      this._canvas.style.display = 'none'
-      this._canvas.height = 1
-      this._canvas.width = 1
-    }
-
-    return this._canvas
-  }
-
-  dispose() {
-    super.dispose()
-  }
-
-  ready() {
-    super.ready()
-    this.buildImage()
-  }
-
-  buildImage() {
-    var { symbol, text, width, height, includetext, textAlign, paddingwidth = 0, paddingheight = 0 } = this.state
-
-    if (!text) {
-      console.warn('barcode text is not specified.')
-      return
-    }
-
-    this.canvas.width = width
-    this.canvas.height = height
-
-    try {
-      //@ts-ignore
-      this._image = bwipjs.toCanvas(this.canvas, {
-        bcid: symbol, // Barcode type
-        text, // Text to encode
-        height, // Bar height, in millimeters
-        width,
-        includetext, // Show human-readable text
-        textxalign: textAlign || 'center', // Always good to set this
-        paddingwidth,
-        paddingheight
-      })
-    } catch (err) {
-      delete this._image
-      error(err)
-    } finally {
-      this.invalidate()
-    }
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.state
-
-    try {
-      if (this._image) {
-        // don't change to this.drawImage(context, ..) - this._image is canvas.
-        context.drawImage(this._image, left, top, width, height)
-      }
-    } catch (e) {
-      error(e)
-    }
-  }
-
-  drawText() {
-    // to nothing
-  }
-
-  onchange(props: Properties) {
-    for (let prop of REDRAW_PROPS) {
-      if (prop in props) {
-        this.buildImage()
-        return
-      }
-    }
-  }
-}
-
-Component.register('barcode', Barcode)

package/src/bitmap.ts

@@ -1,163 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-// file : bwip-js/lib/canvas.js
-//
-// bwip-js bitmap interface for an HTML canvas.
-//
-// Copyright (c) 2011-2016 Mark Warren
-//
-// Licensed MIT.  See the LICENSE file in the bwip-js root directory
-// for the extended copyright notice.
-
-// bgcolor is optional, defaults to #fff.
-export default class Bitmap {
-  bgcolor?: string
-  clr = [0, 0, 0]
-  pts = [] as any[]
-  minx = 0 // min-x
-  miny = 0 // min-y
-  maxx = 0 // max-x
-  maxy = 0 // max-y
-  padx = 0 // padding-x
-  pady = 0 // padding-y
-
-  constructor(bgcolor: string) {
-    this.bgcolor = bgcolor
-  }
-
-  pad(x: number, y: number) {
-    this.padx = x
-    this.pady = y
-  }
-
-  color(r: number, g: number, b: number) {
-    this.clr = [r, g, b]
-  }
-
-  // Sets the minimim size for the drawing surface (can grow larger).
-  // BWIPP has logic for borders (padding) that without this custom call
-  // gets lost.  See custom/ren*.ps.
-  extent(llx: number, lly: number, urx: number, ury: number) {
-    llx = Math.floor(llx)
-    lly = Math.floor(lly)
-    urx = Math.floor(urx)
-    ury = Math.floor(ury)
-    if (this.minx > llx) this.minx = llx
-    if (this.miny > lly) this.miny = lly
-    if (this.maxx < urx) this.maxx = urx
-    if (this.maxy < ury) this.maxy = ury
-  }
-
-  // a is the alpha-level of the pixel [0 .. 255]
-  set(x: number, y: number, a: number) {
-    x = Math.floor(x)
-    y = Math.floor(y)
-    this.pts.push([x, y, this.clr, a])
-    if (this.minx > x) this.minx = x
-    if (this.miny > y) this.miny = y
-    if (this.maxx < x) this.maxx = x
-    if (this.maxy < y) this.maxy = y
-  }
-
-  error(cvs: HTMLCanvasElement) {
-    cvs.width = 64
-    cvs.height = 64
-
-    var ctx = cvs.getContext('2d') as CanvasRenderingContext2D
-
-    ctx.beginPath()
-
-    ctx.rect(0, 0, cvs.width, cvs.height)
-    ctx.moveTo(0, 0)
-    ctx.lineTo(cvs.width, cvs.height)
-    ctx.moveTo(cvs.width, 0)
-    ctx.lineTo(0, cvs.height)
-
-    ctx.lineWidth = 5
-    ctx.strokeStyle = '#ff0000'
-    ctx.stroke()
-
-    return cvs.toDataURL()
-  }
-
-  show(cvsid: string | HTMLCanvasElement, rot: 'R' | 'L' | 'N' | 'I') {
-    var cvs = cvsid instanceof HTMLCanvasElement ? cvsid : (document.getElementById(cvsid) as HTMLCanvasElement)
-
-    if (this.pts.length == 0) {
-      cvs.width = 32
-      cvs.height = 32
-      cvs.getContext('2d')?.clearRect(0, 0, cvs.width, cvs.height)
-      cvs.style.visibility = 'visible'
-      return
-    }
-
-    if (rot == 'R' || rot == 'L') {
-      var h = this.maxx - this.minx + 1
-      var w = this.maxy - this.miny + 1
-    } else {
-      var w = this.maxx - this.minx + 1
-      var h = this.maxy - this.miny + 1
-    }
-
-    cvs.width = w + 2 * this.padx
-    cvs.height = h + 2 * this.pady
-
-    // Convert from cmyk?
-    if (this.bgcolor && this.bgcolor.length == 8) {
-      let c = parseInt(this.bgcolor.substr(0, 2), 16) / 255
-      let m = parseInt(this.bgcolor.substr(2, 2), 16) / 255
-      let y = parseInt(this.bgcolor.substr(4, 2), 16) / 255
-      let k = parseInt(this.bgcolor.substr(6, 2), 16) / 255
-      let r = Math.floor((1 - c) * (1 - k) * 255)
-      let g = Math.floor((1 - m) * (1 - k) * 255)
-      let b = Math.floor((1 - y) * (1 - k) * 255)
-      this.bgcolor = 'rgb(' + r + ',' + g + ',' + b + ')'
-    } else if (this.bgcolor) {
-      this.bgcolor = '#' + this.bgcolor
-    }
-
-    var ctx = cvs.getContext('2d') as CanvasRenderingContext2D
-    ctx.fillStyle = this.bgcolor || '#fff'
-    ctx.fillRect(0, 0, cvs.width, cvs.height)
-    ctx.fillStyle = '#000'
-
-    var id = ctx.getImageData(0, 0, cvs.width, cvs.height)
-    var dat = id.data
-
-    for (let i = 0; i < this.pts.length; i++) {
-      // PostScript builds bottom-up, we build top-down.
-      let x = this.pts[i][0] - this.minx
-      let y = this.pts[i][1] - this.miny
-      let c = this.pts[i][2] as number[]
-      let a = this.pts[i][3] / 255
-
-      if (rot == 'N') {
-        y = h - y - 1 // Invert y
-      } else if (rot == 'I') {
-        x = w - x - 1 // Invert x
-      } else {
-        y = w - y // Invert y
-        if (rot == 'L') {
-          var t = y
-          y = h - x - 1
-          x = t - 1
-        } else {
-          var t = x
-          x = w - y
-          y = t
-        }
-      }
-
-      var idx = (y * id.width + x) * 4
-      dat[idx + 0] = (dat[idx + 0] * (1 - a) + c[0] * a) | 0
-      dat[idx + 1] = (dat[idx + 1] * (1 - a) + c[1] * a) | 0
-      dat[idx + 2] = (dat[idx + 2] * (1 - a) + c[2] * a) | 0
-      dat[idx + 3] = 255
-    }
-
-    ctx.putImageData(id, this.padx, this.pady)
-
-    return cvs.toDataURL()
-  }
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import Barcode from "./barcode";
-
-import BarcodeScanner from "./barcode-scanner";
-import LabelPrinter from "./label-printer";
-export default [Barcode, BarcodeScanner, LabelPrinter];