Revize bdedfcb4

re #10871: PlanViewPage: Handle room clicked debug

src/components/plan/CastlePlanView.tsx

@@ -1 +1 @@
 import { Box } from 'native-base';
 import React, { useRef } from 'react';
-import { StyleSheet, Dimensions } from 'react-native';
-import { PanGestureHandler, PinchGestureHandler } from 'react-native-gesture-handler';
+import { StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
+import { PanGestureHandler, PinchGestureHandler, State, TapGestureHandler } from 'react-native-gesture-handler';
 import Animated, {
     useAnimatedGestureHandler,
     useAnimatedStyle,
@@ -10 +10 @@
 import { PlanImage, Room } from '../../types/plan';
 import Svg, { Path, SvgXml, Text } from 'react-native-svg';
 
+// @ts-ignore
+import { pointInSvgPath } from 'point-in-svg-path';
+import { getFloorList } from '../../stores/actions/planThunks';
+
+
 const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room, fullScreenMode?: boolean, height?: number }) => {
 
     const DEFAULT_SCALE = 1
@@ -24 +29 @@
 
     const panRef = useRef<React.ReactElement>();
     const pinchRef = useRef<React.ReactElement>();
+
     const svgRef = useRef<React.ReactElement>();
+    const pathRefs = useRef<(Path | null)[]>([]);
 
     const translateX = useSharedValue(0);
     const translateY = useSharedValue(0);
@@ -75 +82 @@
         };
     });
 
-    console.log(fullScreenMode)
+    const handleSvgPress = (event: any) => {
+        const locationX = Number(event.nativeEvent.locationX);
+        const locationY = Number(event.nativeEvent.locationY);
+
+        // Check if the touch event is within the bounds of a room
+        let clickedRoom: Room | undefined = undefined
+
+
+        for (let i = 0; i < pathRefs.current.length; i++) {
+            const pathRef: Path | null = pathRefs.current[i]
+            const id = pathRef?.props.id
 
-    console.log(Dimensions.get('window').height)
-    console.log(Dimensions.get('window').width)
+            if (id?.startsWith("roomList_")) {
+                const listIndex = parseInt(id.split("roomList_")[1])
+                console.log(listIndex)
+                if (pathRef && pathRef.isPointInFill({ x: locationX, y: locationY })) {
+                    clickedRoom = roomList[listIndex]
+                }
+            }
+
+        };
+
+        if (clickedRoom) {
+            // TODO
+            console.log('Room clicked with id:', clickedRoom.id);
+            // Perform any actions you need with the clicked room
+        } else {
+            // TODO
+            console.log("no room found")
+        }
+    };
 
     return (
         // container
@@ -111 +145 @@
                         ref={panRef}
                         simultaneousHandlers={[svgRef, pinchRef]}
                         onGestureEvent={onPanEvent}
+                        onHandlerStateChange={(nativeEvent: any) => {
+                            if (nativeEvent.state === State.END) {
+                                console.log(nativeEvent)
+                            }
+                        }}
                     >
                         <Animated.View style={[{
                             flex: 1,
                         }, animatedStyle]}>
                             <Svg
+                                id="svgMap"
                                 ref={(ref: any) => (svgRef.current = ref)}
+                                onPress={handleSvgPress}
                             >
                                 {mapImage && mapImage.viewBox &&
                                     // background image                    
@@ -124 +165 @@
                                         xml={mapImage.svg}
                                         width={"100%"}
                                         height={"100%"}
-
                                     />
                                 }
 
                                 {mapImage && roomList && roomList.length > 0 &&
-                                    roomList.map((room) => {
+
+                                    roomList.map((room, index) => {
                                         if (!room.in_plan) {
                                             return
                                         }
                                         return (
-                                            <React.Fragment key={room.id}>
-                                                <Path
-
-                                                    d={room.svg_path}  // The path data defining the shape of the room
-                                                    fill={selectedRoom && room.id == selectedRoom.id ? "#E6F7FF" : "none"}        // Fill the room shape with no color
-                                                    stroke="#66B2FF"       // Outline color
-                                                    strokeWidth={0.3}     // Outline width
-                                                />
-                                                {/* Text label in the middle of the room */}
-                                                <Text
-                                                    x={room.number_x}     // Adjust the x-coordinate based on your room data
-                                                    y={room.number_y}     // Adjust the y-coordinate based on your room data
-                                                    fill="red"      // Text color
-                                                    fontSize={8}       // Font size
-                                                    textAnchor="middle"  // Center the text horizontally
-                                                    fontStyle='italic'
-                                                    vectorEffect='non-scaling-stroke' // Helps prevent stroke from scaling
-                                                >
-                                                    {room.id}
-                                                </Text>
-                                            </React.Fragment>
-
+                                            <Path
+                                                ref={(ref) => (pathRefs.current[index] = ref)}
+                                                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
+                                                strokeWidth={0.3}     // Outline width
+                                                fillOpacity={selectedRoom && room.id == selectedRoom.id ? 1 : 0.2}
+                                            />
                                         )
-                                    })
-                                }
+                                    })}
+
+                                {mapImage && roomList && roomList.length > 0 &&
 
+                                    roomList.map((room) => {
+                                        if (!room.in_plan) {
+                                            return
+                                        }
+                                        return (
+                                            < Text
+                                                x={room.number_x}     // Adjust the x-coordinate based on your room data
+                                                y={room.number_y}     // Adjust the y-coordinate based on your room data
+                                                fill="red"      // Text color
+                                                fontSize={8}       // Font size
+                                                textAnchor="middle"  // Center the text horizontally
+                                                fontStyle='italic'
+                                                vectorEffect='non-scaling-stroke' // Helps prevent stroke from scaling
+                                            >
+                                                {room.id}
+                                            </Text>
+                                        )
+                                    })}
                             </Svg>
                         </Animated.View>
                     </PanGestureHandler>
                 </Animated.View>
-            </PinchGestureHandler>
+            </PinchGestureHandler >
         </Box >
     );
 };