From e377438895d918d971370ef16cca39df505053a5 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Sat, 20 Dec 2025 17:07:42 +0530
Subject: [PATCH] feat: Add BlockEditor component with UI for managing block
 styles, size, and a draggable panel.

---
 .../components/block/BlockEditor.tsx          | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
index 8705283..0626915 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
@@ -112,21 +112,41 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
             }
         };
 
+        const onPointerMove = (ev: PointerEvent) => {
+            if (!draggingRef.current) return;
+            const dx = ev.clientX - startXRef.current;
+            const dy = ev.clientY - startYRef.current;
+            const { width, height } = getPanelDimensions();
+            const maxX = window.innerWidth - width - 8;
+            const maxY = window.innerHeight - height - 8;
+            let nx = startLeftRef.current + dx;
+            let ny = startTopRef.current + dy;
+            if (nx < 0) nx = 0;
+            if (ny < 0) ny = 0;
+            if (nx > maxX) nx = maxX;
+            if (ny > maxY) ny = maxY;
+            setPositionFromPixels(nx, ny);
+        };
+
+        const onPointerUp = () => {
+            draggingRef.current = false;
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
+        };
+
         window.addEventListener("resize", handleResize);
         return () => {
             window.removeEventListener("resize", handleResize);
-            draggingRef.current = false;
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
         };
     }, [editorPosition, setEditorPosition]);
 
     const startDrag = (ev: React.PointerEvent) => {
-        if (ev.detail > 1) return;
-
+        ev.preventDefault();
         const panel = panelRef.current || (blockEditorRef && (blockEditorRef as any).current);
         if (!panel) return;
-
         panel.setPointerCapture?.(ev.pointerId);
-
         draggingRef.current = true;
         startXRef.current = ev.clientX;
         startYRef.current = ev.clientY;
@@ -137,17 +157,15 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
             if (!draggingRef.current) return;
             const dx = e.clientX - startXRef.current;
             const dy = e.clientY - startYRef.current;
-
             const { width, height } = getPanelDimensions();
             const maxX = window.innerWidth - width - 8;
             const maxY = window.innerHeight - height - 8;
-
             let nx = startLeftRef.current + dx;
             let ny = startTopRef.current + dy;
-
-            nx = Math.max(0, Math.min(nx, maxX));
-            ny = Math.max(0, Math.min(ny, maxY));
-
+            if (nx < 0) nx = 0;
+            if (ny < 0) ny = 0;
+            if (nx > maxX) nx = maxX;
+            if (ny > maxY) ny = maxY;
             setPositionFromPixels(nx, ny);
         };
 
@@ -155,7 +173,9 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
             draggingRef.current = false;
             window.removeEventListener("pointermove", onPointerMove);
             window.removeEventListener("pointerup", onPointerUp);
-            panel.releasePointerCapture?.(e.pointerId);
+            try {
+                (panel as Element).releasePointerCapture?.((e as any).pointerId);
+            } catch (err) {}
         };
 
         window.addEventListener("pointermove", onPointerMove);