Merge pull request #25 from NavMapLabs/feature/zoom&pan

Feature/zoom&pan+node-icons

app/(Editor)/MapEditor.tsx

@@ -100,7 +100,7 @@ const MapEditor = () => {
                             toggleFilterMenu={toggleFilterMenu}
                             toggleFloorMenu={toggleFloorMenu}/>
             <MapEditorCanvas canvasStyle = {styles.canvas} />
-            <EditBar editBarStyle={styles.ui} 
+            <EditBar editBarStyle={[styles.ui, styles.editBar]} 
                      toggleEditNodeMenu={toggleEditNodeMenu}/>
         </View>
     )
@@ -125,5 +125,12 @@ const styles = StyleSheet.create({
         zIndex: 1,
         height: '100%',
         width: '100%',
-    }
+    },
+    editBar: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 3,
+    }   
 })

components/EditBar.tsx

@@ -73,7 +73,6 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        justifyContent: 'flex-end',
     },
     bottom: {
         backgroundColor: 'lightgrey',

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/AddNodeButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "react-native";
+import { Button, StyleSheet, View } from "react-native";
 import { AppDispatch, RootState } from "@/store/datastore";
 import { useDispatch, UseDispatch, useSelector } from "react-redux";
 import {
@@ -114,11 +114,17 @@ const AddNodeButton = () => {
   }
 
   return (
-    <>
+    <View style= {styles.button}>
       <Button title="Add Node Tester (star)" onPress={handlePress_2} />
       <Button title="undo" onPress={func2} />
-    </>
+    </View>
   );
 };
 
 export default AddNodeButton;
+
+const styles = StyleSheet.create({
+  button: {
+    zIndex: 9
+},
+});

components/MapEditorCanvas/Canvas.tsx

@@ -33,23 +33,6 @@ const Canvas = (props: CanvasProps) => {
         }
     }, [pastNodeId]);
 
-    // this cannot be used for mobile as window doesn't exist
-    /* useEffect(() => {
-        
-        const undoEvent = (event: KeyboardEvent) => {
-            if (event.ctrlKey && event.key === 'z') {
-                dispatch(UndoActionCreators.undo());
-            }
-            if (event.ctrlKey && event.key === 'y') {
-                dispatch(UndoActionCreators.redo());
-            }
-        }
-        window.addEventListener('keydown', undoEvent);
-        return () => {
-            window.removeEventListener('keydown', undoEvent);
-        }
-    }, []); */
-
     const handlePress = (event: GestureResponderEvent) => {
 
         // false error from VS Code, it will work
@@ -71,6 +54,7 @@ const Canvas = (props: CanvasProps) => {
             name: "node-" + newId,
             id: newId,
             tags: [],
+            type: "Path",
             coords: coords,
             description: ""
         }

components/MapEditorCanvas/CanvasContainer.tsx

@@ -1,9 +1,11 @@
-import { StyleProp, ViewStyle, ScrollView, StyleSheet } from "react-native";
-import React, { ReactNode } from "react";
+import { StyleProp, ViewStyle, StyleSheet, View} from "react-native";
+import React, { ReactNode, } from "react";
 import { Coordinate } from "@/constants/Coordinate";
 import { Dimension } from "@/constants/Dimension";
 import AddNodeButton from "./AddNodeButton";
 import Canvas from "./Canvas";
+import { RootState } from "@/store/datastore";
+import { useSelector } from "react-redux";
 
 type CanvasContainerProps = {
     children: ReactNode,
@@ -13,17 +15,18 @@ type CanvasContainerProps = {
     scrollEnabled: boolean
 }
 
+
 // define the static canvas view wrapper in screen
 const CanvasContainer = (props: CanvasContainerProps) => {
+
+
     return (
-        <ScrollView style={props.canvasStyle} 
-                    scrollEnabled={props.scrollEnabled}>
-            <AddNodeButton/>
+        <View>
             <Canvas offsetCoor={props.offsetCoor}  
                        dimension={props.dimension}>
                 {props.children} 
             </Canvas>
-        </ScrollView>
+        </View>
     )
 }
 
@@ -32,7 +35,7 @@ const styles = StyleSheet.create({
         flex: 1,
         left: "50%",
         // height:"100%"
-    }
+    },
 });
 
 export default CanvasContainer;