32 lines
649 B
TypeScript
32 lines
649 B
TypeScript
|
import react from 'react';
|
||
|
|
||
|
import '../theme/layer.css';
|
||
|
|
||
|
const Layer: react.FC<{
|
||
|
shift: { x: number; y: number };
|
||
|
zoom: number;
|
||
|
children?: JSX.Element;
|
||
|
}> = (props: {
|
||
|
shift: { x: number; y: number };
|
||
|
zoom: number;
|
||
|
children?: JSX.Element;
|
||
|
}) => {
|
||
|
const {children: children, ...argProps} = props;
|
||
|
console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);
|
||
|
|
||
|
return (
|
||
|
<div
|
||
|
className='background'
|
||
|
style={{
|
||
|
transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${
|
||
|
props.zoom
|
||
|
})`,
|
||
|
}}
|
||
|
>
|
||
|
{props.children}
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default Layer;
|