@operato/input 2.0.0-alpha.3 → 2.0.0-alpha.8

package/src/ox-input-barcode.ts

@@ -6,14 +6,40 @@ import '@operato/popup/ox-popup.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { scanImageData } from '@undecaf/zbar-wasm'
 
 import { OxPopup } from '@operato/popup'
-import { BrowserMultiFormatReader } from '@zxing/library'
 
 import { OxFormField } from './ox-form-field.js'
 
 const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`
 
+/**
+ * Custom input component for barcode scanning.
+ *
+ * This component provides a text input field and a barcode scanning button. Users can input text
+ * manually or scan barcodes using the device camera. Supported barcode formats include:
+ *
+ * - Code-39
+ * - Code-93
+ * - Code-128
+ * - Codabar
+ * - Databar/Expanded
+ * - EAN/GTIN-5/8/13
+ * - ISBN-10/13
+ * - ISBN-13+2
+ * - ISBN-13+5
+ * - ITF (Interleaved 2 of 5)
+ * - QR Code
+ * - UPC-A/E
+ *
+ * @fires CustomEvent#change - Dispatched when the input value changes.
+ * @fires KeyboardEvent#keydown - Dispatched when the Enter key is pressed (if not withoutEnter).
+ *
+ * @cssprop {String} --barcodescan-input-button-icon - Icon for the barcode scanning button.
+ *
+ * @customElement
+ */
 @customElement('ox-input-barcode')
 export class OxInputBarcode extends OxFormField {
   static styles = [
@@ -87,14 +113,37 @@ export class OxInputBarcode extends OxFormField {
     `
   ]
 
+  /**
+   * Indicates whether barcode scanning is enabled.
+   * @property {Boolean} scannable
+   */
   @property({ type: Boolean }) scannable?: boolean
+
+  /**
+   * If true, the "Enter" key press event is not fired after scanning a barcode.
+   * @property {Boolean} withoutEnter
+   */
   @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean
+
+  /**
+   * The value of the input field.
+   * @property {String} declare value
+   */
   @property({ type: String }) declare value?: string
+
+  /**
+   * If true, only English characters are allowed in the input field.
+   * @property {Boolean} englishOnly
+   */
   @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean
+
+  /**
+   * If true, the input field is automatically selected after a change event.
+   * @property {Boolean} selectAfterChange
+   */
   @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean
 
   @state() stream?: MediaStream
-  @state() reader?: BrowserMultiFormatReader
 
   @query('input') input!: HTMLInputElement
   @query('ox-popup') popup!: OxPopup
