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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 1x 1x 1x | import React from "react";
import { useAppSelector, useAppSelectorPick } from "store/hooks";
import { sceneSelectors } from "store/features/entities/entitiesSelectors";
interface SceneParallaxOverlayProps {
sceneId: string;
}
export const SceneParallaxOverlay = ({
sceneId,
}: SceneParallaxOverlayProps) => {
const scene = useAppSelectorPick(
(state) => sceneSelectors.selectById(state, sceneId),
["parallax", "height"],
);
const parallaxHoverLayer = useAppSelector(
(state) => state.editor.parallaxHoverLayer,
);
if (!scene || !scene.parallax || parallaxHoverLayer === undefined) {
return null;
}
return (
<div
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
zIndex: 100,
}}
>
{scene.parallax.map(
(layer, layerIndex, layers) =>
layerIndex !== layers.length - 1 && (
<div
key={layerIndex}
style={{
background:
parallaxHoverLayer === layerIndex
? `rgba(0,255,255,0.7)`
: `rgba(0,255,255,0.2)`,
height: (layer.height || 1) * 8,
borderBottom: "2px solid rgb(0,200,200)",
boxSizing: "border-box",
}}
/>
),
)}
<div
style={{
background:
parallaxHoverLayer === scene.parallax.length - 1
? `rgba(0,255,255,0.7)`
: `rgba(0,255,255,0.2)`,
height:
8 *
(scene.height -
scene.parallax.reduce(
(memo, layer, layerIndex, layers) =>
memo + layerIndex < layers.length - 1 ? layer.height || 1 : 0,
0,
)),
boxSizing: "border-box",
}}
/>
</div>
);
};
|