Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 17:21:41 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: select signature color

Browse Source
This commit is contained in:
Catalin Pit
2024-09-05 12:04:45 +03:00
parent d599ab0630
commit 69bf404b32
9 changed files with 129 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/ui/primitives/signature-pad/signature-pad.tsx
View File

@ -9,6 +9,13 @@ import type { StrokeOptions } from 'perfect-freehand';
import { getStroke } from 'perfect-freehand';
import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@documenso/ui/primitives/select';
import { cn } from '../../lib/utils';
import { getSvgPathFromStroke } from './helper';
@ -36,6 +43,7 @@ export const SignaturePad = ({
const [isPressed, setIsPressed] = useState(false);
const [lines, setLines] = useState<Point[][]>([]);
const [currentLine, setCurrentLine] = useState<Point[]>([]);
const [selectedColor, setSelectedColor] = useState('black');
const perfectFreehandOptions = useMemo(() => {
const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@ -85,6 +93,7 @@ export const SignaturePad = ({
ctx.restore();
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.fillStyle = selectedColor;
lines.forEach((line) => {
const pathData = new Path2D(
@ -129,6 +138,7 @@ export const SignaturePad = ({
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.fillStyle = selectedColor;
newLines.forEach((line) => {
const pathData = new Path2D(
@ -237,7 +247,7 @@ export const SignaturePad = ({
>
<canvas
ref={$el}
className={cn('relative block dark:invert', className)}
className={cn('relative block', className)}
style={{ touchAction: 'none' }}
onPointerMove={(event) => onMouseMove(event)}
onPointerDown={(event) => onMouseDown(event)}
@ -247,6 +257,48 @@ export const SignaturePad = ({
{...props}
/>
<div className="absolute right-2 top-2">
<Select onValueChange={(value) => setSelectedColor(value)}>
<SelectTrigger className="bg-background w-[60px]">
<SelectValue placeholder="Color" />
</SelectTrigger>
<SelectContent align="end">
<SelectItem value="black">
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<Trans>Black</Trans>
</div>
</div>
</SelectItem>
<SelectItem value="red">
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<Trans>Red</Trans>
</div>
</div>
</SelectItem>
<SelectItem value="blue">
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<Trans>Blue</Trans>
</div>
</div>
</SelectItem>
<SelectItem value="green">
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<Trans>Green</Trans>
</div>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="absolute bottom-4 right-4 flex gap-2">
<button
type="button"