From b61ebda42b9b4e8332168395ac34a9b82fa67b47 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 16 Dec 2024 13:35:11 +0100
Subject: [PATCH] feat: Add a way to drag text blocks in free canvas layout

---
 app/components/chart-panel.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx
index 1464e37df..81d74e0da 100644
--- a/app/components/chart-panel.tsx
+++ b/app/components/chart-panel.tsx
@@ -11,6 +11,7 @@ import { ChartPanelLayoutTall } from "@/components/chart-panel-layout-tall";
 import { ChartPanelLayoutVertical } from "@/components/chart-panel-layout-vertical";
 import { ChartSelectionTabs } from "@/components/chart-selection-tabs";
 import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-filters";
+import { DragHandle } from "@/components/drag-handle";
 import { Markdown } from "@/components/markdown";
 import { ChartConfig, Layout, LayoutDashboard } from "@/config-types";
 import {
@@ -49,6 +50,7 @@ const useStyles = makeStyles<Theme, { editable?: boolean }>((theme) => ({
     height: "100%",
   },
   textBlockWrapper: {
+    display: "flex",
     padding: "0.75rem",
     cursor: ({ editable }) => (editable ? "pointer" : "default"),
     "&:hover": {
@@ -142,13 +144,28 @@ export const ChartPanelLayout = ({
           // Important, otherwise ReactGrid breaks.
           key={block.key}
           className={classes.textBlockWrapper}
-          onClick={() => handleTextBlockClick(block)}
+          onClick={(e) => {
+            if (e.isPropagationStopped()) {
+              return;
+            }
+
+            handleTextBlockClick(block);
+          }}
         >
-          <Markdown>{block.text[locale]}</Markdown>
+          <div style={{ flexGrow: 1 }}>
+            <Markdown>{block.text[locale]}</Markdown>
+          </div>
+          {layouting ? (
+            <DragHandle
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            />
+          ) : null}
         </div>
       );
     },
-    [classes.textBlockWrapper, handleTextBlockClick, locale]
+    [classes.textBlockWrapper, handleTextBlockClick, layouting, locale]
   );
 
   const renderBlock = useCallback(