@operato/ocr 0.2.9 → 0.2.20

package/src/utils/file-drop-helper.ts

@@ -0,0 +1,62 @@
+/**
+ * judge callback function for FileDropHelper.set
+ */
+type JudgeCallback = () => boolean
+
+/**
+ * file drop assist class
+ */
+export class FileDropHelper {
+  /**
+   * 파일 드롭 영역에서의 file drag&drop과 관련된 이벤트에 대한 처리를 설정한다.
+   * @param dropArea file drag&drop target area
+   * @param [judge] file drag&drop과 관련된 이벤트에 대한 judge callback function
+   */
+  static set(dropArea: HTMLElement, judge?: JudgeCallback) {
+    var preventDefaults = (e: Event) => {
+      if (!judge || judge()) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+
+    var highlight = (e: Event) => {
+      if (!judge || judge()) {
+        dropArea.classList.add('candrop')
+      }
+    }
+
+    var unhighlight = (e: Event) => {
+      if (!judge || judge()) {
+        dropArea.classList.remove('candrop')
+      }
+    }
+
+    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
+      dropArea.addEventListener(event, preventDefaults, false)
+    })
+    ;['dragenter', 'dragover'].forEach(event => {
+      dropArea.addEventListener(event, highlight, false)
+    })
+    ;['dragleave', 'drop'].forEach(event => {
+      dropArea.addEventListener(event, unhighlight, false)
+    })
+
+    dropArea.addEventListener(
+      'drop',
+      e => {
+        if (!judge || judge()) {
+          let dt = e.dataTransfer!
+          let files = dt.files
+
+          dropArea.dispatchEvent(
+            new CustomEvent('file-drop', {
+              detail: [...Array.from(files)]
+            })
+          )
+        }
+      },
+      false
+    )
+  }
+}

package/src/utils/touch-to-mouse-event.ts

@@ -0,0 +1,39 @@
+export function touch2mouse(e: TouchEvent) {
+  e.preventDefault()
+
+  if (e.touches.length > 1 || (e.type == 'touchend' && e.touches.length > 0)) {
+    return
+  }
+
+  var type = ''
+  const touch = e.changedTouches[0]
+
+  switch (e.type) {
+    case 'touchstart':
+      type = 'mousedown'
+      break
+    case 'touchmove':
+      type = 'mousemove'
+      break
+    case 'touchend':
+      type = 'mouseup'
+      break
+  }
+
+  const { screenX, screenY, clientX, clientY } = touch
+  const { ctrlKey, altKey, shiftKey, metaKey } = e
+
+  e.target?.dispatchEvent(
+    new MouseEvent(type, {
+      screenX,
+      screenY,
+      clientX,
+      clientY,
+      ctrlKey,
+      altKey,
+      shiftKey,
+      metaKey,
+      button: 0
+    })
+  )
+}

package/stories/index.stories.ts

@@ -1,60 +1,52 @@
-import { html, TemplateResult } from 'lit';
-import '../src/ocr-helper.js';
+import '../src/ox-ocr-helper.js'
+
+import { html, TemplateResult } from 'lit'
 
 export default {
   title: 'OcrHelper',
-  component: 'ocr-helper',
+  component: 'ox-ocr-helper',
   argTypes: {
     title: { control: 'text' },
     counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
-};
+    textColor: { control: 'color' }
+  }
+}
 
 interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
 }
 
 interface ArgTypes {
-  title?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
+  title?: string
+  counter?: number
+  textColor?: string
+  slot?: TemplateResult
 }
 
-const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <ocr-helper
-    style="--ocr-helper-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
+const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
+  <ocr-helper style="--ocr-helper-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
     ${slot}
   </ocr-helper>
-`;
+`
 
-export const Regular = Template.bind({});
+export const Regular = Template.bind({})
 
-export const CustomTitle = Template.bind({});
+export const CustomTitle = Template.bind({})
 CustomTitle.args = {
-  title: 'My title',
-};
+  title: 'My title'
+}
 
-export const CustomCounter = Template.bind({});
+export const CustomCounter = Template.bind({})
 CustomCounter.args = {
-  counter: 123456,
-};
+  counter: 123456
+}
 
-export const SlottedContent = Template.bind({});
+export const SlottedContent = Template.bind({})
 SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
+  slot: html`<p>Slotted content</p>`
+}
 SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};
+  slot: { table: { disable: true } }
+}

package/test/{ocr-helper.test.ts → ox-ocr-helper.test.ts}

@@ -1,33 +1,34 @@
-import '../src/ocr-helper.js'
+import '../src/ox-ocr-helper.js'
+
+import { html } from 'lit'
 
 import { expect, fixture } from '@open-wc/testing'
 
