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>