Merge pull request 'feat: signature squiggle' (#237) from feat/signature into staging

Reviewed-on: #237
Reviewed-by: b <b@4j.cx>

package.json

@@ -57,6 +57,7 @@
     "react-singleton-hook": "^4.0.1",
     "react-toastify": "10.0.4",
     "redux": "5.0.1",
+    "svgo": "^3.3.2",
     "tseep": "1.2.1"
   },
   "devDependencies": {
@@ -66,6 +67,7 @@
     "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
+    "@types/svgo": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
@@ -78,6 +80,7 @@
     "ts-css-modules-vite-plugin": "1.0.20",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-tsconfig-paths": "4.3.2"
   },
   "lint-staged": {

src/components/MarkFormField/index.tsx

@@ -7,13 +7,12 @@ import {
   isCurrentValueLast
 } from '../../utils'
 import React, { useState } from 'react'
+import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
 
 interface MarkFormFieldProps {
   currentUserMarks: CurrentUserMark[]
   handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
-  handleSelectedMarkValueChange: (
+  handleSelectedMarkValueChange: (value: string) => void
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void
   handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   selectedMark: CurrentUserMark
   selectedMarkValue: string
@@ -53,6 +52,8 @@ const MarkFormField = ({
   }
   const toggleActions = () => setDisplayActions(!displayActions)
   const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
+  const { input: MarkInputComponent } =
+    MARK_TYPE_CONFIG[selectedMark.mark.type] || {}
   return (
     <div className={styles.container}>
       <div className={styles.trigger}>
@@ -83,12 +84,14 @@ const MarkFormField = ({
           </div>
           <div className={styles.inputWrapper}>
             <form onSubmit={(e) => handleFormSubmit(e)}>
-              <input
+              {typeof MarkInputComponent !== 'undefined' && (
-                className={styles.input}
+                <MarkInputComponent
-                placeholder={markLabel}
-                onChange={handleSelectedMarkValueChange}
                   value={selectedMarkValue}
+                  placeholder={markLabel}
+                  handler={handleSelectedMarkValueChange}
+                  userMark={selectedMark}
                 />
+              )}
               <div className={styles.actionsBottom}>
                 <button type="submit" className={styles.submitButton}>
                   NEXT

src/components/MarkInputs/Signature.module.scss

@@ -0,0 +1,44 @@
+@import '../../styles/colors.scss';
+
+$padding: 5px;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $padding;
+}
+
+.relative {
+  position: relative;
+}
+
+.canvas {
+  outline: 1px solid black;
+  background-color: $body-background-color;
+  cursor: crosshair;
+
+  // Disable panning/zooming when touching canvas element
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.absolute {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.reset {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: $padding;
+  color: $primary-main;
+
+  &:hover {
+    color: $primary-dark;
+  }
+}

src/components/MarkInputs/Signature.tsx

@@ -0,0 +1,101 @@
+import { useRef, useState } from 'react'
+import { MarkInputProps } from '../../types/mark'
+import { getOptimizedPaths, optimizeSVG } from '../../utils'
+import { faEraser } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from './Signature.module.scss'
+import { MarkRenderSignature } from '../MarkRender/Signature'
+
+export const MarkInputSignature = ({
+  value,
+  handler,
+  userMark
+}: MarkInputProps) => {
+  const location = userMark?.mark.location
+
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [drawing, setDrawing] = useState(false)
+  const [paths, setPaths] = useState<string[]>(value ? JSON.parse(value) : [])
+
+  function update() {
+    if (location && paths) {
+      if (paths.length) {
+        const optimizedSvg = optimizeSVG(location, paths)
+        const extractedPaths = getOptimizedPaths(optimizedSvg)
+        handler(JSON.stringify(extractedPaths))
+      } else {
+        handler('')
+      }
+    }
+  }
+
+  const handlePointerDown = (event: React.PointerEvent) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.beginPath()
+    ctx?.moveTo(x, y)
+    setPaths([...paths, `M ${x} ${y}`])
+    setDrawing(true)
+  }
+  const handlePointerUp = () => {
+    setDrawing(false)
+    update()
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
+  }
+  const handlePointerMove = (event: React.PointerEvent) => {
+    if (!drawing) return
+    const ctx = canvasRef.current?.getContext('2d')
+    const rect = canvasRef.current?.getBoundingClientRect()
+    const x = event.clientX - rect!.left
+    const y = event.clientY - rect!.top
+
+    ctx?.lineTo(x, y)
+    ctx?.stroke()
+
+    // Collect the path data
+    setPaths((prevPaths) => {
+      const newPaths = [...prevPaths]
+      newPaths[newPaths.length - 1] += ` L ${x} ${y}`
+      return newPaths
+    })
+  }
+
+  const handleReset = () => {
+    setPaths([])
+    setDrawing(false)
+    update()
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
+  }
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <div className={styles.relative}>
+          <canvas
+            height={location?.height}
+            width={location?.width}
+            ref={canvasRef}
+            className={styles.canvas}
+            onPointerDown={handlePointerDown}
+            onPointerUp={handlePointerUp}
+            onPointerMove={handlePointerMove}
+            onPointerOut={handlePointerUp}
+          ></canvas>
+          {typeof userMark?.mark !== 'undefined' && (
+            <div className={styles.absolute}>
+              <MarkRenderSignature value={value} mark={userMark.mark} />
+            </div>
+          )}
+          <div className={styles.reset}>
+            <FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/MarkInputs/Text.tsx

@@ -0,0 +1,19 @@
+import { MarkInputProps } from '../../types/mark'
+import styles from '../MarkFormField/style.module.scss'
+
+export const MarkInputText = ({
+  value,
+  handler,
+  placeholder
+}: MarkInputProps) => {
+  return (
+    <input
+      className={styles.input}
+      placeholder={placeholder}
+      onChange={(e) => {
+        handler(e.currentTarget.value)
+      }}
+      value={value}
+    />
+  )
+}

src/components/MarkRender/Signature.tsx

@@ -0,0 +1,13 @@
+import { MarkRenderProps } from '../../types/mark'
+
+export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
+  const paths = value ? JSON.parse(value) : []
+
+  return (
+    <svg viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}>
+      {paths.map((path: string) => (
+        <path d={path} stroke="black" fill="none" />
+      ))}
+    </svg>
+  )
+}

src/components/PDFView/PdfMarkItem.tsx

@@ -4,6 +4,7 @@ import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
 import { forwardRef } from 'react'
 import { npubToHex } from '../../utils/nostr.ts'
+import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
 
 interface PdfMarkItemProps {
   userMark: CurrentUserMark
@@ -27,6 +28,8 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
     const getMarkValue = () =>
       isEdited() ? selectedMarkValue : userMark.currentValue
     const { from } = useScale()
+    const { render: MarkRenderComponent } =
+      MARK_TYPE_CONFIG[userMark.mark.type] || {}
     return (
       <div
         ref={ref}
@@ -47,7 +50,9 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
           fontSize: inPx(from(pageWidth, FONT_SIZE))
         }}
       >
-        {getMarkValue()}
+        {typeof MarkRenderComponent !== 'undefined' && (
+          <MarkRenderComponent value={getMarkValue()} mark={userMark.mark} />
+        )}
       </div>
     )
   }

src/components/PDFView/PdfMarking.tsx

@@ -117,8 +117,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
   //   setCurrentUserMarks(updatedCurrentUserMarks)
   // }
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+  const handleChange = (value: string) => setSelectedMarkValue(value)
-    setSelectedMarkValue(event.target.value)
 
   return (
     <>

src/components/getMarkComponents.tsx

@@ -0,0 +1,16 @@
+import { MarkType } from '../types/drawing'
+import { MarkConfigs } from '../types/mark'
+import { MarkInputSignature } from './MarkInputs/Signature'
+import { MarkInputText } from './MarkInputs/Text'
+import { MarkRenderSignature } from './MarkRender/Signature'
+
+export const MARK_TYPE_CONFIG: MarkConfigs = {
+  [MarkType.TEXT]: {
+    input: MarkInputText,
+    render: ({ value }) => <>{value}</>
+  },
+  [MarkType.SIGNATURE]: {
+    input: MarkInputSignature,
+    render: MarkRenderSignature
+  }
+}

src/pages/verify/index.tsx

@@ -55,6 +55,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { upgradeAndVerifyTimestamp } from '../../utils/opentimestamps.ts'
 import _ from 'lodash'
+import { MARK_TYPE_CONFIG } from '../../components/getMarkComponents.tsx'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -114,6 +115,8 @@ const SlimPdfView = ({
                           alt={`page ${i} of ${file.name}`}
                         />
                         {marks.map((m) => {
+                          const { render: MarkRenderComponent } =
+                            MARK_TYPE_CONFIG[m.type] || {}
                           return (
                             <div
                               className={`file-mark ${styles.mark}`}
@@ -129,7 +132,9 @@ const SlimPdfView = ({
                                 fontSize: inPx(from(page.width, FONT_SIZE))
                               }}
                             >
-                              {m.value}
+                              {typeof MarkRenderComponent !== 'undefined' && (
+                                <MarkRenderComponent value={m.value} mark={m} />
+                              )}
                             </div>
                           )
                         })}

src/types/mark.ts

@@ -28,3 +28,24 @@ export interface MarkRect {
   width: number
   height: number
 }
+
+export interface MarkInputProps {
+  value: string
+  handler: (value: string) => void
+  placeholder?: string
+  userMark?: CurrentUserMark
+}
+
+export interface MarkRenderProps {
+  value?: string
+  mark: Mark
+}
+
+export interface MarkConfig {
+  input: React.FC<MarkInputProps>
+  render?: React.FC<MarkRenderProps>
+}
+
+export type MarkConfigs = {
+  [key in MarkType]?: MarkConfig
+}

src/utils/mark.ts

@@ -1,4 +1,4 @@
-import { CurrentUserMark, Mark } from '../types/mark.ts'
+import { CurrentUserMark, Mark, MarkLocation } from '../types/mark.ts'
 import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
@@ -24,6 +24,7 @@ import {
   faStamp,
   faTableCellsLarge
 } from '@fortawesome/free-solid-svg-icons'
+import { Config, optimize } from 'svgo'
 
 /**
  * Takes in an array of Marks already filtered by User.
@@ -158,6 +159,11 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
     icon: faT,
     label: 'Text'
   },
+  {
+    identifier: MarkType.SIGNATURE,
+    icon: faSignature,
+    label: 'Signature'
+  },
   {
     identifier: MarkType.FULLNAME,
     icon: faIdCard,
@@ -170,12 +176,6 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
     label: 'Job Title',
     isComingSoon: true
   },
-  {
-    identifier: MarkType.SIGNATURE,
-    icon: faSignature,
-    label: 'Signature',
-    isComingSoon: true
-  },
   {
     identifier: MarkType.DATETIME,
     icon: faClock,
@@ -266,6 +266,24 @@ export const getToolboxLabelByMarkType = (markType: MarkType) => {
   return DEFAULT_TOOLBOX.find((t) => t.identifier === markType)?.label
 }
 
+export const optimizeSVG = (location: MarkLocation, paths: string[]) => {
+  const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${location.width}" height="${location.height}">${paths.map((path) => `<path d="${path}" stroke="black" fill="none" />`).join('')}</svg>`
+  const optimizedSVG = optimize(svgContent, {
+    multipass: true, // Optimize multiple times if needed
+    floatPrecision: 2 // Adjust precision
+  } as Config)
+
+  return optimizedSVG.data
+}
+
+export const getOptimizedPaths = (svgString: string) => {
+  const regex = / d="([^"]*)"/g
+  const matches = [...svgString.matchAll(regex)]
+  const pathValues = matches.map((match) => match[1])
+
+  return pathValues
+}
+
 export {
   getCurrentUserMarks,
   filterMarksByPubkey,

src/utils/pdf.ts

@@ -1,4 +1,4 @@
-import { PdfPage } from '../types/drawing.ts'
+import { MarkType, PdfPage } from '../types/drawing.ts'
 import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 import * as PDFJS from 'pdfjs-dist'
@@ -132,9 +132,17 @@ export const addMarks = async (
 
   for (let i = 0; i < pages.length; i++) {
     if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
-      marksPerPage[i]?.forEach((mark) =>
+      marksPerPage[i]?.forEach((mark) => {
+        switch (mark.type) {
+          case MarkType.SIGNATURE:
+            drawSignatureText(mark, pages[i])
+            break
+
+          default:
             drawMarkText(mark, pages[i], robotoFont)
-      )
+            break
+        }
+      })
     }
   }
 
@@ -245,3 +253,19 @@ async function embedFont(pdf: PDFDocument) {
   const embeddedFont = await pdf.embedFont(fontBytes)
   return embeddedFont
 }
+
+const drawSignatureText = (mark: Mark, page: PDFPage) => {
+  const { location } = mark
+  const { height } = page.getSize()
+
+  // Convert the mark location origin (top, left) to PDF origin (bottom, left)
+  const x = location.left
+  const y = height - location.top
+
+  if (hasValue(mark)) {
+    const paths = JSON.parse(mark.value!)
+    paths.forEach((d: string) => {
+      page.drawSvgPath(d, { x, y })
+    })
+  }
+}

vite.config.ts

@@ -1,9 +1,16 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    nodePolyfills({
+      include: ['os']
+    })
+  ],
   build: {
     target: 'ES2022'
   }