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 | 1x 1x 1x 1x 1x 1x | import React from "react";
import styled from "styled-components";
import { useAppSelector } from "store/hooks";
import {
TOOL_COLLISIONS,
TOOL_COLORS,
TOOL_TILES,
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_TILES
? "tiles"
: tool === TOOL_COLLISIONS
? "collisions"
: tool === TOOL_COLORS
? "colors"
: undefined;
const activeScenePaintSelection =
scenePaintSelection?.mode === scenePaintSelectionMode
? scenePaintSelection
: undefined;
if (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,
}}
/>
);
};
|