-import { OcrHelper } from '../src/ocr-helper.js'
-import { html } from 'lit'
+import { OcrHelper } from '../src/ox-ocr-helper.js'
 
 describe('OcrHelper', () => {
   it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture<OcrHelper>(html`<ocr-helper></ocr-helper>`)
+    const el = await fixture<OcrHelper>(html`<ox-ocr-helper></ox-ocr-helper>`)
 
     expect(el.title).to.equal('Hey there')
     // expect(el.counter).to.equal(5)
   })
 
   it('increases the counter on button click', async () => {
-    const el = await fixture<OcrHelper>(html`<ocr-helper></ocr-helper>`)
+    const el = await fixture<OcrHelper>(html`<ox-ocr-helper></ox-ocr-helper>`)
     el.shadowRoot!.querySelector('button')!.click()
 
     // expect(el.counter).to.equal(6)
   })
 
   it('can override the title via attribute', async () => {
-    const el = await fixture<OcrHelper>(html`<ocr-helper title="attribute title"></ocr-helper>`)
+    const el = await fixture<OcrHelper>(html`<ox-ocr-helper title="attribute title"></ox-ocr-helper>`)
 
     expect(el.title).to.equal('attribute title')
   })
 
   it('passes the a11y audit', async () => {
-    const el = await fixture<OcrHelper>(html`<ocr-helper></ocr-helper>`)
+    const el = await fixture<OcrHelper>(html`<ox-ocr-helper></ox-ocr-helper>`)
 
     await expect(el).shadowDom.to.be.accessible()
   })

package/dist/src/ocr-helper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ocr-helper.js","sourceRoot":"","sources":["../../src/ocr-helper.ts"],"names":[],"mappings":"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","sourcesContent":["import './camera-capturer'\nimport '@material/mwc-button'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { gql } from 'graphql-tag'\n\n@customElement('ocr-helper')\nexport class OcrHelper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        min-width: 240px;\n      }\n\n      [buttons] {\n        display: flex;\n        flex-direction: row-reverse;\n      }\n\n      #images {\n        flex: 1;\n        background-color: black;\n        color: white;\n\n        display: flex;\n        flex-direction: column;\n      }\n\n      [tab] {\n        display: flex;\n        flex-direction: row;\n      }\n\n      [i] {\n        min-width: 50px;\n        background-color: black;\n        text-align: center;\n      }\n\n      [i][active] {\n        background-color: red;\n      }\n\n      [image] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n\n      img {\n        style=width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: Array }) _files: any\n  @property({ type: Number }) index: number = 0\n\n  @query('#capturer') fileUploader!: any\n  @query('#result') result!: any\n\n  render() {\n    const files = this._files || []\n    const index = this.index || 0\n    const file = files[index]\n    const image = file && URL.createObjectURL(file)\n    if (image) {\n      requestAnimationFrame(() => URL.revokeObjectURL(image))\n    }\n\n    return html`\n      <div attachment-wrap>\n        <camera-capturer\n          name=\"scanner\"\n          id=\"capturer\"\n          label=\"Capture Images\"\n          accept=\"image/*\"\n          multiple=\"true\"\n          ?hidden=${false}\n          custom-input\n          @files-change=${(e: Event) => this.fileschange(e)}\n        ></camera-capturer>\n      </div>\n      <div buttons>\n        <mwc-button @click=${(e: Event) => this.upload()}>submit</mwc-button>\n        <mwc-button @click=${(e: Event) => this.reset()}>reset</mwc-button>\n      </div>\n      <div id=\"images\">\n        <div\n          tab\n          @click=${(e: MouseEvent) => {\n            const item = (e.target as HTMLElement)?.closest('[i]')\n            const children = (e.currentTarget as HTMLElement)?.querySelectorAll('[i]')\n            if (item) {\n              this.index = Array.from(children).indexOf(item)\n            }\n          }}\n        >\n          ${files.map((file: any, idx: number) => html`<div i ?active=${idx === index}>${idx}</div>`)}\n        </div>\n        <div image>${file ? html` <img src=${URL.createObjectURL(file)} /> ` : html``}</div>\n      </div>\n      <div id=\"result\"></div>\n    `\n  }\n\n  fileschange(e: Event) {\n    this._files = this.fileUploader.files\n  }\n\n  reset() {\n    this.fileUploader.reset()\n    this.result.textContent = ''\n  }\n\n  async upload() {\n    // const response = await client.query({\n    //   query: gql`\n    //     query ocrRequest($images: [Upload!]!) {\n    //       ocrRequest(images: $images)\n    //     }\n    //   `,\n    //   variables: {\n    //     images: this.fileUploader?.files\n    //   },\n    //   context: { hasUpload: true }\n    // })\n    // if (!response.errors) {\n    //   this.result.textContent = response.data.ocrRequest\n    // } else {\n    //   this.result.textContent = 'error'\n    // }\n  }\n}\n"]}

