Revize 08be9ecd

re #10871: PlanViewPage: Populate rooms and labels, highlight selected room

src/components/plan/CastlePlanView.tsx

@@ -8 +8 @@
     useSharedValue,
 } from 'react-native-reanimated';
 import { PlanImage, Room } from '../../types/plan';
-import Svg, { SvgXml } from 'react-native-svg';
+import Svg, { Path, SvgXml, Text } from 'react-native-svg';
 
 const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room, fullScreenMode?: boolean, height?: number }) => {
 
@@ -45 +45 @@
     });
 
     const onGestureEvent = useAnimatedGestureHandler({
-        onActive: (event: any) => {
-            // handle two fingers -> zoom  + - 
+        onStart: (_, ctx: any) => {
+            ctx.startScale = scale.value;
+        },
+        onActive: (event: any, ctx: any) => {
+            // handle two fingers -> zoom + -
             if (event.numberOfPointers === 2) {
-                if (event.scale < MIN_SCALE) {
-                    scale.value = MIN_SCALE
-                }
-                else {
-                    scale.value = event.scale;
+                scale.value = ctx.startScale * event.scale;
+            }
+        },
+        onEnd: (event) => {
+            // handle two fingers -> zoom + -
+            if (event.numberOfPointers === 2) {
+                if (scale.value < MIN_SCALE) {
+                    scale.value = MIN_SCALE;
                 }
+                // You may add additional logic for maximum scale if needed
             }
         },
     });
@@ -76 +83 @@
     return (
         // container
         <Box
-            width={!fullScreenMode ? MAP_VIEW_SIZE.width : Dimensions.get('window').width - 5}
+            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)}
             // @ts-ignore
             style={
@@ -90 +98 @@
             }
             borderColor={"light.300"}
             borderRadius={10}
-            borderWidth={1}>
+            borderWidth={1}
+        >
+
             <PinchGestureHandler
                 ref={pinchRef}
                 // @ts-ignore
@@ -115 +125 @@
                                         width={"100%"}
                                         height={"100%"}
 
-                                    />}
+                                    />
+                                }
+
                                 {mapImage && roomList && roomList.length > 0 &&
-                                    <></>}
+                                    roomList.map((room) => {
+                                        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>
+
+                                        )
+                                    })
+                                }
 
                             </Svg>
                         </Animated.View>
                     </PanGestureHandler>
                 </Animated.View>
             </PinchGestureHandler>
-        </Box>
+        </Box >
     );
 };