Export to pdf

src/components/canvas.jsx

@@ -168,10 +168,7 @@ export default function Canvas(props) {
         return t;
       });
       setAreas(updatedAreas);
-    } else if (
-      dragging[0] === ObjectType.NOTE &&
-      dragging[1] >= 0
-    ) {
+    } else if (dragging[0] === ObjectType.NOTE && dragging[1] >= 0) {
       setNotes((prev) =>
         prev.map((t) => {
           if (t.id === dragging[1]) {
@@ -357,11 +354,9 @@ export default function Canvas(props) {
           onMouseMove={handleMouseMove}
           onMouseDown={handleMouseDown}
           onMouseUp={handleMouseUp}
+          className="w-full h-full bg-white"
           style={{
-            width: "100%",
-            height: "100%",
             cursor: cursor,
-            backgroundColor: "white",
           }}
         >
           <defs>

src/components/control_panel.jsx

@@ -38,6 +38,7 @@ import { AddTable, AddArea, AddNote } from "./custom_icons";
 import { defaultTableTheme, defaultNoteTheme } from "../data/data";
 import CodeMirror from "@uiw/react-codemirror";
 import { json } from "@codemirror/lang-json";
+import jsPDF from "jspdf";
 
 export default function ControlPanel(props) {
   const MODAL = {
@@ -151,7 +152,28 @@ export default function ControlPanel(props) {
               setVisible(MODAL.IMG);
             },
           },
-          { IFRAME: () => {} },
+          {
+            PDF: () => {
+              const canvas = document.getElementById("canvas");
+              toJpeg(canvas).then(
+                function (dataUrl) {
+                  const doc = new jsPDF("l", "px", [
+                    canvas.offsetWidth,
+                    canvas.offsetHeight,
+                  ]);
+                  doc.addImage(
+                    dataUrl,
+                    "jpeg",
+                    0,
+                    0,
+                    canvas.offsetWidth,
+                    canvas.offsetHeight
+                  );
+                  doc.save(`${exportData.filename}.pdf`);
+                }
+              );
+            },
+          },
         ],
         function: () => {},
       },