Revize 0733beb1

re #10882: CastlePlan: Zoom to selected room

src/components/plan/CastlePlanView.tsx

@@ -17 +17 @@
 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
@@ -27 +28 @@
 
     const [fullScreenMode, setFullScreen] = useState(false);
 
+
+    useEffect(() => {
+        if (selectedRoom) {
+            zoomToRoom(selectedRoom)
+        }
+    }, [selectedRoom])
+
     useEffect(() => {
         if (props.fullScreenMode) {
             setFullScreen(props.fullScreenMode)
@@ -55 +63 @@
             if (event.numberOfPointers === 1) {
                 translateX.value = ctx.startX + event.translationX;
                 translateY.value = ctx.startY + event.translationY;
+
+                console.log("xTranslate " + translateX.value + " yTranslate " + translateY.value)
             }
         },
     });
@@ -94 +104 @@
     });
 
 
+
     function calculateStraightLineDistance(x1: number, y1: number, planX: number, planY: number) {
         // Apply scale and translations to both points
 
@@ -113 +124 @@
     }
 
     const zoomToRoom = (room: Room) => {
-        // Todo
+        const mapX = room.number_x
+        const mapY = room.number_y
 
-        console.log(room)
+        const viewRatio = viewSize.width / viewSize.height;
+        const svgRatio = mapImage.viewBox.width / mapImage.viewBox.height;
 
-        scale.value = 3;
+        let locationX = (mapX / mapImage.viewBox.width) * viewSize.width;
+        let locationY = (mapY / mapImage.viewBox.height) * viewSize.height;
 
-        translateX.value = room.number_x + 100
-        translateY.value = room.number_y + 100
+        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")
+            // console.log("todo zoom out")
             zoomOut()
         }
         else {
-            console.log("Toggling fullscreen")
+            // console.log("Toggling fullscreen")
             setFullScreen && setFullScreen(!fullScreenMode)
         }
     }
@@ -142 +179 @@
         // console.log("view size:")
         // console.log("x " + viewSize.width + " y " + viewSize.height) 
 
-        const viewRatio =  viewSize.width / 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)
+        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){
+        if (svgRatio > viewRatio) {
             // svg is spaced in the middle 
             // top down is filled
             let xRatio = viewSize.width / mapImage.viewBox.width
@@ -164 +201 @@
 
             mapY = ((locationY - offsetY) / yFilled) * mapImage.viewBox.height
         }
-        else if(svgRatio < viewRatio){
+        else if (svgRatio < viewRatio) {
             // svg is spaced in the center 
             // left right is filled
             let yRatio = viewSize.height / mapImage.viewBox.height
@@ -186 +223 @@
             if (room.in_plan) {
                 // TODO
                 // console.log()
-                console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)
+                // console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)
 
                 const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, mapX, mapY)
 
@@ -225 +262 @@
                 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
+                Dimensions.get('window').height - 350, // not full screen
         })
     }, [fullScreenMode])
 
@@ -254 +291 @@
             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 }}>
+            <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>
@@ -297 +334 @@
                                         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,
-                                        //     });
-                                        // }}
+                                    // onLayout={(event) => {
+                                    //     setSvgDimensions({
+                                    //         width: event.nativeEvent.layout.width,
+                                    //         height: event.nativeEvent.layout.height,
+                                    //     });
+                                    // }}
                                     >
                                     </SvgXml>
                                 }

src/types/plan.ts

@@ -41 +41 @@
         x: number,
         y: number,
         width: number,
-        height: number
+        height: number,
     }
 }