add jpeg download option

.eslintrc.json

@@ -11,6 +11,7 @@
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double", { "avoidEscape": true }],
     "semi": ["error", "always"],
+    "prefer-const": "error",
     "space-before-function-paren": [
       "error",
       {

src/containers/Modals/DownloadModal/index.tsx

@@ -12,7 +12,7 @@ import {
   ColorInput,
   Stack,
 } from "@mantine/core";
-import { toBlob, toPng, toSvg } from "html-to-image";
+import { toBlob, toJpeg, toPng, toSvg } from "html-to-image";
 import { event } from "react-ga";
 import toast from "react-hot-toast";
 import { FiCopy, FiDownload } from "react-icons/fi";
@@ -20,8 +20,20 @@ import { FiCopy, FiDownload } from "react-icons/fi";
 enum Extensions {
   SVG = "svg",
   PNG = "png",
+  JPEG = "jpeg",
 }
 
+const getDownloadFormat = (format: Extensions) => {
+  switch (format) {
+    case Extensions.SVG:
+      return toSvg;
+    case Extensions.PNG:
+      return toPng;
+    case Extensions.JPEG:
+      return toJpeg;
+  }
+};
+
 const swatches = [
   "#B80000",
   "#DB3E00",
@@ -95,9 +107,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
-      let exportImage = extension === Extensions.SVG ? toSvg : toPng;
-
-      const dataURI = await exportImage(imageElement, {
+      const dataURI = await getDownloadFormat(extension)(imageElement, {
         quality: fileDetails.quality,
         backgroundColor: fileDetails.backgroundColor,
       });
@@ -129,11 +139,12 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
           <SegmentedControl
             value={extension}
             onChange={e => setExtension(e as Extensions)}
+            fullWidth
             data={[
               { label: "SVG", value: Extensions.SVG },
               { label: "PNG", value: Extensions.PNG },
+              { label: "JPEG", value: Extensions.JPEG },
             ]}
-            fullWidth
           />
         </Grid.Col>
       </Grid>

src/lib/utils/core/traverse.ts

@@ -245,7 +245,7 @@ export const traverse = ({
   parentType,
 }: Traverse) => {
   const graph = states.graph;
-  let { type, children, value } = objectToTraverse;
+  const { type, children, value } = objectToTraverse;
 
   if (!children) {
     handleNoChildren(value, states, graph, myParentId, parentType, nextType);

src/store/useFile.ts

@@ -76,7 +76,7 @@ const debouncedUpdateJson = debounce(
 const filterArrayAndObjectFields = (obj: object) => {
   const result = {};
 
-  for (let key in obj) {
+  for (const key in obj) {
     if (obj.hasOwnProperty(key)) {
       if (Array.isArray(obj[key]) || typeof obj[key] === "object") {
         result[key] = obj[key];

src/store/useGraph.ts

@@ -89,7 +89,7 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
     );
     const childrenEdges = getChildrenEdges(childrenNodes, get().edges);
 
-    let nodesConnectedToParent = childrenEdges.reduce((nodes: string[], edge) => {
+    const nodesConnectedToParent = childrenEdges.reduce((nodes: string[], edge) => {
       edge.from && !nodes.includes(edge.from) && nodes.push(edge.from);
       edge.to && !nodes.includes(edge.to) && nodes.push(edge.to);
       return nodes;