31 lines
700 B
TypeScript
31 lines
700 B
TypeScript
import react from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { MapState } from '../../store/map';
|
|
|
|
import '../../theme/layer.css';
|
|
|
|
|
|
const Layer: react.FC<{
|
|
children?: JSX.Element;
|
|
}> = (props: { children?: JSX.Element }) => {
|
|
const slippyState = useSelector(
|
|
(state: { map: MapState }) => state.map.slippy
|
|
);
|
|
console.log(
|
|
`--- Rendering layer, slippyState: ${JSON.stringify(slippyState)} ---`
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className='background'
|
|
style={{
|
|
transform: `translate(${slippyState.translation.x}px, ${slippyState.translation.y}px) scale(${slippyState.scale})`,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layer;
|