From cff7a545072ea2d2ec1c9c5ce2f7b5b4ebe2620a Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 11 Jun 2024 14:51:35 -0700
Subject: [PATCH] Ensure previews don't wrap text (#39)

---
 frontend/app/block/block.less         |  3 +++
 frontend/app/workspace/workspace.less |  1 +
 frontend/faraday/lib/TileLayout.tsx   | 19 ++-----------------
 frontend/faraday/lib/tilelayout.less  |  3 +++
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index 2a355ae9..456700d8 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -31,10 +31,13 @@
     justify-content: center;
     background-color: var(--panel-bg-color);
     user-select: none;
+    cursor: default;
 
     .block-header-text {
         padding: 0 5px;
         flex-grow: 1;
+        user-select: none;
+        cursor: default;
     }
 
     .close-button {
diff --git a/frontend/app/workspace/workspace.less b/frontend/app/workspace/workspace.less
index 8a1057c4..51dcba8f 100644
--- a/frontend/app/workspace/workspace.less
+++ b/frontend/app/workspace/workspace.less
@@ -47,6 +47,7 @@
     border-bottom: 1px solid var(--border-color);
     flex-shrink: 0;
     user-select: none;
+    cursor: default;
 
     .tab {
         display: flex;
diff --git a/frontend/faraday/lib/TileLayout.tsx b/frontend/faraday/lib/TileLayout.tsx
index 0ce91b8f..6856b929 100644
--- a/frontend/faraday/lib/TileLayout.tsx
+++ b/frontend/faraday/lib/TileLayout.tsx
@@ -252,32 +252,17 @@ const TileNode = <T,>({
     const previewRef = useRef<HTMLDivElement>(null);
 
     // Register the node as a draggable item.
-    const [{ isDragging, dragItem }, drag, dragPreview] = useDrag(
+    const [{ isDragging }, drag, dragPreview] = useDrag(
         () => ({
             type: dragItemType,
             item: () => layoutNode,
             collect: (monitor) => ({
                 isDragging: monitor.isDragging(),
-                dragItem: monitor.getItem<LayoutNode<T>>(),
             }),
         }),
         [layoutNode]
     );
 
-    // TODO: remove debug effect
-    useEffect(() => {
-        if (isDragging) {
-            console.log("drag start", layoutNode.id, layoutNode, dragItem);
-            if (previewRef.current) {
-                toPng(previewRef.current).then((url) => {
-                    const img = new Image();
-                    img.src = url;
-                    img.onload = () => dragPreview(img);
-                });
-            }
-        }
-    }, [isDragging]);
-
     // Generate a preview div using the provided renderPreview function. This will be placed in the DOM so we can render an image from it, but it is pushed out of view so the user will not see it.
     // No-op if not provided, meaning React-DnD will attempt to generate a preview from the DOM, which is very slow.
     const preview = useMemo(() => {
@@ -291,11 +276,11 @@ const TileNode = <T,>({
         );
     }, []);
 
+    // Ensure we only generate the preview image once
     const [previewImageSet, setPreviewImageSet] = useState<boolean>(false);
 
     // When a user first mouses over a node, generate a preview image and set it as the drag preview.
     const generatePreviewImage = useCallback(() => {
-        console.log("generatePreviewImage", layoutNode.id);
         if (!previewImageSet && previewRef.current) {
             toPng(previewRef.current).then((url) => {
                 const img = new Image();
diff --git a/frontend/faraday/lib/tilelayout.less b/frontend/faraday/lib/tilelayout.less
index 431f1dab..9f64698e 100644
--- a/frontend/faraday/lib/tilelayout.less
+++ b/frontend/faraday/lib/tilelayout.less
@@ -46,8 +46,11 @@
         }
 
         .tile-preview-container {
+            height: fit-content !important;
+            width: fit-content !important;
             position: absolute;
             top: 10000px;
+            white-space: nowrap !important;
         }
     }