27 lines
643 B
TypeScript
27 lines
643 B
TypeScript
import react from 'react';
|
|
import TiledLayer from './TiledLayer';
|
|
|
|
interface ViewportProperties {
|
|
boardSize: number;
|
|
shift: { x: number; y: number };
|
|
zoom: number;
|
|
}
|
|
|
|
const Viewport: react.FC<ViewportProperties> = (props: ViewportProperties) => {
|
|
return (
|
|
<svg height={props.boardSize} width={props.boardSize}>
|
|
<defs>
|
|
<TiledLayer id='tl16' zoomLevel={16} />
|
|
</defs>
|
|
<g
|
|
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
|
|
>
|
|
<circle cx='50' cy='50' r='50' />
|
|
<use x={0} y={0} href='#tl16' />
|
|
</g>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default Viewport;
|