Revize d4c93958

re #10882: PlanViewPage: refactor calculation of tap map coordinates

src/components/plan/CastlePlanView.tsx

@@ -22 +22 @@
     const DEFAULT_SCALE = 1
     const MIN_SCALE = 0.95
 
-    const MAP_VIEW_SIZE = {
-        height: 500,
-        width: "100%"
-    }
-
     const { mapImage, roomList, selectedRoom, height, setSelectedRoom } = props;
 
-    const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
 
     const [fullScreenMode, setFullScreen] = useState(false);
 
@@ -84 +78 @@
                     scale.value = MIN_SCALE;
                 }
                 // You may add additional logic for maximum scale if needed
+
+                console.log("scale")
+                console.log(scale.value)
             }
         },
     });
@@ -99 +96 @@
     });
 
 
-    function calculateStraightLineDistance(x1: number, y1: number, planX: number, planY: number, log?: boolean) {
+    function calculateStraightLineDistance(x1: number, y1: number, planX: number, planY: number) {
         // Apply scale and translations to both points
 
         const x2 = planX
         const y2 = planY
 
-
         const x_distance = Math.abs(x1 - x2);
         const y_distance = Math.abs(y1 - y2);
 
-        if (log) {
-            console.log("Original X: ", x1, "Original Y: ", y1);
-            console.log("Clicked X: ", planX, "Clicked Y: ", planY);
-            console.log("Transformed X: ", x2, "Transformed Y: ", y2);
-            console.log("Scale: ", scale.value, "TranslateX: ", translateX.value, "TranslateY: ", translateY.value);
-            console.log("X Distance: ", x_distance, "Y Distance: ", y_distance);
-        }
         return x_distance + y_distance;
     }
 
@@ -138 +127 @@
     }
 
     const handleFullScreenPressed = () => {
-        console.log("neco")
         if (scale.value != DEFAULT_SCALE || translateX.value != 0 || translateY.value != 0) {
             console.log("todo zoom out")
             zoomOut()
@@ -153 +141 @@
 
         // TODO ????????????
 
-        // // Check if the touch event is within the bounds of a room
-        // let clickedRoom: Room | undefined = undefined
+        const locationX = event.nativeEvent.locationX
+        const locationY = event.nativeEvent.locationY
+
+        // console.log("x " + event.nativeEvent.locationX + " y " + event.nativeEvent.locationY)
+        console.log("view size:")
+        console.log("x " + viewSize.width + " y " + viewSize.height)        
+        console.log("svg size:")
+        console.log("x " + mapImage.viewBox.width + " y " + mapImage.viewBox.height)
+
+        let mapX =  (locationX / viewSize.width) * mapImage.viewBox.width
+        let mapY =  (locationY / viewSize.height) * mapImage.viewBox.height
+
+
+        // if()
+        
+
+
+
+        // console.log("x " + mapX + " y " + mapY)
+        // console.log("")
 
-        // // TODO set accordingaly
-        // const maxNumberDistance = 100
+        // Check if the touch event is within the bounds of a room
+        let clickedRoom: Room | undefined = undefined
 
-        // let minDistance = Number.MAX_VALUE
+        // TODO set accordingaly
+        const maxNumberDistance = 100
 
-        // for (let i = 0; i < roomList.length; i++) {
-        //     const room: Room = roomList[i]
-        //     if (room.in_plan) {
+        let minDistance = Number.MAX_VALUE
 
-        //         // TODO
-        //         console.log()
-        //         console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)
+        for (let i = 0; i < roomList.length; i++) {
+            const room: Room = roomList[i]
+            if (room.in_plan) {
+                // TODO
+                // console.log()
+                console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)
 
-        //         const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, locationX, locationY, false)
+                const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, mapX, mapY)
 
-        //         if (currentDistance < minDistance) {
-        //             minDistance = currentDistance
-        //             clickedRoom = room
-        //         }
-        //     }
-        // };
+                if (currentDistance < minDistance) {
+                    minDistance = currentDistance
+                    clickedRoom = room
+                }
+            }
+        };
 
-        // console.log()
-        // console.log('Room clicked with id:', clickedRoom?.id);
-        // console.log(minDistance)
-        // if (clickedRoom && minDistance < maxNumberDistance) {
-        //     // TODO        
+        console.log()
+        console.log('Room clicked with id:', clickedRoom?.id);
+        console.log("x " + clickedRoom?.number_x + " y " + clickedRoom?.number_y)
+        console.log(minDistance)
+        console.log("clicked: x " + locationX + " y " + locationY)
+        console.log("translated clicked: x " + mapX + " y " + mapY)
 
