Revize 8d384539

re #10871: PlanViewPage: CastlePlanView: zoom in, out

package.json

@@ -26 +26 @@
     "react-native-deck-swiper": "^1.1.7",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-logs": "^5.0.1",
-    "react-native-maps": "^1.8.0",
     "react-native-multiple-select": "^0.5.12",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
@@ -45 +44 @@
     "@tsconfig/react-native": "^2.0.3",
     "@types/jest": "^29.5.0",
     "@types/react": "~18.2.14",
-    "@types/react-native-maps": "^0.24.2",
     "@types/react-test-renderer": "^18.0.0",
     "typescript": "^5.1.3"
   },

src/components/plan/CastlePlanView.tsx

@@ -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, 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";
+import { Box } from 'native-base';
+import React, { useRef } from 'react';
+import { StyleSheet, Dimensions } from 'react-native';
+import { PinchGestureHandler } from 'react-native-gesture-handler';
+import Animated, {
+    useAnimatedGestureHandler,
+    useAnimatedStyle,
+    useSharedValue,
+} from 'react-native-reanimated';
+import { PlanImage } from '../../types/plan';
+import { Room } from '../../types/searchFormTypes';
+import Svg, { SvgXml } from 'react-native-svg';
 
 const CastlePlanView = (props: { mapImage: PlanImage, selectedRoom?: Room }) => {
+    const { mapImage } = props;
+
+    const svgRef = useRef<React.ReactElement>();
+
+    const translateX = useSharedValue(0);
+    const translateY = useSharedValue(0);
+    const scale = useSharedValue(1);
+
+    console.log(mapImage.svg.substring(0,500))
+
+    const DEFAULT_SCALE = 0
+    const MIN_SCALE = 0.95
 
-    const { mapImage, selectedRoom } = props
+    const onGestureEvent = useAnimatedGestureHandler({
+        onActive: (event: any) => {
+            
+            // handle one finger -> drag
+            if (event.numberOfPointers === 1) {
+            
+            }
+            // handle two fingers -> zoom  + - 
+            else if (event.numberOfPointers === 2) {
 
-    console.log(mapImage.svg.substring(0, 500))
+                if(event.scale < MIN_SCALE){
+                    console.log("tohle je moc")
+                    scale.value = MIN_SCALE
+                }
+                else{
+                    scale.value = event.scale;
+                }
 
-    console.log(selectedRoom?.kx, selectedRoom?.ky, selectedRoom?.svg_path)
+                console.log(scale.value)
+            }
+        },
+    });
 
-    console.log(mapImage.viewBox)
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [
+                { translateX: translateX.value },
+                { translateY: translateY.value },
+                { scale: scale.value },
+            ],
+        };
+    });
 
     return (
-        <Box>
-            {/* Display the background image */}
-            <SvgXml
-                xml={mapImage.svg}
-                height="300"
-
-                preserveAspectRatio="xMidYMid meet"
-            />
-
-            {/* Display the MapView on top of the background image */}
-            <MapView
-                style={{ flex: 1 }}
-            // Add other map-related props as needed
-            >
-            </MapView>
+        // container
+        <Box width="100%" height={370} style={{ borderColor: "#F5F5F", borderWidth: 1, overflow: "hidden" }}>
+            <PinchGestureHandler onGestureEvent={onGestureEvent} simultaneousHandlers={svgRef}>
+                <Animated.View style={[{
+                    flex: 1,
+                }, animatedStyle]}>
+                    <Svg
+                        ref={(ref: any) => (svgRef.current = ref)}
+
+                    >
+                        {mapImage && mapImage.viewBox &&
+                            // background image                    
+                            <SvgXml
+                                xml={mapImage.svg}
+                                width={"100%"}
+                                height={"100%"}
+
+                            />}
+
+                    </Svg>
+                </Animated.View>
+            </PinchGestureHandler>
         </Box>
     );
-}
+};
+
+export default CastlePlanView;
 
-export default CastlePlanView

src/types/plan.ts

@@ -37 +37 @@
 export type PlanImage = {
     svg: string,
 
-    viewBox?: {
+    viewBox: {
         x: number,
         y: number,
         width: number,