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 | 1x 1x 1x 1x 1x 1x 1x | import { TILE_SIZE } from "consts";
import React from "react";
import { SceneBoundsRect } from "shared/lib/resources/types";
import styled from "styled-components";
interface SceneScrollBoundsProps {
width: number;
height: number;
scrollBounds: SceneBoundsRect;
}
const BoundsEdge = styled.div`
position: absolute;
background: rgba(128, 128, 128, 0.8);
`;
const BoundsOutline = styled.div`
position: absolute;
outline: 1px solid rgba(0, 0, 0, 1);
`;
const SceneScrollBounds = ({
width,
height,
scrollBounds,
}: SceneScrollBoundsProps) => {
return (
<div
style={{
position: "relative",
width: width * TILE_SIZE,
height: height * TILE_SIZE,
}}
>
{scrollBounds.x > 0 && (
<BoundsEdge
style={{
left: 0,
width: scrollBounds.x * TILE_SIZE,
height: height * TILE_SIZE,
}}
/>
)}
{scrollBounds.y > 0 && (
<BoundsEdge
style={{
left: scrollBounds.x * TILE_SIZE,
top: 0,
width: scrollBounds.width * TILE_SIZE,
height: scrollBounds.y * TILE_SIZE,
}}
/>
)}
{scrollBounds.width < width && (
<BoundsEdge
style={{
right: 0,
width: (width - scrollBounds.width - scrollBounds.x) * TILE_SIZE,
height: height * TILE_SIZE,
}}
/>
)}
{scrollBounds.height < height && (
<BoundsEdge
style={{
bottom: 0,
left: scrollBounds.x * TILE_SIZE,
width: scrollBounds.width * TILE_SIZE,
height: (height - scrollBounds.height - scrollBounds.y) * TILE_SIZE,
}}
/>
)}
<BoundsOutline
style={{
left: scrollBounds.x * TILE_SIZE,
top: scrollBounds.y * TILE_SIZE,
width: scrollBounds.width * TILE_SIZE,
height: scrollBounds.height * TILE_SIZE,
}}
/>
</div>
);
};
export default SceneScrollBounds;
|