diff --git a/assets/Screenshot_1404-09-13_at_09.34.47-ba86aa99-4c47-41be-80cd-24e0d7ac86d3.png b/assets/Screenshot_1404-09-13_at_09.34.47-ba86aa99-4c47-41be-80cd-24e0d7ac86d3.png new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/editor/components/sidebar/instructions/LinkInput.tsx b/src/pages/editor/components/sidebar/instructions/LinkInput.tsx index ce12291..d9786fc 100644 --- a/src/pages/editor/components/sidebar/instructions/LinkInput.tsx +++ b/src/pages/editor/components/sidebar/instructions/LinkInput.tsx @@ -1,37 +1,107 @@ +import { useState } from "react"; import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore"; import Input from "@/components/Input"; +import Button from "@/components/Button"; +import { + Link, + ArrowCircleRight, + ArrowCircleLeft, + DocumentText, + ArrowLeft, + ArrowRight, + Add, +} from "iconsax-react"; +import { clx } from "@/helpers/utils"; + +type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev"; const LinkInput = () => { + const [selectedLinkType, setSelectedLinkType] = useState("link"); + const [linkUrl, setLinkUrl] = useState(""); + const [linkTitle, setLinkTitle] = useState(""); + + const linkTypes: Array<{ type: LinkType; icon: React.ReactNode; label: string }> = [ + { type: "link", icon: , label: "لینک" }, + { type: "nextPage", icon: , label: "صفحه بعدی" }, + { type: "prevPage", icon: , label: "صفحه قبلی" }, + { type: "page", icon: , label: "صفحه" }, + { type: "firstPage", icon: , label: "اولین صفحه" }, + { type: "lastPrev", icon: , label: "آخرین قبلی" }, + ]; + + const handleAddLink = () => { + if (linkUrl.trim()) { + const newLink = { + id: `link-${Date.now()}`, + type: "link" as ToolType, + x: 100, + y: 100, + text: linkTitle.trim() || linkUrl, + linkUrl: linkUrl, + fontSize: 24, + fill: "#0000ff", + fontWeight: "normal", + }; + const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState(); + addObject(newLink); + setSelectedObjectId(newLink.id); + setTool("select"); + setLinkUrl(""); + setLinkTitle(""); + } + }; + return ( -
-
- { - const input = document.querySelector('input[placeholder="https://example.com"]') as HTMLInputElement; - if (input?.value) { - const newLink = { - id: `link-${Date.now()}`, - type: "link" as ToolType, - x: 100, - y: 100, - text: input.value, - linkUrl: input.value, - fontSize: 24, - fill: "#0000ff", - }; - const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState(); - addObject(newLink); - setSelectedObjectId(newLink.id); - setTool("select"); - input.value = ""; - } - }} - /> +
+

لینک ها

+ +
+ {linkTypes.map((item) => { + const isSelected = selectedLinkType === item.type; + return ( + + ); + })}
-
-

آدرس لینک را وارد کنید و Enter بزنید

+ +
+
+

عنوان لینک

+ setLinkTitle(e.target.value)} + placeholder="عنوان لینک" + /> +
+
+

لینک

+ setLinkUrl(e.target.value)} + placeholder="https://example.com" + onEnter={handleAddLink} + /> +
+
); diff --git a/src/pages/editor/components/sidebar/instructions/index.ts b/src/pages/editor/components/sidebar/instructions/index.ts index 45f19db..246d41e 100644 --- a/src/pages/editor/components/sidebar/instructions/index.ts +++ b/src/pages/editor/components/sidebar/instructions/index.ts @@ -10,4 +10,3 @@ export { default as LineInstruction } from "./LineInstruction"; export { default as ArrowInstruction } from "./ArrowInstruction"; export { default as StickerInstruction } from "./StickerInstruction"; export { default as GridInstruction } from "./GridInstruction"; - diff --git a/src/pages/editor/components/sidebar/settings/LinkSettings.tsx b/src/pages/editor/components/sidebar/settings/LinkSettings.tsx index fa735af..7a24f99 100644 --- a/src/pages/editor/components/sidebar/settings/LinkSettings.tsx +++ b/src/pages/editor/components/sidebar/settings/LinkSettings.tsx @@ -1,7 +1,14 @@ import type { EditorObject } from "../../../store/editorStore"; import Input from "@/components/Input"; +import Select from "@/components/Select"; import ColorPicker from "@/components/ColorPicker"; +const fontWeightOptions = [ + { label: "Bold", value: "bold" }, + { label: "Normal", value: "normal" }, + { label: "Light", value: "300" }, +]; + type LinkSettingsProps = { selectedObject: EditorObject; onUpdate: (id: string, updates: Partial) => void; @@ -21,16 +28,24 @@ const LinkSettings = ({ selectedObject, onUpdate }: LinkSettingsProps) => { value={selectedObject.text || ""} onChange={(e) => onUpdate(selectedObject.id, { text: e.target.value })} /> - - onUpdate(selectedObject.id, { - fontSize: parseInt(e.target.value) || 24, - }) - } - /> +
+ + onUpdate(selectedObject.id, { + fontSize: parseInt(e.target.value) || 24, + }) + } + /> +
{ + const weightMap: Record = { + bold: "bold", + normal: "normal", + "300": "300", + }; + return weightMap[fontWeight || "normal"] || "normal"; +}; + const LinkShape = ({ obj, isSelected, @@ -12,6 +21,7 @@ const LinkShape = ({ draggable, }: ShapeProps) => { const shapeRef = useRef(null); + const fontWeight = useMemo(() => getFontWeight(obj.fontWeight), [obj.fontWeight]); useEffect(() => { if (isSelected && shapeRef.current && transformerRef.current) { @@ -29,13 +39,13 @@ const LinkShape = ({ fontSize={obj.fontSize || 24} fill={obj.fill || "#0000ff"} fontFamily="irancell" + fontStyle={fontWeight} underline={true} rotation={obj.rotation || 0} draggable={draggable} onClick={() => { - if (shapeRef.current && obj.linkUrl) { - window.open(obj.linkUrl, "_blank"); - } + // در حالت editor، لینک‌ها قابل کلیک نیستند + // این قابلیت در viewer اضافه خواهد شد if (shapeRef.current) { onSelect(obj.id, shapeRef.current); } @@ -67,5 +77,4 @@ const LinkShape = ({ ); }; -export default LinkShape; - +export default LinkShape; \ No newline at end of file