Revize 0733beb1
Přidáno uživatelem Fantič před více než 1 rok
src/components/plan/CastlePlanView.tsx | ||
---|---|---|
17 | 17 |
import pointInSvgPolygon from "point-in-svg-polygon" |
18 | 18 |
import { ExitfullscreenIcon, FullscreenIcon } from '../general/Icons'; |
19 | 19 |
|
20 |
|
|
20 | 21 |
const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room, fullScreenMode?: boolean, height?: number, setSelectedRoom?: (room: Room) => void }) => { |
21 | 22 |
|
22 | 23 |
const DEFAULT_SCALE = 1 |
... | ... | |
27 | 28 |
|
28 | 29 |
const [fullScreenMode, setFullScreen] = useState(false); |
29 | 30 |
|
31 |
|
|
32 |
useEffect(() => { |
|
33 |
if (selectedRoom) { |
|
34 |
zoomToRoom(selectedRoom) |
|
35 |
} |
|
36 |
}, [selectedRoom]) |
|
37 |
|
|
30 | 38 |
useEffect(() => { |
31 | 39 |
if (props.fullScreenMode) { |
32 | 40 |
setFullScreen(props.fullScreenMode) |
... | ... | |
55 | 63 |
if (event.numberOfPointers === 1) { |
56 | 64 |
translateX.value = ctx.startX + event.translationX; |
57 | 65 |
translateY.value = ctx.startY + event.translationY; |
66 |
|
|
67 |
console.log("xTranslate " + translateX.value + " yTranslate " + translateY.value) |
|
58 | 68 |
} |
59 | 69 |
}, |
60 | 70 |
}); |
... | ... | |
94 | 104 |
}); |
95 | 105 |
|
96 | 106 |
|
107 |
|
|
97 | 108 |
function calculateStraightLineDistance(x1: number, y1: number, planX: number, planY: number) { |
98 | 109 |
// Apply scale and translations to both points |
99 | 110 |
|
... | ... | |
113 | 124 |
} |
114 | 125 |
|
115 | 126 |
const zoomToRoom = (room: Room) => { |
116 |
// Todo |
|
127 |
const mapX = room.number_x |
|
128 |
const mapY = room.number_y |
|
117 | 129 |
|
118 |
console.log(room) |
|
130 |
const viewRatio = viewSize.width / viewSize.height; |
|
131 |
const svgRatio = mapImage.viewBox.width / mapImage.viewBox.height; |
|
119 | 132 |
|
120 |
scale.value = 3; |
|
133 |
let locationX = (mapX / mapImage.viewBox.width) * viewSize.width; |
|
134 |
let locationY = (mapY / mapImage.viewBox.height) * viewSize.height; |
|
121 | 135 |
|
122 |
translateX.value = room.number_x + 100 |
|
123 |
translateY.value = room.number_y + 100 |
|
136 |
if (svgRatio > viewRatio) { |
|
137 |
// svg is spaced in the middle |
|
138 |
// top down is filled |
|
139 |
let xRatio = viewSize.width / mapImage.viewBox.width; |
|
140 |
let yFilled = xRatio * mapImage.viewBox.height; |
|
141 |
let offsetY = (viewSize.height - yFilled) / 2; |
|
142 |
|
|
143 |
locationY = (mapY / mapImage.viewBox.height) * yFilled + offsetY; |
|
144 |
} else if (svgRatio < viewRatio) { |
|
145 |
let yRatio = viewSize.height / mapImage.viewBox.height; |
|
146 |
let xFilled = yRatio * mapImage.viewBox.width; |
|
147 |
let offsetX = (viewSize.width - xFilled) / 2; |
|
148 |
|
|
149 |
locationX = (mapX / mapImage.viewBox.width) * xFilled + offsetX; |
|
150 |
} |
|
124 | 151 |
|
152 |
const scaleValue = 3 |
|
153 |
|
|
154 |
scale.value= scaleValue |
|
155 |
|
|
156 |
const offsetX = (viewSize.width / 2 - locationX) * (scaleValue - 1); |
|
157 |
const offsetY = (viewSize.height / 2 - locationY) * (scaleValue - 1); |
|
158 |
|
|
159 |
// Apply the translation including the offset |
|
160 |
translateX.value = viewSize.width / 2 - locationX + offsetX; |
|
161 |
translateY.value = viewSize.height / 2 - locationY + offsetY; |
|
125 | 162 |
} |
126 | 163 |
|
127 | 164 |
const handleFullScreenPressed = () => { |
128 | 165 |
if (scale.value != DEFAULT_SCALE || translateX.value != 0 || translateY.value != 0) { |
129 |
console.log("todo zoom out") |
|
166 |
// console.log("todo zoom out")
|
|
130 | 167 |
zoomOut() |
131 | 168 |
} |
132 | 169 |
else { |
133 |
console.log("Toggling fullscreen") |
|
170 |
// console.log("Toggling fullscreen")
|
|
134 | 171 |
setFullScreen && setFullScreen(!fullScreenMode) |
135 | 172 |
} |
136 | 173 |
} |
... | ... | |
142 | 179 |
// console.log("view size:") |
143 | 180 |
// console.log("x " + viewSize.width + " y " + viewSize.height) |
144 | 181 |
|
145 |
const viewRatio = viewSize.width / viewSize.height
|
|
182 |
const viewRatio = viewSize.width / viewSize.height |
|
146 | 183 |
// console.log("ratio: " + viewSize.width / viewSize.height) |
147 | 184 |
// console.log("svg size:") |
148 | 185 |
// console.log("x " + mapImage.viewBox.width + " y " + mapImage.viewBox.height) |
149 | 186 |
const svgRatio = mapImage.viewBox.width / mapImage.viewBox.height |
150 | 187 |
// console.log("ratio: " + mapImage.viewBox.width / mapImage.viewBox.height) |
151 | 188 |
|
152 |
|
|
153 |
let mapX = (locationX / viewSize.width) * mapImage.viewBox.width |
|
154 |
let mapY = (locationY / viewSize.height) * mapImage.viewBox.height |
|
155 | 189 |
|
156 |
// console.log("clicked: x " + locationX + " y " + locationY) |
|
190 |
let mapX = (locationX / viewSize.width) * mapImage.viewBox.width |
|
191 |
let mapY = (locationY / viewSize.height) * mapImage.viewBox.height |
|
192 |
|
|
193 |
console.log("clicked: x " + locationX + " y " + locationY) |
|
157 | 194 |
|
158 |
if(svgRatio > viewRatio){
|
|
195 |
if (svgRatio > viewRatio) {
|
|
159 | 196 |
// svg is spaced in the middle |
160 | 197 |
// top down is filled |
161 | 198 |
let xRatio = viewSize.width / mapImage.viewBox.width |
... | ... | |
164 | 201 |
|
165 | 202 |
mapY = ((locationY - offsetY) / yFilled) * mapImage.viewBox.height |
166 | 203 |
} |
167 |
else if(svgRatio < viewRatio){
|
|
204 |
else if (svgRatio < viewRatio) {
|
|
168 | 205 |
// svg is spaced in the center |
169 | 206 |
// left right is filled |
170 | 207 |
let yRatio = viewSize.height / mapImage.viewBox.height |
... | ... | |
186 | 223 |
if (room.in_plan) { |
187 | 224 |
// TODO |
188 | 225 |
// console.log() |
189 |
console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y) |
|
226 |
// console.log("Room + " + room.id + " x: " + room.number_x + " y: " + room.number_y)
|
|
190 | 227 |
|
191 | 228 |
const currentDistance = calculateStraightLineDistance(room.number_x, room.number_y, mapX, mapY) |
192 | 229 |
|
... | ... | |
225 | 262 |
Dimensions.get('window').width - 20, // not full screen |
226 | 263 |
height: fullScreenMode ? |
227 | 264 |
Dimensions.get('window').height - 122.5 : // full scren |
228 |
Dimensions.get('window').height -350, // not full screen |
|
265 |
Dimensions.get('window').height - 350, // not full screen
|
|
229 | 266 |
}) |
230 | 267 |
}, [fullScreenMode]) |
231 | 268 |
|
... | ... | |
254 | 291 |
borderWidth={fullScreenMode ? 0 : 1} |
255 | 292 |
> |
256 | 293 |
{/* control panel */} |
257 |
<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 }}> |
|
294 |
<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 }}>
|
|
258 | 295 |
<Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}> |
259 | 296 |
<FullscreenIcon color="white" /> |
260 | 297 |
</Pressable> |
... | ... | |
297 | 334 |
width={"100%"} |
298 | 335 |
height={"100%"} |
299 | 336 |
viewBox={`${0} ${0} ${mapImage.viewBox.width} ${mapImage.viewBox.height}`} |
300 |
// onLayout={(event) => {
|
|
301 |
// setSvgDimensions({
|
|
302 |
// width: event.nativeEvent.layout.width,
|
|
303 |
// height: event.nativeEvent.layout.height,
|
|
304 |
// });
|
|
305 |
// }}
|
|
337 |
// onLayout={(event) => { |
|
338 |
// setSvgDimensions({ |
|
339 |
// width: event.nativeEvent.layout.width, |
|
340 |
// height: event.nativeEvent.layout.height, |
|
341 |
// }); |
|
342 |
// }} |
|
306 | 343 |
> |
307 | 344 |
</SvgXml> |
308 | 345 |
} |
Také k dispozici: Unified diff
re #10882: CastlePlan: Zoom to selected room