Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add BlockEditor component with UI for managing block styles, size, and a draggable panel.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-20 17:07:42 +05:30
parent 5ee22dda3c
commit e377438895
1 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
View File

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