world SceneScrollBounds.tsx

0% Statements 0/8
0% Branches 0/8
0% Functions 0/1
0% Lines 0/8
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  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;