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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user