84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { useContext, useState } from "react";
|
|
import * as PIXI from "pixi.js";
|
|
|
|
import { CanvasContext } from "@/context/Canvas";
|
|
import { TexturesContext } from "@/context/Textures";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
function SaveImage({ close }: DialogProps) {
|
|
const { blocks, canvasSize } = useContext(CanvasContext);
|
|
const { missingTexture, textures } = useContext(TexturesContext);
|
|
|
|
const [fileName, setFileName] = useState("blockmatic");
|
|
|
|
const onSubmit = () => {
|
|
const width = canvasSize.maxX - canvasSize.minX;
|
|
const height = canvasSize.maxY - canvasSize.minY;
|
|
|
|
const renderer = new PIXI.Renderer({
|
|
width: 16 * width,
|
|
height: 16 * height,
|
|
backgroundAlpha: 1,
|
|
});
|
|
|
|
const container = new PIXI.Container();
|
|
blocks.forEach((block) => {
|
|
const texture = textures[`${block.name}.png`] ?? missingTexture;
|
|
const sprite = new PIXI.Sprite(texture);
|
|
sprite.x = block.x * 16;
|
|
sprite.y = block.y * 16;
|
|
container.addChild(sprite);
|
|
});
|
|
|
|
const renderTexture = PIXI.RenderTexture.create({
|
|
width: 16 * width,
|
|
height: 16 * height,
|
|
});
|
|
|
|
renderer.render(container, { renderTexture });
|
|
|
|
const canvas = renderer.extract.canvas(renderTexture);
|
|
canvas.toBlob!((blob) => {
|
|
if (!blob) return;
|
|
|
|
const link = document.createElement("a");
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = `${fileName}.png`;
|
|
link.click();
|
|
|
|
URL.revokeObjectURL(link.href);
|
|
});
|
|
|
|
renderer.destroy();
|
|
|
|
close();
|
|
};
|
|
|
|
return (
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Save as image (.png)</DialogTitle>
|
|
<DialogDescription>Save your canvas as a full size image</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} />
|
|
<span>.png</span>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={close}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" onClick={onSubmit}>
|
|
Download
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
);
|
|
}
|
|
|
|
export default SaveImage;
|