feature-added node icons

components/EditNodeMenu.tsx

@@ -4,6 +4,7 @@ import { AppDispatch, RootState } from "@/store/datastore";
 import { useDispatch, useSelector } from "react-redux";
 import { updateNodeProperties } from "@/store/NavMapSlice";
 import TagOptions from "./TagOptions";
+import { Picker } from '@react-native-picker/picker';
 
 type editNodeMenuProps = {
     isVisible: boolean,
@@ -13,6 +14,7 @@ type editNodeMenuProps = {
 const EditNodeMenu = (props: editNodeMenuProps) => {
     const [nodeName, setNodeName] = useState('');
     const [nodeDescription, setNodeDescription] = useState('');
+    const [nodeType, setNodeType] = useState('');
     const testTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7', 'tag8', 'tag9', 'tag10'];
     const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
@@ -28,17 +30,19 @@ const EditNodeMenu = (props: editNodeMenuProps) => {
     const updateNode = () => {
         if (selectedNodeIDs.length > 0) {
             selectedNodeIDs.forEach((nodeID) => {
-                dispatch(updateNodeProperties({key: nodeID, name: nodeName, desc: nodeDescription, tags: selectedTags}));
+                dispatch(updateNodeProperties({key: nodeID, name: nodeName, type: nodeType, desc: nodeDescription, tags: selectedTags}));
                 console.log("Updated Node: " + nodeID);
                 console.log("Name: " + nodeName);
+                console.log("Type: " + nodeType);
                 console.log("Description: " + nodeDescription);
                 console.log("Tags: " + selectedTags);
             });
         }
         else if (selectedNodeID !== "") {
-            dispatch(updateNodeProperties({key: selectedNodeID, name: nodeName, desc: nodeDescription, tags: selectedTags}));
+            dispatch(updateNodeProperties({key: selectedNodeID, name: nodeName, type: nodeType, desc: nodeDescription, tags: selectedTags}));
             console.log("Updated Node: " + selectedNodeID);
             console.log("Name: " + nodeName);
+            console.log("Type: " + nodeType);
             console.log("Description: " + nodeDescription);
             console.log("Tags: " + selectedTags);
         }
@@ -101,6 +105,7 @@ const EditNodeMenu = (props: editNodeMenuProps) => {
             if (node) {
                 setNodeName(node.name);
                 setNodeDescription(node.description);
+                setNodeType(node.type);
                 setSelectedTags(node.tags);
             }
         }
@@ -109,6 +114,7 @@ const EditNodeMenu = (props: editNodeMenuProps) => {
             if (node) {
                 setNodeName(node.name);
                 setNodeDescription(node.description);
+                setNodeType(node.type);
                 setSelectedTags(node.tags);
             }
         }
@@ -141,6 +147,16 @@ const EditNodeMenu = (props: editNodeMenuProps) => {
                         multiline={true}
                         numberOfLines={2}
                     />
+                    <Text>Node Type:</Text>
+                    <Picker
+                        selectedValue={nodeType}
+                        onValueChange={(itemValue, itemIndex) => setNodeType(itemValue)}
+                    >
+                        <Picker.Item label="Entrance" value="Entrance" />
+                        <Picker.Item label="Stairs" value="Stairs" />
+                        <Picker.Item label="Special" value="Special" />
+                        <Picker.Item label="Path" value="Path" />
+                    </Picker>
                     <Text>Tags:</Text>
                     <View style={{flexDirection: 'row', flexWrap: 'wrap', columnGap: 
                     10, rowGap: 10, marginBottom: 10, marginTop: 10, justifyContent: 'center'

components/MapEditorCanvas/Canvas.tsx

@@ -54,6 +54,7 @@ const Canvas = (props: CanvasProps) => {
             name: "node-" + newId,
             id: newId,
             tags: [],
+            type: "Path",
             coords: coords,
             description: ""
         }

components/MapEditorCanvas/NavigationEdge.tsx

@@ -55,8 +55,8 @@ const NavigationEdge = (props: NavigationEdgeProps) => {
 const styles = StyleSheet.create({
     line: {
       position: 'absolute',
-      height: 5,
-      backgroundColor: 'red',
+      height: 3,
+      backgroundColor: 'lime',
       left: "50%",
     },
   });

components/MapEditorCanvas/NavigationEdgeDisplay.tsx

@@ -19,6 +19,7 @@ const NavigationEdgeDisplay = () => {
     const emptyNode:NavNodeType = {
         name:"empty",
         id:"empty",
+        type:"empty",
         tags:[],
         description:"empty",
         coords: emptyCoords

components/MapEditorCanvas/NavigationNode.tsx

@@ -7,14 +7,13 @@ import React, { useEffect } from "react";
 import { Coordinate } from "../../constants/Coordinate"
 import { Dimension } from "@/constants/Dimension";
 import { is } from "immutable";
-import { useLinkProps } from "@react-navigation/native";
-
-const defaultImage:ImageProps = require('../../assets/images/sampleNode.png')
+import { NodeTypeMapper } from "@/constants/NodeTypeMapper";
 
 type NavigationNodeProps = {
   name: string,
   id: string,
   coords: Coordinate,
+  type: string,
   dimension: Dimension,
   canvasDimension: Dimension,
   scale: number
@@ -54,6 +53,8 @@ const NavigationNode = (props: NavigationNodeProps) => {
     }
   }
 
+  const defaultImage = NodeTypeMapper[props.type];
+
   const nodePanResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => isMoveMode,
     onPanResponderMove: (evt) => {

components/MapEditorCanvas/NavigationNodeDisplay.tsx

@@ -22,6 +22,7 @@ const NavigationNodeDisplay = (props: NavigationNodeDisplayProps) => {
           <NavigationNode key={node.id} 
                           name={node.name} 
                           id={node.id} 
+                          type={node.type}
                           coords={node.coords} 
                           dimension={props.dimension}
                           canvasDimension = {props.canvasDimensions}

constants/NavigationNode.ts

@@ -3,6 +3,7 @@ import {Coordinate} from './Coordinate'
 export interface NavNodeType {
     name: string;
     id: string;
+    type: string;
     coords: Coordinate;
     tags: string[];
     description: string;

constants/NodeTypeMapper.ts

@@ -0,0 +1,7 @@
+
+export const NodeTypeMapper: { [key: string]: any } = {
+    Path: require('@/assets/icons/path.png'),
+    Stairs: require('@/assets/icons/stairs.png'),
+    Entrance: require('@/assets/icons/entrance.png'),
+    Special : require('@/assets/icons/special.png'),
+}

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-picker/picker": "^2.8.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
     "@reduxjs/toolkit": "^2.2.6",

store/NavMapSlice.ts

@@ -32,6 +32,7 @@ const navMapSlice = createSlice({
       const newNode: NavNodeType = {
         name: action.payload.id,
         id: action.payload.id,
+        type: action.payload.id,
         tags: [],
         coords: action.payload.coords,
         description: ""
@@ -53,6 +54,7 @@ const navMapSlice = createSlice({
         name: "node-" + id,
         id: id,
         tags: [],
+        type: "Path",
         coords: action.payload.coords,
         description: ""
       }
@@ -98,10 +100,10 @@ const navMapSlice = createSlice({
         state.nodes = state.nodes.set(action.payload.key, updatedNode);
       }
     },
-    updateNodeProperties: (state, action: PayloadAction<{ key: string, name: string, desc: string, tags: string[]}>) => {
+    updateNodeProperties: (state, action: PayloadAction<{ key: string, name: string, type: string, desc: string, tags: string[]}>) => {
       const existingNode = state.nodes.get(action.payload.key);
       if (existingNode) {
-        const updatedNode = { ...existingNode, name: action.payload.name, description: action.payload.desc, tags: action.payload.tags };
+        const updatedNode = { ...existingNode, name: action.payload.name,type: action.payload.type, description: action.payload.desc, tags: action.payload.tags };
         state.nodes = state.nodes.set(action.payload.key, updatedNode);
       }
     },