fix: add more properties to canvas context

src/components/canvas/Canvas.tsx

@@ -23,17 +23,13 @@ import welcomeBlocksData from "@/data/welcome.json";
 PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 
 function Canvas() {
-	const { canvasSize, blocks, setBlocks } = useContext(CanvasContext);
+	const { stageSize, canvasSize, blocks, coords, scale, setStageSize, setBlocks, setCoords, setScale } = useContext(CanvasContext);
 	const { image, imageDimensions } = useContext(ImageContext);
 	const { settings } = useContext(SettingsContext);
 	const textures = useContext(TexturesContext);
 	const { tool, selectedBlock, cssCursor, setTool, setCssCursor } = useContext(ToolContext);
 
 	const stageContainerRef = useRef<HTMLDivElement>(null);
-	const [stageSize, setStageSize] = useState<Dimension>({ width: 0, height: 0 });
-
-	const [coords, setCoords] = useState<Position>({ x: 0, y: 0 });
-	const [scale, setScale] = useState(1);
 
 	const [mousePosition, setMousePosition] = useState<Position>({ x: 0, y: 0 });
 	const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
@@ -76,7 +72,7 @@ function Canvas() {
 				y: mousePosition.y - ((mousePosition.y - coords.y) / scale) * newScale,
 			});
 		},
-		[coords, mousePosition, scale]
+		[coords, mousePosition, scale, setCoords]
 	);
 
 	const updateCssCursor = useCallback(() => {
@@ -134,7 +130,7 @@ function Canvas() {
 				y: Math.floor((mouseY - coords.y) / (16 * scale)),
 			});
 		},
-		[dragging, coords, scale, tool, onToolUse]
+		[dragging, coords, scale, tool, onToolUse, setCoords]
 	);
 
 	const onMouseDown = useCallback(() => {
@@ -156,7 +152,7 @@ function Canvas() {
 			setScale(newScale);
 			zoomToMousePosition(newScale);
 		},
-		[scale, zoomToMousePosition]
+		[scale, zoomToMousePosition, setScale]
 	);
 
 	const onClick = useCallback(() => {
@@ -166,7 +162,7 @@ function Canvas() {
 			setScale(newScale);
 			zoomToMousePosition(newScale);
 		}
-	}, [tool, holdingAlt, scale, zoomToMousePosition]);
+	}, [tool, holdingAlt, scale, zoomToMousePosition, setScale]);
 
 	const onKeyDown = (e: KeyboardEvent) => {
 		switch (e.key) {
@@ -267,8 +263,8 @@ function Canvas() {
 				)}
 			</Stage>
 
-			<CursorInformation mouseCoords={mouseCoords} blocks={blocks} />
+			<CursorInformation mouseCoords={mouseCoords} />
-			<CanvasInformation scale={scale} setScale={setScale} setCoords={setCoords} canvasSize={canvasSize} stageSize={stageSize} />
+			<CanvasInformation />
 		</div>
 	);
 }

src/components/canvas/information/Canvas.tsx

@@ -1,15 +1,10 @@
-import React from "react";
+import { useContext } from "react";
+import { CanvasContext } from "@/context/Canvas";
 import { Slider } from "@/components/ui/slider";
 
-interface Props {
+function CanvasInformation() {
-	scale: number;
+	const { stageSize, canvasSize, scale, setCoords, setScale } = useContext(CanvasContext);
-	setScale: React.Dispatch<React.SetStateAction<number>>;
-	setCoords: React.Dispatch<React.SetStateAction<Position>>;
-	canvasSize: CanvasSize;
-	stageSize: Dimension;
-}
 
-function CanvasInformation({ scale, setScale, setCoords, canvasSize, stageSize }: Props) {
 	const onValueChange = (value: number[]) => {
 		const newScale = value[0];
 		setScale(newScale);

src/components/canvas/information/Cursor.tsx

@@ -1,11 +1,13 @@
-import { useEffect, useState } from "react";
+import { CanvasContext } from "@/context/Canvas";
+import { useContext, useEffect, useState } from "react";
 
 interface Props {
 	mouseCoords: Position;
-	blocks: Block[];
 }
 
-function CursorInformation({ mouseCoords, blocks }: Props) {
+function CursorInformation({ mouseCoords }: Props) {
+	const { blocks } = useContext(CanvasContext);
+
 	const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
 	const [block, setBlock] = useState<Block>();
 

src/context/Canvas.tsx

@@ -5,13 +5,22 @@ interface Props {
 }
 
 export const CanvasContext = createContext({
+	stageSize: { width: 0, height: 0 } as Dimension,
 	canvasSize: { minX: 0, minY: 0, maxX: 0, maxY: 0 },
 	blocks: [] as Block[],
+	coords: { x: 0, y: 0 } as Position,
+	scale: 0,
+	setStageSize: ((size: Dimension) => {}) as React.Dispatch<React.SetStateAction<Dimension>>,
 	setBlocks: ((blocks: Block[]) => {}) as React.Dispatch<React.SetStateAction<Block[]>>,
+	setCoords: ((coords: Position) => {}) as React.Dispatch<React.SetStateAction<Position>>,
+	setScale: ((value: number) => {}) as React.Dispatch<React.SetStateAction<number>>,
 });
 
 export const CanvasProvider = ({ children }: Props) => {
+	const [stageSize, setStageSize] = useState({ width: 0, height: 0 } as Dimension);
 	const [blocks, setBlocks] = useState<Block[]>([]);
+	const [coords, setCoords] = useState<Position>({ x: 0, y: 0 });
+	const [scale, setScale] = useState(1);
 
 	const canvasSize = useMemo(() => {
 		let minX = Infinity,
@@ -34,5 +43,9 @@ export const CanvasProvider = ({ children }: Props) => {
 		};
 	}, [blocks]);
 
-	return <CanvasContext.Provider value={{ canvasSize, blocks, setBlocks }}>{children}</CanvasContext.Provider>;
+	return (
+		<CanvasContext.Provider value={{ stageSize, canvasSize, blocks, coords, scale, setStageSize, setBlocks, setCoords, setScale }}>
+			{children}
+		</CanvasContext.Provider>
+	);
 };