package/dist/test/ocr-helper.test.d.ts

@@ -1 +0,0 @@
-import '../src/ocr-helper.js';

package/dist/test/ocr-helper.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ocr-helper.test.js","sourceRoot":"","sources":["../../test/ocr-helper.test.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,2BAA2B,CAAC,CAAA;QAEpE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,2BAA2B,CAAC,CAAA;QACpE,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,mDAAmD,CAAC,CAAA;QAE5F,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,2BAA2B,CAAC,CAAA;QAEpE,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import '../src/ocr-helper.js'\n\nimport { expect, fixture } from '@open-wc/testing'\n\nimport { OcrHelper } from '../src/ocr-helper.js'\nimport { html } from 'lit'\n\ndescribe('OcrHelper', () => {\n  it('has a default title \"Hey there\" and counter 5', async () => {\n    const el = await fixture<OcrHelper>(html`<ocr-helper></ocr-helper>`)\n\n    expect(el.title).to.equal('Hey there')\n    // expect(el.counter).to.equal(5)\n  })\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<OcrHelper>(html`<ocr-helper></ocr-helper>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    // expect(el.counter).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<OcrHelper>(html`<ocr-helper title=\"attribute title\"></ocr-helper>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<OcrHelper>(html`<ocr-helper></ocr-helper>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}

package/src/camera-capturer.js

@@ -1,184 +0,0 @@
-import { css, html, LitElement } from 'lit-element'
-
-import { FileDropHelper } from '@things-factory/utils'
-
-export class CameraCapturer extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          border-radius: var(--border-radius);
-          text-align: center;
-          padding-bottom: 5px !important;
-          text-transform: capitalize;
-
-          border: var(--file-uploader-border);
-          background-color: var(--main-section-background-color);
-          font: var(--file-uploader-font) !important;
-          color: var(--file-uploader-color);
-        }
-        :host > mwc-icon {
-          color: var(--file-uploader-icon-color);
-        }
-
-        :host(.candrop) {
-          background-color: var(--file-uploader-candrop-background-color);
-        }
-
-        #input-file {
-          display: none;
-        }
-
-        label {
-          position: relative;
-          width: auto;
-          border: none;
-          text-transform: capitalize;
-
-          padding: var(--file-uploader-label-padding);
-          border-radius: var(--file-uploader-label-border-radius);
-          background-color: var(--file-uploader-label-background-color);
-          color: var(--file-uploader-label-color);
-          font: var(--file-uploader-label-font) !important;
-        }
-
-        ul {
-          max-width: 500px;
-          list-style: none;
-          padding: 0;
-        }
-        li {
-          text-align: left;
-
-          padding: var(--file-uploader-li-padding);
-          border-bottom: var(--file-uploader-li-border-bottom);
-        }
-        li mwc-icon {
-          float: right;
-          cursor: pointer;
-          font: var(--file-uploader-li-icon-font);
-          margin: var(--file-uploader-li-icon-margin);
-        }
-        li mwc-icon:hover,
-        li mwc-icon:active {
-          color: var(--file-uploader-li-icon-focus-color);
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      multiple: Boolean,
-      accept: String,
-      label: String,
-      _files: Array
-    }
-  }
-
-  render() {
-    var files = this._files || []
-
-    return html`
-      <mwc-icon>camera</mwc-icon>
-      <span>Capture image<br />or drop files here!</span>
-      <input
-        id="input-file"
-        type="file"
-        accept=${this.accept}
-        ?multiple=${this.multiple}
-        hidden
-        capture="environment"
-        @change=${e => {
-          const fileInput = e.currentTarget
-
-          this._files = [...files, ...Array.from(fileInput.files)]
-
-          this.dispatchEvent(
-            new CustomEvent('files-change', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                files: files
-              }
-            })
-          )
-
-          fileInput.value = null
-        }}
-      />
-      <label for="input-file">${this.label || 'capture image'}</label>
-
-      ${files?.length
-        ? html` <ul>
-            ${files.map(
-              file => html`
-                <li>
-                  - ${file.name}
-                  <mwc-icon
-                    @click=${e => {
-                      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
-                  >
-                </li>
-              `
-            )}
-          </ul>`
-        : ''}
-    `
-  }
-
-  firstUpdated() {
-    FileDropHelper.set(this)
-
-    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
-          }
-        })
-      )
-    })
-  }
-
-  get fileInput() {
-    return this.shadowRoot.querySelector('#input-file')
-  }
-
-  get files() {
-    return this._files
-  }
-
-  reset() {
-    this.fileInput.value = ''
-    this._files = []
-
-    this.dispatchEvent(
-      new CustomEvent('files-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          files: this._files
-        }
-      })
-    )
-  }
-}
-
-customElements.define('camera-capturer', CameraCapturer)