@operato/ocr 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-ocr-helper.ts

@@ -1,134 +0,0 @@
-import '@material/web/progress/linear-progress.js'
-import '@operato/input'
-import './ox-ocr-result-image'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { copyToClipboard } from '@operato/utils'
-
-import { NOTHING_RESULT, ScanResult } from './type'
-
-@customElement('ox-ocr-helper')
-export class OcrHelper extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        min-width: 240px;
-      }
-
-      [buttons] {
-        display: flex;
-        flex-direction: row-reverse;
-      }
-
-      #images {
-        flex: 1;
-        background-color: var(--md-sys-color-background, #f4f7fb);
-        color: white;
-
-        display: flex;
-        flex-direction: column;
-      }
-
-      [tab] {
-        display: flex;
-        flex-direction: row;
-      }
-
-      [i] {
-        min-width: 50px;
-        background-color: var(--md-sys-color-on-secondary-container, #394e64);
-        border-right: 1px solid rgba(0, 0, 0, 0.2);
-        padding: var(--spacing-small, 4px);
-        text-align: center;
-        height: 1.4em;
-      }
-
-      [i][active] {
-        background-color: var(--md-sys-color-on-primary-container, #22a6a7);
-        font-weight: bold;
-      }
-
-      ox-ocr-result-image {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Array }) result: ScanResult[] = []
-  @property({ type: Array }) files: Array<any> = []
-
-  @state() _index: number = 0
-
-  @query('#capturer') fileUploader!: any
-  @query('#copied') copied!: HTMLElement
-
-  render() {
-    const files = this.files || []
-    const index = this._index || 0
-    const file = files[index]
-    const result = this.result?.[index] || NOTHING_RESULT
-
-    return html`
-      <div attachment-wrap>
-        <ox-input-file
-          id="capturer"
-          label="Capture Images"
-          accept="image/*"
-          multiple="true"
-          ?hidden=${false}
-          @change=${(e: Event) => this.onFilesChange(e)}
-          hide-filelist
-        ></ox-input-file>
-      </div>
-      ${this.files.length > 0 && !(this.result.length > 0)
-        ? html`<md-linear-progress indeterminate></md-linear-progress> `
-        : html``}
-
-      <div id="images">
-        <div
-          tab
-          @click=${(e: MouseEvent) => {
-            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)
-            }
-          }}
-        >
-          ${files.map((file: any, idx: number) => html`<div i ?active=${idx === index}>${idx}</div>`)}
-        </div>
-        <ox-ocr-result-image
-          .file=${file}
-          @selected=${(e: CustomEvent) => this.onSelected(e)}
-          .result=${result}
-        ></ox-ocr-result-image>
-      </div>
-
-      <div id="copied"></div>
-    `
-  }
-
-  reset() {
-    this.fileUploader.reset()
-    this.copied.textContent = ''
-  }
-
-  onFilesChange(e: Event) {
-    this.files = this.fileUploader.files
-    this.result = []
-
-    this.dispatchEvent(
-      new CustomEvent('attached', {
-        detail: this.fileUploader?.files
-      })
-    )
-  }
-
-  async onSelected(e: CustomEvent) {
-    await copyToClipboard(e.detail)
-  }
-}

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

@@ -1,342 +0,0 @@
-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'
-
-function convert2To4(p1: { x: number; y: number }, p2: { x: number; y: number }): { x: number; y: number }[] {
-  const x = p2.x - p1.x
-  const y = p2.y - p1.y
-  const length = Math.sqrt(x * x + y * y)
-  const center = { x: p1.x + x / 2, y: p1.y + y / 2 }
-  const theta = Math.atan2(y, x)
-
-  const newp1 = { x: center.x - length / 2, y: center.y }
-  const newp2 = { x: center.x + length / 2, y: center.y }
-
-  const rectpoints = [
-    { x: newp1.x, y: newp1.y - 10 },
-    { x: newp1.x, y: newp1.y + 10 },
-    { x: newp2.x, y: newp2.y + 10 },
-    { x: newp2.x, y: newp2.y - 10 }
-  ]
-
-  const cos = Math.cos(theta)
-  const sin = Math.sin(theta)
-
-  return rectpoints.map(({ x, y }: { x: number; y: number }) => {
-    return {
-      x: cos * (x - center.x) + sin * (y - center.y) + center.x,
-      y: cos * (y - center.y) - sin * (x - center.x) + center.y
-    }
-  })
-}
-
-@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%;
-      }
-
-      img[noimage] {
-        display: none;
-      }
-
-      [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(--md-sys-color-on-primary-container, #38a25b);
-        padding: var(--padding-default, 9px) var(--spacing-large, 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()} ?noimage=${!this._image} />
-      <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('result')) {
-      this.result.boundaries = this.result.boundaries.map((bound: { x: number; y: number }[]) => {
-        return bound.length > 2 ? bound : convert2To4(bound[0], bound[1])
-      })
-    }
-
-    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('select', {
-        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

@@ -1,13 +0,0 @@
-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

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

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha", "three"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});