From 9a33088c786773515584400b8cdd9a0a16524c97 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Tue, 29 Apr 2025 19:39:09 +0000
Subject: [PATCH 1/2] feat: embeds stay locked while using Hand tool

- Updated LockIndicator to accept appState as a prop, allowing it to respond to hand tool activation.
- Improved visibility logic for the lock icon based on scrolling and hand tool state.
- Added new styles for lock icon text in CustomEmbeddableRenderer.scss to enhance user feedback during interactions.
---
 .../src/CustomEmbeddableRenderer.scss         |  9 +++
 src/frontend/src/CustomEmbeddableRenderer.tsx | 70 +++++++++++++++----
 2 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.scss b/src/frontend/src/CustomEmbeddableRenderer.scss
index a8ee3c6..b6acc0f 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.scss
+++ b/src/frontend/src/CustomEmbeddableRenderer.scss
@@ -35,6 +35,15 @@
         &.visible {
             opacity: 1;
         }
+        
+        &__text {
+            margin-left: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            font-family: 'Roboto', sans-serif;
+            color: #afafaf;
+            opacity: 0.7;
+        }
     }
 
     &__content {
diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 20792d7..98f2bbe 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -73,7 +73,7 @@ export const renderCustomEmbeddable = (
       <div className="custom-embed">
         <div className="custom-embed__title-bar">
           <div className="custom-embed__title-bar__text">{title}</div>
-          <LockIndicator />
+          <LockIndicator appState={appState} />
         </div>
         <div className="custom-embed__content">
           {content}
@@ -87,7 +87,7 @@ export const renderCustomEmbeddable = (
       <div className="custom-embed">
         <div className="custom-embed__title-bar">
           <div className="custom-embed__title-bar__text">{title}</div>
-          <LockIndicator />
+          <LockIndicator appState={appState} />
         </div>
         <div className="custom-embed__content">
           <iframe className="custom-embed__content--iframe" src={element.link} />
@@ -97,13 +97,15 @@ export const renderCustomEmbeddable = (
   }
 };
 
-// Lock icon component that shows when scrolling
-const LockIndicator = () => {
-  const [visible, setVisible] = useState(false);
+// Lock icon component that shows when scrolling or when hand tool is active
+const LockIndicator = ({ appState }: { appState?: AppState }) => {
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [isHandToolActive, setIsHandToolActive] = useState(false);
   
+  // Effect to handle scroll state changes
   useEffect(() => {
     const handleScrollStateChange = (event: CustomEvent<{ isScrolling: boolean }>) => {
-      setVisible(event.detail.isScrolling);
+      setIsScrolling(event.detail.isScrolling);
     };
     
     // Add event listener for scroll state changes
@@ -115,15 +117,46 @@ const LockIndicator = () => {
     };
   }, []);
   
+  // Separate effect to handle hand tool state changes
+  useEffect(() => {
+    // Check hand tool state
+    const handToolActive = appState?.activeTool?.type === "hand";
+    const wasHandToolActive = isHandToolActive;
+    setIsHandToolActive(handToolActive);
+    
+    // If hand tool was active but is now deactivated
+    if (wasHandToolActive && !handToolActive) {
+      // Force reset of global scrolling state
+      globalIsScrolling = false;
+      document.documentElement.style.setProperty('--embeddable-pointer-events', 'all');
+      
+      // Dispatch event to update all components
+      scrollStateChangeEvent.detail.isScrolling = false;
+      document.dispatchEvent(scrollStateChangeEvent);
+      
+      // Update component state
+      setIsScrolling(false);
+    } else if (handToolActive) {
+      // Set pointer-events to none when hand tool is active
+      document.documentElement.style.setProperty('--embeddable-pointer-events', 'none');
+    }
+  }, [appState]);
+  
+  // Determine if the lock should be visible
+  const visible = isScrolling || isHandToolActive;
+  
   return (
     <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
       <Lock size={16} />
+      <span className={`custom-embed__lock-icon__text ${isHandToolActive ? 'visible' : ''}`}>
+        (Hand tool)
+      </span>
     </div>
   );
 };
 
-// Track scrolling state
-let isScrolling = false;
+// Track scrolling state globally
+let globalIsScrolling = false;
 // Create a custom event for scrolling state changes
 const scrollStateChangeEvent = new CustomEvent('scrollStateChange', { detail: { isScrolling: false } });
 
@@ -137,7 +170,7 @@ const getDebouncedScrollEnd = (() => {
     if (currentDebounceTime !== lastDebounceTime || !debouncedFn) {
       lastDebounceTime = currentDebounceTime;
       debouncedFn = debounce(() => {
-        isScrolling = false;
+        globalIsScrolling = false;
         // Set pointer-events back to all when not scrolling
         document.documentElement.style.setProperty('--embeddable-pointer-events', 'all');
         // Dispatch event with updated scrolling state
@@ -153,16 +186,23 @@ export const lockEmbeddables = (appState?: AppState) => {
   // Get the debounce time from settings, with fallback to default
   const debounceTime = appState?.pad?.userSettings?.embedLockDebounceTime || 350;
   
-  if (!isScrolling) {
-    isScrolling = true;
-    // Set pointer-events to none during scrolling
+  // Check if hand tool is active
+  const handToolActive = appState?.activeTool?.type === "hand";
+  
+  if (!globalIsScrolling) {
+    globalIsScrolling = true;
+    // Set pointer-events to none during scrolling or when hand tool is active
     document.documentElement.style.setProperty('--embeddable-pointer-events', 'none');
     // Dispatch event with updated scrolling state
     scrollStateChangeEvent.detail.isScrolling = true;
     document.dispatchEvent(scrollStateChangeEvent);
   }
   
-  // Get the current debounced function and call it
-  const debouncedScrollEnd = getDebouncedScrollEnd(debounceTime);
-  debouncedScrollEnd();
+  // If hand tool is not active, use debounce to unlock after scrolling stops
+  // If hand tool is active, we don't want to unlock
+  if (!handToolActive) {
+    // Get the current debounced function and call it
+    const debouncedScrollEnd = getDebouncedScrollEnd(debounceTime);
+    debouncedScrollEnd();
+  }
 };

From c9dd1a0d16dab11cf4b87d3490989f4ffe0b8818 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Tue, 29 Apr 2025 23:44:06 +0000
Subject: [PATCH 2/2] fix: improve visibility logic for Hand tool in
 LockIndicator

- Updated LockIndicator component to conditionally render the Hand tool text based on the isHandToolActive state, enhancing user feedback during interactions.
---
 src/frontend/src/CustomEmbeddableRenderer.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 98f2bbe..0ff3d34 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -148,9 +148,11 @@ const LockIndicator = ({ appState }: { appState?: AppState }) => {
   return (
     <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
       <Lock size={16} />
-      <span className={`custom-embed__lock-icon__text ${isHandToolActive ? 'visible' : ''}`}>
-        (Hand tool)
-      </span>
+      {isHandToolActive && (
+        <span className="custom-embed__lock-icon__text visible">
+          (Hand tool)
+        </span>
+      )}
     </div>
   );
 };