From ebaaff33b50a5236c3f015e033118532b2a2fd62 Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 7 Mar 2024 15:14:21 +0100
Subject: [PATCH 1/2] Allow to toggle diff with alt key

---
 src/patchwork/components/Demo4/Demo4.tsx | 36 +++++++++++++++++++++++-
 src/tldraw/components/TLDraw.tsx         |  4 +--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/patchwork/components/Demo4/Demo4.tsx b/src/patchwork/components/Demo4/Demo4.tsx
index cce43e29..8879c8e1 100644
--- a/src/patchwork/components/Demo4/Demo4.tsx
+++ b/src/patchwork/components/Demo4/Demo4.tsx
@@ -165,9 +165,11 @@ export const Demo4: React.FC<{
 
   const actorIdToAuthor = useActorIdToAuthorMap(docUrl);
 
+  const isAltKeyPressed = useAltKeyPressed();
   const showDiff =
     (showChangesFlag && selectedBranch.type === "branch") ||
-    isHoveringYankToBranchOption;
+    isHoveringYankToBranchOption ||
+    isAltKeyPressed;
 
   // init branch metadata when the doc loads if it doesn't have it already
   useEffect(() => {
@@ -1140,3 +1142,35 @@ const BezierCurve: React.FC<BezierCurveProps> = ({
     <path d={combinedPathData} stroke={color} fill="none" strokeWidth="1" />
   );
 };
+
+const useAltKeyPressed = () => {
+  const [isAltPressed, setIsAltPressed] = useState(false);
+
+  useEffect(() => {
+    // Function to set isAltPressed to true when the Alt key is down
+    const handleKeyDown = (event) => {
+      if (event.altKey) {
+        setIsAltPressed(true);
+      }
+    };
+
+    // Function to set isAltPressed to false when the Alt key is released
+    const handleKeyUp = (event) => {
+      if (event.key === "Alt") {
+        setIsAltPressed(false);
+      }
+    };
+
+    // Adding event listeners
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    // Cleanup function to remove event listeners
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []); // Empty dependency array means the effect runs only once after the initial render
+
+  return isAltPressed;
+};
diff --git a/src/tldraw/components/TLDraw.tsx b/src/tldraw/components/TLDraw.tsx
index 28573e49..417c51e9 100644
--- a/src/tldraw/components/TLDraw.tsx
+++ b/src/tldraw/components/TLDraw.tsx
@@ -140,7 +140,7 @@ function useDiffStyling(
         }
 
         highlightedElementsRef.current.add(shapeElem);
-        shapeElem.style.filter = "drop-shadow(0 0 0.75rem green)";
+        shapeElem.style.filter = "drop-shadow(0 0 0.75rem green)"; // add style for "new" element here
       });
 
       toRemove.forEach((id) => {
@@ -173,7 +173,7 @@ function useDiffStyling(
       Array.from(highlightedElementsRef.current)
         .filter((element) => !activeHighlightedElements.has(element))
         .forEach((element) => {
-          element.style.filter = "";
+          element.style.filter = ""; // reset style of "new" elements here
         });
       highlightedElementsRef.current = activeHighlightedElements;
     }, 100);

From ec09ef57f724025615f62f73eef01320b2cf448e Mon Sep 17 00:00:00 2001
From: Paul Sonnentag <paul.sonnentag@googlemail.com>
Date: Thu, 7 Mar 2024 15:28:08 +0100
Subject: [PATCH 2/2] Add new-shape class

---
 src/tldraw/components/TLDraw.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/tldraw/components/TLDraw.tsx b/src/tldraw/components/TLDraw.tsx
index 417c51e9..adf95589 100644
--- a/src/tldraw/components/TLDraw.tsx
+++ b/src/tldraw/components/TLDraw.tsx
@@ -108,6 +108,7 @@ function useDiffStyling(
       store.store.remove(Array.from(tempShapeIdsRef.current));
       highlightedElementsRef.current.forEach((element) => {
         element.style.filter = "";
+        element.classList.remove("new-shape");
       });
 
       tempShapeIdsRef.current = new Set();
@@ -141,6 +142,7 @@ function useDiffStyling(
 
         highlightedElementsRef.current.add(shapeElem);
         shapeElem.style.filter = "drop-shadow(0 0 0.75rem green)"; // add style for "new" element here
+        shapeElem.classList.add("new-shape");
       });
 
       toRemove.forEach((id) => {
@@ -173,7 +175,9 @@ function useDiffStyling(
       Array.from(highlightedElementsRef.current)
         .filter((element) => !activeHighlightedElements.has(element))
         .forEach((element) => {
-          element.style.filter = ""; // reset style of "new" elements here
+          console.log("reset");
+          element.classList.remove("new-shape");
+          element.style.filter = "";
         });
       highlightedElementsRef.current = activeHighlightedElements;
     }, 100);