All files / src/components/world/entities/scenes SceneTileSelectionOverlay.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import styled from "styled-components";
import { useAppSelector } from "store/hooks";
import {
  TOOL_COLLISIONS,
  TOOL_COLORS,
  BRUSH_SELECTION,
  TILE_SIZE,
} from "consts";
 
interface SceneTileSelectionOverlayProps {
  sceneId: string;
}
 
const TileSelectionOutline = styled.div`
  position: absolute;
  z-index: 90;
  box-sizing: border-box;
  border: 1px solid ${(props) => props.theme.colors.highlightText};
  outline: 1px solid ${(props) => props.theme.colors.highlight};
  pointer-events: none;
`;
 
export const SceneTileSelectionOverlay = ({
  sceneId,
}: SceneTileSelectionOverlayProps) => {
  const tool = useAppSelector((state) => state.editor.tool);
  const selectedBrush = useAppSelector((state) => state.editor.selectedBrush);
 
  const scenePaintSelection = useAppSelector((state) => {
    const selection = state.editor.scenePaintSelection;
    return selection?.sceneId === sceneId ? selection : undefined;
  });
 
  const scenePaintSelectionMode =
    tool === TOOL_COLLISIONS
      ? "collisions"
      : tool === TOOL_COLORS
        ? "colors"
        : undefined;
 
  const activeScenePaintSelection =
    scenePaintSelection?.mode === scenePaintSelectionMode
      ? scenePaintSelection
      : undefined;
 
  Iif (selectedBrush !== BRUSH_SELECTION || !activeScenePaintSelection) {
    return null;
  }
 
  return (
    <TileSelectionOutline
      style={{
        left:
          (activeScenePaintSelection.selection.x +
            activeScenePaintSelection.offset.x) *
          TILE_SIZE,
        top:
          (activeScenePaintSelection.selection.y +
            activeScenePaintSelection.offset.y) *
          TILE_SIZE,
        width: activeScenePaintSelection.selection.width * TILE_SIZE,
        height: activeScenePaintSelection.selection.height * TILE_SIZE,
      }}
    />
  );
};