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

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, TouchableWithoutFeedback } from 'react-native-gesture-handler';

import { findNodeHandle, UIManager } from 'react-native';

import Animated, {
    useAnimatedGestureHandler,
    useAnimatedStyle,
    useSharedValue,
} from 'react-native-reanimated';
import { PlanImage, Room } from '../../types/plan';
import Svg, { Path, SvgXml, Text as SvgText, G, Circle } 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 }) => {

    const DEFAULT_SCALE = 1
    const MIN_SCALE = 0.95

    const { mapImage, roomList, selectedRoom, height, setSelectedRoom } = props;


    const [fullScreenMode, setFullScreen] = useState(false);


    useEffect(() => {
        if (selectedRoom) {
            zoomToRoom(selectedRoom)
        }
    }, [selectedRoom])

    useEffect(() => {
        if (props.fullScreenMode) {
            setFullScreen(props.fullScreenMode)
        }
    }, [props.fullScreenMode])


    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);

    const onPanEvent = useAnimatedGestureHandler({
        // handle one finger -> drag / move
        onStart: (event, ctx: any) => {
            if (event.numberOfPointers === 1) {
                ctx.startX = translateX.value;
                ctx.startY = translateY.value;
            }
        },
        onActive: (event, ctx: any) => {
            if (event.numberOfPointers === 1) {
                translateX.value = ctx.startX + event.translationX;
                translateY.value = ctx.startY + event.translationY;

                console.log("xTranslate " + translateX.value + " yTranslate " + translateY.value)
            }
        },
    });

    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

                console.log("scale")
                console.log(scale.value)
            }
        },
    });

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



    function calculateStraightLineDistance(x1: number, y1: number, planX: number, planY: number) {
        // Apply scale and translations to both points

        const x2 = planX
        const y2 = planY

        const x_distance = Math.abs(x1 - x2);
        const y_distance = Math.abs(y1 - y2);

        return x_distance + y_distance;
    }

    const zoomOut = () => {
        translateX.value = 0;
        translateY.value = 0;
        scale.value = DEFAULT_SCALE;
    }

    const zoomToRoom = (room: Room) => {
        const mapX = room.number_x
        const mapY = room.number_y

        const viewRatio = viewSize.width / viewSize.height;
        const svgRatio = mapImage.viewBox.width / mapImage.viewBox.height;

        let locationX = (mapX / mapImage.viewBox.width) * viewSize.width;
        let locationY = (mapY / mapImage.viewBox.height) * viewSize.height;

        if (svgRatio > viewRatio) {
            // svg is spaced in the middle
            // top down is filled
            let xRatio = viewSize.width / mapImage.viewBox.width;
            let yFilled = xRatio * mapImage.viewBox.height;
            let offsetY = (viewSize.height - yFilled) / 2;

            locationY = (mapY / mapImage.viewBox.height) * yFilled + offsetY;
        } else if (svgRatio < viewRatio) {
            let yRatio = viewSize.height / mapImage.viewBox.height;
            let xFilled = yRatio * mapImage.viewBox.width;
            let offsetX = (viewSize.width - xFilled) / 2;

            locationX = (mapX / mapImage.viewBox.width) * xFilled + offsetX;
        }

        const scaleValue = 3

        scale.value= scaleValue

        const offsetX = (viewSize.width / 2 - locationX) * (scaleValue - 1);
        const offsetY = (viewSize.height / 2 - locationY) * (scaleValue - 1);
        
        // Apply the translation including the offset
        translateX.value = viewSize.width / 2 - locationX + offsetX;
        translateY.value = viewSize.height / 2 - locationY + offsetY;
    }

    const handleFullScreenPressed = () => {
        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) => {
        let locationX = event.nativeEvent.locationX
        let locationY = event.nativeEvent.locationY

        // console.log("view size:")
        // console.log("x " + viewSize.width + " y " + viewSize.height) 

        const viewRatio = viewSize.width / viewSize.height
        // console.log("ratio: " + viewSize.width / viewSize.height)       
        // console.log("svg size:")
        // console.log("x " + mapImage.viewBox.width + " y " + mapImage.viewBox.height)
        const svgRatio = mapImage.viewBox.width / mapImage.viewBox.height
        // console.log("ratio: " + mapImage.viewBox.width / mapImage.viewBox.height)    


        let mapX = (locationX / viewSize.width) * mapImage.viewBox.width
        let mapY = (locationY / viewSize.height) * mapImage.viewBox.height

        console.log("clicked: x " + locationX + " y " + locationY)

        if (svgRatio > viewRatio) {
            // svg is spaced in the middle 
            // top down is filled
            let xRatio = viewSize.width / mapImage.viewBox.width
            let yFilled = xRatio * mapImage.viewBox.height
            let offsetY = (viewSize.height - yFilled) / 2

            mapY = ((locationY - offsetY) / yFilled) * mapImage.viewBox.height
        }
        else if (svgRatio < viewRatio) {
            // svg is spaced in the center 
            // left right is filled
            let yRatio = viewSize.height / mapImage.viewBox.height
            let xFilled = yRatio * mapImage.viewBox.width
            let offsetX = (viewSize.width - xFilled) / 2

            mapX = ((locationX - offsetX) / xFilled) * mapImage.viewBox.width
        }

        // Check if the touch event is within the bounds of a room
        let clickedRoom: Room | undefined = undefined

        const maxNumberDistance = 100

        let minDistance = Number.MAX_VALUE

        for (let i = 0; i < roomList.length; i++) {
            const room: Room = roomList[i]
            if (room.in_plan) {
                // TODO
                // console.log()
                // console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)

                const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, mapX, mapY)

                if (currentDistance < minDistance) {
                    minDistance = currentDistance
                    clickedRoom = room
                }
            }
        };

        console.log()
        console.log('Room clicked with id:', clickedRoom?.id);
        console.log("x " + clickedRoom?.number_x + " y " + clickedRoom?.number_y)
        console.log(minDistance)
        console.log("translated clicked: x " + mapX + " y " + mapY)

        if (clickedRoom && minDistance < maxNumberDistance) {
            // TODO        

            // Perform any actions you need with the clicked room

            // TODO fix -> point recognition
            setSelectedRoom && setSelectedRoom(clickedRoom)
        } else {
            console.log("no room found")
        }
        console.log("")
    };

    const [viewSize, setViewSize] = useState({ height: 0, width: 0 });

    useEffect(() => {
        setViewSize({
            width: fullScreenMode ?
                Dimensions.get('window').width - 20 : // full screen
                Dimensions.get('window').width - 20, // not full screen
            height: fullScreenMode ?
                Dimensions.get('window').height - 122.5 : // full scren
                Dimensions.get('window').height - 350, // not full screen
        })
    }, [fullScreenMode])


    return (
        // container
        <View
            height={viewSize.height}
            width={viewSize.width}
            // @ts-ignore
            style={
                fullScreenMode ? {
                    position: "absolute",
                    top: -230,
                    left: 0,
                    zIndex: 1000,
                    backgroundColor: "white",
                }
                    :
                    {
                        overflow: "hidden",
                    }
            }
            borderColor={"light.300"}
            borderRadius={10}
            borderWidth={fullScreenMode ? 0 : 1}
        >
            {/* control panel */}
            <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, 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}
                // @ts-ignore
                onGestureEvent={onGestureEvent}
                simultaneousHandlers={[svgRef, panRef]}>
                <Animated.View style={[{ flex: 1 }, animatedStyle]}>
                    <PanGestureHandler
                        ref={panRef}
                        simultaneousHandlers={[svgRef, pinchRef]}
                        onGestureEvent={onPanEvent}
                        onHandlerStateChange={(nativeEvent: any) => {
                            if (nativeEvent.state === State.END) {
                                console.log(nativeEvent)
                            }
                        }}
                    >
                        <Animated.View style={[{
                            flex: 1,
                        }]}>
                            <Svg
                                id="svgMap"
                                onPress={handleSvgPress}
                            >
                                {mapImage && mapImage.viewBox &&
                                    // background image                    
                                    <SvgXml
                                        xml={mapImage.svg}
                                        width={"100%"}
                                        height={"100%"}
                                        viewBox={`${0} ${0} ${mapImage.viewBox.width} ${mapImage.viewBox.height}`}
                                    // onLayout={(event) => {
                                    //     setSvgDimensions({
                                    //         width: event.nativeEvent.layout.width,
                                    //         height: event.nativeEvent.layout.height,
                                    //     });
                                    // }}
                                    >
                                    </SvgXml>
                                }

                                {mapImage && roomList && roomList.length > 0 &&

                                    roomList.map((room, index) => {
                                        if (!room.in_plan) {
                                            return
                                        }
                                        return (
                                            <Path
                                                id={"roomList_" + index.toString()}
                                                d={room.svg_path}  // The path data defining the shape of the room
                                                fill={selectedRoom && room.id == selectedRoom.id ? "#E6F7FF" : "white"}        // Fill the room shape with no color
                                                stroke="#66B2FF"       // Outline color
                                                strokeWidth={0.3}     // Outline width
                                                fillOpacity={selectedRoom && room.id == selectedRoom.id ? 1 : 0.2}
                                            />
                                        )
                                    })}



                                {mapImage && roomList && roomList.length > 0 &&

                                    roomList.map((room) => {
                                        if (!room.in_plan) {
                                            return
                                        }
                                        return (
                                            < 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
                                                fontSize={8}       // Font size
                                                textAnchor="middle"  // Center the text horizontally
                                                fontStyle='italic'
                                                vectorEffect='non-scaling-stroke' // Helps prevent stroke from scaling
                                            >
                                                {room.id}
                                            </SvgText>
                                        )
                                    })}

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

export default CastlePlanView;