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 >
     );
 };
 

src/pages/PlanViewPage.tsx

@@ -323 +323 @@
                   inventoriesLoading ?
                     <LoadingBox text="Loading available inventories..." />
                     :
-                    <Box mt={2.5} ml={2.5} mr={2.5}>
+                    <Box mt={5} ml={2.5} mr={2.5}>
                       <ListView
 
                         navigation={navigation}

src/stores/actions/planThunks.ts

@@ -28 +28 @@
 
                     unstructeredRoomList.map((room) => {
                         if (room.floor in floorsDict) {
+
+                            // TODO handle on backend transformations :-)
+                            if (room.floor == "first_floor") {
+                                room.number_x = room.number_x - 1044.46
+                                room.number_y = room.number_y - 1088.65
+                            }
+                            else if (room.floor == "second_floor") {
+                                room.number_x = room.number_x - 2088.7
+                                room.number_y = room.number_y - 1088.58
+                            }
+
                             floorsDict[room.floor].roomList.push(room)
                         }
                         else {
@@ -128 +139 @@
                 const response = await getPlanFloorImageRequest(floorId)
 
                 if (response.status === 200) {
-                    
-                    const svg : string = response.data 
 
-                    const output : PlanImage = {
+                    const svg: string = response.data
+
+                    const output: PlanImage = {
                         svg: svg,
-                        viewBox :{ x:0, y:0, width:0, height:0 }
+                        viewBox: { x: 0, y: 0, width: 0, height: 0 }
                     }
 
-                    parseString(svg, (err : any, result: any) => {
+                    parseString(svg, (err: any, result: any) => {
                         if (!err && result && result.svg && result.svg.$.viewBox) {
-                          const [x, y, width, height] = result.svg.$.viewBox.split(' ').map(Number);
-                    
-                          // Set the SVG information in your component's state or use it as needed
-                          output.viewBox =  { x, y, width, height };
+                            const [x, y, width, height] = result.svg.$.viewBox.split(' ').map(Number);
+
+                            // Set the SVG information in your component's state or use it as needed
+                            output.viewBox = { x, y, width, height };
                         }
-                      });
+                    });
 
                     return output
                 } else {