Skip to content

Commit

Permalink
Merge pull request #27 from NavMapLabs/feature/mapDataSerialization_HL
Browse files Browse the repository at this point in the history 
Feature/map data serialization hl
  • Loading branch information
@paoloyap22
paoloyap22 authored Oct 10, 2024
2 parents 4f0ca3b + 9475e77 commit a1759a1
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 95 deletions.
113 changes: 21 additions & 92 deletions components/MapEditorCanvas/AddNodeButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,117 +7,46 @@ import {
addNode_Dev,
addEdge,
removeEdge,
loadMapState,
NavMapState
} from "@/store/NavMapSlice";
import { Coordinate } from "@/constants/Coordinate";
import { NavNodeType } from "@/constants/NavigationNode";
import { useState } from "react";
import { ActionCreators as UndoActionCreators } from 'redux-undo';
import { serializeMapData, deSerializationMapData } from "@/scripts/mapDataSerialization";

const AddNodeButton = () => {
const [count, setCount] = useState(0);
const [savedMap, setSavedMap] = useState<string>("");
const dispatch = useDispatch<AppDispatch>();

const curState = useSelector((state: RootState) => state.NavMapState.present);
const pastState = useSelector((state: RootState) => state.NavMapState.past);

const handlePress = () => {
const id_1: string = "node_1";
const id_2: string = "node_2";
const id_3: string = "node_3";
const id_4: string = "node_4";
const id_5: string = "node_5";
const coords_1: Coordinate = { x: 0, y: 100 };
const coords_2: Coordinate = { x: 200, y: 300 };
const coords_3: Coordinate = { x: 120, y: 500 };
const coords_4: Coordinate = { x: -120, y: 500 };
const coords_5: Coordinate = { x: -200, y: 300 };
if (count == 0) {
dispatch(addNode_Dev({ id: id_1, coords: coords_1 }));
dispatch(addNode_Dev({ id: id_2, coords: coords_2 }));
dispatch(addNode_Dev({ id: id_3, coords: coords_3 }));
dispatch(addNode_Dev({ id: id_4, coords: coords_4 }));
dispatch(addNode_Dev({ id: id_5, coords: coords_5 }));
setCount(count + 1);
} else if (count == 1) {
dispatch(addEdge({ nodeID_1: id_1, nodeID_2: id_2 }));
dispatch(addEdge({ nodeID_1: id_2, nodeID_2: id_3 }));
dispatch(addEdge({ nodeID_1: id_3, nodeID_2: id_4 }));
dispatch(addEdge({ nodeID_1: id_4, nodeID_2: id_5 }));
dispatch(addEdge({ nodeID_1: id_5, nodeID_2: id_1 }));

setCount(count + 1);
} else if (count == 2) {
dispatch(addEdge({ nodeID_1: id_1, nodeID_2: id_3 }));
dispatch(addEdge({ nodeID_1: id_3, nodeID_2: id_5 }));
dispatch(addEdge({ nodeID_1: id_5, nodeID_2: id_2 }));
dispatch(addEdge({ nodeID_1: id_2, nodeID_2: id_4 }));
dispatch(addEdge({ nodeID_1: id_4, nodeID_2: id_1 }));

setCount(count + 1);
} else if (count == 3) {
dispatch(removeNode({ key: id_1 }));
dispatch(removeNode({ key: id_2 }));

setCount(count + 1);
} else {
dispatch(removeNode({ key: id_3 }));
dispatch(removeNode({ key: id_4 }));
dispatch(removeNode({ key: id_5 }));
setCount(0);
}
const handlePress_s = () => {
// console.log("=== original ===");
// console.log(curState);
// console.log("=== serialized ===");
const dataString = serializeMapData(curState);
console.log(dataString);
setSavedMap(dataString);
};

const printState = () => {
console.log("===== state history =====");
// console.log(curState)
console.log("history length: " + pastState.length);
};

const handlePress_2 = () => {
const id_1: string = "node_1";
const id_2: string = "node_2";
const coords_1: Coordinate = { x: 0, y: 100 };
const coords_2: Coordinate = { x: 200, y: 300 };

switch (count) {
case 0:
dispatch(addNode_Dev({ id: id_1, coords: coords_1 }));
setCount(count + 1);
printState();
break;
case 1:
dispatch(addNode_Dev({ id: id_2, coords: coords_2 }));
setCount(count + 1);
printState();
break;
case 2:
dispatch(addEdge({ nodeID_1: id_1, nodeID_2: id_2 }));
setCount(count + 1);
printState();
break;
case 3:
dispatch(removeNode({ key: id_1 }));
setCount(count + 1);
printState();
break;
default:
dispatch(removeNode({ key: id_2 }));
setCount(0);
printState();
break;
}
const handlePress_l = () => {
// console.log("=== de-serialized ===");
// console.log(deSerializationMapData(savedMap));
const newMapState = deSerializationMapData(savedMap);
dispatch(loadMapState({newMapState: newMapState}));
// console.log("=== loaded ===");
};

const func2 = () => {
dispatch(UndoActionCreators.undo());
printState();
}

return (
<View style= {styles.button}>
<Button title="Add Node Tester (star)" onPress={handlePress_2} />
<Button title="undo" onPress={func2} />
</View>
<>
<Button title="save State" onPress={handlePress_s} />
<Button title="load state" onPress={handlePress_l} />
</>
);
};

Expand Down
21 changes: 21 additions & 0 deletions scripts/mapDataSerialization.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

import {NavNodeType} from "@/constants/NavigationNode";
import {AdjacencyList, NavMapState} from "@/store/NavMapSlice"
import { Map as Map_I } from 'immutable';

export const serializeMapData = (mapData:NavMapState):string => {

return JSON.stringify(mapData);
}


export const deSerializationMapData = (mapDataString:string): NavMapState => {
let mapDataJson = JSON.parse(mapDataString);
let mapData:NavMapState = {
nodes: Map_I<string, NavNodeType>(Object.entries(mapDataJson.nodes)),
graph: Map_I<string, AdjacencyList>(Object.entries(mapDataJson.graph)),
graphModifiedFlag: 0,
};

return mapData;
}
11 changes: 8 additions & 3 deletions store/NavMapSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { NavNodeType } from '@/constants/NavigationNode';
import { Coordinate } from '@/constants/Coordinate';
import { pressNode } from './NavStateSlice';

interface AdjacencyList {
export interface AdjacencyList {
forwardList: string[],
backwardList: string[]
}

// Define the initial state using an Immutable.js Map
interface NavMapState {
export interface NavMapState {
nodes: Map_I<string, NavNodeType>;
graph: Map_I<string, AdjacencyList>;
graphModifiedFlag: number;
Expand Down Expand Up @@ -200,6 +200,11 @@ const navMapSlice = createSlice({
state.graphModifiedFlag = (state.graphModifiedFlag + 1) % 100
// console.log("====== after =====")
// console.log(state.graph)
},
loadMapState: (state, action:PayloadAction<{newMapState: NavMapState}>) => {
state.nodes = action.payload.newMapState.nodes;
state.graph = action.payload.newMapState.graph;
state.graphModifiedFlag = (state.graphModifiedFlag + 1) % 100
}
},
});
Expand All @@ -209,7 +214,7 @@ export const {addNode_Dev, addNode,
addNodeWithCoord, removeNode,
updateNodeCoords, updateNodeCoordsFinal,
updateNodeProperties,
addEdge, removeEdge } = navMapSlice.actions;
addEdge, removeEdge, loadMapState } = navMapSlice.actions;

// Export the reducer
export default navMapSlice.reducer;

0 comments on commit a1759a1

Please sign in to comment.