39 lines
958 B
TypeScript
39 lines
958 B
TypeScript
import react, { ReactElement, ReactNode } from 'react';
|
|
|
|
interface SlippyBoardProperties {
|
|
boardSize: number;
|
|
shift: { x: number; y: number };
|
|
zoom: number;
|
|
layers?: {
|
|
key: string;
|
|
transform?: string;
|
|
content: ReactElement | ReactNode | ReactElement[] | ReactElement[][];
|
|
}[];
|
|
}
|
|
|
|
const SlippyBoard: react.FC<SlippyBoardProperties> = (
|
|
props: SlippyBoardProperties
|
|
) => {
|
|
return (
|
|
<svg height={props.boardSize} width={props.boardSize}>
|
|
<g
|
|
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
|
|
>
|
|
{props.layers
|
|
? props.layers.map((layer) => (
|
|
<g
|
|
className='layer'
|
|
key={layer.key}
|
|
transform={layer.transform === undefined ? '' : layer.transform}
|
|
>
|
|
{layer.content}
|
|
</g>
|
|
))
|
|
: null}
|
|
</g>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default SlippyBoard;
|