57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
|
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;
|