Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 0733beb1

Přidáno uživatelem Fantič před více než 1 rok

re #10882: CastlePlan: Zoom to selected room

Zobrazit rozdíly:

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