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/actions/actionExport.tsx

@@ -42,6 +42,26 @@ export const actionChangeExportBackground = register({
   ),
 });
 
+export const actionChangeShouldAddWatermark = register({
+  name: "changeShouldAddWatermark",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, shouldAddWatermark: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <label>
+      <input
+        type="checkbox"
+        checked={appState.shouldAddWatermark}
+        onChange={(event) => updateData(event.target.checked)}
+      />{" "}
+      {t("labels.addWatermark")}
+    </label>
+  ),
+});
+
 export const actionSaveScene = register({
   name: "saveScene",
   perform: (elements, appState, value) => {

src/actions/types.ts

@@ -39,6 +39,7 @@ export type ActionName =
   | "finalize"
   | "changeProjectName"
   | "changeExportBackground"
+  | "changeShouldAddWatermark"
   | "saveScene"
   | "loadScene"
   | "duplicateSelection"

src/appState.ts

@@ -17,6 +17,7 @@ export function getDefaultAppState(): AppState {
     elementType: "selection",
     elementLocked: false,
     exportBackground: true,
+    shouldAddWatermark: false,
     currentItemStrokeColor: oc.black,
     currentItemBackgroundColor: "transparent",
     currentItemFillStyle: "hachure",
@@ -73,6 +74,7 @@ export function clearAppStatePropertiesForHistory(
   return {
     selectedElementIds: appState.selectedElementIds,
     exportBackground: appState.exportBackground,
+    shouldAddWatermark: appState.shouldAddWatermark,
     currentItemStrokeColor: appState.currentItemStrokeColor,
     currentItemBackgroundColor: appState.currentItemBackgroundColor,
     currentItemFillStyle: appState.currentItemFillStyle,

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,
         });
       }
     };

src/data/index.ts

@@ -294,12 +294,14 @@ export async function exportCanvas(
     viewBackgroundColor,
     name,
     scale = 1,
+    shouldAddWatermark,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
     name: string;
     scale?: number;
+    shouldAddWatermark: boolean;
   },
 ) {
   if (elements.length === 0) {
@@ -310,6 +312,7 @@ export async function exportCanvas(
       exportBackground,
       viewBackgroundColor,
       exportPadding,
+      shouldAddWatermark,
     });
     if (type === "svg") {
       await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
@@ -327,6 +330,7 @@ export async function exportCanvas(
     viewBackgroundColor,
     exportPadding,
     scale,
+    shouldAddWatermark,
   });
   tempCanvas.style.display = "none";
   document.body.appendChild(tempCanvas);

src/index-node.ts

@@ -63,6 +63,7 @@ const canvas = exportToCanvas(
   {
     exportBackground: true,
     viewBackgroundColor: "#ffffff",
+    shouldAddWatermark: false,
     scale: 1,
   },
   createCanvas,

src/locales/en.json

@@ -23,6 +23,7 @@
     "fontFamily": "Font family",
     "onlySelected": "Only selected",
     "withBackground": "With Background",
+    "addWatermark": "Add \"Made with Excalidraw\"",
     "handDrawn": "Hand-drawn",
     "normal": "Normal",
     "code": "Code",
@@ -52,7 +53,8 @@
     "createRoom": "Share a live-collaboration session",
     "duplicateSelection": "Duplicate",
     "untitled": "Untitled",
-    "name": "Name"
+    "name": "Name",
+    "madeWithExcalidraw": "Made with Excalidraw"
   },
   "buttons": {
     "clearReset": "Reset the canvas",

src/scene/export.ts

@@ -1,10 +1,13 @@
 import rough from "roughjs/bin/rough";
+import oc from "open-color";
+import { newTextElement } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
-import { distance, SVG_NS } from "../utils";
+import { distance, SVG_NS, measureText } from "../utils";
 import { normalizeScroll } from "./scroll";
 import { AppState } from "../types";
+import { t } from "../i18n";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -16,11 +19,13 @@ export function exportToCanvas(
     exportPadding = 10,
     viewBackgroundColor,
     scale = 1,
+    shouldAddWatermark,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     scale?: number;
     viewBackgroundColor: string;
+    shouldAddWatermark: boolean;
   },
   createCanvas: (width: number, height: number) => any = function (
     width,
@@ -32,15 +37,24 @@ export function exportToCanvas(
     return tempCanvas;
   },
 ) {
+  let sceneElements = elements;
+  if (shouldAddWatermark) {
+    const [, , maxX, maxY] = getCommonBounds(elements);
+    sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];
+  }
+
   // calculate smallest area to fit the contents in
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);
   const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding * 2;
+  const height =
+    distance(minY, maxY) +
+    exportPadding +
+    (shouldAddWatermark ? 0 : exportPadding);
 
   const tempCanvas: any = createCanvas(width, height);
 
   renderScene(
-    elements,
+    sceneElements,
     appState,
     null,
     scale,
@@ -62,6 +76,7 @@ export function exportToCanvas(
       renderOptimizations: false,
     },
   );
+
   return tempCanvas;
 }
 
@@ -71,16 +86,27 @@ export function exportToSvg(
     exportBackground,
     exportPadding = 10,
     viewBackgroundColor,
+    shouldAddWatermark,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
+    shouldAddWatermark: boolean;
   },
 ): SVGSVGElement {
+  let sceneElements = elements;
+  if (shouldAddWatermark) {
+    const [, , maxX, maxY] = getCommonBounds(elements);
+    sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];
+  }
+
   // calculate canvas dimensions
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);
   const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding * 2;
+  const height =
+    distance(minY, maxY) +
+    exportPadding +
+    (shouldAddWatermark ? 0 : exportPadding);
 
   // initialze SVG root
   const svgRoot = document.createElementNS(SVG_NS, "svg");
@@ -116,9 +142,30 @@ export function exportToSvg(
   }
 
   const rsvg = rough.svg(svgRoot);
-  renderSceneToSvg(elements, rsvg, svgRoot, {
+  renderSceneToSvg(sceneElements, rsvg, svgRoot, {
     offsetX: -minX + exportPadding,
     offsetY: -minY + exportPadding,
   });
+
   return svgRoot;
 }
+
+function getWatermarkElement(maxX: number, maxY: number) {
+  const text = t("labels.madeWithExcalidraw");
+  const font = "16px Virgil";
+  const { width: textWidth } = measureText(text, font);
+
+  return newTextElement({
+    text,
+    font,
+    textAlign: "center",
+    x: maxX - textWidth / 2,
+    y: maxY + 16,
+    strokeColor: oc.gray[5],
+    backgroundColor: "transparent",
+    fillStyle: "hachure",
+    strokeWidth: 1,
+    roughness: 1,
+    opacity: 100,
+  });
+}

src/types.ts

@@ -25,6 +25,7 @@ export type AppState = {
   elementType: typeof SHAPES[number]["value"];
   elementLocked: boolean;
   exportBackground: boolean;
+  shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
   currentItemFillStyle: string;