trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: add animation to selection bar

Browse source
This commit is contained in:
trafficlunar 2025-01-24 14:57:00 +00:00
parent 5e01bb4318
commit f3e881fcec
2 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/canvas/SelectionToolbar.tsx
View file

@ -1,4 +1,4 @@
import { useContext } from "react"; import { useContext, useEffect, useState } from "react";
import { CheckIcon, XIcon } from "lucide-react"; import { CheckIcon, XIcon } from "lucide-react";
import { CanvasContext } from "@/context/Canvas"; import { CanvasContext } from "@/context/Canvas";
@ -10,6 +10,8 @@ function SelectionToolbar() {
const { blocks, setBlocks } = useContext(CanvasContext); const { blocks, setBlocks } = useContext(CanvasContext);
const { layerBlocks, setLayerBlocks } = useContext(SelectionContext); const { layerBlocks, setLayerBlocks } = useContext(SelectionContext);
const [isVisible, setIsVisible] = useState(false);
const confirmSelection = () => { const confirmSelection = () => {
const combinedBlocks = [...blocks, ...layerBlocks]; const combinedBlocks = [...blocks, ...layerBlocks];
const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values()); const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values());
@ -18,20 +20,25 @@ function SelectionToolbar() {
setLayerBlocks([]); setLayerBlocks([]);
}; };
return ( useEffect(() => {
layerBlocks.length != 0 && ( setIsVisible(layerBlocks.length !== 0);
<div className="absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center bg-white dark:bg-zinc-950 rounded shadow-xl border border-zinc-200 dark:border-zinc-800"> }, [layerBlocks]);
<span className="mr-4 ml-2">Selection</span>
{/* todo: place back blocks removed */} return (
<Button variant="ghost" className="w-8 h-8" onClick={() => setLayerBlocks([])}> <div
<XIcon /> className={`absolute left-1/2 -translate-x-1/2 bottom-4 flex items-center bg-white dark:bg-zinc-900 rounded-lg shadow-xl border border-zinc-200 dark:border-zinc-800 transition-all duration-300
</Button> ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6 pointer-events-none"}
<Button variant="ghost" className="w-8 h-8" onClick={confirmSelection}> `}
<CheckIcon /> >
</Button> {/* todo: place back blocks removed */}
</div> <Button variant="ghost" className="w-8 h-8" onClick={() => setLayerBlocks([])}>
) <XIcon />
</Button>
<span className="mx-2 text-[0.85rem]">Confirm selection?</span>
<Button variant="ghost" className="w-8 h-8" onClick={confirmSelection}>
<CheckIcon />
</Button>
</div>
); );
} }

2
src/index.css
View file

@ -33,5 +33,5 @@ body {
} }
.info-child { .info-child {
@apply bg-white dark:bg-zinc-950 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800; @apply bg-white dark:bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
} }