sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

refactor(signature): fixed pad size, scale to fit mark

Browse Source
This commit is contained in:
enes 2024-11-08 17:33:55 +01:00
parent 7c7a222d4f
commit 6fd5014302
4 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MarkInputs/Signature.module.scss
View File

@ -11,10 +11,10 @@ $padding: 5px;
.relative { .relative {
position: relative; position: relative;
outline: 1px solid black;
} }
.canvas { .canvas {
outline: 1px solid black;
background-color: $body-background-color; background-color: $body-background-color;
cursor: crosshair; cursor: crosshair;

14
src/components/MarkInputs/Signature.tsx
View File

@ -7,7 +7,7 @@ import styles from './Signature.module.scss'
import { MarkRenderSignature } from '../MarkRender/Signature' import { MarkRenderSignature } from '../MarkRender/Signature'
import SignaturePad from 'signature_pad' import SignaturePad from 'signature_pad'
import { Config, optimize } from 'svgo' import { Config, optimize } from 'svgo'
import { SIGNATURE_PAD_OPTIONS } from '../../utils/const' import { SIGNATURE_PAD_OPTIONS, SIGNATURE_PAD_SIZE } from '../../utils/const'
export const MarkInputSignature = ({ export const MarkInputSignature = ({
value, value,
@ -58,10 +58,16 @@ export const MarkInputSignature = ({
return ( return (
<> <>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.relative}> <div
className={styles.relative}
style={{
width: SIGNATURE_PAD_SIZE.width,
height: SIGNATURE_PAD_SIZE.height
}}
>
<canvas <canvas
height={location?.height} width={SIGNATURE_PAD_SIZE.width}
width={location?.width} height={SIGNATURE_PAD_SIZE.height}
ref={canvasRef} ref={canvasRef}
className={styles.canvas} className={styles.canvas}
></canvas> ></canvas>

8
src/components/MarkRender/Signature.tsx
View File

@ -1,12 +1,16 @@
import { MarkRenderProps } from '../../types/mark' import { MarkRenderProps } from '../../types/mark'
import { SIGNATURE_PAD_SIZE } from '../../utils'
import styles from './Signature.module.scss'
export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => { export const MarkRenderSignature = ({ value }: MarkRenderProps) => {
const segments: string[][] = value ? JSON.parse(value) : [] const segments: string[][] = value ? JSON.parse(value) : []
return ( return (
<svg <svg
viewBox={`0 0 ${mark.location.width} ${mark.location.height}`} preserveAspectRatio="xMidYMid meet"
viewBox={`0 0 ${SIGNATURE_PAD_SIZE.width} ${SIGNATURE_PAD_SIZE.height}`}
strokeLinecap="round" strokeLinecap="round"
className={styles.svg}
> >
{segments.map(([path, width]) => ( {segments.map(([path, width]) => (
<path d={path} strokeWidth={width} stroke="black" fill="none" /> <path d={path} strokeWidth={width} stroke="black" fill="none" />

5
src/utils/const.ts
View File

@ -117,3 +117,8 @@ export const SIGNATURE_PAD_OPTIONS = {
minWidth: 0.5, minWidth: 0.5,
maxWidth: 3 maxWidth: 3
} as const } as const
export const SIGNATURE_PAD_SIZE = {
width: 600,
height: 300
}