Revize 7652bb26

Update CastlePlanView.tsx

src/components/plan/CastlePlanView.tsx

@@ -1 +1 @@
 import { Box, HStack, Pressable, View, Text, Flex, IconButton } from 'native-base';
 import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, Dimensions, TouchableOpacity, GestureResponderEvent } from 'react-native';
-import { PanGestureHandler, PinchGestureHandler, State, TapGestureHandler } from 'react-native-gesture-handler';
+import { PanGestureHandler, PinchGestureHandler, State, TapGestureHandler, TouchableWithoutFeedback } from 'react-native-gesture-handler';
+
+import { findNodeHandle, UIManager } from 'react-native';
+
 import Animated, {
     useAnimatedGestureHandler,
     useAnimatedStyle,
     useSharedValue,
 } from 'react-native-reanimated';
 import { PlanImage, Room } from '../../types/plan';
-import Svg, { Path, SvgXml, Text as SvgText } from 'react-native-svg';
+import Svg, { Path, SvgXml, Text as SvgText, G, Circle } from 'react-native-svg';
 
 // @ts-ignore
 import pointInSvgPolygon from "point-in-svg-polygon"
@@ -26 +29 @@
 
     const { mapImage, roomList, selectedRoom, height, setSelectedRoom } = props;
 
+    const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
+
     const [fullScreenMode, setFullScreen] = useState(false);
 
     useEffect(() => {
         if (props.fullScreenMode) {
             setFullScreen(props.fullScreenMode)
         }
-      }, [props.fullScreenMode])
+    }, [props.fullScreenMode])
 
 
     const panRef = useRef<React.ReactElement>();
@@ -122 +127 @@
 
     const zoomToRoom = (room: Room) => {
         // Todo
-        translateX.value = room.kx;
-        translateY.value = room.ky;
-        scale.value = DEFAULT_SCALE;
+
+        console.log(room)
+
+        scale.value = 3;
+
+        translateX.value = room.number_x + 100
+        translateY.value = room.number_y + 100
+
     }
 
     const handleFullScreenPressed = () => {
         console.log("neco")
-        if (scale.value != DEFAULT_SCALE && translateX.value != 0 && translateY.value != 0) {
+        if (scale.value != DEFAULT_SCALE || translateX.value != 0 || translateY.value != 0) {
             console.log("todo zoom out")
             zoomOut()
         }
@@ -141 +151 @@
 
     const handleSvgPress = (event: GestureResponderEvent) => {
 
-        // Get the raw event coordinates
-        const rawLocationX = event.nativeEvent.locationX;
-        const rawLocationY = event.nativeEvent.locationY;
-
-        // Log raw coordinates
-        console.log("Raw Location X: ", rawLocationX, "Raw Location Y: ", rawLocationY);
+        // TODO ????????????
 
-        // If needed, you can get the SVG element's dimensions to normalize the coordinates
-        const svgWidth = Dimensions.get('window').width
-        const svgHeight = height ? height : (!fullScreenMode ? MAP_VIEW_SIZE.height : Dimensions.get('window').height - 62.5)
+        // // Check if the touch event is within the bounds of a room
+        // let clickedRoom: Room | undefined = undefined
 
-        // Normalize the coordinates based on the SVG dimensions
-        // @ts-ignore
-        const locationX = (rawLocationX / svgWidth) * 100;
-        const locationY = (rawLocationY / svgHeight) * 100;
+        // // TODO set accordingaly
+        // const maxNumberDistance = 100
 
+        // let minDistance = Number.MAX_VALUE
 
-        // Check if the touch event is within the bounds of a room
-        let clickedRoom: Room | undefined = undefined
+        // for (let i = 0; i < roomList.length; i++) {
+        //     const room: Room = roomList[i]
+        //     if (room.in_plan) {
 
-        // TODO set accordingaly
-        const maxNumberDistance = 100
+        //         // TODO
+        //         console.log()
+        //         console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)
 
-        let minDistance = Number.MAX_VALUE
+        //         const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, locationX, locationY, false)
 
-        for (let i = 0; i < roomList.length; i++) {
-            const room: Room = roomList[i]
-            if (room.in_plan) {
+        //         if (currentDistance < minDistance) {
+        //             minDistance = currentDistance
+        //             clickedRoom = room
+        //         }
+        //     }
+        // };
 
-                // TODO
-                console.log()
-                console.log("Room + " + room.id)
+        // console.log()
+        // console.log('Room clicked with id:', clickedRoom?.id);
+        // console.log(minDistance)
+        // if (clickedRoom && minDistance < maxNumberDistance) {
+        //     // TODO        
 
-                const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, locationX, locationY, true)
+        //     // Perform any actions you need with the clicked room
 
-                if (currentDistance < minDistance) {
-                    minDistance = currentDistance
-                    clickedRoom = room
-                }
-            }
-        };
-
-        console.log('Room clicked with id:', clickedRoom?.id);
-        console.log(minDistance)
-        if (clickedRoom && minDistance < maxNumberDistance) {
-            // TODO        
-
-            // Perform any actions you need with the clicked room
+        //     // TODO fix -> point recognition
+        //     setSelectedRoom && setSelectedRoom(clickedRoom)
+        // } else {
+        //     console.log("no room found")
+        // }
 
-            // TODO fix -> point recognition
-            setSelectedRoom && setSelectedRoom(clickedRoom)
-        } else {
-            console.log("no room found")
-        }
     };
 
     console.log(Dimensions.get('window').height)
@@ -213 +210 @@
                     top: -230,
                     left: 0,
                     zIndex: 1000,
-                    backgroundColor:"white",
+                    backgroundColor: "white",
 
                     height: Dimensions.get('window').height - 120,
                     width: Dimensions.get('window').width - 20,
@@ -236 +233 @@
                 </Pressable>
                 {
                     selectedRoom &&
-                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2}  onPress={() => { zoomToRoom(selectedRoom) }}>
+                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
                         <ExitfullscreenIcon color="white" />
                     </Pressable>
                 }
@@ -265 +262 @@
                             <Svg
                                 id="svgMap"
                                 ref={(ref: any) => (svgRef.current = ref)}
-                                onPress={handleSvgPress}
                             >
                                 {mapImage && mapImage.viewBox &&
                                     // background image                    
@@ -273 +269 @@
                                         xml={mapImage.svg}
                                         width={"100%"}
                                         height={"100%"}
-                                    />
+                                        onLayout={(event) => {
+                                            setSvgDimensions({
+                                                width: event.nativeEvent.layout.width,
+                                                height: event.nativeEvent.layout.height,
+                                            });
+                                        }}
+                                    >
+                                    </SvgXml>
                                 }
 
                                 {mapImage && roomList && roomList.length > 0 &&
@@ -295 +298 @@
                                         )
                                     })}
 
+
+
                                 {mapImage && roomList && roomList.length > 0 &&
 
                                     roomList.map((room) => {
@@ -315 +320 @@
                                             </SvgText>
                                         )
                                     })}
+
                             </Svg>
                         </Animated.View>
                     </PanGestureHandler>