@@ -108,7 +157,7 @@ export class OxInputBarcode extends OxFormField {
     if (navigator.mediaDevices) {
       ;(async () => {
         try {
-          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+          var stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } })
           if (stream) {
             stream.getTracks().forEach(track => track.stop())
             this.scannable = true
@@ -206,22 +255,52 @@ export class OxInputBarcode extends OxFormField {
       /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
       await this.updateComplete
 
-      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */
+      var constraints = { audio: false, video: { facingMode: 'environment' } } /* backside camera first */
       this.stream = await navigator.mediaDevices.getUserMedia(constraints)
-
-      this.reader = new BrowserMultiFormatReader()
-      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {
-        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)
-        var input = this.input
-        input.focus()
-        this.value = input.value = String(result)
-
-        if (!this.withoutEnter) {
-          input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+      this.video.srcObject = this.stream
+      this.video.play()
+
+      this.video.onloadedmetadata = async e => {
+        var canvas = new OffscreenCanvas(
+          this.video.videoWidth || this.video.width,
+          this.video.videoHeight || this.video.height
+        )
+
+        var context = canvas.getContext('2d', {
+          willReadFrequently: true
+        })
+
+        const detect = async () => {
+          try {
+            if (!this.stream?.active) {
+              return
+            }
+
+            context!.drawImage(this.video, 0, 0, canvas.width, canvas.height)
+            const imageData = context!.getImageData(0, 0, canvas.width, canvas.height)
+            const symbols = await scanImageData(imageData)
+            const result = symbols[0]?.decode()
+
+            if (result) {
+              this.stopScan()
+
+              var input = this.input
+              input.focus()
+              this.value = input.value = String(result)
+
+              if (!this.withoutEnter) {
+                input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+              }
+            } else {
+              requestAnimationFrame(async () => await detect())
+            }
+          } catch (e) {
+            console.warn(e)
+            this.stopScan()
+          }
         }
-      } else {
-        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
-        this.stopScan()
+
+        await detect()
       }
     } catch (err) {
       /*
@@ -229,20 +308,15 @@ export class OxInputBarcode extends OxFormField {
        * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.
        */
       console.warn(err)
-    } finally {
-      this.popup.close()
-
-      this.stopScan()
     }
   }
 
   stopScan() {
-    this.video?.pause()
+    if (this.video) {
+      this.video.pause()
+      this.video.srcObject = null
+    }
 
     this.stream?.getTracks().forEach(track => track.stop())
-    this.reader?.reset()
-
-    delete this.stream
-    delete this.reader
   }
 }

package/src/ox-input-mass-fraction.ts

@@ -131,11 +131,16 @@ export class OxInputMassFraction extends OxFormField {
         display: block;
         text-align: center;
       }
+
+      [right-end] {
+        margin-left: auto;
+      }
     `
   ]
 
   @property({ type: Object }) defaultValue: MassFraction = {}
   @property({ type: Object }) value: MassFraction = {}
+  @property({ type: Boolean, attribute: true }) composable: boolean = false
 
   @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
 
@@ -168,14 +173,18 @@ export class OxInputMassFraction extends OxFormField {
                     list="value-template"
                     ?disabled=${this.disabled}
                   />
-                  <button
-                    class="record-action"
-                    @click=${(e: MouseEvent) => this._delete(e)}
-                    tabindex="-1"
-                    ?disabled=${this.disabled}
-                  >
-                    <mwc-icon>remove</mwc-icon>
-                  </button>
+                  ${this.composable
+                    ? html`
+                        <button
+                          class="record-action"
+                          @click=${(e: MouseEvent) => this._delete(e)}
+                          tabindex="-1"
+                          ?disabled=${this.disabled}
+                        >
+                          <mwc-icon>remove</mwc-icon>
+                        </button>
+                      `
+                    : nothing}
                   <button
                     class="record-action"
                     @click=${(e: MouseEvent) => this._up(e)}
@@ -202,36 +211,41 @@ export class OxInputMassFraction extends OxFormField {
         ? nothing
         : html`
             <div data-record-new>
-              <ox-select
-                data-key
-                placeholder="Fluid"
-                .value=${live('')}
-                @change=${(e: Event) => {
-                  e.stopPropagation()
-                }}
-              >
-                <ox-popup-list with-search> ${this.options} </ox-popup-list>
-              </ox-select>
-
-              <input
-                type="number"
-                data-value
-                placeholder="proportion"
-                min="0"
-                max="1"
-                step="0.01"
-                value=""
-                list="value-template"
-              />
-              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
-              </button>
+              ${this.composable
+                ? html`
+                    <ox-select
+                      data-key
+                      placeholder="Fluid"
+                      .value=${live('')}
+                      @change=${(e: Event) => {
+                        e.stopPropagation()
+                      }}
+                    >
+                      <ox-popup-list with-search> ${this.options} </ox-popup-list>
+                    </ox-select>
+
+                    <input
+                      type="number"
+                      data-value
+                      placeholder="proportion"
+                      min="0"
+                      max="1"
+                      step="0.01"
+                      value=""
+                      list="value-template"
+                    />
+                    <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                      <mwc-icon>add</mwc-icon>
+                    </button>
+                  `
+                : nothing}
               <button
                 title="fill with the values suggested"
                 @click=${() => {
                   this.value = { ...this.defaultValue }
                   this.dispatchChangeEvent()
                 }}
+                right-end
               >
                 <mwc-icon>settings_suggest</mwc-icon>
               </button>

package/stories/ox-input-barcode.stories.ts

@@ -43,6 +43,10 @@ const Template: Story<ArgTypes> = ({
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   <style>
+    #root {
+      height: 500px;
+    }
+
     ox-input-barcode {
       font-size: 80px;
       --input-font: initial;

package/stories/ox-input-mass-fraction.stories.ts

@@ -9,6 +9,7 @@ export default {
     name: { control: 'text' },
     value: { control: 'object' },
     defaultValue: { control: 'object' },
+    composable: { control: 'boolean' },
     disabled: { control: 'boolean' }
   }
 }
@@ -23,6 +24,7 @@ interface ArgTypes {
   name?: string
   value?: object
   defaultValue?: object
+  composable?: boolean
   disabled?: boolean
 }
 
@@ -30,6 +32,7 @@ const Template: Story<ArgTypes> = ({
   name = 'mass-fraction',
   value = {},
   defaultValue = {},
+  composable = true,
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
@@ -46,6 +49,7 @@ const Template: Story<ArgTypes> = ({
     name=${name}
     .value=${value}
     .defaultValue=${defaultValue}
+    ?composable=${composable}
     ?disabled=${disabled}
   >
   </ox-input-mass-fraction>
@@ -54,7 +58,12 @@ const Template: Story<ArgTypes> = ({
 export const Regular = Template.bind({})
 Regular.args = {
   name: 'mass-fraction',
-  value: {},
+  value: {
+    H2O: 0.8,
+    N2O: 0.1,
+    CO2: 0.1
+  },
+  composable: true,
   defaultValue: {
     H2O: 0.8,
     N2O: 0.1,