Revize d26c4168

re #10871: PlanViewPage: FullscreenMode refactor

src/components/general/Icons.tsx

@@ -18 +18 @@
     </Icon>
 )
 
+export const FullscreenIcon = (props: { color: string }): JSX.Element => (
+    <Icon>
+        <G fill={props.color} stroke={props.color} strokeWidth={1}>
+            <Path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z" />
+        </G>
+    </Icon>
+)
+
+export const TargetIcon = (props: { color: string }): JSX.Element => (
+    <Icon>
+        <G fill={props.color} stroke={props.color} strokeWidth={1}>
+            <Path d="M2 7V2H7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <Path d="M22 7V2H17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <Path d="M7 22L2 22L2 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <Path d="M17 22L22 22L22 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </G>
+    </Icon>
+)
+
+export const ExitfullscreenIcon = (props: { color: string }): JSX.Element => (
+    <Icon>
+        <G fill={props.color} stroke={props.color} strokeWidth={1}>
+            <Path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z" />
+        </G>
+    </Icon>
+)
 

src/components/plan/CastlePlanView.tsx

@@ -1 @@
-import { Box } from 'native-base';
-import React, { useRef } from 'react';
+import { Box, HStack, Pressable, View, Text, Flex, IconButton } from 'native-base';
+import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, Dimensions, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { PanGestureHandler, PinchGestureHandler, State, TapGestureHandler } from 'react-native-gesture-handler';
 import Animated, {
@@ -8 +8 @@
     useSharedValue,
 } from 'react-native-reanimated';
 import { PlanImage, Room } from '../../types/plan';
-import Svg, { Path, SvgXml, Text } from 'react-native-svg';
+import Svg, { Path, SvgXml, Text as SvgText } from 'react-native-svg';
 
 // @ts-ignore
 import pointInSvgPolygon from "point-in-svg-polygon"
+import { ExitfullscreenIcon, FullscreenIcon } from '../general/Icons';
 
 const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room, fullScreenMode?: boolean, height?: number, setSelectedRoom?: (room: Room) => void }) => {
 
@@ -23 +24 @@
         width: "100%"
     }
 
-    const { mapImage, roomList, selectedRoom, fullScreenMode, height, setSelectedRoom } = props;
+    const { mapImage, roomList, selectedRoom, height, setSelectedRoom } = props;
+
+    const [fullScreenMode, setFullScreen] = useState(false);
+
+    useEffect(() => {
+        if (props.fullScreenMode) {
+            setFullScreen(props.fullScreenMode)
+        }
+      }, [props.fullScreenMode])
+
 
     const panRef = useRef<React.ReactElement>();
     const pinchRef = useRef<React.ReactElement>();
@@ -87 +97 @@
     function calculateStraightLineDistance(x1: number, y1: number, planX: number, planY: number, log?: boolean) {
         // Apply scale and translations to both points
 
-        const xOffset = 250
-        const yOffset = 120
-
-        const x2 = planX + xOffset
-        const y2 = planY + yOffset
+        const x2 = planX
+        const y2 = planY
 
 
         const x_distance = Math.abs(x1 - x2);
@@ -107 +114 @@
         return x_distance + y_distance;
     }
 
+    const zoomOut = () => {
+        translateX.value = 0;
+        translateY.value = 0;
+        scale.value = DEFAULT_SCALE;
+    }
+
+    const zoomToRoom = (room: Room) => {
+        // Todo
+        translateX.value = room.kx;
+        translateY.value = room.ky;
+        scale.value = DEFAULT_SCALE;
+    }
+
+    const handleFullScreenPressed = () => {
+        console.log("neco")
+        if (scale.value != DEFAULT_SCALE && translateX.value != 0 && translateY.value != 0) {
+            console.log("todo zoom out")
+            zoomOut()
+        }
+        else {
+            console.log("Toggling fullscreen")
+            setFullScreen && setFullScreen(!fullScreenMode)
+        }
+    }
 
     const handleSvgPress = (event: GestureResponderEvent) => {
 
@@ -139 +170 @@
             const room: Room = roomList[i]
             if (room.in_plan) {
 
+                // TODO
+                console.log()
+                console.log("Room + " + room.id)
+
                 const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, locationX, locationY, true)
 
                 if (currentDistance < minDistance) {
@@ -148 +183 @@
             }
         };
 
