bsherriff/siren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added bounds to grid

Browse Source
This commit is contained in:
Benjamin Sherriff
2023-10-24 16:35:32 -04:00
parent 75fd00fb7f
commit f972a77909
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/components/TileGrid/index.tsx
View File

@@ -7,14 +7,13 @@ import TileControls, { EditTool, Tool, defaultColors } from './TileControls';
export default function TileGrid() { export default function TileGrid() {
// Offset height of navbar from window height // Offset height of navbar from window height
const height = window ? window.innerHeight - 75 : 0; const height = window ? window.innerHeight - 70 : 0;
// Offset width of layout padding from window width // Offset width of layout padding from window width
const width = window ? window.innerWidth : 0; const width = window ? window.innerWidth : 0;
const [scale, setScale] = useState(1); const [scale, setScale] = useState(1);
const [zoom, setZoom] = useState(1); const [zoom, setZoom] = useState(1);
const [size, setSize] = useState({ width: width * 2, height: height * 2 }); const [gridSize, setGridSize] = useState({ width: width * 2, height: height * 2 });
const [boundaries, setBoundaries] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
const [mouseDown, setMouseDown] = useState(false); const [mouseDown, setMouseDown] = useState(false);
const [lastPosition, setLastPosition] = useState({ x: -width / 2, y: -height / 2 }); const [lastPosition, setLastPosition] = useState({ x: -width / 2, y: -height / 2 });
const [position, setPosition] = useState({ x: -width / 2, y: -height / 2 }); const [position, setPosition] = useState({ x: -width / 2, y: -height / 2 });
@@ -38,8 +37,8 @@ export default function TileGrid() {
const draw = useCallback((g: PixiGraphics) => { const draw = useCallback((g: PixiGraphics) => {
g.clear(); g.clear();
// Draw dot in the corner of each tile // Draw dot in the corner of each tile
for (let x = 0; x < size.width; x += 32 * scale) { for (let x = 0; x < gridSize.width; x += 32 * scale) {
for (let y = 0; y < size.height; y += 32 * scale) { for (let y = 0; y < gridSize.height; y += 32 * scale) {
g.beginFill(0xffffff, 0.5); g.beginFill(0xffffff, 0.5);
g.drawCircle(x, y, 1); g.drawCircle(x, y, 1);
g.endFill(); g.endFill();
@@ -56,9 +55,13 @@ export default function TileGrid() {
function moveEvent(e: MouseEvent) { function moveEvent(e: MouseEvent) {
if (mouseDown) { if (mouseDown) {
const dx = position.x + e.clientX - lastPosition.x; let dx = position.x + e.clientX - lastPosition.x;
const dy = position.y + e.clientY - lastPosition.y; let dy = position.y + e.clientY - lastPosition.y;
// TODO: Boundaries // Prevent coordinates from going out of bounds
dx = Math.min(dx, 0);
dx = Math.max(dx, -gridSize.width * scale + width);
dy = Math.min(dy, 0);
dy = Math.max(dy, -gridSize.height * scale + height);
setPosition({ x: dx, y: dy }); setPosition({ x: dx, y: dy });
setLastPosition({ x: e.clientX, y: e.clientY }); setLastPosition({ x: e.clientX, y: e.clientY });
} }
@@ -75,7 +78,7 @@ export default function TileGrid() {
} }
return ( return (
<> <Container>
<Stage <Stage
width={width} width={width}
height={height} height={height}
@@ -101,6 +104,6 @@ export default function TileGrid() {
selectedColor={selectedColor} selectedColor={selectedColor}
setSelectedColor={setSelectedColor} setSelectedColor={setSelectedColor}
/> />
</> </Container>
); );
} }