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

View File

@ -59,10 +59,7 @@ export const LayerStack: react.FC<LayerStackProperties> = (
const activeTiledLayer = Math.floor(numberOfTiledLayers / 2); const activeTiledLayer = Math.floor(numberOfTiledLayers / 2);
const getTiledLayer = ( const getTiledLayer = (i: number) => {
i: number,
slippyGraphics?: typeof props.slippyGraphics
) => {
const relativeZoomLevel = i - activeTiledLayer; const relativeZoomLevel = i - activeTiledLayer;
const zoom = 2 ** relativeZoomLevel; const zoom = 2 ** relativeZoomLevel;
const origin = { const origin = {
@ -91,7 +88,6 @@ export const LayerStack: react.FC<LayerStackProperties> = (
shift={shift} shift={shift}
zoom={256 / zoom} zoom={256 / zoom}
coordinateSystem={props.coordinateSystem} coordinateSystem={props.coordinateSystem}
slippyGraphics={slippyGraphics}
/> />
); );
}; };
@ -116,8 +112,21 @@ export const LayerStack: react.FC<LayerStackProperties> = (
} }
{ {
// And the active one // 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> </g>
</svg> </svg>
); );

View File

@ -9,6 +9,7 @@ import react, {
import TileSet from './TileSet'; import TileSet from './TileSet';
import { Point, Rectangle, TileKeyObject } from './types'; import { Point, Rectangle, TileKeyObject } from './types';
import { CoordinateSystem } from './LiveMap'; import { CoordinateSystem } from './LiveMap';
import useViewport from './use-viewport';
export interface TiledLayerProperties { export interface TiledLayerProperties {
/** /**
@ -27,8 +28,6 @@ export interface TiledLayerProperties {
* The coordinate system * The coordinate system
*/ */
coordinateSystem: CoordinateSystem; 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 g = useRef<SVGGElement>(null);
const [viewPort, setViewPort] = useState<Rectangle>(); const viewPort = useViewport({ ...props, svgElement: g });
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]);
console.log( console.log(
`Rendering TiledLayer, zoom: ${props.zoom}, viewPort: ${JSON.stringify( `Rendering TiledLayer, zoom: ${props.zoom}, viewPort: ${JSON.stringify(
viewPort viewPort
)}, slippyGraphics: ${props.slippyGraphics}` )}`
); );
return ( return (
<> <>
@ -116,19 +64,6 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
}} }}
viewPort={viewPort} 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> </g>
</> </>
); );

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;