This commit is contained in:
hamid zarghami
@@ -1,101 +1,93 @@
|
||||
import { type FC } from "react";
|
||||
import { ArrowLeft, Magicpen, Minus } from "iconsax-react";
|
||||
import CustomShapeInstruction from "./CustomShapeInstruction";
|
||||
import SquareIcon from "@/assets/icons/square.svg";
|
||||
import CircleIcon from "@/assets/icons/circle.svg";
|
||||
import TriangleIcon from "@/assets/icons/triangle.svg";
|
||||
import SquareIcon from "@/assets/icons/square.svg";
|
||||
import StarIcon from "@/assets/icons/Star.svg";
|
||||
import TriangleIcon from "@/assets/icons/triangle.svg";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { clx } from "@/helpers/utils";
|
||||
import { useEditorStore } from "@/pages/editor/store/editorStore";
|
||||
import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";
|
||||
import { ArrowLeft, Minus, PenTool } from "iconsax-react";
|
||||
import { type FC } from "react";
|
||||
import CustomShapeInstruction from "./CustomShapeInstruction";
|
||||
|
||||
const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: string }> = [
|
||||
{ id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
|
||||
{ id: "circle", label: "دایره", icon: CircleIcon, alt: "circle" },
|
||||
{ id: "triangle", label: "مثلث", icon: TriangleIcon, alt: "triangle" },
|
||||
{ id: "abstract", label: "انتزاعی", icon: StarIcon, alt: "abstract" },
|
||||
{ id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
|
||||
{ id: "circle", label: "دایره", icon: CircleIcon, alt: "circle" },
|
||||
{ id: "triangle", label: "مثلث", icon: TriangleIcon, alt: "triangle" },
|
||||
{ id: "abstract", label: "انتزاعی", icon: StarIcon, alt: "abstract" },
|
||||
];
|
||||
|
||||
const drawOptions = [
|
||||
{ tool: "line" as const, label: "خط", Icon: Minus },
|
||||
{ tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
|
||||
{ tool: "custom-shape" as const, label: "سفارشی", Icon: Magicpen },
|
||||
{ tool: "line" as const, label: "خط", Icon: Minus },
|
||||
{ tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
|
||||
{ tool: "custom-shape" as const, label: "سفارشی", Icon: PenTool },
|
||||
];
|
||||
|
||||
const RectangleInstruction: FC = () => {
|
||||
const tool = useEditorStore((state) => state.tool);
|
||||
const setTool = useEditorStore((state) => state.setTool);
|
||||
const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();
|
||||
const tool = useEditorStore((state) => state.tool);
|
||||
const setTool = useEditorStore((state) => state.setTool);
|
||||
const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();
|
||||
|
||||
const handleShapeClick = (shapeId: ShapeType) => {
|
||||
setActiveShape(shapeId);
|
||||
setTool("rectangle");
|
||||
};
|
||||
const handleShapeClick = (shapeId: ShapeType) => {
|
||||
setActiveShape(shapeId);
|
||||
setTool("rectangle");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="font-bold">اشکال</h2>
|
||||
return (
|
||||
<div>
|
||||
<h2 className="font-bold">اشکال</h2>
|
||||
|
||||
<div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
|
||||
{shapeOptions.map((shape) => {
|
||||
const isActive = tool === "rectangle" && activeShape === shape.id;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={shape.id}
|
||||
onClick={() => handleShapeClick(shape.id)}
|
||||
className={clx(
|
||||
"size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
|
||||
isActive ? "" : "border-transparent",
|
||||
)}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<img src={shape.icon} alt={shape.alt} className={clx("w-6", isActive && "filterBlack")} />
|
||||
<div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{shape.label}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{drawOptions.map(({ tool: drawTool, label, Icon }) => {
|
||||
const isActive = tool === drawTool;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={drawTool}
|
||||
onClick={() => setTool(drawTool)}
|
||||
className={clx(
|
||||
"size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
|
||||
isActive ? "" : "border-transparent",
|
||||
)}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<Icon size={24} color={isActive ? "black" : "#7A7A7A"} variant={isActive ? "Bold" : "Outline"} />
|
||||
<div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{label}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
|
||||
{shapeOptions.map((shape) => {
|
||||
const isActive = tool === "rectangle" && activeShape === shape.id;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={shape.id}
|
||||
onClick={() => handleShapeClick(shape.id)}
|
||||
className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<img src={shape.icon} alt={shape.alt} className={clx("w-6", isActive && "filterBlack")} />
|
||||
<div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{shape.label}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{drawOptions.map(({ tool: drawTool, label, Icon }) => {
|
||||
const isActive = tool === drawTool;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={drawTool}
|
||||
onClick={() => setTool(drawTool)}
|
||||
className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<Icon size={24} color={isActive ? "black" : "#7A7A7A"} variant={isActive ? "Bold" : "Outline"} />
|
||||
<div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{label}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{tool === "rectangle" && (
|
||||
<div className="mt-9 flex items-center justify-between">
|
||||
<div className="text-[13px]">استفاده برای ماسک</div>
|
||||
<Switch checked={useAsMask} onCheckedChange={setUseAsMask} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(tool === "line" || tool === "arrow") && (
|
||||
<p className="mt-9 text-sm text-gray-600">
|
||||
{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{tool === "custom-shape" && (
|
||||
<div className="mt-9">
|
||||
<CustomShapeInstruction />
|
||||
</div>
|
||||
)}
|
||||
{tool === "rectangle" && (
|
||||
<div className="mt-9 flex items-center justify-between">
|
||||
<div className="text-[13px]">استفاده برای ماسک</div>
|
||||
<Switch checked={useAsMask} onCheckedChange={setUseAsMask} />
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
|
||||
{(tool === "line" || tool === "arrow") && (
|
||||
<p className="mt-9 text-sm text-gray-600">{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}</p>
|
||||
)}
|
||||
|
||||
{tool === "custom-shape" && (
|
||||
<div className="mt-9">
|
||||
<CustomShapeInstruction />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RectangleInstruction;
|
||||
|
||||
Reference in New Issue
Block a user