commit f220395e43119c75106af65b473984420e9f4d94
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Sat Nov 11 14:25:36 2023 +0100

    re #10871: PlanViewPage: Parse map xml

diff --git a/package.json b/package.json
index 6ba200a..dd6e884 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "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",
diff --git a/src/components/plan/CastlePlanView.tsx b/src/components/plan/CastlePlanView.tsx
index 7105ee0..e72d6d0 100644
--- a/src/components/plan/CastlePlanView.tsx
+++ b/src/components/plan/CastlePlanView.tsx
@@ -1,23 +1,30 @@
 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 */}
diff --git a/src/pages/PlanViewPage.tsx b/src/pages/PlanViewPage.tsx
index 8de024f..ddcd112 100644
--- a/src/pages/PlanViewPage.tsx
+++ b/src/pages/PlanViewPage.tsx
@@ -297,7 +297,10 @@ const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamLi
             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>
           )
           }
 
diff --git a/src/stores/actions/planThunks.ts b/src/stores/actions/planThunks.ts
index 8ec0e2e..54249e5 100644
--- a/src/stores/actions/planThunks.ts
+++ b/src/stores/actions/planThunks.ts
@@ -2,11 +2,14 @@ import { createAsyncThunk } from "@reduxjs/toolkit"
 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,7 +128,23 @@ export const getPlanFloorImage = createAsyncThunk(
                 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")
                 }
diff --git a/src/types/plan.ts b/src/types/plan.ts
index 3044782..8d34a42 100644
--- a/src/types/plan.ts
+++ b/src/types/plan.ts
@@ -34,6 +34,17 @@ export type Place = {
     label: string
 }
 
+export type PlanImage = {
+    svg: string,
+
+    viewBox?: {
+        x: number,
+        y: number,
+        width: number,
+        height: number
+    }
+}
+
 export type PlanViewState = {
 
     // floorList
@@ -51,7 +62,7 @@ export type PlanViewState = {
     itemList: Record<string, ItemPreviewType[]>
 
     // plan
-    mapImage?: string
+    mapImage?: PlanImage
     mapImageLoading?: boolean
 
     // last error
