Add optional watermark on export (#1365)

* Add optional watermark on export

* Address init PR feedback

* Add SVG export with refactoring

* Update export.ts

* Move addWatermark to appState

* Update snapshots

* Fit watermark in small scene

* Rename watermark things

Co-authored-by: Lipis <lipiridis@gmail.com>

src/components/ExportDialog.tsx

@@ -48,7 +48,11 @@ function ExportModal({
   const [scale, setScale] = useState(defaultScale);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
-  const { exportBackground, viewBackgroundColor } = appState;
+  const {
+    exportBackground,
+    viewBackgroundColor,
+    shouldAddWatermark,
+  } = appState;
 
   const exportedElements = exportSelected
     ? getSelectedElements(elements, appState)
@@ -65,6 +69,7 @@ function ExportModal({
       viewBackgroundColor,
       exportPadding,
       scale,
+      shouldAddWatermark,
     });
     previewNode?.appendChild(canvas);
     return () => {
@@ -77,6 +82,7 @@ function ExportModal({
     exportPadding,
     viewBackgroundColor,
     scale,
+    shouldAddWatermark,
   ]);
 
   return (
@@ -150,6 +156,7 @@ function ExportModal({
             </label>
           </div>
         )}
+        {actionManager.renderAction("changeShouldAddWatermark")}
       </Stack.Col>
     </div>
   );

src/components/LayerUI.tsx

@@ -79,6 +79,7 @@ const LayerUI = ({
           name: appState.name,
           viewBackgroundColor: appState.viewBackgroundColor,
           scale,
+          shouldAddWatermark: appState.shouldAddWatermark,
         });
       }
     };