feat: add SVGO, enable signature

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/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,

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