Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Creating a useViewport custom hook to ba used by both `<TiledLayer>` and slippy graphics.

This commit is contained in:
Eric van der Vlist 2022-11-17 14:06:05 +01:00
parent ef3759079c
commit fa049e36e5
3 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/map/LayerStack.tsx
View File

@ -59,10 +59,7 @@ export const LayerStack: react.FC<LayerStackProperties> = (
const activeTiledLayer = Math.floor(numberOfTiledLayers / 2);
const getTiledLayer = (
i: number,
slippyGraphics?: typeof props.slippyGraphics
) => {
const getTiledLayer = (i: number) => {
const relativeZoomLevel = i - activeTiledLayer;
const zoom = 2 ** relativeZoomLevel;
const origin = {
@ -91,7 +88,6 @@ export const LayerStack: react.FC<LayerStackProperties> = (
shift={shift}
zoom={256 / zoom}
coordinateSystem={props.coordinateSystem}
slippyGraphics={slippyGraphics}
/>
);
};
@ -116,8 +112,21 @@ export const LayerStack: react.FC<LayerStackProperties> = (
}
{
// And the active one
getTiledLayer(activeTiledLayer, props.slippyGraphics)
getTiledLayer(activeTiledLayer)
}
{/* {props.slippyGraphics !== undefined ? (
// Slippy graphics (if needed)
<>
{props.slippyGraphics.map((slippyGraphic) =>
cloneElement(slippyGraphic, {
keyObject: props.keyObject,
zoom: props.coordinateSystem.zoom,
viewPort: viewPort,
})
)}
{console.log('TiledLayer: adding slippyGraphics')},
</>
) : null} */}
</g>
</svg>
);

71
src/components/map/TiledLayer.tsx
View File

@ -9,6 +9,7 @@ import react, {
import TileSet from './TileSet';
import { Point, Rectangle, TileKeyObject } from './types';
import { CoordinateSystem } from './LiveMap';
import useViewport from './use-viewport';
export interface TiledLayerProperties {
/**
@ -27,8 +28,6 @@ export interface TiledLayerProperties {
* The coordinate system
*/
coordinateSystem: CoordinateSystem;
/** Slippy graphics are non scalable SVG snippets defined by geo locations */
slippyGraphics?: ReactElement<any, string | JSXElementConstructor<any>>[];
}
/**
@ -43,63 +42,12 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
) => {
const g = useRef<SVGGElement>(null);
const [viewPort, setViewPort] = useState<Rectangle>();
useEffect(() => {
console.log(
`TiledLayer zoom: ${props.zoom}, useEffect, g.current: ${g.current}`
);
if (
props.zoom === 256 &&
g.current !== null &&
g.current.ownerSVGElement !== null &&
g.current.ownerSVGElement.parentElement !== null
) {
const nearerHTMLParent = g.current.ownerSVGElement.parentElement;
setViewPort({
topLeft: {
x:
props.keyObject.x +
Math.floor(
-props.coordinateSystem.shift.x /
props.coordinateSystem.zoom /
256
),
y:
props.keyObject.y +
Math.floor(
-props.coordinateSystem.shift.y /
props.coordinateSystem.zoom /
256
),
},
bottomRight: {
x:
props.keyObject.x +
Math.ceil(
(-props.coordinateSystem.shift.x + nearerHTMLParent.offsetWidth) /
props.coordinateSystem.zoom /
256
) -
1,
y:
props.keyObject.y +
Math.ceil(
(-props.coordinateSystem.shift.y +
nearerHTMLParent.offsetHeight) /
props.coordinateSystem.zoom /
256
) -
1,
},
});
}
}, [props]);
const viewPort = useViewport({ ...props, svgElement: g });
console.log(
`Rendering TiledLayer, zoom: ${props.zoom}, viewPort: ${JSON.stringify(
viewPort
)}, slippyGraphics: ${props.slippyGraphics}`
)}`
);
return (
<>
@ -116,19 +64,6 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
}}
viewPort={viewPort}
/>
{props.slippyGraphics !== undefined && viewPort !== undefined ? (
// Slippy graphics (if needed)
<>
{props.slippyGraphics.map((slippyGraphic) =>
cloneElement(slippyGraphic, {
keyObject: props.keyObject,
zoom: props.coordinateSystem.zoom,
viewPort: viewPort,
})
)}
{console.log('TiledLayer: adding slippyGraphics')},
</>
) : null}
</g>
</>
);

56
src/components/map/use-viewport.ts Normal file
View File

@ -0,0 +1,56 @@
import { RefObject, useEffect, useRef, useState } from 'react';
import { CoordinateSystem } from './LiveMap';
import { Rectangle, TileKeyObject } from './types';
const useViewport = (props: {
keyObject: TileKeyObject;
coordinateSystem: CoordinateSystem;
zoom: number;
svgElement: RefObject<SVGGElement>;
}) => {
const { keyObject, coordinateSystem, zoom, svgElement } = props;
const [viewPort, setViewPort] = useState<Rectangle>();
useEffect(() => {
console.log(
`TiledLayer zoom: ${zoom}, useEffect, g.current: ${svgElement.current}`
);
if (
zoom === 256 &&
svgElement.current !== null &&
svgElement.current.ownerSVGElement !== null &&
svgElement.current.ownerSVGElement.parentElement !== null
) {
const nearerHTMLParent = svgElement.current.ownerSVGElement.parentElement;
setViewPort({
topLeft: {
x:
keyObject.x +
Math.floor(-coordinateSystem.shift.x / coordinateSystem.zoom / 256),
y:
keyObject.y +
Math.floor(-coordinateSystem.shift.y / coordinateSystem.zoom / 256),
},
bottomRight: {
x:
keyObject.x +
Math.ceil(
(-coordinateSystem.shift.x + nearerHTMLParent.offsetWidth) /
coordinateSystem.zoom /
256
) -
1,
y:
keyObject.y +
Math.ceil(
(-coordinateSystem.shift.y + nearerHTMLParent.offsetHeight) /
coordinateSystem.zoom /
256
) -
1,
},
});
}
}, [props.keyObject, props.coordinateSystem, props.zoom]);
return viewPort;
};
export default useViewport;