Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import type { Layer } from '@/shared/types';
interface LayerStackProps {
layers: Layer[];
width: number;
height: number;
bindCanvasRef: (id: string) => (el: HTMLCanvasElement | null) => void;
activeLayerId?: string | null;
}
/**
* Renders all project layers as static canvases.
* Pointer events pass through to DrawCanvas above.
*/
export const LayerStack = ({
layers,
width,
height,
bindCanvasRef,
activeLayerId,
}: LayerStackProps) => {
return (
<>
{layers.map((layer) => {
const isActive = layer.id === activeLayerId;
return (
<canvas
key={layer.id}
id={`layer-canvas-${layer.id}`}
data-layer-id={layer.id}
ref={bindCanvasRef(layer.id)}
width={width}
height={height}
style={{
position: 'absolute',
inset: 0,
opacity: layer.visible ? layer.opacity : 0,
pointerEvents: 'none',
boxShadow: isActive
? '0 0 10px 3px rgba(59,130,246,0.5)'
: 'none',
backgroundColor: 'transparent',
zIndex: layer.zIndex,
transition: 'box-shadow 0.25s ease-in-out',
}}
/>
);
})}
</>
);
};
|