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

Refactor simulation styles and update API services

Browse Source 
- Refactored SCSS styles for simulation player and dashboard components to improve readability and maintainability.
- Changed property names in Block and UIElement types for clarity.
- Implemented getDashBoardBlocksApi and upsertDashBoardBlocksApi services for fetching and updating dashboard blocks.
- Removed unnecessary transition property in simulation dashboard styles.
This commit is contained in:
Jerald-Golden-B
2025-10-17 10:27:43 +05:30
parent 48c7007431
commit ba615cefed
16 changed files with 1016 additions and 956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app/src/store/simulation/useSimulationDashBoardStore.ts
View File

@@ -9,6 +9,11 @@ interface SimulationDashboardStore {
selectedBlockId: string | null;
selectedElementId: string | null;
// Subscription management
subscribe: (callback: () => void) => () => void;
_notifySubscribers: () => void;
saveBlocks: () => void;
// Block operations
addBlock: () => void;
removeBlock: (blockId: string) => void;
@@ -39,6 +44,7 @@ interface SimulationDashboardStore {
updateElementData: (blockId: string, elementId: string, updates: Partial<DataBinding>) => void;
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
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;
@@ -56,6 +62,8 @@ interface SimulationDashboardStore {
hasElement: (blockId: string, elementId: string) => boolean;
}
const subscribers = new Set<() => void>();
export const createSimulationDashboardStore = () => {
return create<SimulationDashboardStore>()(
immer((set, get) => ({
@@ -63,11 +71,32 @@ export const createSimulationDashboardStore = () => {
selectedBlockId: null,
selectedElementId: null,
subscribe: (callback: () => void) => {
subscribers.add(callback);
return () => {
subscribers.delete(callback);
};
},
_notifySubscribers: () => {
subscribers.forEach((callback) => {
try {
callback();
} catch (error) {
console.error("Error in store subscriber:", error);
}
});
},
saveBlocks: () => {
get()._notifySubscribers();
},
// Block operations
addBlock: () => {
set((state) => {
const newBlock: Block = {
id: MathUtils.generateUUID(),
blockUuid: MathUtils.generateUUID(),
style: {
backgroundColor: "rgba(50, 50, 50, 0.8)",
backdropFilter: "blur(10px)",
@@ -90,7 +119,7 @@ export const createSimulationDashboardStore = () => {
removeBlock: (blockId) => {
set((state) => {
state.blocks = state.blocks.filter((block) => block.id !== blockId);
state.blocks = state.blocks.filter((block) => block.blockUuid !== blockId);
if (state.selectedBlockId === blockId) {
state.selectedBlockId = null;
}
@@ -99,7 +128,7 @@ export const createSimulationDashboardStore = () => {
updateBlock: (blockId, updates) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
Object.assign(block, updates);
}
@@ -123,7 +152,7 @@ export const createSimulationDashboardStore = () => {
// Block styling and positioning
updateBlockStyle: (blockId, newStyle) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.style = { ...block.style, ...newStyle };
}
@@ -132,7 +161,7 @@ export const createSimulationDashboardStore = () => {
updateBlockSize: (blockId, size) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.size = size;
}
@@ -141,7 +170,7 @@ export const createSimulationDashboardStore = () => {
updateBlockPosition: (blockId, position) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.position = position;
}
@@ -150,7 +179,7 @@ export const createSimulationDashboardStore = () => {
updateBlockPositionType: (blockId, positionType) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.positionType = positionType;
}
@@ -159,7 +188,7 @@ export const createSimulationDashboardStore = () => {
updateBlockZIndex: (blockId, zIndex) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.zIndex = zIndex;
}
@@ -169,10 +198,10 @@ export const createSimulationDashboardStore = () => {
// Element operations
addElement: (blockId, type, graphType) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const newElement: UIElement = {
id: MathUtils.generateUUID(),
elementUuid: MathUtils.generateUUID(),
type: type,
graphType,
graphTitle: graphType ? `${graphType.charAt(0).toUpperCase() + graphType.slice(1)} Chart` : undefined,
@@ -226,9 +255,9 @@ export const createSimulationDashboardStore = () => {
removeElement: (blockId, elementId) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.elements = block.elements.filter((el) => el.id !== elementId);
block.elements = block.elements.filter((el) => el.elementUuid !== elementId);
if (state.selectedElementId === elementId) {
state.selectedElementId = null;
}
@@ -238,9 +267,9 @@ export const createSimulationDashboardStore = () => {
updateElement: (blockId, elementId, updates) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
Object.assign(element, updates);
}
@@ -251,9 +280,9 @@ export const createSimulationDashboardStore = () => {
// Element styling and positioning
updateElementStyle: (blockId, elementId, newStyle) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.style = { ...element.style, ...newStyle };
}
@@ -263,9 +292,9 @@ export const createSimulationDashboardStore = () => {
updateElementSize: (blockId, elementId, size) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.size = size;
}
@@ -275,9 +304,9 @@ export const createSimulationDashboardStore = () => {
updateElementPosition: (blockId, elementId, position) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.position = position;
}
@@ -287,9 +316,9 @@ export const createSimulationDashboardStore = () => {
updateElementPositionType: (blockId, elementId, positionType) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.positionType = positionType;
}
@@ -299,9 +328,9 @@ export const createSimulationDashboardStore = () => {
updateElementZIndex: (blockId, elementId, zIndex) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.zIndex = zIndex;
}
@@ -312,9 +341,9 @@ export const createSimulationDashboardStore = () => {
// Element data operations
updateElementData: (blockId, elementId, updates) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element?.data) {
element.data = { ...element.data, ...updates };
}
@@ -324,9 +353,9 @@ export const createSimulationDashboardStore = () => {
updateGraphData: (blockId, elementId, newData) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.graphData = newData;
}
@@ -336,9 +365,9 @@ export const createSimulationDashboardStore = () => {
updateGraphTitle: (blockId, elementId, title) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.id === elementId);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.graphTitle = title;
}
@@ -346,6 +375,21 @@ export const createSimulationDashboardStore = () => {
});
},
updateGraphType: (blockId, elementId, graphType) => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element && element.type === "graph") {
element.graphType = graphType;
element.graphTitle = `${graphType.charAt(0).toUpperCase() + graphType.slice(1)} Chart`;
element.graphData = defaultGraphData;
}
}
});
},
// Selection and hover management
setSelectedBlock: (blockId) => {
set((state) => {
@@ -366,16 +410,16 @@ export const createSimulationDashboardStore = () => {
// Element swapping
swapElements: (blockId, elementId1, elementId2) => {
set((state) => {
const block = state.blocks.find((b) => b.id === blockId);
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.elements = block.elements.map((el) => {
if (el.id === elementId1) {
const targetElement = block.elements.find((e) => e.id === elementId2);
return targetElement ? { ...targetElement, id: elementId1 } : el;
if (el.elementUuid === elementId1) {
const targetElement = block.elements.find((e) => e.elementUuid === elementId2);
return targetElement ? { ...targetElement, elementUuid: elementId1 } : el;
}
if (el.id === elementId2) {
const sourceElement = block.elements.find((e) => e.id === elementId1);
return sourceElement ? { ...sourceElement, id: elementId2 } : el;
if (el.elementUuid === elementId2) {
const sourceElement = block.elements.find((e) => e.elementUuid === elementId1);
return sourceElement ? { ...sourceElement, elementUuid: elementId2 } : el;
}
return el;
});
@@ -385,37 +429,37 @@ export const createSimulationDashboardStore = () => {
// Helper functions
getBlockById: (blockId) => {
return get().blocks.find((b) => b.id === blockId);
return get().blocks.find((b) => b.blockUuid === blockId);
},
getElementById: (blockId, elementId) => {
const block = get().blocks.find((b) => b.id === blockId);
return block?.elements.find((el) => el.id === elementId);
const block = get().blocks.find((b) => b.blockUuid === blockId);
return block?.elements.find((el) => el.elementUuid === elementId);
},
getSelectedBlock: () => {
const { selectedBlockId, blocks } = get();
return selectedBlockId ? blocks.find((b) => b.id === selectedBlockId) : undefined;
return selectedBlockId ? blocks.find((b) => b.blockUuid === selectedBlockId) : undefined;
},
getSelectedElement: () => {
const { selectedElementId, selectedBlockId, blocks } = get();
if (!selectedElementId || !selectedBlockId) return undefined;
const block = blocks.find((b) => b.id === selectedBlockId);
return block?.elements.find((el) => el.id === selectedElementId);
const block = blocks.find((b) => b.blockUuid === selectedBlockId);
return block?.elements.find((el) => el.elementUuid === selectedElementId);
},
hasBlock: (blockId) => {
return get().blocks.some((b) => b.id === blockId);
return get().blocks.some((b) => b.blockUuid === blockId);
},
hasElement: (blockId, elementId) => {
const block = get().blocks.find((b) => b.id === blockId);
return block?.elements.some((el) => el.id === elementId) || false;
const block = get().blocks.find((b) => b.blockUuid === blockId);
return block?.elements.some((el) => el.elementUuid === elementId) || false;
},
}))
);
};
export type SimulationDashboardStoreType = ReturnType<typeof createSimulationDashboardStore>;
export type SimulationDashboardStoreType = ReturnType<typeof createSimulationDashboardStore>;