@operato/input 7.1.1 → 7.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "7.1.1",
+  "version": "7.1.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -57,6 +57,7 @@
     "./ox-input-mass-fraction.js": "./dist/src/ox-input-mass-fraction.js",
     "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js",
     "./ox-input-direction.js": "./dist/src/ox-input-direction.js",
+    "./ox-input-signature.js": "./dist/src/ox-input-signature.js",
     "./ox-input-table-column-config.js": "./dist/src/ox-input-table-column-config.js"
   },
   "typesVersions": {
@@ -175,6 +176,9 @@
       "./ox-input-direction.js": [
         "./dist/src/ox-input-direction.d.ts"
       ],
+      "./ox-input-signature.js": [
+        "./dist/src/ox-input-signature.d.ts"
+      ],
       "./ox-input-table-column-config.js": [
         "./dist/src/ox-input-table-column-config.d.ts"
       ]
@@ -254,5 +258,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ae4071a0210106d56dd9b2499400e44b79d93940"
+  "gitHead": "9e40d6c5fce98a720ef628b576eec76a2283c59e"
 }

package/src/index.ts

@@ -31,3 +31,4 @@ export * from './ox-input-textarea.js'
 export * from './ox-input-direction.js'
 export * from './ox-input-table-column-config.js'
 export * from './ox-input-search.js'
+export * from './ox-input-signature.js'

package/src/ox-input-signature.ts

@@ -0,0 +1,154 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+@customElement('ox-input-signature')
+export class OxInputSignature extends OxFormField {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        place-content: center;
+        border-radius: var(--border-radius);
+        padding: var(--padding-default, 9px);
+        min-height: 100px;
+        text-transform: capitalize;
+
+        border: var(--file-uploader-border);
+        background-color: var(--md-sys-color-background);
+        font: var(--file-uploader-font) !important;
+        color: var(--file-uploader-color);
+
+        overflow: hidden;
+      }
+
+      canvas {
+        width: 100%;
+        border: 1px solid #000;
+      }
+
+      .controls {
+        margin-top: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) isDrawing = false
+  @property({ type: String }) value: string | null = null
+
+  private ctx!: CanvasRenderingContext2D
+  private canvas!: HTMLCanvasElement
+
+  render() {
+    return html`
+      <canvas
+        width="400"
+        height="200"
+        @mousedown=${this.startDrawing}
+        @mouseup=${this.stopDrawing}
+        @mousemove=${this.draw}
+        @mouseleave=${this.stopDrawing}
+        @touchstart=${this.startDrawing}
+        @touchend=${this.stopDrawing}
+        @touchmove=${this.draw}
+      ></canvas>
+
+      ${!this.disabled
+        ? html` <div class="controls">
+            <button @click="${this.clearCanvas}">Clear</button>
+            <button @click="${this.saveSignature}">Save</button>
+          </div>`
+        : nothing}
+    `
+  }
+
+  firstUpdated() {
+    this.canvas = this.shadowRoot!.querySelector('canvas')!
+    this.ctx = this.canvas.getContext('2d')!
+    this.ctx.strokeStyle = '#000'
+    this.ctx.lineWidth = 2
+
+    // 처음 로딩 시 서명 데이터를 캔버스에 표시
+    if (this.value) {
+      this.loadSignature(this.value)
+    }
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    if (changedProperties.has('value') && this.value) {
+      this.loadSignature(this.value)
+    }
+  }
+
+  startDrawing(event: MouseEvent | TouchEvent) {
+    if (this.disabled) {
+      return
+    }
+
+    this.isDrawing = true
+    this.ctx.beginPath()
+    const position = this.getEventPosition(event)
+    this.ctx.moveTo(position.x, position.y)
+  }
+
+  stopDrawing() {
+    this.isDrawing = false
+  }
+
+  draw(event: MouseEvent | TouchEvent) {
+    if (!this.isDrawing) return
+    const position = this.getEventPosition(event)
+    this.ctx.lineTo(position.x, position.y)
+    this.ctx.stroke()
+  }
+
+  clearCanvas() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  saveSignature() {
+    this.value = this.canvas.toDataURL()
+    this._notifyChange()
+  }
+
+  loadSignature(dataUrl: string) {
+    const image = new Image()
+    image.onload = () => {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 이전 내용을 지움
+      this.ctx.drawImage(image, 0, 0) // 이미지를 캔버스에 그림
+    }
+    image.src = dataUrl
+  }
+
+  getEventPosition(event: MouseEvent | TouchEvent) {
+    const rect = this.canvas.getBoundingClientRect()
+
+    // 캔버스의 실제 크기와 CSS 크기 간의 비율을 계산
+    const scaleX = this.canvas.width / rect.width
+    const scaleY = this.canvas.height / rect.height
+
+    // 실제 좌표 계산
+    const isTouchEvent = event instanceof TouchEvent
+    const x = (isTouchEvent ? event.touches[0].clientX - rect.left : (event as MouseEvent).clientX - rect.left) * scaleX
+    const y = (isTouchEvent ? event.touches[0].clientY - rect.top : (event as MouseEvent).clientY - rect.top) * scaleY
+
+    return { x, y }
+  }
+
+  _notifyChange() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+}

package/stories/ox-input-/bsignature.stories.ts

@@ -0,0 +1,71 @@
+import '../src/ox-input-signature.js'
+
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+export default {
+  title: 'ox-input-signature',
+  component: 'ox-input-signature',
+  argTypes: {
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+  name?: string
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ label = 'signature', name = 'signature', disabled }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-signature
+      ?disabled=${disabled}
+      @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}
+    >
+    </ox-input-signature>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}