Revize 9222f70c

re #10882: CastlePlan: OnTap select room fixed

src/components/plan/CastlePlanView.tsx

@@ -43 +43 @@
     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: (event, ctx: any) => {
@@ -138 +136 @@
     }
 
     const handleSvgPress = (event: GestureResponderEvent) => {
+        let locationX = event.nativeEvent.locationX
+        let locationY = event.nativeEvent.locationY
 
-        // TODO ????????????
-
-        const locationX = event.nativeEvent.locationX
-        const locationY = event.nativeEvent.locationY
-
-        // console.log("x " + event.nativeEvent.locationX + " y " + event.nativeEvent.locationY)
-        console.log("view size:")
-        console.log("x " + viewSize.width + " y " + viewSize.height) 
+        // 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)
+        // 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)    
+        // 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
 
-
-            // TODO recalculate mapY
+            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
 
-            // TODO recalculate mapX
+            mapX = ((locationX - offsetX) / xFilled) * mapImage.viewBox.width
         }
 
-        // console.log("x " + mapX + " y " + mapY)
-        // console.log("")
-
         // Check if the touch event is within the bounds of a room
         let clickedRoom: Room | undefined = undefined
 
-        // TODO set accordingaly
         const maxNumberDistance = 100
 
         let minDistance = Number.MAX_VALUE
@@ -203 +201 @@
         console.log('Room clicked with id:', clickedRoom?.id);
         console.log("x " + clickedRoom?.number_x + " y " + clickedRoom?.number_y)
         console.log(minDistance)
-        console.log("clicked: x " + locationX + " y " + locationY)
         console.log("translated clicked: x " + mapX + " y " + mapY)
 
         if (clickedRoom && minDistance < maxNumberDistance) {