-        console.log('Room clicked with id:', clickedRoom.id);
+        console.log('Room clicked with id:', clickedRoom?.id);
         console.log(minDistance)
         if (clickedRoom && minDistance < maxNumberDistance) {
             // TODO        
@@ -162 +197 @@
         }
     };
 
+    console.log(Dimensions.get('window').height)
+
     return (
         // container
-        <Box
+        <View
             width={!fullScreenMode ? MAP_VIEW_SIZE.width : Dimensions.get('window').width - 5
             }
             height={height ? height : (!fullScreenMode ? MAP_VIEW_SIZE.height : Dimensions.get('window').height - 62.5)}
             // @ts-ignore
             style={
                 fullScreenMode ? {
-                    marginTop: 2.5,
-                    marginLeft: 2.5,
-                    marginRight: 2.5,
+
+                    position: "absolute",
+                    top: -230,
+                    left: 0,
+                    zIndex: 1000,
+                    backgroundColor:"white",
+
+                    height: Dimensions.get('window').height - 120,
+                    width: Dimensions.get('window').width - 20,
+
+
                 }
                     :
-                    { overflow: "hidden" }
+                    {
+                        overflow: "hidden",
+                    }
             }
             borderColor={"light.300"}
             borderRadius={10}
-            borderWidth={1}
+            borderWidth={fullScreenMode ? 0 : 1}
         >
+            {/* control panel */}
+            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: 5, right: 10, position: "absolute", zIndex: 5 }}>
+                <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
+                    <FullscreenIcon color="white" />
+                </Pressable>
+                {
+                    selectedRoom &&
+                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2}  onPress={() => { zoomToRoom(selectedRoom) }}>
+                        <ExitfullscreenIcon color="white" />
+                    </Pressable>
+                }
+
+            </Flex>
 
             <PinchGestureHandler
                 ref={pinchRef}
@@ -242 +302 @@
                                             return
                                         }
                                         return (
-                                            < Text
+                                            < SvgText
                                                 x={room.number_x}     // Adjust the x-coordinate based on your room data
                                                 y={room.number_y}     // Adjust the y-coordinate based on your room data
                                                 fill="red"      // Text color
@@ -252 +312 @@
                                                 vectorEffect='non-scaling-stroke' // Helps prevent stroke from scaling
                                             >
                                                 {room.id}
-                                            </Text>
+                                            </SvgText>
                                         )
                                     })}
                             </Svg>
@@ -260 +320 @@
                     </PanGestureHandler>
                 </Animated.View>
             </PinchGestureHandler >
-        </Box >
+        </View >
     );
 };
 

src/pages/PlanViewPage.tsx

@@ -12 +12 @@
 import { login } from "../stores/actions/userThunks"
 import { getPlanItemsRequest } from "../api/planservice"
 import ItemPreview from "../components/listView/ItemPreview"
-import PlanView from "../components/plan/CastlePlanView"
 import { BASE_API_URL } from "../api/constants"
 import ListView from "../components/listView/ListView"
 import SearchForm from "../components/search/SearchForm"
@@ -40 +39 @@
   const [selectedRoom, setSelectedRoom] = useState<Room | undefined>(undefined)
   const [selectedPlace, setSelectedPlace] = useState<Place | undefined>(undefined)
 
-  const [isInteractingWithCastlePlan, setIsInteractingWithCastlePlan] = useState(false);
+  const [isInteractingWithCastlePlan, setIsInteractingWithCastlePlan] = useState(false)
+
 
   const { floorListLoading, floorList, totalItemsCount, lastError } = useSelector((state: RootState) => state.planViewState)
 
