feat: Enhance DashboardEditor with element handling and selection management
This commit is contained in:
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user