-        //     // Perform any actions you need with the clicked room
+        if (clickedRoom && minDistance < maxNumberDistance) {
+            // TODO        
 
-        //     // TODO fix -> point recognition
-        //     setSelectedRoom && setSelectedRoom(clickedRoom)
-        // } else {
-        //     console.log("no room found")
-        // }
+            // Perform any actions you need with the clicked room
 
+            // TODO fix -> point recognition
+            setSelectedRoom && setSelectedRoom(clickedRoom)
+        } else {
+            console.log("no room found")
+        }
+        console.log("")
     };
 
-    console.log(Dimensions.get('window').height)
+    const [viewSize, setViewSize] = useState({ height: 0, width: 0 });
+
+    useEffect(() => {
+        setViewSize({
+            width: fullScreenMode ?
+                Dimensions.get('window').width - 20 : // full screen
+                Dimensions.get('window').width - 20, // not full screen
+            height: fullScreenMode ?
+                Dimensions.get('window').height - 122.5 : // full scren
+                Dimensions.get('window').height -350, // not full screen
+        })
+    }, [fullScreenMode])
+
 
     return (
         // container
         <View
-            width={!fullScreenMode ? MAP_VIEW_SIZE.width : Dimensions.get('window').width - 5
-            }
-            height={height ? height : (!fullScreenMode ? MAP_VIEW_SIZE.height : Dimensions.get('window').height - 62.5)}
+            height={viewSize.height}
+            width={viewSize.width}
             // @ts-ignore
             style={
                 fullScreenMode ? {
-
                     position: "absolute",
                     top: -230,
                     left: 0,
                     zIndex: 1000,
                     backgroundColor: "white",
-
-                    height: Dimensions.get('window').height - 120,
-                    width: Dimensions.get('window').width - 20,
-
-
                 }
                     :
                     {
@@ -227 +244 @@
             borderWidth={fullScreenMode ? 0 : 1}
         >
             {/* control panel */}
-            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: 5, right: 10, position: "absolute", zIndex: 5 }}>
+            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
                 <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
                     <FullscreenIcon color="white" />
                 </Pressable>
@@ -245 +262 @@
                 // @ts-ignore
                 onGestureEvent={onGestureEvent}
                 simultaneousHandlers={[svgRef, panRef]}>
-                <Animated.View style={{ flex: 1 }}>
+                <Animated.View style={[{ flex: 1 }, animatedStyle]}>
                     <PanGestureHandler
                         ref={panRef}
                         simultaneousHandlers={[svgRef, pinchRef]}
@@ -258 +275 @@
                     >
                         <Animated.View style={[{
                             flex: 1,
-                        }, animatedStyle]}>
+                        }]}>
                             <Svg
                                 id="svgMap"
-                                ref={(ref: any) => (svgRef.current = ref)}
+                                onPress={handleSvgPress}
                             >
                                 {mapImage && mapImage.viewBox &&
                                     // background image                    
@@ -269 +286 @@
                                         xml={mapImage.svg}
                                         width={"100%"}
                                         height={"100%"}
-                                        onLayout={(event) => {
-                                            setSvgDimensions({
-                                                width: event.nativeEvent.layout.width,
-                                                height: event.nativeEvent.layout.height,
-                                            });
-                                        }}
+                                        viewBox={`${0} ${0} ${mapImage.viewBox.width} ${mapImage.viewBox.height}`}
+                                        // onLayout={(event) => {
+                                        //     setSvgDimensions({
+                                        //         width: event.nativeEvent.layout.width,
+                                        //         height: event.nativeEvent.layout.height,
+                                        //     });
+                                        // }}
                                     >
                                     </SvgXml>
                                 }
@@ -288 +306 @@
                                         return (
                                             <Path
                                                 id={"roomList_" + index.toString()}
-                                                key={'room_' + room.id}
                                                 d={room.svg_path}  // The path data defining the shape of the room
                                                 fill={selectedRoom && room.id == selectedRoom.id ? "#E6F7FF" : "white"}        // Fill the room shape with no color
                                                 stroke="#66B2FF"       // Outline color