planpostai/canvas-backend
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

solved position issue

Browse source
This commit is contained in:
smfahim25 2025-02-02 17:26:55 +06:00
parent 2c4835c04a
commit 23aa2c2fbf
4 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/App.jsx
View file

@ -93,14 +93,19 @@ function App() {
// </div> // </div>
// </main> // </main>
// </div> // </div>
<div className="flex h-screen overflow-hidden">
<div className="flex h-screen">
<Sidebar /> <Sidebar />
{selectedPanel !== "" && <EditorPanel />} {selectedPanel !== "" && <EditorPanel />}
<div className="flex-1 relative"> <div className="flex-1 flex flex-col h-full overflow-hidden">
{" "}
{/* Changed */}
{activeObject && <TopBar />} {activeObject && <TopBar />}
<ActionButtons /> <ActionButtons />
<Canvas /> <div className="flex-1 overflow-auto">
{" "}
{/* Added wrapper */}
<Canvas />
</div>
<CanvasCapture /> <CanvasCapture />
</div> </div>
</div> </div>

7
src/components/Canvas/Canvas.jsx
View file

@ -26,7 +26,7 @@ export default function Canvas() {
setScreenWidth, setScreenWidth,
} = useContext(CanvasContext); } = useContext(CanvasContext);
const { activeObject, setActiveObject } = useContext(ActiveObjectContext); const { setActiveObject } = useContext(ActiveObjectContext);
const [zoomLevel, setZoomLevel] = useState(100); const [zoomLevel, setZoomLevel] = useState(100);
const containerRef = useRef(null); const containerRef = useRef(null);
@ -270,9 +270,8 @@ export default function Canvas() {
<div className="w-full max-w-4xl mx-auto p-4"> <div className="w-full max-w-4xl mx-auto p-4">
<Card <Card
className={`w-full p-2 rounded-none flex-1 flex flex-col className={`w-full p-2 rounded-none flex-1 flex flex-col
${activeObject ? "mt-20" : "mt-20"} mx-auto pl-5 pb-5 pt-5 border-0 shadow-none bg-transparent mt-20
mx-auto pl-5 pb-5 pt-5 border-0 shadow-none bg-transparent ${zoomLevel < 100 ? "overflow-hidden" : ""}`}
${zoomLevel < 100 ? "overflow-hidden" : ""}`}
> >
<CardContent <CardContent
className="p-0 h-full bg-transparent shadow-none" className="p-0 h-full bg-transparent shadow-none"

2
src/components/Layouts/LeftSidebar.jsx
View file

@ -24,7 +24,7 @@ const sidebarItems = [
export function Sidebar() { export function Sidebar() {
const { selectedPanel, setSelectedPanel } = useContext(CanvasContext); const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
return ( return (
<div className="w-20 border-r h-screen bg-background flex flex-col items-center py-4 gap-6"> <div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6">
{sidebarItems.map((item) => { {sidebarItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
return ( return (

2
src/components/Panel/TopBar.jsx
View file

@ -27,7 +27,7 @@ export function TopBar() {
<ScrollArea <ScrollArea
className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${ className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
selectedPanel !== "" selectedPanel !== ""
? "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[10%] xl:left-[25%] 2xl:left-[50%]" ? "w-[500px] lg:w-[700px] xl:w-[900px] xl:left-[25%] 2xl:left-[50%]"
: "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]" : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
} `} } `}
> >