Diff meta key

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;
+};

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();
@@ -140,7 +141,8 @@ 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
+        shapeElem.classList.add("new-shape");
       });
 
       toRemove.forEach((id) => {
@@ -173,6 +175,8 @@ function useDiffStyling(
       Array.from(highlightedElementsRef.current)
         .filter((element) => !activeHighlightedElements.has(element))
         .forEach((element) => {
+          console.log("reset");
+          element.classList.remove("new-shape");
           element.style.filter = "";
         });
       highlightedElementsRef.current = activeHighlightedElements;