+
setRadius(Math.min(Math.max(parseInt(e.target.value), 1), 10))}
/>
+
+ {tool === "shape" && (
+ <>
+
+
+
+
+ setFilled(!!checked)} className="w-6 h-6" />
+
+ )}
);
}
diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
index 963edae..606fb93 100644
--- a/src/components/toolbar/index.tsx
+++ b/src/components/toolbar/index.tsx
@@ -1,5 +1,6 @@
import { useContext } from "react";
import {
+ CircleIcon,
EraserIcon,
HandIcon,
LassoIcon,
@@ -7,6 +8,8 @@ import {
PaintBucketIcon,
PencilIcon,
PipetteIcon,
+ RectangleHorizontalIcon,
+ SplineIcon,
SquareDashedIcon,
WandIcon,
ZoomInIcon,
@@ -19,11 +22,19 @@ import { ToolContext } from "@/context/Tool";
import SelectedBlock from "./SelectedBlock";
+const shapeIconMap = {
+ line: SplineIcon,
+ rectangle: RectangleHorizontalIcon,
+ circle: CircleIcon,
+};
+
function Toolbar() {
- const { tool, setTool } = useContext(ToolContext);
+ const { tool, shape, setTool } = useContext(ToolContext);
const onToolChange = (value: string) => setTool(value as Tool);
+ const ShapeIconComponent = shapeIconMap[shape as keyof typeof shapeIconMap];
+
return (
+ {/* Shape */}
+
+
+
+ {ShapeIconComponent && }
+
+
+
+ Shape (U)
+
+
+
{/* Eyedropper */}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..e9d7a83
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+))
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+ Select,
+ SelectGroup,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
+ SelectLabel,
+ SelectItem,
+ SelectSeparator,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
+}
diff --git a/src/context/Selection.tsx b/src/context/Selection.tsx
index 8f088f3..cd00156 100644
--- a/src/context/Selection.tsx
+++ b/src/context/Selection.tsx
@@ -1,8 +1,9 @@
-import { createContext, ReactNode, useState } from "react";
+import React, { createContext, ReactNode, useRef, useState } from "react";
interface Context {
selectionCoords: CoordinateArray;
selectionLayerBlocks: Block[];
+ confirmHistoryEntryNameRef: React.MutableRefObject;
setSelectionCoords: React.Dispatch>;
setSelectionLayerBlocks: React.Dispatch>;
isInSelection: (x: number, y: number) => boolean;
@@ -17,6 +18,7 @@ export const SelectionContext = createContext({} as Context);
export const SelectionProvider = ({ children }: Props) => {
const [selectionCoords, setSelectionCoords] = useState([]);
const [selectionLayerBlocks, setSelectionLayerBlocks] = useState([]);
+ const confirmHistoryEntryNameRef = useRef("Move Selection");
const isInSelection = (x: number, y: number): boolean => {
if (selectionCoords.length !== 0) {
@@ -30,6 +32,7 @@ export const SelectionProvider = ({ children }: Props) => {
value={{
selectionCoords,
selectionLayerBlocks,
+ confirmHistoryEntryNameRef,
setSelectionCoords,
setSelectionLayerBlocks,
isInSelection,
diff --git a/src/context/Tool.tsx b/src/context/Tool.tsx
index f9132f0..64f6dda 100644
--- a/src/context/Tool.tsx
+++ b/src/context/Tool.tsx
@@ -4,9 +4,13 @@ interface Context {
tool: Tool;
radius: number;
selectedBlock: string;
+ shape: Shape;
+ filled: boolean;
setTool: React.Dispatch>;
setRadius: React.Dispatch>;
setSelectedBlock: React.Dispatch>;
+ setShape: React.Dispatch>;
+ setFilled: React.Dispatch>;
}
interface Props {
@@ -20,15 +24,22 @@ export const ToolProvider = ({ children }: Props) => {
const [radius, setRadius] = useState(1);
const [selectedBlock, setSelectedBlock] = useState("stone");
+ const [shape, setShape] = useState("line");
+ const [filled, setFilled] = useState(false);
+
return (
{children}
diff --git a/src/hooks/tools/move.ts b/src/hooks/tools/move.ts
index d065825..f17c0e2 100644
--- a/src/hooks/tools/move.ts
+++ b/src/hooks/tools/move.ts
@@ -5,7 +5,8 @@ import { CanvasContext } from "@/context/Canvas";
export function useMoveTool(mouseMovement: Position) {
const { setBlocks } = useContext(CanvasContext);
- const { selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks, isInSelection } = useContext(SelectionContext);
+ const { selectionLayerBlocks, confirmHistoryEntryNameRef, setSelectionCoords, setSelectionLayerBlocks, isInSelection } =
+ useContext(SelectionContext);
const use = () => {
// If there is no selection currently being moved...
@@ -29,6 +30,8 @@ export function useMoveTool(mouseMovement: Position) {
// Increase each coordinate in the selection by the mouse movement
setSelectionCoords((prev) => prev.map(([x, y]) => [x + mouseMovement.x, y + mouseMovement.y]));
setSelectionLayerBlocks((prev) => prev.map((b) => ({ ...b, x: b.x + mouseMovement.x, y: b.y + mouseMovement.y })));
+
+ confirmHistoryEntryNameRef.current = "Move Selection";
};
return { use };
diff --git a/src/hooks/tools/shape.ts b/src/hooks/tools/shape.ts
new file mode 100644
index 0000000..4910240
--- /dev/null
+++ b/src/hooks/tools/shape.ts
@@ -0,0 +1,154 @@
+import { useContext } from "react";
+
+import { SelectionContext } from "@/context/Selection";
+import { ToolContext } from "@/context/Tool";
+
+export function useShapeTool(mouseCoords: Position, dragStartCoords: Position, holdingShift: boolean) {
+ const { confirmHistoryEntryNameRef, setSelectionLayerBlocks } = useContext(SelectionContext);
+ const { selectedBlock, radius, shape, filled } = useContext(ToolContext);
+
+ const isRadiusEven = radius == 1 || radius % 2 == 0;
+
+ const use = () => {
+ switch (shape) {
+ case "line": {
+ // Bresenham line algorithm
+ const result: Block[] = [];
+ const dx = Math.abs(mouseCoords.x - dragStartCoords.x);
+ const dy = Math.abs(mouseCoords.y - dragStartCoords.y);
+ const sx = Math.sign(mouseCoords.x - dragStartCoords.x);
+ const sy = Math.sign(mouseCoords.y - dragStartCoords.y);
+
+ let err = dx - dy;
+ const currentStart = { ...dragStartCoords };
+
+ const offsetStart = isRadiusEven ? 0 : -Math.floor(radius / 2);
+ const offsetEnd = isRadiusEven ? radius : Math.floor(radius / 2) + (isRadiusEven ? 0 : 1);
+
+ while (true) {
+ // For loop increases the height/width of the line
+ for (let offset = offsetStart; offset < offsetEnd; offset++) {
+ result.push({ name: selectedBlock, x: currentStart.x, y: currentStart.y + offset });
+ }
+
+ if (currentStart.x === mouseCoords.x && currentStart.y === mouseCoords.y) break;
+
+ const e2 = 2 * err;
+ if (e2 > -dy) {
+ err -= dy;
+ currentStart.x += sx;
+ }
+ if (e2 < dx) {
+ err += dx;
+ currentStart.y += sy;
+ }
+ }
+
+ setSelectionLayerBlocks([...result]);
+ confirmHistoryEntryNameRef.current = "Line";
+ break;
+ }
+ case "rectangle": {
+ const result: Block[] = [];
+
+ const startX = Math.min(dragStartCoords.x, mouseCoords.x);
+ let endX = Math.max(dragStartCoords.x, mouseCoords.x);
+ const startY = Math.min(dragStartCoords.y, mouseCoords.y);
+ let endY = Math.max(dragStartCoords.y, mouseCoords.y);
+
+ const radiusOffset = isRadiusEven ? radius : radius - 1;
+ const borderOffset = isRadiusEven ? 0 : 1;
+
+ // If holding shift, create a square
+ if (holdingShift) {
+ const width = Math.abs(endX - startX);
+ const height = Math.abs(endY - startY);
+ const size = Math.max(width, height);
+
+ endX = startX + (endX < startX ? -size : size);
+ endY = startY + (endY < startY ? -size : size);
+ }
+
+ for (let x = startX; x < endX + radiusOffset; x++) {
+ for (let y = startY; y < endY + radiusOffset; y++) {
+ // If not filled, only add border blocks
+ if (
+ filled ||
+ (x > startX - radius && x < startX + radius) || // Left
+ (x >= endX - borderOffset && x < endX + radius) || // Right
+ (y > startY - radius && y < startY + radius) || // Top
+ (y >= endY - borderOffset && y < endY + radius) // Bottom
+ ) {
+ result.push({ name: selectedBlock, x, y });
+ }
+ }
+ }
+
+ setSelectionLayerBlocks(result);
+ confirmHistoryEntryNameRef.current = "Rectangle";
+ break;
+ }
+ case "circle": {
+ const result: Block[] = [];
+
+ const dx = Math.abs(mouseCoords.x - dragStartCoords.x);
+ const dy = Math.abs(mouseCoords.y - dragStartCoords.y);
+ const calculatedRadius = Math.floor(Math.sqrt(dx * dx + dy * dy) / 2);
+
+ const originX = dragStartCoords.x + calculatedRadius;
+ const originY = dragStartCoords.y + calculatedRadius;
+
+ // Bresenham circle algorithm
+ let x = 0;
+ let y = calculatedRadius;
+ let d = 3 - 2 * calculatedRadius;
+
+ if (filled) {
+ while (x <= y) {
+ for (let fillY = originY - y; fillY <= originY + y; fillY++) {
+ result.push({ name: selectedBlock, x: originX + x, y: fillY });
+ result.push({ name: selectedBlock, x: originX - x, y: fillY });
+ }
+ for (let fillY = originY - x; fillY <= originY + x; fillY++) {
+ result.push({ name: selectedBlock, x: originX + y, y: fillY });
+ result.push({ name: selectedBlock, x: originX - y, y: fillY });
+ }
+
+ if (d < 0) {
+ d = d + 4 * x + 6;
+ } else {
+ d = d + 4 * (x - y) + 10;
+ y--;
+ }
+ x++;
+ }
+ } else {
+ while (x <= y) {
+ result.push({ name: selectedBlock, x: originX + x, y: originY + y });
+ result.push({ name: selectedBlock, x: originX - x, y: originY + y });
+ result.push({ name: selectedBlock, x: originX + x, y: originY - y });
+ result.push({ name: selectedBlock, x: originX - x, y: originY - y });
+ result.push({ name: selectedBlock, x: originX + y, y: originY + x });
+ result.push({ name: selectedBlock, x: originX - y, y: originY + x });
+ result.push({ name: selectedBlock, x: originX + y, y: originY - x });
+ result.push({ name: selectedBlock, x: originX - y, y: originY - x });
+
+ if (d < 0) {
+ d = d + 4 * x + 6;
+ } else {
+ d = d + 4 * (x - y) + 10;
+ y--;
+ }
+ x++;
+ }
+ }
+
+ setSelectionLayerBlocks(result);
+ confirmHistoryEntryNameRef.current = "Circle";
+ break;
+ }
+ }
+ };
+
+ return { use };
+}
diff --git a/src/types.d.ts b/src/types.d.ts
index ce52895..dbae87a 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -23,7 +23,8 @@ interface Block extends Position {
type CoordinateArray = [number, number][];
-type Tool = "hand" | "move" | "rectangle-select" | "lasso" | "magic-wand" | "pencil" | "eraser" | "paint-bucket" | "eyedropper" | "zoom";
+type Tool = "hand" | "move" | "rectangle-select" | "lasso" | "magic-wand" | "pencil" | "eraser" | "paint-bucket" | "shape" | "eyedropper" | "zoom";
+type Shape = "line" | "rectangle" | "circle";
interface Settings {
grid: boolean;