world SceneScreenGrid.tsx

0% Statements 0/24

0% Branches 0/46

0% Functions 0/4

0% Lines 0/22

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

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
          Iif (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
          Iif (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;