@operato/ocr 0.2.15 → 0.2.19

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"]}