aswi2023one-team-to-rule-them-all-gitlab/src/components/plan/CastlePlanView.tsx @ 08be9ecd

import { Box } from 'native-base';
import React, { useRef } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { PanGestureHandler, PinchGestureHandler } from 'react-native-gesture-handler';
import Animated, {
    useAnimatedGestureHandler,
    useAnimatedStyle,
    useSharedValue,
} from 'react-native-reanimated';
import { PlanImage, Room } from '../../types/plan';
import Svg, { Path, SvgXml, Text } from 'react-native-svg';

const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room, fullScreenMode?: boolean, height?: number }) => {

    const DEFAULT_SCALE = 1
    const MIN_SCALE = 0.95

    const MAP_VIEW_SIZE = {
        height: 500,
        width: "100%"
    }

    const { mapImage, roomList, selectedRoom, fullScreenMode, height } = 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(DEFAULT_SCALE);

    console.log(mapImage.svg.substring(0, 500))

    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({
        onStart: (_, ctx: any) => {
            ctx.startScale = scale.value;
        },
        onActive: (event: any, ctx: any) => {
            // handle two fingers -> zoom + -
            if (event.numberOfPointers === 2) {
                scale.value = ctx.startScale * event.scale;
            }
        },
        onEnd: (event) => {
            // handle two fingers -> zoom + -
            if (event.numberOfPointers === 2) {
                if (scale.value < MIN_SCALE) {
                    scale.value = MIN_SCALE;
                }
                // You may add additional logic for maximum scale if needed
            }
        },
    });

    const animatedStyle = useAnimatedStyle(() => {
        return {
            transform: [
                { translateX: translateX.value },
                { translateY: translateY.value },
                { scale: scale.value },
            ],
        };
    });

    console.log(fullScreenMode)

    console.log(Dimensions.get('window').height)
    console.log(Dimensions.get('window').width)

    return (
        // container
        <Box
            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,
                }
                    :
                    { overflow: "hidden" }
            }
            borderColor={"light.300"}
            borderRadius={10}
            borderWidth={1}
        >

            <PinchGestureHandler
                ref={pinchRef}
                // @ts-ignore
                onGestureEvent={onGestureEvent}
                simultaneousHandlers={[svgRef, panRef]}>
                <Animated.View style={{ flex: 1 }}>
                    <PanGestureHandler
                        ref={panRef}
                        simultaneousHandlers={[svgRef, pinchRef]}
                        onGestureEvent={onPanEvent}
                    >
                        <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 &&
                                    roomList.map((room) => {
                                        if (!room.in_plan) {
                                            return
                                        }
                                        return (
                                            <React.Fragment key={room.id}>
                                                <Path

                                                    d={room.svg_path}  // The path data defining the shape of the room
                                                    fill={selectedRoom && room.id == selectedRoom.id ? "#E6F7FF" : "none"}        // Fill the room shape with no color
                                                    stroke="#66B2FF"       // Outline color
                                                    strokeWidth={0.3}     // Outline width
                                                />
                                                {/* Text label in the middle of the room */}
                                                <Text
                                                    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
                                                    fontSize={8}       // Font size
                                                    textAnchor="middle"  // Center the text horizontally
                                                    fontStyle='italic'
                                                    vectorEffect='non-scaling-stroke' // Helps prevent stroke from scaling
                                                >
                                                    {room.id}
                                                </Text>
                                            </React.Fragment>

                                        )
                                    })
                                }

                            </Svg>
                        </Animated.View>
                    </PanGestureHandler>
                </Animated.View>
            </PinchGestureHandler>
        </Box >
    );
};

export default CastlePlanView;