added all panel and solved canvas issue when claer and also added zoom functionallity
This commit is contained in:
smfahim25
parent
8e6637f7fb
commit
1cf062f326
26 changed files with 1875 additions and 1074 deletions
|
|
@ -16,3 +16,8 @@
|
|||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:size-4 svg {
|
||||
width: 1.3rem !important;
|
||||
height: 1.3rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import EditorPanel from "./components/Panel/EditorPanel";
|
|||
import CanvasContext from "./components/Context/canvasContext/CanvasContext";
|
||||
import Canvas from "./components/Canvas/Canvas";
|
||||
import ActiveObjectContext from "./components/Context/activeObject/ObjectContext";
|
||||
import CanvasCapture from "./components/CanvasCapture";
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
|
|
@ -100,6 +101,7 @@ function App() {
|
|||
{activeObject && <TopBar />}
|
||||
<ActionButtons />
|
||||
<Canvas />
|
||||
<CanvasCapture />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import CanvasContext from "./Context/canvasContext/CanvasContext";
|
||||
import OpenContext from "./Context/openContext/OpenContext";
|
||||
import { Button } from "./ui/button";
|
||||
import {
|
||||
Select,
|
||||
|
|
@ -28,6 +29,7 @@ const aspectRatios = [
|
|||
];
|
||||
|
||||
export function ActionButtons() {
|
||||
const { setCaptureOpen } = useContext(OpenContext);
|
||||
const { setCanvasRatio, canvasRatio } = useContext(CanvasContext);
|
||||
const handleRatioChange = (newRatio) => {
|
||||
setCanvasRatio(newRatio);
|
||||
|
|
@ -54,7 +56,12 @@ export function ActionButtons() {
|
|||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-5">
|
||||
<div
|
||||
className="mr-5"
|
||||
onClick={() => {
|
||||
setCaptureOpen(true);
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { useEffect, useContext } from "react";
|
||||
import { useEffect, useContext, useState, useRef } from "react";
|
||||
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||||
import OpenContext from "../Context/openContext/OpenContext";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Card, CardContent } from "../ui/card";
|
||||
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
|
||||
export default function Canvas() {
|
||||
const {
|
||||
|
|
@ -26,14 +27,35 @@ export default function Canvas() {
|
|||
} = useContext(CanvasContext);
|
||||
|
||||
const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
|
||||
const [zoomLevel, setZoomLevel] = useState(100);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
const handleZoom = (newZoom) => {
|
||||
const zoom = Math.min(Math.max(newZoom, 0), 100);
|
||||
setZoomLevel(zoom);
|
||||
|
||||
if (canvasRef.current && canvas) {
|
||||
const scale = zoom / 100;
|
||||
|
||||
// Update canvas dimensions
|
||||
const newWidth = canvasRef.current.offsetWidth * scale;
|
||||
const newHeight = canvasRef.current.offsetHeight * scale;
|
||||
|
||||
canvas.setWidth(newWidth);
|
||||
canvas.setHeight(newHeight);
|
||||
setCanvasWidth(newWidth);
|
||||
setCanvasHeight(newHeight);
|
||||
|
||||
canvas.renderAll();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!canvas) return; // Ensure canvas is available
|
||||
if (!canvas) return;
|
||||
|
||||
// Event handler for mouse down
|
||||
const handleMouseDown = (event) => {
|
||||
const target = event.target; // Get the clicked target
|
||||
const activeObject = canvas.getActiveObject(); // Get the active object
|
||||
const target = event.target;
|
||||
const activeObject = canvas.getActiveObject();
|
||||
|
||||
if (target) {
|
||||
if (target.type === "group") {
|
||||
|
|
@ -46,20 +68,99 @@ export default function Canvas() {
|
|||
}
|
||||
};
|
||||
|
||||
// Attach the event listener
|
||||
canvas.on("mouse:down", handleMouseDown);
|
||||
|
||||
// Cleanup function to remove the event listener
|
||||
return () => {
|
||||
canvas.off("mouse:down", handleMouseDown); // Remove the listener on unmount
|
||||
const handleWheel = (event) => {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
event.preventDefault();
|
||||
const delta = event.deltaY > 0 ? -1 : 1;
|
||||
handleZoom(zoomLevel + delta);
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
}, [canvas, setActiveObject]);
|
||||
|
||||
const handleKeyboard = (event) => {
|
||||
if (
|
||||
(event.ctrlKey || event.metaKey) &&
|
||||
(event.key === "=" || event.key === "-")
|
||||
) {
|
||||
event.preventDefault();
|
||||
const delta = event.key === "=" ? 1 : -1;
|
||||
handleZoom(zoomLevel + delta);
|
||||
}
|
||||
};
|
||||
|
||||
let lastDistance = 0;
|
||||
const handleTouchStart = (event) => {
|
||||
if (event.touches.length === 2) {
|
||||
const touch1 = event.touches[0];
|
||||
const touch2 = event.touches[1];
|
||||
lastDistance = Math.hypot(
|
||||
touch2.clientX - touch1.clientX,
|
||||
touch2.clientY - touch1.clientY
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchMove = (event) => {
|
||||
if (event.touches.length === 2) {
|
||||
event.preventDefault();
|
||||
const touch1 = event.touches[0];
|
||||
const touch2 = event.touches[1];
|
||||
const distance = Math.hypot(
|
||||
touch2.clientX - touch1.clientX,
|
||||
touch2.clientY - touch1.clientY
|
||||
);
|
||||
|
||||
if (lastDistance > 0) {
|
||||
const delta = distance - lastDistance;
|
||||
const zoomDelta = delta > 0 ? 1 : -1;
|
||||
handleZoom(zoomLevel + zoomDelta);
|
||||
}
|
||||
lastDistance = distance;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
lastDistance = 0;
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
handleZoom(zoomLevel);
|
||||
};
|
||||
|
||||
canvas.on("mouse:down", handleMouseDown);
|
||||
const canvasContainer = document.getElementById("canvas-ref");
|
||||
|
||||
if (canvasContainer) {
|
||||
canvasContainer.addEventListener("wheel", handleWheel, {
|
||||
passive: false,
|
||||
});
|
||||
canvasContainer.addEventListener("touchstart", handleTouchStart);
|
||||
canvasContainer.addEventListener("touchmove", handleTouchMove, {
|
||||
passive: false,
|
||||
});
|
||||
canvasContainer.addEventListener("touchend", handleTouchEnd);
|
||||
window.addEventListener("keydown", handleKeyboard);
|
||||
window.addEventListener("resize", handleResize);
|
||||
}
|
||||
|
||||
return () => {
|
||||
canvas.off("mouse:down", handleMouseDown);
|
||||
if (canvasContainer) {
|
||||
canvasContainer.removeEventListener("wheel", handleWheel);
|
||||
canvasContainer.removeEventListener("touchstart", handleTouchStart);
|
||||
canvasContainer.removeEventListener("touchmove", handleTouchMove);
|
||||
canvasContainer.removeEventListener("touchend", handleTouchEnd);
|
||||
window.removeEventListener("keydown", handleKeyboard);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
}
|
||||
};
|
||||
}, [canvas, setActiveObject, zoomLevel]);
|
||||
|
||||
useEffect(() => {
|
||||
import("fabric").then((fabricModule) => {
|
||||
window.fabric = fabricModule.fabric;
|
||||
});
|
||||
}, []);
|
||||
}, [canvasRef, fabricCanvasRef, setCanvas]);
|
||||
|
||||
const getRatioValue = (ratio) => {
|
||||
const [width, height] = ratio.split(":").map(Number);
|
||||
|
|
@ -69,42 +170,33 @@ export default function Canvas() {
|
|||
useEffect(() => {
|
||||
const updateCanvasSize = () => {
|
||||
if (canvasRef.current && canvas) {
|
||||
// Update canvas dimensions
|
||||
const newWidth = canvasRef?.current?.offsetWidth;
|
||||
const newHeight = canvasRef?.current?.offsetHeight;
|
||||
const newWidth = canvasRef.current.offsetWidth;
|
||||
const newHeight = canvasRef.current.offsetHeight;
|
||||
|
||||
canvas.setWidth(newWidth);
|
||||
canvas.setHeight(newHeight);
|
||||
setCanvasWidth(newWidth);
|
||||
setCanvasHeight(newHeight);
|
||||
|
||||
// Adjust the background image to fit the updated canvas size
|
||||
const bgImage = canvas.backgroundImage;
|
||||
if (bgImage) {
|
||||
// Calculate scaling factors for width and height
|
||||
const scaleX = newWidth / bgImage.width;
|
||||
const scaleY = newHeight / bgImage.height;
|
||||
|
||||
// Use the larger scale to cover the entire canvas
|
||||
const scale = Math.max(scaleX, scaleY);
|
||||
|
||||
// Apply scale and position the image
|
||||
bgImage.scaleX = scale;
|
||||
bgImage.scaleY = scale;
|
||||
bgImage.left = 0; // Align left
|
||||
bgImage.top = 0; // Align top
|
||||
bgImage.left = 0;
|
||||
bgImage.top = 0;
|
||||
|
||||
// Update the background image
|
||||
canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
|
||||
} else {
|
||||
// Render the canvas if no background image
|
||||
canvas.renderAll();
|
||||
}
|
||||
}
|
||||
|
||||
setScreenWidth(document.getElementById("root").offsetWidth);
|
||||
|
||||
// Handle responsive behavior for panels
|
||||
if (document.getElementById("root").offsetWidth <= 640) {
|
||||
setLeftPanelOpen(false);
|
||||
setRightPanelOpen(false);
|
||||
|
|
@ -114,13 +206,9 @@ export default function Canvas() {
|
|||
setOpenSetting(false);
|
||||
}
|
||||
};
|
||||
// Initial setup
|
||||
|
||||
updateCanvasSize();
|
||||
|
||||
// Listen for window resize
|
||||
window.addEventListener("resize", updateCanvasSize);
|
||||
|
||||
// Cleanup listener on unmount
|
||||
return () => window.removeEventListener("resize", updateCanvasSize);
|
||||
}, [
|
||||
setCanvasWidth,
|
||||
|
|
@ -139,44 +227,75 @@ export default function Canvas() {
|
|||
useEffect(() => {
|
||||
if (window.fabric) {
|
||||
if (fabricCanvasRef?.current) {
|
||||
fabricCanvasRef?.current.dispose();
|
||||
fabricCanvasRef.current.dispose();
|
||||
}
|
||||
// Set styles directly on the canvas element
|
||||
|
||||
const canvasElement = document.getElementById("fabric-canvas");
|
||||
if (canvasElement) {
|
||||
canvasElement.classList.add("fabric-canvas-container"); // Add the CSS class
|
||||
canvasElement.classList.add("fabric-canvas-container");
|
||||
}
|
||||
|
||||
fabricCanvasRef.current = new window.fabric.Canvas("fabric-canvas", {
|
||||
width: canvasRef?.current?.offsetWidth,
|
||||
height: canvasRef?.current?.offsetWidth,
|
||||
backgroundColor: "#ffffff",
|
||||
allowTouchScrolling: true,
|
||||
selection: true,
|
||||
preserveObjectStacking: true,
|
||||
});
|
||||
|
||||
setCanvas(fabricCanvasRef?.current);
|
||||
setCanvas(fabricCanvasRef.current);
|
||||
}
|
||||
}, []);
|
||||
}, [canvasRef, fabricCanvasRef, setCanvas]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Zoom Controls */}
|
||||
<div className="fixed bottom-4 right-4 flex items-center gap-4 bg-white p-3 rounded-lg shadow-lg z-50">
|
||||
<span className="text-sm font-medium min-w-[45px]">{zoomLevel}%</span>
|
||||
<Slider
|
||||
value={[zoomLevel]}
|
||||
onValueChange={(value) => handleZoom(value[0])}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Canvas Container */}
|
||||
<div className="w-full max-w-4xl mx-auto p-4">
|
||||
<Card
|
||||
className={`w-full max-w-3xl p-2 my-4 overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-background rounded-none flex-1 flex flex-col ${
|
||||
activeObject ? "mt-20" : "mt-20"
|
||||
} mx-auto bg-white pl-5 pb-5 pt-5 border-0 shadow-none`}
|
||||
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
|
||||
${zoomLevel < 100 ? "overflow-hidden" : ""}`}
|
||||
>
|
||||
<CardContent
|
||||
className="p-0 h-full bg-transparent shadow-none"
|
||||
ref={containerRef}
|
||||
>
|
||||
<CardContent className="p-0 space-y-2">
|
||||
<AspectRatio
|
||||
ratio={getRatioValue(canvasRatio)}
|
||||
className="overflow-y-scroll shadow-red-200 overflow-x-hidden shadow-lg rounded-lg border-2 border-primary/10 transition-all duration-300 ease-in-out hover:shadow-xl scrollbar-hide"
|
||||
className="rounded-lg border-0 border-primary/10 transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<div
|
||||
ref={canvasRef}
|
||||
className="w-full h-full flex items-center justify-center bg-white rounded-md shadow-lg"
|
||||
className="w-full h-full flex items-start justify-center rounded-md shadow-none touch-none"
|
||||
id="canvas-ref"
|
||||
style={{
|
||||
touchAction: "none",
|
||||
transform: `scale(${zoomLevel / 100})`,
|
||||
transformOrigin: "50% 0",
|
||||
transition: "transform 0.1s ease-out",
|
||||
}}
|
||||
>
|
||||
<canvas id="fabric-canvas" />
|
||||
</div>
|
||||
</AspectRatio>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
import { useContext, useRef, useState } from 'react'
|
||||
import CanvasContext from './Context/canvasContext/CanvasContext';
|
||||
import { Card, CardTitle } from './ui/card';
|
||||
import { Button } from './ui/button';
|
||||
import { Trash2, UploadIcon, X } from 'lucide-react';
|
||||
import { Separator } from './ui/separator';
|
||||
import ColorComponent from './ColorComponent';
|
||||
import { Label } from './ui/label';
|
||||
import { Input } from './ui/input';
|
||||
import { Slider } from './ui/slider';
|
||||
import { fabric } from 'fabric';
|
||||
import OpenContext from './Context/openContext/OpenContext';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import RndComponent from './Layouts/RndComponent';
|
||||
import { useContext, useRef, useState } from "react";
|
||||
import CanvasContext from "./Context/canvasContext/CanvasContext";
|
||||
import { Card, CardTitle } from "./ui/card";
|
||||
import { Button } from "./ui/button";
|
||||
import { Trash2, UploadIcon, X } from "lucide-react";
|
||||
import { Separator } from "./ui/separator";
|
||||
import ColorComponent from "./ColorComponent";
|
||||
import { Label } from "./ui/label";
|
||||
import { Input } from "./ui/input";
|
||||
import { Slider } from "./ui/slider";
|
||||
import { fabric } from "fabric";
|
||||
import OpenContext from "./Context/openContext/OpenContext";
|
||||
import { ScrollArea } from "./ui/scroll-area";
|
||||
import RndComponent from "./Layouts/RndComponent";
|
||||
|
||||
const CanvasSetting = () => {
|
||||
const { canvas, canvasHeight, canvasWidth, screenWidth } = useContext(CanvasContext);
|
||||
const { canvas, canvasHeight, canvasWidth, screenWidth } =
|
||||
useContext(CanvasContext);
|
||||
const { setOpenSetting } = useContext(OpenContext);
|
||||
const bgImgRef = useRef(null);
|
||||
|
||||
|
|
@ -32,9 +33,9 @@ const CanvasSetting = () => {
|
|||
}));
|
||||
|
||||
// Update canvas dimensions
|
||||
if (key === 'width') {
|
||||
if (key === "width") {
|
||||
canvas.setWidth(value); // Update canvas width
|
||||
} else if (key === 'height') {
|
||||
} else if (key === "height") {
|
||||
canvas.setHeight(value); // Update canvas height
|
||||
}
|
||||
|
||||
|
|
@ -166,24 +167,32 @@ const CanvasSetting = () => {
|
|||
maxWidth: 300,
|
||||
minHeight: 0,
|
||||
maxHeight: 400,
|
||||
bound: "parent"
|
||||
}
|
||||
bound: "parent",
|
||||
};
|
||||
const content = () => {
|
||||
return (
|
||||
<Card className="xl:p-0 lg:p-0 md:p-0 p-2">
|
||||
<CardTitle className="flex items-center flex-wrap justify-between gap-1 xl:hidden lg:hidden md:hidden">Canvas Setting <Button className="rnd-escape" variant="secondary" onClick={() => setOpenSetting(false)}><X /></Button> </CardTitle>
|
||||
<Card className="xl:p-0 lg:p-0 md:p-0 p-2 border-none shadow-none">
|
||||
<CardTitle className="flex items-center flex-wrap justify-between gap-1 xl:hidden lg:hidden md:hidden">
|
||||
Canvas Setting{" "}
|
||||
<Button
|
||||
className="rnd-escape"
|
||||
variant="secondary"
|
||||
onClick={() => setOpenSetting(false)}
|
||||
>
|
||||
<X />
|
||||
</Button>{" "}
|
||||
</CardTitle>
|
||||
<Separator className="mt-4 block xl:hidden lg:hidden md:hidden" />
|
||||
<ScrollArea className="h-[400px] xl:h-fit lg:h-fit md:h-fit">
|
||||
<div className='rnd-escape'>
|
||||
|
||||
<div className="rnd-escape">
|
||||
<ColorComponent />
|
||||
|
||||
<Separator className="mt-2" />
|
||||
|
||||
<div className='flex flex-col my-2 gap-2 rnd-escape'>
|
||||
<div className="flex flex-col my-2 gap-2 rnd-escape">
|
||||
<div>
|
||||
<Label>Background:</Label>
|
||||
<div className='flex items-center w-fit gap-2 flex-wrap relative'>
|
||||
<div className="flex items-center w-fit gap-2 flex-wrap relative">
|
||||
<Button className="top-0 absolute flex items-center w-[30px]">
|
||||
<UploadIcon className="cursor-pointer" />
|
||||
<Input
|
||||
|
|
@ -195,13 +204,19 @@ const CanvasSetting = () => {
|
|||
/>
|
||||
</Button>
|
||||
|
||||
<Button variant="secondary" className="ml-[35px]" onClick={removeBackgroundImage}><Trash2 /></Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="ml-[35px]"
|
||||
onClick={removeBackgroundImage}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Background Overlay:</Label>
|
||||
<div className='flex items-center w-fit gap-2 flex-wrap relative'>
|
||||
<div className="flex items-center w-fit gap-2 flex-wrap relative">
|
||||
<Button className="top-0 absolute flex items-center w-[30px]">
|
||||
<UploadIcon className="cursor-pointer" />
|
||||
<Input
|
||||
|
|
@ -212,15 +227,19 @@ const CanvasSetting = () => {
|
|||
/>
|
||||
</Button>
|
||||
|
||||
<Button variant="secondary" className="ml-[35px]" onClick={removeBackgroundOverlayImage}><Trash2 /></Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="ml-[35px]"
|
||||
onClick={removeBackgroundOverlayImage}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* opacity */}
|
||||
<div className='flex flex-col gap-2 rnd-escape mt-2'>
|
||||
<Label>
|
||||
Background Opacity:
|
||||
</Label>
|
||||
<div className="flex flex-col gap-2 rnd-escape mt-2">
|
||||
<Label>Background Opacity:</Label>
|
||||
<Slider
|
||||
defaultValue={[1.0]} // Default value, you can set it to 0.0 or another value
|
||||
min={0.0}
|
||||
|
|
@ -237,34 +256,30 @@ const CanvasSetting = () => {
|
|||
<Separator className="mt-4" />
|
||||
|
||||
{/* canvas size customization (width/height) */}
|
||||
<div className='flex gap-2 my-2'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<Label>
|
||||
Width:
|
||||
</Label>
|
||||
<div className="flex gap-2 my-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Width:</Label>
|
||||
<Input
|
||||
min={300}
|
||||
type="number"
|
||||
value={canvasSettings.width}
|
||||
onChange={(e) => {
|
||||
if (canvasWidth > parseInt(e.target.value)) {
|
||||
handleChange('width', parseInt(e.target.value, 10));
|
||||
handleChange("width", parseInt(e.target.value, 10));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-2'>
|
||||
<Label>
|
||||
Height:
|
||||
</Label>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Height:</Label>
|
||||
<Input
|
||||
min={300}
|
||||
type="number"
|
||||
value={canvasSettings.height}
|
||||
onChange={(e) => {
|
||||
if (canvasHeight > parseInt(e.target.value)) {
|
||||
handleChange('height', parseInt(e.target.value, 10));
|
||||
handleChange("height", parseInt(e.target.value, 10));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
@ -273,18 +288,14 @@ const CanvasSetting = () => {
|
|||
</div>
|
||||
</ScrollArea>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return screenWidth <= 768 ? (
|
||||
<RndComponent value={rndValue}>
|
||||
{content()}
|
||||
</RndComponent>
|
||||
<RndComponent value={rndValue}>{content()}</RndComponent>
|
||||
) : (
|
||||
<div>
|
||||
{content()}
|
||||
</div>
|
||||
<div>{content()}</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CanvasSetting
|
||||
export default CanvasSetting;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
|
||||
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
|
||||
import { useContext } from 'react'
|
||||
import { shapes } from './shapes';
|
||||
import { fabric } from 'fabric';
|
||||
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
||||
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
||||
import { useContext } from "react";
|
||||
import { shapes } from "./shapes";
|
||||
import { fabric } from "fabric";
|
||||
|
||||
const CustomShape = () => {
|
||||
const { canvas } = useContext(CanvasContext);
|
||||
|
|
@ -21,11 +21,12 @@ const CustomShape = () => {
|
|||
svgGroup.set({
|
||||
left: centerX, // Center horizontally
|
||||
top: centerY, // Center vertically
|
||||
originX: 'center', // Set the origin to the center
|
||||
originY: 'center',
|
||||
originX: "center", // Set the origin to the center
|
||||
originY: "center",
|
||||
fill: "#f09b0a",
|
||||
scaleX: 1,
|
||||
scaleY: 1,
|
||||
strokeWidth: 0,
|
||||
});
|
||||
|
||||
// Add SVG to the canvas
|
||||
|
|
@ -50,8 +51,8 @@ const CustomShape = () => {
|
|||
key={each.shape}
|
||||
className="relative aspect-square flex items-center justify-center bg-secondary rounded-md cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
addShape(each.source)
|
||||
e.stopPropagation();
|
||||
addShape(each.source);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
|
|
@ -62,7 +63,7 @@ const CustomShape = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomShape
|
||||
export default CustomShape;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
|
|||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { Lock, Unlock } from "lucide-react";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
|
||||
const LockObject = () => {
|
||||
const { canvas } = useContext(CanvasContext);
|
||||
|
|
@ -51,6 +52,7 @@ const LockObject = () => {
|
|||
|
||||
return (
|
||||
<div className="shadow-none border-0">
|
||||
<a data-tooltip-id="lock">
|
||||
<Button
|
||||
onClick={toggleLock}
|
||||
variant="outline"
|
||||
|
|
@ -64,6 +66,8 @@ const LockObject = () => {
|
|||
<Lock className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</a>
|
||||
<Tooltip id="lock" content="Lock object" place="bottom" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
import { useContext, useEffect, useState } from "react";
|
||||
import { BsTransparency } from "react-icons/bs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
|
||||
const OpacityCustomization = () => {
|
||||
const { activeObject } = useContext(ActiveObjectContext);
|
||||
|
|
@ -31,11 +32,14 @@ const OpacityCustomization = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<a data-tooltip-id="opacity-ic">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<BsTransparency className="h-4 w-4" size={20} />
|
||||
</Button>
|
||||
</a>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 mt-3">
|
||||
<div className="grid gap-4">
|
||||
|
|
@ -55,6 +59,8 @@ const OpacityCustomization = () => {
|
|||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Tooltip id="opacity-ic" content="Transparency" place="bottom" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Card, CardDescription, CardTitle } from "@/components/ui/card";
|
|||
import { Input } from "@/components/ui/input";
|
||||
import * as lucideIcons from "lucide-react";
|
||||
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
||||
import { fabric } from 'fabric';
|
||||
import { fabric } from "fabric";
|
||||
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
|
|
@ -16,8 +16,8 @@ const AllIconsPage = () => {
|
|||
const { toast } = useToast();
|
||||
|
||||
// Assume icons is already defined as shown previously, and filtered is created based on the search query
|
||||
const icons = Object.entries(lucideIcons)?.filter(([name, Icon]) =>
|
||||
!name.includes("Icon") && Icon?.$$typeof
|
||||
const icons = Object.entries(lucideIcons)?.filter(
|
||||
([name, Icon]) => !name.includes("Icon") && Icon?.$$typeof
|
||||
);
|
||||
|
||||
const filtered = icons.filter(([name, Icon]) =>
|
||||
|
|
@ -30,7 +30,7 @@ const AllIconsPage = () => {
|
|||
|
||||
const handleIcon = (e) => {
|
||||
// Check if the target is an SVG or path
|
||||
if (e.target.tagName.toLowerCase() === 'svg') {
|
||||
if (e.target.tagName.toLowerCase() === "svg") {
|
||||
// Serialize the SVG element to a string and pass it
|
||||
const svgString = new XMLSerializer().serializeToString(e.target);
|
||||
handleAddIcon(svgString);
|
||||
|
|
@ -39,7 +39,7 @@ const AllIconsPage = () => {
|
|||
title: "Invalid Choice",
|
||||
description: "The target is a path element! Select the full icon.",
|
||||
variant: "destructive",
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -62,21 +62,21 @@ const AllIconsPage = () => {
|
|||
|
||||
// Recursively set fill color for all objects
|
||||
const setFillColor = (obj, color) => {
|
||||
if (obj.type === 'group' && obj._objects) {
|
||||
if (obj.type === "group" && obj._objects) {
|
||||
obj._objects.forEach((child) => setFillColor(child, color));
|
||||
} else {
|
||||
obj.set('stroke', color);
|
||||
obj.set("stroke", color);
|
||||
}
|
||||
};
|
||||
|
||||
objects.forEach((obj) => setFillColor(obj, '#FFA500')); // Set fill color to orange
|
||||
objects.forEach((obj) => setFillColor(obj, "#FFA500")); // Set fill color to orange
|
||||
|
||||
const iconGroup = fabric.util.groupSVGElements(objects, options);
|
||||
iconGroup.set({
|
||||
left: canvas.width / 2,
|
||||
top: canvas.height / 2,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
originX: "center",
|
||||
originY: "center",
|
||||
scaleX: 6,
|
||||
scaleY: 6,
|
||||
});
|
||||
|
|
@ -97,40 +97,48 @@ const AllIconsPage = () => {
|
|||
return (
|
||||
<div style={style}>
|
||||
<div className="bg-red-50 rounded-md ml-1 p-1">
|
||||
<Icon size={32} className="cursor-pointer bg-primary rounded-md text-white p-1" onClick={handleIcon} />
|
||||
<p className="text-xs truncate w-full overflow-hidden whitespace-nowrap">{name}</p>
|
||||
<Icon
|
||||
size={32}
|
||||
className="cursor-pointer bg-primary rounded-md text-white p-1 mx-auto"
|
||||
onClick={handleIcon}
|
||||
/>
|
||||
<p className="text-xs text-center truncate w-full overflow-hidden whitespace-nowrap">
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col px-2 py-2 gap-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
|
||||
<CardTitle className="flex items-center flex-wrap my-1">All Icons</CardTitle>
|
||||
<CardDescription className="text-xs">All copyright (c) for Lucide are held by Lucide Contributors 2022.</CardDescription>
|
||||
<Card className="flex flex-col py-2 gap-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white border-none shadow-none">
|
||||
<CardTitle className="flex items-center flex-wrap my-1">
|
||||
All Icons
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
All copyright (c) for Lucide are held by Lucide Contributors 2022.
|
||||
</CardDescription>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search icons..."
|
||||
onChange={handleSearch}
|
||||
className="border p-2 mb-0 w-full"
|
||||
className="border p-2 mb-0 w-[280px]"
|
||||
/>
|
||||
<Card className="flex items-center justify-center rounded-none p-1">
|
||||
<Card className="flex items-center justify-center rounded-none p-1 border-none shadow-none">
|
||||
<Grid
|
||||
columnCount={4}
|
||||
columnWidth={50}
|
||||
columnCount={3}
|
||||
columnWidth={90}
|
||||
height={330}
|
||||
rowCount={Math.ceil(filtered.length / 4)}
|
||||
rowCount={Math.ceil(filtered.length / 3)}
|
||||
rowHeight={70}
|
||||
width={240}
|
||||
width={300}
|
||||
className="scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white"
|
||||
>
|
||||
{Cell}
|
||||
</Grid>
|
||||
</Card>
|
||||
</Card>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default AllIconsPage;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,36 @@
|
|||
import React, { useContext } from 'react'
|
||||
import { ArrowBigRight, Diamond, Hexagon, Octagon, Pentagon, Sparkle, Square, Star, Triangle } from 'lucide-react'
|
||||
import React, { useContext } from "react";
|
||||
import {
|
||||
ArrowBigRight,
|
||||
Diamond,
|
||||
Hexagon,
|
||||
Octagon,
|
||||
Pentagon,
|
||||
Sparkle,
|
||||
Square,
|
||||
Star,
|
||||
Triangle,
|
||||
} from "lucide-react";
|
||||
import ReactDOMServer from "react-dom/server";
|
||||
import { fabric } from 'fabric';
|
||||
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
|
||||
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { fabric } from "fabric";
|
||||
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
||||
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const RoundedShape = () => {
|
||||
const { canvas } = useContext(CanvasContext);
|
||||
const { setActiveObject } = useContext(ActiveObjectContext);
|
||||
|
||||
const shapes = [
|
||||
{ icon: <ArrowBigRight />, name: 'Arrow' },
|
||||
{ icon: <Diamond />, name: 'Diamond' },
|
||||
{ icon: <Hexagon />, name: 'Hexagon' },
|
||||
{ icon: <Octagon />, name: 'Octagon' },
|
||||
{ icon: <Pentagon />, name: 'Pentagon' },
|
||||
{ icon: <Sparkle />, name: 'Sparkle' },
|
||||
{ icon: <Square />, name: 'Square' },
|
||||
{ icon: <Star />, name: 'Star' },
|
||||
{ icon: <Triangle />, name: 'Triangle' },
|
||||
{ icon: <ArrowBigRight />, name: "Arrow" },
|
||||
{ icon: <Diamond />, name: "Diamond" },
|
||||
{ icon: <Hexagon />, name: "Hexagon" },
|
||||
{ icon: <Octagon />, name: "Octagon" },
|
||||
{ icon: <Pentagon />, name: "Pentagon" },
|
||||
{ icon: <Sparkle />, name: "Sparkle" },
|
||||
{ icon: <Square />, name: "Square" },
|
||||
{ icon: <Star />, name: "Star" },
|
||||
{ icon: <Triangle />, name: "Triangle" },
|
||||
];
|
||||
|
||||
const addObject = (icon) => {
|
||||
|
|
@ -45,23 +55,23 @@ const RoundedShape = () => {
|
|||
iconGroup.set({
|
||||
left: canvas.width / 2,
|
||||
top: canvas.height / 2,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
originX: "center",
|
||||
originY: "center",
|
||||
fill: "#f09b0a",
|
||||
scaleX: 6,
|
||||
scaleY: 6,
|
||||
strokeWidth: 0,
|
||||
stroke: "#ffffff"
|
||||
stroke: "#ffffff",
|
||||
});
|
||||
canvas.add(iconGroup);
|
||||
canvas.setActiveObject(iconGroup);
|
||||
setActiveObject(iconGroup)
|
||||
setActiveObject(iconGroup);
|
||||
canvas.renderAll();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-2 bg-gradient-to-br from-white to-gray-100 rounded-xl shadow-lg">
|
||||
<Card className="p-2 border-none shadow-none">
|
||||
<h2 className="font-semibold text-sm mb-1">Rounded Shapes</h2>
|
||||
<Separator className="my-2" />
|
||||
<div className="grid grid-cols-3 gap-y-4 gap-x-2">
|
||||
|
|
@ -79,7 +89,7 @@ const RoundedShape = () => {
|
|||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default RoundedShape
|
||||
export default RoundedShape;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
|
||||
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
|
||||
import React, { useContext } from 'react'
|
||||
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
|
||||
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
|
||||
import React, { useContext } from "react";
|
||||
import ReactDOMServer from "react-dom/server";
|
||||
import { fabric } from 'fabric';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Badge, Circle, Heart, Shield } from 'lucide-react';
|
||||
import { fabric } from "fabric";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Badge, Circle, Heart, Shield } from "lucide-react";
|
||||
|
||||
const PlainShapes = () => {
|
||||
const { canvas } = useContext(CanvasContext);
|
||||
|
|
@ -13,96 +13,248 @@ const PlainShapes = () => {
|
|||
|
||||
const shapes = [
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" className="lucide lucide-arrow-big-left" fill='orange'>
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
className="lucide lucide-arrow-big-left"
|
||||
fill="orange"
|
||||
>
|
||||
<path d="M18 15H12v4L5 12l7-7v4h6v6z" />
|
||||
</svg>, name: 'Arrow'
|
||||
</svg>
|
||||
),
|
||||
name: "Arrow",
|
||||
},
|
||||
|
||||
{ icon: <Badge />, name: 'Badge' },
|
||||
{ icon: <Circle />, name: 'Circle' },
|
||||
|
||||
{ icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill='orange' className="lucide lucide-club"><path d="M17.28 9.05a5.5 5.5 0 1 0-10.56 0A5.5 5.5 0 1 0 12 17.66a5.5 5.5 0 1 0 5.28-8.6Z" /></svg>, name: 'Club' },
|
||||
{ icon: <Badge />, name: "Badge" },
|
||||
{ icon: <Circle />, name: "Circle" },
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ea580c" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" className="lucide lucide-cross">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-club"
|
||||
>
|
||||
<path d="M17.28 9.05a5.5 5.5 0 1 0-10.56 0A5.5 5.5 0 1 0 12 17.66a5.5 5.5 0 1 0 5.28-8.6Z" />
|
||||
</svg>
|
||||
),
|
||||
name: "Club",
|
||||
},
|
||||
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#ea580c"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="butt"
|
||||
strokeLinejoin="miter"
|
||||
className="lucide lucide-cross"
|
||||
>
|
||||
<path d="M4 12h16M12 4v16" />
|
||||
</svg>, name: 'Cross'
|
||||
</svg>
|
||||
),
|
||||
name: "Cross",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-diamond">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-diamond"
|
||||
>
|
||||
<path d="M12 2L22 12L12 22L2 12Z" />
|
||||
</svg>, name: 'Diamond'
|
||||
</svg>
|
||||
),
|
||||
name: "Diamond",
|
||||
},
|
||||
|
||||
{ icon: <Heart />, name: 'Heart' },
|
||||
{ icon: <Heart />, name: "Heart" },
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-hexagon">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-hexagon"
|
||||
>
|
||||
<path d="M12 2L21 8v8l-9 6-9-6V8L12 2z" />
|
||||
</svg>, name: 'Hexagon'
|
||||
</svg>
|
||||
),
|
||||
name: "Hexagon",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="white" stroke="#ea580c" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" className="lucide lucide-arrow-right">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="white"
|
||||
stroke="#ea580c"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="butt"
|
||||
strokeLinejoin="miter"
|
||||
className="lucide lucide-arrow-right"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
</svg>, name: 'Line'
|
||||
</svg>
|
||||
),
|
||||
name: "Line",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" stroke="#ec7e7e" strokeWidth="0" className="lucide lucide-octagon">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
stroke="#ec7e7e"
|
||||
strokeWidth="0"
|
||||
className="lucide lucide-octagon"
|
||||
>
|
||||
<path d="M4 8 L8 4 H16 L20 8 V16 L16 20 H8 L4 16 Z" />
|
||||
</svg>, name: 'Octagon'
|
||||
</svg>
|
||||
),
|
||||
name: "Octagon",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-pentagon">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-pentagon"
|
||||
>
|
||||
<path d="M2 11 L12 2 L22 11 L19 21 L5 21 Z" />
|
||||
</svg>, name: 'Pentagon'
|
||||
</svg>
|
||||
),
|
||||
name: "Pentagon",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill='orange' className="lucide lucide-rectangle-horizontal">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-rectangle-horizontal"
|
||||
>
|
||||
<path d="M2 6h20v12H2z" />
|
||||
</svg>, name: 'Rectangle'
|
||||
</svg>
|
||||
),
|
||||
name: "Rectangle",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-triangle-right">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-triangle-right"
|
||||
>
|
||||
<path d="M2 4 L22 20 L2 20 Z" />
|
||||
</svg>, name: 'Right Triangle'
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
icon: <Shield fill="orange" stroke="0" />, name: 'Shield'
|
||||
</svg>
|
||||
),
|
||||
name: "Right Triangle",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-square">
|
||||
icon: <Shield fill="orange" stroke="0" />,
|
||||
name: "Shield",
|
||||
},
|
||||
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-square"
|
||||
>
|
||||
<path d="M3 3h18v18H3z" />
|
||||
</svg>, name: 'Rectangle Square'
|
||||
</svg>
|
||||
),
|
||||
name: "Rectangle Square",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-star">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-star"
|
||||
>
|
||||
<path d="M12 2 L14.85 8.9 L22 10 L16.5 14.5 L18 21 L12 17.5 L6 21 L7.5 14.5 L2 10 L9.15 8.9 Z" />
|
||||
</svg>, name: 'Star'
|
||||
</svg>
|
||||
),
|
||||
name: "Star",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-triangle">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-triangle"
|
||||
>
|
||||
<path d="M12 4L4 20h16L12 4Z" />
|
||||
</svg>, name: 'Triangle'
|
||||
</svg>
|
||||
),
|
||||
name: "Triangle",
|
||||
},
|
||||
|
||||
{
|
||||
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-rectangle-vertical scale-125">
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 24 24"
|
||||
fill="orange"
|
||||
className="lucide lucide-rectangle-vertical scale-125"
|
||||
>
|
||||
<path d="M6 2h12v20H6z" />
|
||||
</svg>, name: 'Rectangle Vertical'
|
||||
</svg>
|
||||
),
|
||||
name: "Rectangle Vertical",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
const addObject = (icon, name) => {
|
||||
|
|
@ -127,8 +279,8 @@ const PlainShapes = () => {
|
|||
iconGroup.set({
|
||||
left: canvas.width / 2,
|
||||
top: canvas.height / 2,
|
||||
originX: 'center',
|
||||
originY: 'center',
|
||||
originX: "center",
|
||||
originY: "center",
|
||||
fill: "#f09b0a",
|
||||
scaleX: 6,
|
||||
scaleY: 6,
|
||||
|
|
@ -140,17 +292,17 @@ const PlainShapes = () => {
|
|||
if (name === "Line") {
|
||||
iconGroup.set({
|
||||
strokeWidth: 2,
|
||||
})
|
||||
});
|
||||
}
|
||||
canvas.add(iconGroup);
|
||||
canvas.setActiveObject(iconGroup);
|
||||
setActiveObject(iconGroup)
|
||||
setActiveObject(iconGroup);
|
||||
canvas.renderAll();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-2 bg-gradient-to-br from-white to-gray-100 rounded-xl shadow-lg">
|
||||
<Card className="p-2 rounded-xl shadow-none border-none">
|
||||
<h2 className="font-semibold text-sm mb-1">Plain Shapes</h2>
|
||||
<Separator className="my-2" />
|
||||
<div className="grid grid-cols-3 gap-y-4 gap-x-2">
|
||||
|
|
@ -168,7 +320,7 @@ const PlainShapes = () => {
|
|||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default PlainShapes
|
||||
export default PlainShapes;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,30 @@
|
|||
import { useContext, useRef, useState } from 'react'
|
||||
import CanvasContext from '../Context/canvasContext/CanvasContext'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { fabric } from 'fabric'
|
||||
import { ImageIcon, Trash2 } from 'lucide-react'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import Resizer from "react-image-file-resizer"
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import ImageCustomization from './Customization/ImageCustomization'
|
||||
import { Separator } from '../ui/separator'
|
||||
import ActiveObjectContext from '../Context/activeObject/ObjectContext'
|
||||
import { useContext, useRef, useState } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { fabric } from "fabric";
|
||||
import { ImageIcon, Trash2 } from "lucide-react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import Resizer from "react-image-file-resizer";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import ImageCustomization from "./Customization/ImageCustomization";
|
||||
import { Separator } from "../ui/separator";
|
||||
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
|
||||
|
||||
const UploadImage = () => {
|
||||
const { canvas } = useContext(CanvasContext);
|
||||
|
|
@ -20,7 +32,7 @@ const UploadImage = () => {
|
|||
const [height, setHeight] = useState(1080);
|
||||
const [quality, setQuality] = useState(100);
|
||||
const [rotation, setRotation] = useState("0");
|
||||
const [format, setFormat] = useState('JPEG');
|
||||
const [format, setFormat] = useState("JPEG");
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
|
||||
|
|
@ -30,7 +42,7 @@ const UploadImage = () => {
|
|||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
accept: {
|
||||
'image/*': ['.jpeg', '.png', '.gif', '.jpg', '.webp', '.svg']
|
||||
"image/*": [".jpeg", ".png", ".gif", ".jpg", ".webp", ".svg"],
|
||||
},
|
||||
// maxSize: 5 * 1024 * 1024, // 5MB max file size
|
||||
multiple: false,
|
||||
|
|
@ -68,25 +80,25 @@ const UploadImage = () => {
|
|||
URL.revokeObjectURL(blobUrl); // Clean up
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const removeFile = () => {
|
||||
// Revoke the object URL to free up memory
|
||||
if (preview) {
|
||||
URL.revokeObjectURL(preview)
|
||||
URL.revokeObjectURL(preview);
|
||||
}
|
||||
setFile(null)
|
||||
setPreview(null)
|
||||
setFile(null);
|
||||
setPreview(null);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ""
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
if (activeObject?.type === "image") {
|
||||
canvas.remove(activeObject);
|
||||
setActiveObject(null);
|
||||
canvas.renderAll();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = (file, callback) => {
|
||||
Resizer.imageFileResizer(
|
||||
|
|
@ -97,35 +109,37 @@ const UploadImage = () => {
|
|||
quality,
|
||||
parseInt(rotation),
|
||||
(resizedFile) => {
|
||||
callback(resizedFile)
|
||||
callback(resizedFile);
|
||||
},
|
||||
'file',
|
||||
)
|
||||
}
|
||||
"file"
|
||||
);
|
||||
};
|
||||
|
||||
const addImageToCanvas = (file) => {
|
||||
const blobUrl = URL.createObjectURL(file)
|
||||
const blobUrl = URL.createObjectURL(file);
|
||||
fabric.Image.fromURL(blobUrl, (img) => {
|
||||
img.set({
|
||||
left: canvas.width / 4,
|
||||
top: canvas.height / 4,
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
})
|
||||
canvas.add(img)
|
||||
});
|
||||
canvas.add(img);
|
||||
canvas.setActiveObject(img);
|
||||
// Update the active object state
|
||||
setActiveObject(img);
|
||||
canvas.renderAll();
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full mx-auto">
|
||||
<Card className="w-full border-none shadow-none">
|
||||
<CardHeader className="px-4 py-3">
|
||||
<CardTitle>Image Upload & Editing</CardTitle>
|
||||
<CardDescription>Upload, resize, and apply effects to your images</CardDescription>
|
||||
<CardDescription>
|
||||
Upload, resize, and apply effects to your images
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-2">
|
||||
<Tabs defaultValue="upload">
|
||||
|
|
@ -203,26 +217,30 @@ const UploadImage = () => {
|
|||
</div>
|
||||
|
||||
{/* upload image */}
|
||||
{
|
||||
!preview &&
|
||||
{!preview && (
|
||||
<div className="max-w-md mx-auto p-4">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`}
|
||||
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${
|
||||
isDragActive
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-gray-300 hover:border-primary"
|
||||
} ${preview ? "hidden" : ""}`}
|
||||
ref={fileInputRef}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div className="flex flex-col items-center justify-center space-y-4">
|
||||
<ImageIcon
|
||||
className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
|
||||
className={`h-12 w-12 ${
|
||||
isDragActive ? "text-primary" : "text-gray-400"
|
||||
}`}
|
||||
/>
|
||||
<p className="text-sm text-gray-600">
|
||||
{isDragActive
|
||||
? 'Drop file here'
|
||||
: 'Drag \'n\' drop an image, or click to select a file'
|
||||
}
|
||||
? "Drop file here"
|
||||
: "Drag 'n' drop an image, or click to select a file"}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
(Max 5MB, image files only)
|
||||
|
|
@ -232,32 +250,36 @@ const UploadImage = () => {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
|
||||
{/* preview image */}
|
||||
{preview && (
|
||||
<Card className="overflow-y-scroll rounded-none">
|
||||
<CardContent className="mt-2 mb-2">
|
||||
<div className="w-fit aspect-square relative h-[100%]">
|
||||
{
|
||||
file?.type === "image/svg+xml" ? <object
|
||||
{file?.type === "image/svg+xml" ? (
|
||||
<object
|
||||
data={preview}
|
||||
type="image/svg+xml"
|
||||
className="object-cover rounded-lg"
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
>
|
||||
Your browser does not support SVG, no preview available for SVG.
|
||||
</object> :
|
||||
Your browser does not support SVG, no preview
|
||||
available for SVG.
|
||||
</object>
|
||||
) : (
|
||||
<img
|
||||
src={preview}
|
||||
alt="Uploaded image"
|
||||
className="object-cover rounded-lg overflow-hidden"
|
||||
/>
|
||||
}
|
||||
)}
|
||||
|
||||
<Separator className="my-4" />
|
||||
<div className="grid grid-cols-1 gap-2 items-center pb-4">
|
||||
<p className="text-sm text-gray-600 truncate">{file?.name}</p>
|
||||
<p className="text-sm text-gray-600 truncate">
|
||||
{file?.name}
|
||||
</p>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
|
|
@ -281,8 +303,6 @@ const UploadImage = () => {
|
|||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
export default UploadImage
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
export default UploadImage;
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@ export const ObjectShortcut = ({ value }) => {
|
|||
const clearCanvas = () => {
|
||||
canvas.clear();
|
||||
canvas.renderAll();
|
||||
canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas));
|
||||
setActiveObject(null);
|
||||
};
|
||||
|
||||
|
|
|
|||
29
src/components/Panel/CanvasPanel.jsx
Normal file
29
src/components/Panel/CanvasPanel.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { X } from "lucide-react";
|
||||
import CanvasSetting from "../CanvasSetting";
|
||||
|
||||
const CanvasPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Canvas Settings</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<CanvasSetting />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CanvasPanel;
|
||||
|
|
@ -1,15 +1,7 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import SelectObjectFromGroup from "../EachComponent/Customization/SelectObjectFromGroup";
|
||||
import StrokeCustomization from "../EachComponent/Customization/StrokeCustomization";
|
||||
import PositionCustomization from "../EachComponent/Customization/PositionCustomization";
|
||||
import { Card } from "../ui/card";
|
||||
import CollapsibleComponent from "../EachComponent/Customization/CollapsibleComponent";
|
||||
import FlipCustomization from "../EachComponent/Customization/FlipCustomization";
|
||||
import RotateCustomization from "../EachComponent/Customization/RotateCustomization";
|
||||
import SkewCustomization from "../EachComponent/Customization/SkewCustomization";
|
||||
import ScaleObjects from "../EachComponent/Customization/ScaleObjects";
|
||||
import ShadowCustomization from "../EachComponent/Customization/ShadowCustomization";
|
||||
import AddImageIntoShape from "../EachComponent/Customization/AddImageIntoShape";
|
||||
import ApplyColor from "../EachComponent/ApplyColor";
|
||||
|
||||
|
|
@ -23,45 +15,17 @@ const CommonPanel = () => {
|
|||
return (
|
||||
<div>
|
||||
<div className="space-y-5">
|
||||
<SelectObjectFromGroup />
|
||||
|
||||
{/* Apply fill and background color */}
|
||||
{activeObjectType !== "image" && !hasClipPath && !customClipPath && (
|
||||
<ApplyColor />
|
||||
)}
|
||||
|
||||
{/* Apply stroke and stroke color */}
|
||||
{!customClipPath && (
|
||||
<>
|
||||
<StrokeCustomization />
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeObject?.type !== "group" && (
|
||||
<>
|
||||
<PositionCustomization />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Controls for opacity, flip, and rotation */}
|
||||
<Card className="shadow-none border-0">
|
||||
<CollapsibleComponent text={"Flip, Rotate Control"}>
|
||||
<div className="space-y-2">
|
||||
<FlipCustomization />
|
||||
<RotateCustomization />
|
||||
</div>
|
||||
</CollapsibleComponent>
|
||||
</Card>
|
||||
|
||||
{/* Skew Customization */}
|
||||
<SkewCustomization />
|
||||
|
||||
{/* Scale Objects */}
|
||||
<ScaleObjects />
|
||||
|
||||
{/* Shadow Customization */}
|
||||
<ShadowCustomization />
|
||||
|
||||
{/* Add image into shape */}
|
||||
<AddImageIntoShape />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@ import { useContext } from "react";
|
|||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import TextPanel from "./TextPanel";
|
||||
import ColorPanel from "./ColorPanel";
|
||||
import ShapePanel from "./ShapePanel";
|
||||
import IconPanel from "./IconPanel";
|
||||
import UploadPanel from "./UploadPanel";
|
||||
import StrokePanel from "./StrokePanel";
|
||||
import ShadowPanel from "./ShadowPanel";
|
||||
import FlipPanel from "./FlipPanel";
|
||||
import PositionPanel from "./PositionPanel";
|
||||
import ImagePanel from "./ImagePanel";
|
||||
import GroupObjectPanel from "./GroupObjectPanel";
|
||||
import CanvasPanel from "./CanvasPanel";
|
||||
|
||||
const EditorPanel = () => {
|
||||
const { selectedPanel } = useContext(CanvasContext);
|
||||
|
|
@ -10,8 +20,28 @@ const EditorPanel = () => {
|
|||
switch (selectedPanel) {
|
||||
case "text":
|
||||
return <TextPanel />;
|
||||
case "shape":
|
||||
return <ShapePanel />;
|
||||
case "icon":
|
||||
return <IconPanel />;
|
||||
case "upload":
|
||||
return <UploadPanel />;
|
||||
case "color":
|
||||
return <ColorPanel />;
|
||||
case "stroke":
|
||||
return <StrokePanel />;
|
||||
case "shadow":
|
||||
return <ShadowPanel />;
|
||||
case "flip":
|
||||
return <FlipPanel />;
|
||||
case "position":
|
||||
return <PositionPanel />;
|
||||
case "image-insert":
|
||||
return <ImagePanel />;
|
||||
case "group-obj":
|
||||
return <GroupObjectPanel />;
|
||||
case "canvas":
|
||||
return <CanvasPanel />;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
39
src/components/Panel/FlipPanel.jsx
Normal file
39
src/components/Panel/FlipPanel.jsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { X } from "lucide-react";
|
||||
import { Card } from "../ui/card";
|
||||
import CollapsibleComponent from "../EachComponent/Customization/CollapsibleComponent";
|
||||
import FlipCustomization from "../EachComponent/Customization/FlipCustomization";
|
||||
import RotateCustomization from "../EachComponent/Customization/RotateCustomization";
|
||||
|
||||
const FlipPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Flip & Rotate</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<Card className="shadow-none border-0">
|
||||
<CollapsibleComponent text={"Flip, Rotate Control"}>
|
||||
<div className="space-y-2">
|
||||
<FlipCustomization />
|
||||
<RotateCustomization />
|
||||
</div>
|
||||
</CollapsibleComponent>
|
||||
</Card>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlipPanel;
|
||||
36
src/components/Panel/GroupObjectPanel.jsx
Normal file
36
src/components/Panel/GroupObjectPanel.jsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import SelectObjectFromGroup from "../EachComponent/Customization/SelectObjectFromGroup";
|
||||
import { X } from "lucide-react";
|
||||
import SkewCustomization from "../EachComponent/Customization/SkewCustomization";
|
||||
import ScaleObjects from "../EachComponent/Customization/ScaleObjects";
|
||||
|
||||
const GroupObjectPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Group Object</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<SelectObjectFromGroup />
|
||||
{/* Skew Customization */}
|
||||
<SkewCustomization />
|
||||
|
||||
{/* Scale Objects */}
|
||||
<ScaleObjects />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupObjectPanel;
|
||||
30
src/components/Panel/IconPanel.jsx
Normal file
30
src/components/Panel/IconPanel.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { useContext } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { X } from "lucide-react";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import AllIconsPage from "../EachComponent/Icons/AllIcons";
|
||||
|
||||
const IconPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Icons</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<AllIconsPage />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconPanel;
|
||||
29
src/components/Panel/ImagePanel.jsx
Normal file
29
src/components/Panel/ImagePanel.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { X } from "lucide-react";
|
||||
import AddImageIntoShape from "../EachComponent/Customization/AddImageIntoShape";
|
||||
|
||||
const ImagePanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Image</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<AddImageIntoShape />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImagePanel;
|
||||
29
src/components/Panel/PositionPanel.jsx
Normal file
29
src/components/Panel/PositionPanel.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { X } from "lucide-react";
|
||||
import PositionCustomization from "../EachComponent/Customization/PositionCustomization";
|
||||
|
||||
const PositionPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Position Controller</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<PositionCustomization />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PositionPanel;
|
||||
29
src/components/Panel/ShadowPanel.jsx
Normal file
29
src/components/Panel/ShadowPanel.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { X } from "lucide-react";
|
||||
import ShadowCustomization from "../EachComponent/Customization/ShadowCustomization";
|
||||
|
||||
const ShadowPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Shadow Color</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<ShadowCustomization />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShadowPanel;
|
||||
47
src/components/Panel/ShapePanel.jsx
Normal file
47
src/components/Panel/ShapePanel.jsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { X } from "lucide-react";
|
||||
import { Separator } from "../ui/separator";
|
||||
import CustomShape from "../EachComponent/CustomShape/CustomShape";
|
||||
import RoundedShape from "../EachComponent/RoundedShapes/RoundedShape";
|
||||
import PlainShapes from "../EachComponent/Shapes/PlainShapes";
|
||||
|
||||
const ShapePanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Shape</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<h2 className="font-semibold text-sm">Custom Shapes</h2>
|
||||
<Separator className="my-2" />
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<CustomShape />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<RoundedShape />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<PlainShapes />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShapePanel;
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
import { useContext } from "react";
|
||||
import ApplyColor from "../EachComponent/ApplyColor";
|
||||
import { Button } from "../ui/button";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { X } from "lucide-react";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import StrokeCustomization from "../EachComponent/Customization/StrokeCustomization";
|
||||
|
||||
const ColorPanel = () => {
|
||||
const StrokePanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Color</h2>
|
||||
<h2 className="text-lg font-semibold">Stroke Color</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
|
@ -19,11 +19,11 @@ const ColorPanel = () => {
|
|||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] xl:h-[calc(100vh-190px)] px-4 py-4">
|
||||
<ApplyColor />
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<StrokeCustomization />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPanel;
|
||||
export default StrokePanel;
|
||||
|
|
|
|||
|
|
@ -5,9 +5,23 @@ import OpacityCustomization from "../EachComponent/Customization/OpacityCustomiz
|
|||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { useContext } from "react";
|
||||
import { ObjectShortcut } from "../ObjectShortcut";
|
||||
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
|
||||
import { Button } from "../ui/button";
|
||||
import { ImagePlus } from "lucide-react";
|
||||
import { RxBorderWidth } from "react-icons/rx";
|
||||
import { LuFlipVertical } from "react-icons/lu";
|
||||
import { SlTarget } from "react-icons/sl";
|
||||
import { RiShadowLine } from "react-icons/ri";
|
||||
import { FaRegObjectGroup } from "react-icons/fa";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
|
||||
export function TopBar() {
|
||||
const { selectedPanel } = useContext(CanvasContext);
|
||||
const { activeObject } = useContext(ActiveObjectContext);
|
||||
const { selectedPanel, setSelectedPanel, textColor } =
|
||||
useContext(CanvasContext);
|
||||
const activeObjectType = activeObject?.type;
|
||||
const hasClipPath = !!activeObject?.clipPath;
|
||||
const customClipPath = activeObject?.isClipPath;
|
||||
return (
|
||||
<div>
|
||||
<ScrollArea
|
||||
|
|
@ -21,6 +35,147 @@ export function TopBar() {
|
|||
<div>
|
||||
<TextCustomization />
|
||||
</div>
|
||||
<div className="flex items-center gap-4 px-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex items-center gap-2 border-dashed border-2 rounded-md hover:bg-gray-50"
|
||||
onClick={() => setSelectedPanel("image-insert")}
|
||||
>
|
||||
<ImagePlus className="w-5 h-5" />
|
||||
<span>Add image</span>
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<a data-tooltip-id="canvas">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-10 h-10"
|
||||
onClick={() => setSelectedPanel("canvas")}
|
||||
>
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="5"
|
||||
width="18"
|
||||
height="12"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
<path d="M14 14 L19 19" stroke="black" strokeWidth="2" />
|
||||
<path
|
||||
d="M15 15 Q16 12, 19 11"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
<line
|
||||
x1="3"
|
||||
y1="17"
|
||||
x2="7"
|
||||
y2="21"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<line
|
||||
x1="21"
|
||||
y1="17"
|
||||
x2="17"
|
||||
y2="21"
|
||||
stroke="black"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{activeObjectType !== "image" &&
|
||||
activeObject?.type !== "i-text" &&
|
||||
!hasClipPath &&
|
||||
!customClipPath && (
|
||||
<a data-tooltip-id="color-gr">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={"rounded-full"}
|
||||
onClick={() => setSelectedPanel("color")}
|
||||
style={{ backgroundColor: textColor?.fill || "black" }}
|
||||
></Button>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{!customClipPath && (
|
||||
<a data-tooltip-id="stroke">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-10 h-10"
|
||||
onClick={() => setSelectedPanel("stroke")}
|
||||
>
|
||||
<RxBorderWidth className="text-lg" />
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
{(activeObject || activeObject.type === "group") && (
|
||||
<a data-tooltip-id="group-obj">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-10 h-10"
|
||||
onClick={() => setSelectedPanel("group-obj")}
|
||||
>
|
||||
<FaRegObjectGroup />
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-gray-200" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<a data-tooltip-id="flip">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("flip")}
|
||||
>
|
||||
<LuFlipVertical />
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
{activeObject?.type !== "group" && (
|
||||
<a data-tooltip-id="position">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("position")}
|
||||
>
|
||||
<SlTarget />
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
<a data-tooltip-id="shadow">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("shadow")}
|
||||
>
|
||||
<RiShadowLine />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<OpacityCustomization />
|
||||
<div className="h-4 w-px bg-border mx-2" />
|
||||
|
||||
|
|
@ -33,6 +188,14 @@ export function TopBar() {
|
|||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
|
||||
<Tooltip id="color-gr" content="Color" place="bottom" />
|
||||
<Tooltip id="stroke" content="Stroke" place="bottom" />
|
||||
<Tooltip id="position" content="Object position" place="bottom" />
|
||||
<Tooltip id="shadow" content="Shadow color" place="bottom" />
|
||||
<Tooltip id="flip" content="Object flip" place="bottom" />
|
||||
<Tooltip id="group-obj" content="Group Object" place="bottom" />
|
||||
<Tooltip id="canvas" content="Canvas Settings" place="bottom" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
30
src/components/Panel/UploadPanel.jsx
Normal file
30
src/components/Panel/UploadPanel.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { useContext } from "react";
|
||||
import CanvasContext from "../Context/canvasContext/CanvasContext";
|
||||
import { X } from "lucide-react";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import UploadImage from "../EachComponent/UploadImage";
|
||||
|
||||
const UploadPanel = () => {
|
||||
const { setSelectedPanel } = useContext(CanvasContext);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">Upload</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedPanel("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
|
||||
<UploadImage />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadPanel;
|
||||
Loading…
Add table
Reference in a new issue