51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React, { createContext, ReactNode, useMemo, useState } from "react";
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
|
|
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,
|
|
maxX = -Infinity;
|
|
let minY = Infinity,
|
|
maxY = -Infinity;
|
|
|
|
blocks.forEach((coord) => {
|
|
if (coord.x < minX) minX = coord.x;
|
|
if (coord.x > maxX) maxX = coord.x;
|
|
if (coord.y < minY) minY = coord.y;
|
|
if (coord.y > maxY) maxY = coord.y;
|
|
});
|
|
|
|
return {
|
|
minX,
|
|
minY,
|
|
maxX: maxX + 1,
|
|
maxY: maxY + 1,
|
|
};
|
|
}, [blocks]);
|
|
|
|
return (
|
|
<CanvasContext.Provider value={{ stageSize, canvasSize, blocks, coords, scale, setStageSize, setBlocks, setCoords, setScale }}>
|
|
{children}
|
|
</CanvasContext.Provider>
|
|
);
|
|
};
|