Revize f220395e

re #10871: PlanViewPage: Parse map xml

package.json

@@ -34 +34 @@
     "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-vector-icons": "^9.2.0",
+    "react-native-xml2js": "^1.0.3",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "redux-persist-transform-encrypt": "^5.0.0",

src/components/plan/CastlePlanView.tsx

@@ -1 +1 @@
 import { VStack, Box, Text, HStack, ScrollView, Flex, Button, CloseIcon, IconButton, TextArea, useToast } from "native-base";
 import { Note } from "../../types/note";
 import React, { useCallback, useState } from "react";
-import { Floor, Room } from "../../types/plan";
+import { Floor, PlanImage, Room } from "../../types/plan";
 
 import MapView, { Marker } from 'react-native-maps';
 import Svg, { Image, SvgXml } from 'react-native-svg';
 import SvgImage from "react-native-svg/lib/typescript/elements/Image";
 
-const CastlePlanView = (props: { mapImage : string, selectedRoom?: Room }) => {
+const CastlePlanView = (props: { mapImage: PlanImage, selectedRoom?: Room }) => {
 
     const { mapImage, selectedRoom } = props
 
-    console.log(mapImage.substring(0,500))
+    console.log(mapImage.svg.substring(0, 500))
+
+    console.log(selectedRoom?.kx, selectedRoom?.ky, selectedRoom?.svg_path)
+
+    console.log(mapImage.viewBox)
 
     return (
-        <Box h={300}>
+        <Box>
             {/* Display the background image */}
             <SvgXml
-                xml={mapImage}
+                xml={mapImage.svg}
+                height="300"
+
+                preserveAspectRatio="xMidYMid meet"
             />
 
             {/* Display the MapView on top of the background image */}

src/pages/PlanViewPage.tsx

@@ -297 +297 @@
             floorMapImageLoading ?
               <LoadingBox text="Loading castle plan" />
               :
-              floorMapImage && <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} />
+              floorMapImage &&
+              <Box mt={2.5} ml={2.5}>
+                <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} />
+              </Box>
           )
           }
 

src/stores/actions/planThunks.ts

@@ -2 +2 @@
 import { SortOptions } from "../../types/general";
 import { Note } from "../../types/note";
 import { getPlanAllRequest, getPlanFloorImageRequest, getPlanItemsRequest } from "../../api/planservice";
-import { Floor, Room } from "../../types/plan";
+import { Floor, PlanImage, Room } from "../../types/plan";
 import { ItemPreviewType } from "../../types/listViewTypes";
 import { StringLiteralType } from "typescript";
 import { Inventory } from "../../types/searchFormTypes";
 
+// @ts-ignore
+import { parseString } from 'react-native-xml2js';
+
 export const getFloorList = createAsyncThunk(
     "plan/getFloorList",
     async () => {
@@ -125 +128 @@
                 const response = await getPlanFloorImageRequest(floorId)
 
                 if (response.status === 200) {
-                    return response.data
+                    
+                    const svg : string = response.data 
+
+                    const output : PlanImage = {
+                        svg: svg,
+                    }
+
+                    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 };
+                        }
+                      });
+
+                    return output
                 } else {
                     return Promise.reject(response.data ? response.data : "Get plan floor image request failed")
                 }

src/types/plan.ts

@@ -34 +34 @@
     label: string
 }
 
+export type PlanImage = {
+    svg: string,
+
+    viewBox?: {
+        x: number,
+        y: number,
+        width: number,
+        height: number
+    }
+}
+
 export type PlanViewState = {
 
     // floorList
@@ -51 +62 @@
     itemList: Record<string, ItemPreviewType[]>
 
     // plan
-    mapImage?: string
+    mapImage?: PlanImage
     mapImageLoading?: boolean
 
     // last error