From bff58e7cfad579b6d0cf3b3a8174e414c009e322 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 17 Feb 2026 12:09:32 +0100
Subject: [PATCH] feat(web): add logo watermark to shared diagrams

---
 apps/web/src/components/ShareModal.tsx | 27 ++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/ShareModal.tsx b/apps/web/src/components/ShareModal.tsx
index d8ecad7..b76a9bd 100644
--- a/apps/web/src/components/ShareModal.tsx
+++ b/apps/web/src/components/ShareModal.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { Modal } from "./Modal";
 import { Copy, Check, Share2, Download } from "lucide-react";
 import { useState, useEffect } from "react";
+import IconBlack from "../assets/logo/Icon Black Transparent.svg";
 
 interface ShareModalProps {
   isOpen: boolean;
@@ -45,6 +46,9 @@ export function ShareModal({
       });
       const svgUrl = URL.createObjectURL(svgBlob);
 
+      const logoImg = new Image();
+      logoImg.src = IconBlack.src || IconBlack;
+
       img.onload = () => {
         const scale = 3; // 3x scaling for sharpness
         canvas.width = img.width * scale;
@@ -56,8 +60,27 @@ export function ShareModal({
         // Draw image with scaling
         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-        setImagePreview(canvas.toDataURL("image/png"));
-        URL.revokeObjectURL(svgUrl);
+        // Add Watermark
+        const drawWatermark = () => {
+          const logoSize = Math.min(canvas.width, canvas.height) * 0.1; // 10% of smallest dimension
+          const padding = logoSize * 0.4;
+          const x = canvas.width - logoSize - padding;
+          const y = canvas.height - logoSize - padding;
+
+          ctx.save();
+          ctx.globalAlpha = 0.1; // Subtle watermark
+          ctx.drawImage(logoImg, x, y, logoSize, logoSize);
+          ctx.restore();
+
+          setImagePreview(canvas.toDataURL("image/png"));
+          URL.revokeObjectURL(svgUrl);
+        };
+
+        if (logoImg.complete) {
+          drawWatermark();
+        } else {
+          logoImg.onload = drawWatermark;
+        }
       };
 
       img.src = svgUrl;