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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 1x 1x 1x 1x 1x 1x 1x | import { SCREEN_HEIGHT, SCREEN_WIDTH, TILE_SIZE } from "consts";
import React from "react";
import { SceneBoundsRect } from "shared/lib/resources/types";
import { useAppSelector } from "store/hooks";
import styled from "styled-components";
interface SceneScreenGridProps {
width: number;
height: number;
scrollBounds?: SceneBoundsRect;
}
const ScreenBounds = styled.div`
position: absolute;
border: 0.5px solid rgba(0, 219, 157, 0.4);
box-shadow: 0px 0px 0.5px rgba(0, 219, 157, 0.6);
`;
const SceneScreenGrid = ({
width,
height,
scrollBounds,
}: SceneScreenGridProps) => {
const showSceneScreenGridAlign = useAppSelector(
(state) => state.project.present.settings.showSceneScreenGrid,
);
const boundsX = scrollBounds?.x ?? 0;
const boundsY = scrollBounds?.y ?? 0;
const boundsW = scrollBounds?.width ?? width;
const boundsH = scrollBounds?.height ?? height;
return (
<div
style={{
position: "relative",
width: width * TILE_SIZE,
height: height * TILE_SIZE,
}}
>
{Array(Math.ceil(width / SCREEN_WIDTH))
.fill("")
.map((_, i) => {
const isLeftAligned =
showSceneScreenGridAlign === "topLeft" ||
showSceneScreenGridAlign === "bottomLeft";
const offset =
i * SCREEN_WIDTH * TILE_SIZE +
(isLeftAligned
? boundsX * TILE_SIZE
: (width - boundsX - boundsW) * TILE_SIZE);
// ❌ Skip if offset is at starting edge
if (offset === 0) return null;
return (
<ScreenBounds
key={`col-${i}`}
style={{
[isLeftAligned ? "left" : "right"]: offset,
top: 0,
width: 0,
height: height * TILE_SIZE,
}}
/>
);
})}
{Array(Math.ceil(height / SCREEN_HEIGHT))
.fill("")
.map((_, i) => {
const isTopAligned =
showSceneScreenGridAlign === "topLeft" ||
showSceneScreenGridAlign === "topRight";
const offset =
i * SCREEN_HEIGHT * TILE_SIZE +
(isTopAligned
? boundsY * TILE_SIZE
: (height - boundsY - boundsH) * TILE_SIZE);
// ❌ Skip if offset is at starting edge
if (offset === 0) return null;
return (
<ScreenBounds
key={`row-${i}`}
style={{
left: 0,
[isTopAligned ? "top" : "bottom"]: offset,
width: width * TILE_SIZE,
height: 0,
}}
/>
);
})}
</div>
);
};
export default SceneScreenGrid;
|