Changing components stacking.

This commit is contained in:
Eric van der Vlist 2022-09-24 00:29:42 +02:00
parent 548d4a43cb
commit 2831f901a7
4 changed files with 10 additions and 13 deletions

View File

@ -47,10 +47,10 @@ const Map: react.FC<{}> = (props: {}) => {
<CurrentLocation /> <CurrentLocation />
<Tracks /> <Tracks />
</Whiteboard> </Whiteboard>
</Slippy>
<Layer> <Layer>
<TiledMap /> <TiledMap />
</Layer> </Layer>
</Slippy>
</IonApp> </IonApp>
</IonContent> </IonContent>
<IonHeader className='ion-no-border' translucent={true}> <IonHeader className='ion-no-border' translucent={true}>

View File

@ -12,7 +12,7 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
); );
return ( return (
<svg width={window.innerWidth} height={window.innerHeight}> <svg width={window.innerWidth} height={window.innerHeight} className="whiteboard">
<g <g
transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`} transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
> >

View File

@ -28,15 +28,7 @@ const Slippy: react.FC<SlippyProps> = (props: SlippyProps) => {
<SingleTouchHandler> <SingleTouchHandler>
<DoubleTouchHandler> <DoubleTouchHandler>
<WheelHandler> <WheelHandler>
<div
style={{
position: 'fixed',
width: window.innerWidth + 'px',
height: window.innerHeight + 'px',
}}
>
{props.children} {props.children}
</div>
</WheelHandler> </WheelHandler>
</DoubleTouchHandler> </DoubleTouchHandler>
</SingleTouchHandler> </SingleTouchHandler>

View File

@ -13,6 +13,11 @@ ion-button.get-location {
margin-left: calc(50% - 20px); margin-left: calc(50% - 20px);
} }
.whiteboard {
position: fixed;
z-index: 1;
}
.input-file { .input-file {
width: 0.1px; width: 0.1px;
height: 0.1px; height: 0.1px;