feat: Implement undo and redo functionality for 2D scene controls

- Added useRedoHandler to manage redo actions, including socket communication for wall, floor, zone, and aisle updates.
- Added useUndoHandler to manage undo actions, reversing the effects of previous actions with corresponding socket updates.
- Created UndoRedo2DControls component to handle keyboard shortcuts for undo (Ctrl+Z) and redo (Ctrl+Y).
- Established a Zustand store (useUndoRedo2DStore) to maintain undo and redo stacks, with methods for pushing, popping, and peeking actions.
This commit is contained in:
2025-07-29 17:20:34 +05:30
parent 253b3db2ed
commit fcd924eb31
15 changed files with 1701 additions and 301 deletions

View File

@@ -22,8 +22,9 @@ function WallCreator() {
const { toolMode } = useToolMode();
const { activeLayer } = useActiveLayer();
const { socket } = useSocketStore();
const { wallStore } = useSceneContext();
const { wallStore, undoRedo2DStore } = useSceneContext();
const { addWall, getWallPointById, removeWall, getWallByPoints } = wallStore();
const { push2D } = undoRedo2DStore();
const drag = useRef(false);
const isLeftMouseDown = useRef(false);
const { selectedVersionStore } = useVersionContext();
@@ -91,6 +92,7 @@ function WallCreator() {
const closestPoint = new THREE.Vector3().lerpVectors(point1Vec, point2Vec, t);
removeWall(wall.wallUuid);
if (projectId) {
// API
@@ -142,6 +144,7 @@ function WallCreator() {
wallHeight: wallHeight,
decals: []
}
addWall(wall2);
// API
@@ -171,8 +174,36 @@ function WallCreator() {
wallHeight: wallHeight,
decals: []
}
addWall(wall3);
push2D({
type: 'Draw',
actions: [
{
actionType: 'Lines-Create',
points: [
{
type: 'Wall',
lineData: wall3,
timeStamp: new Date().toISOString(),
}, {
type: 'Wall',
lineData: wall2,
timeStamp: new Date().toISOString(),
}
]
}, {
actionType: 'Line-Delete',
point: {
type: 'Wall',
lineData: wall,
timeStamp: new Date().toISOString(),
}
}
],
})
// API
// if (projectId) {
@@ -202,7 +233,8 @@ function WallCreator() {
wallThickness: wallThickness,
wallHeight: wallHeight,
decals: []
};
}
addWall(wall1);
// API
@@ -232,6 +264,7 @@ function WallCreator() {
wallHeight: wallHeight,
decals: []
}
addWall(wall2);
// API
@@ -261,8 +294,40 @@ function WallCreator() {
wallHeight: wallHeight,
decals: []
}
addWall(wall3);
push2D({
type: 'Draw',
actions: [
{
actionType: 'Lines-Create',
points: [
{
type: 'Wall',
lineData: wall3,
timeStamp: new Date().toISOString(),
}, {
type: 'Wall',
lineData: wall1,
timeStamp: new Date().toISOString(),
}, {
type: 'Wall',
lineData: wall2,
timeStamp: new Date().toISOString(),
}
]
}, {
actionType: 'Line-Delete',
point: {
type: 'Wall',
lineData: wall,
timeStamp: new Date().toISOString(),
}
}
],
})
// API
// if (projectId) {
@@ -328,9 +393,24 @@ function WallCreator() {
wallThickness: wallThickness,
wallHeight: wallHeight,
decals: []
};
}
addWall(wall);
push2D({
type: 'Draw',
actions: [
{
actionType: 'Line-Create',
point: {
type: 'Wall',
lineData: wall,
timeStamp: new Date().toISOString(),
}
}
],
})
// API
// if (projectId) {