@operato/ocr 8.0.0-alpha.51 → 8.0.0-beta.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/ocr",
   "description": "Webcomponent ocr following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.51",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/input": "^8.0.0-alpha.51",
-    "@operato/popup": "^8.0.0-alpha.51",
+    "@operato/input": "^8.0.0-beta.1",
+    "@operato/popup": "^8.0.0-beta.1",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -78,5 +78,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac94e729e3647d45c921be99f96f4c2e65cef797"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/src/index.ts

@@ -1 +0,0 @@
-export * from './ox-ocr-helper.js'

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