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

feat: Add core components and styling for the new simulation dashboard editor.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-20 16:39:37 +05:30
parent a30b42d39e
commit 6f15b2fecc
3 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/components/SimulationDashboard/DashboardEditor.tsx
View File

@@ -59,7 +59,6 @@ const DashboardEditor: React.FC = () => {
peekUpdateCommonValue,
peekUpdateDataValue,
peekUpdateDataSource,
} = simulationDashBoardStore();
const [editMode, setEditMode] = useState(false);
@@ -209,6 +208,9 @@ const DashboardEditor: React.FC = () => {
const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement;
if (blockElement && elementToDrag) {
// Disable transitions during drag
elementToDrag.classList.add("no-transition");
const blockRect = blockElement.getBoundingClientRect();
const elementRect = elementToDrag.getBoundingClientRect();
const newX = e.clientX - blockRect.left - elementDragOffset.x;
@@ -233,6 +235,9 @@ const DashboardEditor: React.FC = () => {
const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement;
if (editorElement && blockToDrag) {
// Disable transitions during drag
blockToDrag.classList.add("no-transition");
const editorRect = editorElement.getBoundingClientRect();
const newX = e.clientX - editorRect.left - blockDragOffset.x;
const newY = e.clientY - editorRect.top - blockDragOffset.y;
@@ -248,6 +253,9 @@ const DashboardEditor: React.FC = () => {
if (resizingElement && selectedBlock) {
const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement;
if (elementToResize) {
// Disable transitions during resize
elementToResize.classList.add("no-transition");
const deltaX = e.clientX - resizeStart.x;
const deltaY = e.clientY - resizeStart.y;
@@ -280,6 +288,9 @@ const DashboardEditor: React.FC = () => {
} else if (resizingBlock) {
const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement;
if (blockToResize) {
// Disable transitions during resize
blockToResize.classList.add("no-transition");
const deltaX = e.clientX - resizeStart.x;
const deltaY = e.clientY - resizeStart.y;
@@ -328,6 +339,9 @@ const DashboardEditor: React.FC = () => {
const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement;
if (blockElement && elementToDrag) {
// Re-enable transitions
elementToDrag.classList.remove("no-transition");
const computedStyle = window.getComputedStyle(elementToDrag);
const x = parseFloat(computedStyle.left);
const y = parseFloat(computedStyle.top);
@@ -341,6 +355,9 @@ const DashboardEditor: React.FC = () => {
const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement;
if (blockToDrag) {
// Re-enable transitions
blockToDrag.classList.remove("no-transition");
const computedStyle = window.getComputedStyle(blockToDrag);
const x = parseFloat(computedStyle.left);
const y = parseFloat(computedStyle.top);
@@ -355,6 +372,9 @@ const DashboardEditor: React.FC = () => {
const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
if (elementToResize && blockElement) {
// Re-enable transitions
elementToResize.classList.remove("no-transition");
const computedStyle = window.getComputedStyle(elementToResize);
const width = parseFloat(computedStyle.width);
const height = parseFloat(computedStyle.height);
@@ -367,6 +387,9 @@ const DashboardEditor: React.FC = () => {
// Update backend for block resize
const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement;
if (blockToResize) {
// Re-enable transitions
blockToResize.classList.remove("no-transition");
const computedStyle = window.getComputedStyle(blockToResize);
const width = parseFloat(computedStyle.width);
const height = parseFloat(computedStyle.height);
@@ -638,7 +661,6 @@ const DashboardEditor: React.FC = () => {
/>
)}
</div>
</div>
);
};

2
app/src/components/SimulationDashboard/components/element/ElementComponent.tsx
View File

@@ -49,7 +49,7 @@ const ElementComponent: React.FC<ElementComponentProps> = ({ element, blockId, e
>
<ElementContent element={element} resolvedData={resolveElementValue(element)} />
{editMode && (
{editMode && isSelected && (
<>
<div className="resize-handle" onMouseDown={(e) => handleElementResizeStart(element.elementUuid, e)}>
<ResizeIcon />

12
app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
View File

@@ -12,7 +12,13 @@
left: 0;
pointer-events: none;
*> {
// Utility class to disable transitions during drag/resize
.no-transition,
.no-transition * {
transition: none !important;
}
* > {
pointer-events: auto;
}
@@ -479,9 +485,7 @@
.colorValue {
width: 100%;
background: linear-gradient(90.85deg,
rgba(240, 228, 255, 0.3) 3.6%,
rgba(211, 174, 253, 0.3) 96.04%);
background: linear-gradient(90.85deg, rgba(240, 228, 255, 0.3) 3.6%, rgba(211, 174, 253, 0.3) 96.04%);
text-align: center;
padding: 4px 0;
border-radius: 100px;