2022-09-07 17:33:54 +00:00
|
|
|
import react from 'react';
|
|
|
|
|
2022-09-08 21:26:31 +00:00
|
|
|
import '../theme/layer.css';
|
2022-09-07 17:33:54 +00:00
|
|
|
|
2022-09-08 21:26:31 +00:00
|
|
|
const Layer: react.FC<{
|
2022-09-07 19:44:59 +00:00
|
|
|
shift: { x: number; y: number };
|
2022-09-08 20:39:00 +00:00
|
|
|
zoom: number;
|
2022-09-08 21:20:47 +00:00
|
|
|
children?: JSX.Element;
|
|
|
|
}> = (props: {
|
|
|
|
shift: { x: number; y: number };
|
|
|
|
zoom: number;
|
|
|
|
children?: JSX.Element;
|
|
|
|
}) => {
|
|
|
|
const {children: children, ...argProps} = props;
|
2022-09-09 17:09:26 +00:00
|
|
|
console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);
|
2022-09-07 21:19:42 +00:00
|
|
|
|
2022-09-07 17:33:54 +00:00
|
|
|
return (
|
2022-09-07 19:44:59 +00:00
|
|
|
<div
|
|
|
|
className='background'
|
|
|
|
style={{
|
2022-09-08 21:20:47 +00:00
|
|
|
transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${
|
|
|
|
props.zoom
|
|
|
|
})`,
|
2022-09-07 19:44:59 +00:00
|
|
|
}}
|
|
|
|
>
|
2022-09-08 21:20:47 +00:00
|
|
|
{props.children}
|
2022-09-07 17:33:54 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-09-08 21:26:31 +00:00
|
|
|
export default Layer;
|