Revize 28ab969f

re #10871: PlanViewPage: Drag/move castlePlan

src/components/plan/CastlePlanView.tsx

@@ -1 +1 @@
 import { Box } from 'native-base';
 import React, { useRef } from 'react';
 import { StyleSheet, Dimensions } from 'react-native';
-import { PinchGestureHandler } from 'react-native-gesture-handler';
+import { PanGestureHandler, 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 { PlanImage, Room } from '../../types/plan';
 import Svg, { SvgXml } from 'react-native-svg';
 
-const CastlePlanView = (props: { mapImage: PlanImage, selectedRoom?: Room }) => {
-    const { mapImage } = props;
+const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room }) => {
 
+    const DEFAULT_SCALE = 1
+    const MIN_SCALE = 0.95
+
+    const MAP_VIEW_SIZE = {
+        height : 400,
+        width : "100%"
+    }
+
+    const { mapImage, roomList, selectedRoom } = props;
+
+    const panRef = useRef<React.ReactElement>();
+    const pinchRef = useRef<React.ReactElement>();
     const svgRef = useRef<React.ReactElement>();
 
     const translateX = useSharedValue(0);
     const translateY = useSharedValue(0);
-    const scale = useSharedValue(1);
+    const scale = useSharedValue(DEFAULT_SCALE);
 
-    console.log(mapImage.svg.substring(0,500))
+    console.log(mapImage.svg.substring(0, 500))
 
-    const DEFAULT_SCALE = 0
-    const MIN_SCALE = 0.95
+    const onPanEvent = useAnimatedGestureHandler({
+        // handle one finger -> drag / move
+        onStart: (_, ctx: any) => {
+            ctx.startX = translateX.value;
+            ctx.startY = translateY.value;
+        },
+        onActive: (event, ctx: any) => {
+            translateX.value = ctx.startX + event.translationX;
+            translateY.value = ctx.startY + event.translationY;
+        },
+    });
 
     const onGestureEvent = useAnimatedGestureHandler({
         onActive: (event: any) => {
-            
-            // handle one finger -> drag
-            if (event.numberOfPointers === 1) {
-            
-            }
             // handle two fingers -> zoom  + - 
-            else if (event.numberOfPointers === 2) {
-
-                if(event.scale < MIN_SCALE){
-                    console.log("tohle je moc")
+            if (event.numberOfPointers === 2) {
+                if (event.scale < MIN_SCALE) {
                     scale.value = MIN_SCALE
                 }
-                else{
+                else {
                     scale.value = event.scale;
                 }
-
-                console.log(scale.value)
             }
         },
     });
@@ -60 +70 @@
 
     return (
         // 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)}
-
+        <Box width={MAP_VIEW_SIZE.width} height={MAP_VIEW_SIZE.height} style={{ borderColor: "#F5F5F", borderWidth: 1, overflow: "hidden" }}>
+            <PinchGestureHandler
+                ref={pinchRef}
+                // @ts-ignore
+                onGestureEvent={onGestureEvent}
+                simultaneousHandlers={[svgRef, panRef]}>
+                <Animated.View style={{ flex: 1 }}>
+                    <PanGestureHandler
+                        ref={panRef}
+                        simultaneousHandlers={[svgRef, pinchRef]}
+                        onGestureEvent={onPanEvent}
                     >
-                        {mapImage && mapImage.viewBox &&
-                            // background image                    
-                            <SvgXml
-                                xml={mapImage.svg}
-                                width={"100%"}
-                                height={"100%"}
+                        <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%"}
 
-                            />}
+                                    />}
+                                {mapImage && roomList && roomList.length > 0 &&
+                                    <></>}
 
-                    </Svg>
+                            </Svg>
+                        </Animated.View>
+                    </PanGestureHandler>
                 </Animated.View>
             </PinchGestureHandler>
         </Box>

src/pages/PlanViewPage.tsx

@@ -5 +5 @@
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "./Navigation"
-import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView } from "native-base"
+import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView, View } from "native-base"
 import { ErrorToast } from "../components/toast/ErrorToast"
 import { Floor, Place, Room } from "../types/plan"
 import { getFloorList, getPlanFloorImage, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
@@ -36 +36 @@
   const [selectedRoom, setSelectedRoom] = useState<Room | undefined>(undefined)
   const [selectedPlace, setSelectedPlace] = useState<Place | undefined>(undefined)
 
+  const [isInteractingWithCastlePlan, setIsInteractingWithCastlePlan] = useState(false);
+
   const { floorListLoading, floorList, totalItemsCount, lastError } = useSelector((state: RootState) => state.planViewState)
 
   const inventories = useSelector((state: RootState) => state.planViewState.itemInventories)
@@ -178 +180 @@
   return (
     <Center m={2} mr={0} mb={6} flex={1}>
 
-      <ScrollView flex={1} w={"100%"} >
+      <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
         <VStack space={1} mr={4}>
 
           {/* Selection */}
@@ -298 +300 @@
               <LoadingBox text="Loading castle plan" />
               :
               floorMapImage &&
-              <Box mt={2.5} ml={2.5}>
-                <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} />
+              <Box mt={2.5} ml={2.5}
+                onTouchStart={() => setIsInteractingWithCastlePlan(true)}
+                onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
+                <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
               </Box>
           )
           }

src/stores/actions/planThunks.ts

@@ -133 +133 @@
 
                     const output : PlanImage = {
                         svg: svg,
+                        viewBox :{ x:0, y:0, width:0, height:0 }
                     }
 
                     parseString(svg, (err : any, result: any) => {