feat: Enhance DashboardEditor with element handling and selection management

This commit is contained in:
2025-12-16 12:08:21 +05:30
parent 2f12b35951
commit 0c51c22457
6 changed files with 77 additions and 63 deletions

View File

@@ -6,14 +6,18 @@ import { Block, UIElement, ExtendedCSSProperties } from "../../types/exportedTyp
interface SimulationDashboardStore {
blocks: Block[];
selectedBlockId: string | null;
selectedElementId: string | null;
selectedBlock: string | null;
selectedElement: string | null;
// Subscription management
subscribe: (callback: () => void) => () => void;
_notifySubscribers: () => void;
saveBlocks: () => void;
// Selection and hover management
setSelectedBlock: (blockId: string | null) => void;
setSelectedElement: (elementId: string | null) => void;
// Block operations
addBlock: () => void;
removeBlock: (blockId: string) => void;
@@ -46,10 +50,6 @@ interface SimulationDashboardStore {
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void;
// Selection and hover management
setSelectedBlock: (blockId: string | null) => void;
setSelectedElement: (elementId: string | null) => void;
// Element swapping
swapElements: (blockId: string, elementId1: string, elementId2: string) => void;
@@ -68,8 +68,8 @@ export const createSimulationDashboardStore = () => {
return create<SimulationDashboardStore>()(
immer((set, get) => ({
blocks: [],
selectedBlockId: null,
selectedElementId: null,
selectedBlock: null,
selectedElement: null,
subscribe: (callback: () => void) => {
subscribers.add(callback);
@@ -92,6 +92,23 @@ export const createSimulationDashboardStore = () => {
get()._notifySubscribers();
},
// Selection and hover management
setSelectedBlock: (blockId) => {
set((state) => {
state.selectedBlock = blockId;
// Clear element selection when selecting a block
if (blockId) {
state.selectedElement = null;
}
});
},
setSelectedElement: (elementId) => {
set((state) => {
state.selectedElement = elementId;
});
},
// Block operations
addBlock: () => {
set((state) => {
@@ -120,8 +137,8 @@ export const createSimulationDashboardStore = () => {
removeBlock: (blockId) => {
set((state) => {
state.blocks = state.blocks.filter((block) => block.blockUuid !== blockId);
if (state.selectedBlockId === blockId) {
state.selectedBlockId = null;
if (state.selectedBlock === blockId) {
state.selectedBlock = null;
}
});
},
@@ -138,8 +155,8 @@ export const createSimulationDashboardStore = () => {
clearBlocks: () => {
set((state) => {
state.blocks = [];
state.selectedBlockId = null;
state.selectedElementId = null;
state.selectedBlock = null;
state.selectedElement = null;
});
},
@@ -329,8 +346,8 @@ export const createSimulationDashboardStore = () => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.elements = block.elements.filter((el) => el.elementUuid !== elementId);
if (state.selectedElementId === elementId) {
state.selectedElementId = null;
if (state.selectedElement === elementId) {
state.selectedElement = null;
}
}
});
@@ -461,23 +478,6 @@ export const createSimulationDashboardStore = () => {
});
},
// Selection and hover management
setSelectedBlock: (blockId) => {
set((state) => {
state.selectedBlockId = blockId;
// Clear element selection when selecting a block
if (blockId) {
state.selectedElementId = null;
}
});
},
setSelectedElement: (elementId) => {
set((state) => {
state.selectedElementId = elementId;
});
},
// Element swapping
swapElements: (blockId, elementId1, elementId2) => {
set((state) => {
@@ -509,16 +509,16 @@ export const createSimulationDashboardStore = () => {
},
getSelectedBlock: () => {
const { selectedBlockId, blocks } = get();
return selectedBlockId ? blocks.find((b) => b.blockUuid === selectedBlockId) : undefined;
const { selectedBlock, blocks } = get();
return selectedBlock ? blocks.find((b) => b.blockUuid === selectedBlock) : undefined;
},
getSelectedElement: () => {
const { selectedElementId, selectedBlockId, blocks } = get();
if (!selectedElementId || !selectedBlockId) return undefined;
const { selectedElement, selectedBlock, blocks } = get();
if (!selectedElement || !selectedBlock) return undefined;
const block = blocks.find((b) => b.blockUuid === selectedBlockId);
return block?.elements.find((el) => el.elementUuid === selectedElementId);
const block = blocks.find((b) => b.blockUuid === selectedBlock);
return block?.elements.find((el) => el.elementUuid === selectedElement);
},
hasBlock: (blockId) => {