@operato/ocr 0.2.10 → 0.2.21

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

@@ -1,12 +1,13 @@
-import './camera-capturer'
 import '@material/mwc-button'
+import './ox-camera-capturer'
+import './ox-ocr-result-image'
 
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { gql } from 'graphql-tag'
+import { NOTHING_RESULT, ScanResult } from './type'
 
-@customElement('ocr-helper')
+@customElement('ox-ocr-helper')
 export class OcrHelper extends LitElement {
   static styles = [
     css`
@@ -23,7 +24,7 @@ export class OcrHelper extends LitElement {
 
       #images {
         flex: 1;
-        background-color: black;
+        background-color: var(--main-section-background-color, #f4f7fb);
         color: white;
 
         display: flex;
@@ -37,46 +38,41 @@ export class OcrHelper extends LitElement {
 
       [i] {
         min-width: 50px;
-        background-color: black;
+        background-color: var(--secondary-color, #394e64);
+        border-right: 1px solid rgba(0, 0, 0, 0.2);
+        padding: var(--padding-narrow, 4px);
         text-align: center;
+        height: 1.4em;
       }
 
       [i][active] {
-        background-color: red;
+        background-color: var(--primary-color, #22a6a7);
+        font-weight: bold;
       }
 
-      [image] {
+      ox-ocr-result-image {
         flex: 1;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      img {
-        style=width: 100%;
       }
     `
   ]
 
-  @property({ type: Array }) _files: any
-  @property({ type: Number }) index: number = 0
+  @property({ type: Array }) result: ScanResult[] = []
+
+  @state() _files: any
+  @state() _index: number = 0
 
   @query('#capturer') fileUploader!: any
-  @query('#result') result!: any
+  @query('#copied') copied!: HTMLElement
 
   render() {
     const files = this._files || []
-    const index = this.index || 0
+    const index = this._index || 0
     const file = files[index]
-    const image = file && URL.createObjectURL(file)
-    if (image) {
-      requestAnimationFrame(() => URL.revokeObjectURL(image))
-    }
+    const result = this.result?.[index] || NOTHING_RESULT
 
     return html`
       <div attachment-wrap>
-        <camera-capturer
+        <ox-camera-capturer
           name="scanner"
           id="capturer"
           label="Capture Images"
@@ -85,10 +81,10 @@ export class OcrHelper extends LitElement {
           ?hidden=${false}
           custom-input
           @files-change=${(e: Event) => this.fileschange(e)}
-        ></camera-capturer>
+        ></ox-camera-capturer>
       </div>
       <div buttons>
-        <mwc-button @click=${(e: Event) => this.upload()}>submit</mwc-button>
+        <mwc-button @click=${(e: Event) => this.submit()}>submit</mwc-button>
         <mwc-button @click=${(e: Event) => this.reset()}>reset</mwc-button>
       </div>
       <div id="images">
@@ -98,15 +94,20 @@ export class OcrHelper extends LitElement {
             const item = (e.target as HTMLElement)?.closest('[i]')
             const children = (e.currentTarget as HTMLElement)?.querySelectorAll('[i]')
             if (item) {
-              this.index = Array.from(children).indexOf(item)
+              this._index = Array.from(children).indexOf(item)
             }
           }}
         >
           ${files.map((file: any, idx: number) => html`<div i ?active=${idx === index}>${idx}</div>`)}
         </div>
-        <div image>${file ? html` <img src=${URL.createObjectURL(file)} /> ` : html``}</div>
+        <ox-ocr-result-image
+          .file=${file}
+          @selected=${(e: CustomEvent) => this.onSelected(e)}
+          .result=${result}
+        ></ox-ocr-result-image>
       </div>
-      <div id="result"></div>
+
+      <div id="copied"></div>
     `
   }
 
@@ -116,25 +117,18 @@ export class OcrHelper extends LitElement {
 
   reset() {
     this.fileUploader.reset()
-    this.result.textContent = ''
+    this.copied.textContent = ''
+  }
+
+  onSelected(e: CustomEvent) {
+    navigator.clipboard.writeText(e.detail)
   }
 
-  async upload() {
-    // const response = await client.query({
-    //   query: gql`
-    //     query ocrRequest($images: [Upload!]!) {
-    //       ocrRequest(images: $images)
-    //     }
-    //   `,
-    //   variables: {
-    //     images: this.fileUploader?.files
-    //   },
-    //   context: { hasUpload: true }
-    // })
-    // if (!response.errors) {
-    //   this.result.textContent = response.data.ocrRequest
-    // } else {
-    //   this.result.textContent = 'error'
-    // }
+  async submit() {
+    this.dispatchEvent(
+      new CustomEvent('attached', {
+        detail: this.fileUploader?.files
+      })
+    )
   }
 }

package/src/ox-ocr-result-image.ts

@@ -0,0 +1,303 @@
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { NOTHING_RESULT, ScanResult } from './type'
+import { touch2mouse } from './utils/touch-to-mouse-event'
+
+@customElement('ox-ocr-result-image')
+export class OcrResultImage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      img {
+        display: block;
+        flex: 1;
+        border: 0;
+        padding: 0;
+        margin: 0;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      [overlay] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        border: 0;
+        padding: 0;
+        margin: 0;
+        opacity: 50%;
+      }
+
+      [notice] {
+        position: absolute;
+        bottom: 0;
+        background-color: var(--primary-color, #38a25b);
+        padding: var(--padding-default, 9px) var(--padding-wide, 15px);
+        opacity: 0.95;
+
+        overflow-wrap: anywhere;
+
+        color: #fff;
+        font-size: 1.5em;
+      }
+    `
+  ]
+
+  @property({ type: Array }) file: any
+  @property({ type: Array }) result: ScanResult = NOTHING_RESULT
+
+  @state() _ratio: { x: number; y: number } = { x: 1, y: 1 }
+  @state() _image!: string
+  @state() _resizeObserver!: ResizeObserver
+  @state() _trails: Array<Array<{ x: number; y: number }>> = []
+  @state() _tracking: boolean = false
+  @state() _selections: Array<number> = []
+  @state() _text: string = ''
+
+  @query('img') _img!: HTMLImageElement
+  @query('[overlay]') _overlay!: HTMLCanvasElement
+
+  render() {
+    return html`
+      <img src=${this._image} @load=${() => this.calculateRatio()} />
+      <canvas overlay></canvas>
+
+      ${this._text ? html` <div notice>${this._text} copied!</div> ` : html``}
+    `
+  }
+
+  renderOverlay() {
+    const { boundaries } = this.result
+
+    const context = this._overlay.getContext('2d')
+    if (!context) {
+      return
+    }
+
+    context.save()
+
+    context.clearRect(0, 0, this._overlay.width, this._overlay.height)
+
+    context.lineWidth = 5
+    context.strokeStyle = 'red'
+    context.fillStyle = 'red'
+    context.lineJoin = 'round'
+    context.lineCap = 'round'
+
+    this._image &&
+      boundaries
+        .map((bounds): Array<{ x: number; y: number }> => {
+          return bounds.map(bound => {
+            return {
+              x: bound.x, //* this._ratio.x,
+              y: bound.y // * this._ratio.y
+            }
+          })
+        })
+        .forEach((bounds, idx) => {
+          context.beginPath()
+          context.moveTo(bounds[0].x, bounds[0].y)
+          context.lineTo(bounds[1].x, bounds[1].y)
+          context.lineTo(bounds[2].x, bounds[2].y)
+          context.lineTo(bounds[3].x, bounds[3].y)
+          context.closePath()
+
+          if (this._selections.includes(idx)) {
+            context.fill()
+          }
+          context.stroke()
+        })
+
+    /* draw trails */
+    if (this._trails && this._trails.length > 0) {
+      context.lineWidth = 10
+      context.strokeStyle = 'blue'
+
+      context.beginPath()
+
+      this._trails.forEach(trail => {
+        if (trail && trail.length > 0) {
+          const { x, y } = trail[0]
+          context.moveTo(x, y)
+
+          trail.slice(1).forEach(point => {
+            const { x, y } = point
+            context.lineTo(x, y)
+          })
+        }
+      })
+
+      context.stroke()
+    }
+
+    context.restore()
+  }
+
+  async calculateRatio() {
+    const { naturalWidth, naturalHeight, offsetWidth, offsetHeight } = this._img
+    const { offsetWidth: overlayWidth, offsetHeight: overlayHeight } = this._overlay
+
+    if (!naturalWidth || !naturalHeight) {
+      return
+    }
+
+    this._ratio = {
+      x: offsetWidth / naturalWidth,
+      y: offsetHeight / naturalHeight
+    }
+
+    this._overlay.setAttribute('width', String(overlayWidth / this._ratio.x))
+    this._overlay.setAttribute('height', String(overlayHeight / this._ratio.y))
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback()
+
+    this._resizeObserver = new ResizeObserver(entries => {
+      this.calculateRatio()
+      this.renderOverlay()
+    })
+
+    await this.updateComplete
+    this._resizeObserver.observe(this._overlay)
+
+    this.calculateRatio()
+
+    this.addEventListener('mousedown', this.onTrailStart.bind(this) as EventListener)
+    this.addEventListener('mouseup', this.onTrailEnd.bind(this) as EventListener)
+    this.addEventListener('mousemove', this.onTrail.bind(this) as EventListener)
+    this.addEventListener('touchstart', touch2mouse as EventListener)
+    this.addEventListener('touchend', touch2mouse as EventListener)
+    this.addEventListener('touchmove', touch2mouse as EventListener)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._resizeObserver.disconnect()
+  }
+
+  reset() {
+    this._selections = []
+    this._trails = []
+    this._text = ''
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('file') || changes.has('result')) {
+      this.reset()
+    }
+
+    if (changes.has('file')) {
+      this._image = this.file && URL.createObjectURL(this.file)
+      if (this._image) {
+        requestAnimationFrame(() => {
+          URL.revokeObjectURL(this._image)
+        })
+
+        await this.updateComplete
+        this.calculateRatio()
+      }
+    }
+
+    this.renderOverlay()
+  }
+
+  findIndex(x: number, y: number): number {
+    const { boundaries } = this.result
+
+    return boundaries.findIndex(path => {
+      var result = false
+
+      path.forEach((p, idx) => {
+        let j = (idx + path.length + 1) % path.length
+
+        let x1 = p.x
+        let y1 = p.y
+        let x2 = path[j].x
+        let y2 = path[j].y
+
+        if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) {
+          result = !result
+        }
+      })
+
+      return result
+    })
+  }
+
+  updateTrails(point: { x: number; y: number }, started: boolean, attached?: boolean) {
+    if (started && !attached) {
+      this.reset()
+    }
+
+    if (started) {
+      this._trails.push([])
+    }
+
+    var trail = this._trails[this._trails.length - 1]
+    if (!trail) {
+      return
+    }
+
+    trail.push(point)
+
+    this._trails.flat().forEach(({ x, y }) => {
+      const idx = this.findIndex(x, y)
+      if (idx === -1) {
+        return
+      }
+
+      if (!this._selections.includes(idx)) {
+        this._selections.push(idx)
+      }
+    })
+
+    this.requestUpdate()
+  }
+
+  onTrailStart(e: MouseEvent) {
+    const { offsetX: x, offsetY: y, button, shiftKey } = e
+
+    if (button !== 0) {
+      return
+    }
+
+    this._tracking = true
+    this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, true, shiftKey)
+  }
+
+  onTrailEnd(e: MouseEvent) {
+    if (!this._tracking) {
+      return
+    }
+
+    this._text = this._selections.map(idx => this.result.texts[idx]).join('')
+
+    this.dispatchEvent(
+      new CustomEvent('selected', {
+        detail: this._text
+      })
+    )
+
+    this._tracking = false
+  }
+
+  onTrail(e: MouseEvent) {
+    const { offsetX: x, offsetY: y } = e
+
+    if (!this._tracking) {
+      return
+    }
+
+    this.updateTrails({ x: x / this._ratio.x, y: y / this._ratio.y }, false)
+  }
+}

package/src/type.ts

@@ -0,0 +1,13 @@
+export type ScanResult = {
+  key_values: {
+    [key: string]: Array<string>
+  }
+  boundaries: Array<Array<{ x: number; y: number }>>
+  texts: Array<string>
+}
+
+export const NOTHING_RESULT = {
+  boundaries: [],
+  key_values: {},
+  texts: []
+}

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/camera-capturer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"camera-capturer.js","sourceRoot":"","sources":["../../src/camera-capturer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from './file-drop-helper'\n\n@customElement('camera-capturer')\nexport class CameraCapturer extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        border-radius: var(--border-radius);\n        text-align: center;\n        padding-bottom: 5px !important;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--main-section-background-color);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n      }\n      :host > mwc-icon {\n        color: var(--file-uploader-icon-color);\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        position: relative;\n        width: auto;\n        border: none;\n        text-transform: capitalize;\n\n        padding: var(--file-uploader-label-padding);\n        border-radius: var(--file-uploader-label-border-radius);\n        background-color: var(--file-uploader-label-background-color);\n        color: var(--file-uploader-label-color);\n        font: var(--file-uploader-label-font) !important;\n      }\n\n      ul {\n        max-width: 500px;\n        list-style: none;\n        padding: 0;\n      }\n      li {\n        text-align: left;\n\n        padding: var(--file-uploader-li-padding);\n        border-bottom: var(--file-uploader-li-border-bottom);\n      }\n      li mwc-icon {\n        float: right;\n        cursor: pointer;\n        font: var(--file-uploader-li-icon-font);\n        margin: var(--file-uploader-li-icon-margin);\n      }\n      li mwc-icon:hover,\n      li mwc-icon:active {\n        color: var(--file-uploader-li-icon-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple?: boolean\n  @property({ type: String }) accept?: string\n  @property({ type: String }) label?: string\n  @property({ type: Array }) _files?: File[]\n\n  render() {\n    var files = this._files || []\n\n    return html`\n      <mwc-icon>camera</mwc-icon>\n      <span>Capture image<br />or drop files here!</span>\n      <input\n        id=\"input-file\"\n        type=\"file\"\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        hidden\n        capture=\"environment\"\n        @change=${(e: Event) => {\n          const fileInput = e.currentTarget as HTMLInputElement\n\n          this._files = [...files, ...Array.from(fileInput.files as FileList)]\n\n          this.dispatchEvent(\n            new CustomEvent('files-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                files: files\n              }\n            })\n          )\n\n          // fileInput.value = null\n          fileInput.files = null\n        }}\n      />\n      <label for=\"input-file\">${this.label || 'capture image'}</label>\n\n      ${files?.length\n        ? html` <ul>\n            ${files.map(\n              file => html`\n                <li>\n                  - ${file.name}\n                  <mwc-icon\n                    @click=${(e: Event) => {\n                      this._files = [...files.splice(files.indexOf(file), 1)]\n                      this.dispatchEvent(\n                        new CustomEvent('files-change', {\n                          bubbles: true,\n                          composed: true,\n                          detail: {\n                            files: this._files\n                          }\n                        })\n                      )\n                    }}\n                    >delete_outline</mwc-icon\n                  >\n                </li>\n              `\n            )}\n          </ul>`\n        : ''}\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this._files = this.multiple ? detail : detail[0] ? [detail[0]] : []\n\n      this.dispatchEvent(\n        new CustomEvent('files-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            files: this._files\n          }\n        })\n      )\n    })\n  }\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  get files() {\n    return this._files\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this._files = []\n\n    this.dispatchEvent(\n      new CustomEvent('files-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          files: this._files\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/file-drop-helper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"file-drop-helper.js","sourceRoot":"","sources":["../../src/file-drop-helper.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,OAAO,cAAc;IACzB;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,QAAqB,EAAE,KAAqB;QACrD,IAAI,eAAe,GAAG,CAAC,CAAQ,EAAE,EAAE;YACjC,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;aACpB;QACH,CAAC,CAAA;QAED,IAAI,SAAS,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC3B,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;aAClC;QACH,CAAC,CAAA;QAED,IAAI,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC7B,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;aACrC;QACH,CAAC,CAEA;QAAA,CAAC,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC9D,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,CAAA;QAC1D,CAAC,CAAC,CACD;QAAA,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACzC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;QACpD,CAAC,CAAC,CACD;QAAA,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,CAAA;QACtD,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,gBAAgB,CACvB,MAAM,EACN,CAAC,CAAC,EAAE;YACF,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE;gBACrB,IAAI,EAAE,GAAG,CAAC,CAAC,YAAa,CAAA;gBACxB,IAAI,KAAK,GAAG,EAAE,CAAC,KAAK,CAAA;gBAEpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,WAAW,EAAE;oBAC3B,MAAM,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC/B,CAAC,CACH,CAAA;aACF;QACH,CAAC,EACD,KAAK,CACN,CAAA;IACH,CAAC;CACF","sourcesContent":["/**\n * judge callback function for FileDropHelper.set\n */\ntype JudgeCallback = () => boolean\n\n/**\n * file drop assist class\n */\nexport class FileDropHelper {\n  /**\n   * 파일 드롭 영역에서의 file drag&drop과 관련된 이벤트에 대한 처리를 설정한다.\n   * @param dropArea file drag&drop target area\n   * @param [judge] file drag&drop과 관련된 이벤트에 대한 judge callback function\n   */\n  static set(dropArea: HTMLElement, judge?: JudgeCallback) {\n    var preventDefaults = (e: Event) => {\n      if (!judge || judge()) {\n        e.preventDefault()\n        e.stopPropagation()\n      }\n    }\n\n    var highlight = (e: Event) => {\n      if (!judge || judge()) {\n        dropArea.classList.add('candrop')\n      }\n    }\n\n    var unhighlight = (e: Event) => {\n      if (!judge || judge()) {\n        dropArea.classList.remove('candrop')\n      }\n    }\n\n    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {\n      dropArea.addEventListener(event, preventDefaults, false)\n    })\n    ;['dragenter', 'dragover'].forEach(event => {\n      dropArea.addEventListener(event, highlight, false)\n    })\n    ;['dragleave', 'drop'].forEach(event => {\n      dropArea.addEventListener(event, unhighlight, false)\n    })\n\n    dropArea.addEventListener(\n      'drop',\n      e => {\n        if (!judge || judge()) {\n          let dt = e.dataTransfer!\n          let files = dt.files\n\n          dropArea.dispatchEvent(\n            new CustomEvent('file-drop', {\n              detail: [...Array.from(files)]\n            })\n          )\n        }\n      },\n      false\n    )\n  }\n}\n"]}