@@ -56 +56 @@
   const floorMapImage = useSelector((state: RootState) => state.planViewState.mapImage)
   const floorMapImageLoading = useSelector((state: RootState) => state.planViewState.mapImageLoading)
 
-  // todo
-  const castlePlanFullScreenMode = false
-
   const toast = useToast();
 
   useEffect(() => {
@@ -186 +183 @@
 
   return (
     <Box flex={1}>
-      {!castlePlanFullScreenMode || !castlePlanShown ? (
-        <Box h={Dimensions.get('window').height - 55}>
-          <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
-            <VStack space={1}>
+      <Box h={Dimensions.get('window').height - 55}>
+        <ScrollView flex={1} w={"100%"} nestedScrollEnabled={!isInteractingWithCastlePlan}>
+          <VStack space={1}>
+
+            {/* Selection */}
+
+            {
+              floorListLoading ?
+                <LoadingBox text="Floor list loading"></LoadingBox>
+                :
+                <>
+                  {/* Floor */}
+                  <Select
+                    mt={2.5}
+                    ml={2.5}
+                    mr={2.5}
 
-              {/* Selection */}
+                    placeholder={"Floor"}
+                    selectedValue={selectedFloor?.id}
+                    onValueChange={selectFloor}
+                    variant="rounded"
+                  >
+                    {floorList.map((floor, index) => {
+                      return (
+                        <Select.Item value={floor.id} label={floor.label} />
+                      );
+                    })}
+                  </Select>
+
+                  {/* Room */}
+
+                  < Select
+                    mt={2.5}
+                    ml={2.5}
+                    mr={2.5}
 
-              {
-                floorListLoading ?
-                  <LoadingBox text="Floor list loading"></LoadingBox>
-                  :
-                  <>
-                    {/* Floor */}
-                    <Select
-                      mt={2.5}
-                      ml={2.5}
-                      mr={2.5}
-
-                      placeholder={"Floor"}
-                      selectedValue={selectedFloor?.id}
-                      onValueChange={selectFloor}
-                      variant="rounded"
-                    >
-                      {floorList.map((floor, index) => {
+                    isDisabled={(selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length) ? false : true}
+
+                    placeholder={"Room"}
+                    selectedValue={selectedRoom?.id.toString()}
+                    onValueChange={(value: string) => selectRoom(parseInt(value))}
+                    variant="rounded"
+                  >
+                    {selectedFloor?.roomList?.map((room, index) => {
+                      if (room.room_list) {
                         return (
-                          <Select.Item value={floor.id} label={floor.label} />
+                          <Select.Item value={room.id.toString()} label={room.label} />
                         );
-                      })}
-                    </Select>
-
-                    {/* Room */}
+                      }
+                    })}
+                  </Select>
 
-                    < Select
-                      mt={2.5}
-                      ml={2.5}
-                      mr={2.5}
-
-                      isDisabled={(selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length) ? false : true}
+                  {/* Place */}
+                  <Select
+                    mt={2.5}
+                    ml={2.5}
+                    mr={2.5}
 
-                      placeholder={"Room"}
-                      selectedValue={selectedRoom?.id.toString()}
-                      onValueChange={(value: string) => selectRoom(parseInt(value))}
-                      variant="rounded"
+                    isDisabled={(selectedRoom && selectedRoom.places && selectedRoom.places.length > 0) ? false : true}
+                    placeholder={"Place"}
+                    selectedValue={selectedPlace?.id.toString()}
+                    onValueChange={(value: string) => selectPlace(parseInt(value))}
+                    variant="rounded"
+                  >
+                    {selectedRoom?.places?.map((place, index) => {
+                      return (
+                        <Select.Item value={place.id.toString()} label={place.label} />
+                      );
+                    })}
+                  </Select>
+
+                  {/* Filter */}
+                  <Flex direction="row" alignItems="center" justify="flex-end"
+                    mt={2.5}
+                    ml={2.5}
+                    mr={3}
+                  >
+                    <Button
+                      startIcon={
+                        <CloseIcon size="xs" />
+                      }
+                      onPress={clearForm}
+                      variant="subtle"
+                      color="secondary.500"
+                      mr={2}
+                      borderRadius={10}
+                      size={"sm"}
                     >
-                      {selectedFloor?.roomList?.map((room, index) => {
-                        if (room.room_list) {
-                          return (
-                            <Select.Item value={room.id.toString()} label={room.label} />
-                          );
+                      Reset
+                    </Button>
+                    <Button
+                      onPress={() => {
+                        if (selectedRoom && !selectedPlace) {
+                          searchSubmit(selectedRoom.id)
                         }
-                      })}
-                    </Select>
-
-                    {/* Place */}
-                    <Select
-                      mt={2.5}
-                      ml={2.5}
-                      mr={2.5}
-
-                      isDisabled={(selectedRoom && selectedRoom.places && selectedRoom.places.length > 0) ? false : true}
-                      placeholder={"Place"}
-                      selectedValue={selectedPlace?.id.toString()}
-                      onValueChange={(value: string) => selectPlace(parseInt(value))}
-                      variant="rounded"
-                    >
-                      {selectedRoom?.places?.map((place, index) => {
-                        return (
-                          <Select.Item value={place.id.toString()} label={place.label} />
-                        );
-                      })}
-                    </Select>
-
-                    {/* Filter */}
-                    <Flex direction="row" alignItems="center" justify="flex-end"
-                      mt={2.5}
-                      ml={2.5}
-                      mr={3}
-                    >
-                      <Button
-                        startIcon={
-                          <CloseIcon size="xs" />
+                        else if (selectedRoom && selectedPlace) {
+                          searchSubmit(selectedRoom.id, selectedPlace.id)
                         }
-                        onPress={clearForm}
-                        variant="subtle"
-                        color="secondary.500"
-                        mr={2}
-                        borderRadius={10}
-                        size={"sm"}
-                      >
-                        Reset
-                      </Button>
-                      <Button
-                        onPress={() => {
-                          if (selectedRoom && !selectedPlace) {
-                            searchSubmit(selectedRoom.id)
-                          }
-                          else if (selectedRoom && selectedPlace) {
-                            searchSubmit(selectedRoom.id, selectedPlace.id)
-                          }
-
-                        }}
-                        backgroundColor={"#654B07"}
-                        variant="subtle"
-                        borderRadius={10}
-                        size={"sm"}
-                      >
-                        <Text color="white" fontSize={11}>
-                          Search
-                        </Text>
-                      </Button>
-                    </Flex>
-                  </>
-              }
 
-              {/* Plan */}
-              {castlePlanShown && selectedFloor && !floorListLoading && (
-                floorMapImageLoading ?
-                  <LoadingBox text="Loading castle plan" />
+                      }}
+                      backgroundColor={"#654B07"}
+                      variant="subtle"
+                      borderRadius={10}
+                      size={"sm"}
+                    >
+                      <Text color="white" fontSize={11}>
+                        Search
+                      </Text>
+                    </Button>
+                  </Flex>
+                </>
+            }
+
+            {/* Plan */}
+            {castlePlanShown && selectedFloor && !floorListLoading && (
+              floorMapImageLoading ?
+                <LoadingBox text="Loading castle plan" />
+                :
+                floorMapImage &&
+                <Box
+                  mt={2.5}
+                  ml={2.5}
+                  mr={2.5}
+                  height={Dimensions.get("window").height - 350}
+                  onTouchStart={() => setIsInteractingWithCastlePlan(true)}
+                  onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
+                  <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} height={Dimensions.get("window").height - 350}
+                    setSelectedRoom={(room: Room) => {
+                      selectRoom(room.id)
+                    }}
+                    fullScreenMode={false}
+                  />
+                </Box>
+            )
+            }
+
+            {/* Item List */}
+            <>
+              {!castlePlanShown && (
+                inventoriesLoading ?
+                  <LoadingBox text="Loading available inventories..." />
                   :
-                  floorMapImage &&
-                  <Box
-                    mt={2.5}
-                    ml={2.5}
-                    mr={2.5}
-                    onTouchStart={() => setIsInteractingWithCastlePlan(true)}
-                    onTouchEnd={() => setIsInteractingWithCastlePlan(true)}>
-                    <CastlePlanView mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} height={Dimensions.get("window").height - 350} 
-                      setSelectedRoom={(room : Room) => {
-                        selectRoom(room.id)
+                  <Box mt={5} ml={2.5} mr={2.5}>
+                    <ListView
+
+                      navigation={navigation}
+                      hideHeaderText
+
+                      inventories={inventories}
+                      numOfResults={numberOfResults}
+
+                      data={data}
+                      loadedPages={pagination ?? {}}
+                      inventoriesDataLoading={dataLoading ?? {}}
+                      handleLoadMoreItems={(inventoryName: string, cursor: number) => {
+                        dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
                       }}
                     />
                   </Box>
               )
               }
-
-              {/* Item List */}
-              <>
-                {!castlePlanShown && (
-                  inventoriesLoading ?
-                    <LoadingBox text="Loading available inventories..." />
-                    :
-                    <Box mt={5} ml={2.5} mr={2.5}>
-                      <ListView
-
-                        navigation={navigation}
-                        hideHeaderText
-
-                        inventories={inventories}
-                        numOfResults={numberOfResults}
-
-                        data={data}
-                        loadedPages={pagination ?? {}}
-                        inventoriesDataLoading={dataLoading ?? {}}
-                        handleLoadMoreItems={(inventoryName: string, cursor: number) => {
-                          dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
-                        }}
-
-                      />
-                    </Box>
-                )
-                }
-              </>
-
+            </>
+
+          </VStack>
+        </ScrollView>
+        {/* item notes switch tab */}
+        <HStack alignItems="center">
+          <Button
+            variant={"unstyled"}
+            w="50%"
+            onPress={() => { setCastlePlanShown(true) }}
+          >
+            <VStack alignItems={"center"}>
+              <Text bold={castlePlanShown} mb={castlePlanShown ? undefined : 2}>
+                Castle
+              </Text>
+              {castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
             </VStack>
-          </ScrollView>
-          {/* item notes switch tab */}
-          <HStack alignItems="center">
-            <Button
-              variant={"unstyled"}
-              w="50%"
-              onPress={() => { setCastlePlanShown(true) }}
-            >
-              <VStack alignItems={"center"}>
-                <Text bold={castlePlanShown} mb={castlePlanShown ? undefined : 2}>
-                  Castle
-                </Text>
-                {castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
-              </VStack>
-            </Button>
-            <Button
-              variant={"unstyled"}
-              w="50%"
-              onPress={() => { setCastlePlanShown(false) }}
-            >
-              <VStack alignItems={"center"}>
-                <Text bold={!castlePlanShown} mb={!castlePlanShown ? undefined : 2}>
-                  Results
-                </Text>
-                {!castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
-              </VStack>
-            </Button>
-          </HStack>
-        </Box>
-      )
-        :
-        floorMapImageLoading ?
-          <LoadingBox text="Loading castle plan" />
-          :
-          floorMapImage && selectedFloor &&
-          <Box>
-            <CastlePlanView fullScreenMode mapImage={floorMapImage} selectedRoom={selectedRoom} roomList={selectedFloor.roomList} />
-          </Box>
-      }
+          </Button>
+          <Button
+            variant={"unstyled"}
+            w="50%"
+            onPress={() => { setCastlePlanShown(false) }}
+          >
+            <VStack alignItems={"center"}>
+              <Text bold={!castlePlanShown} mb={!castlePlanShown ? undefined : 2}>
+                Results
+              </Text>
+              {!castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
+            </VStack>
+          </Button>
+        </HStack>
+      </Box>
     </Box>
   );
 }