text component

src/pages/editor/components/tools/TextShape.tsx

@@ -1,8 +1,38 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useMemo } from "react";
 import { Text } from "react-konva";
 import Konva from "konva";
 import type { TextShapeProps } from "./types";
 
+const getFontFamily = (fontFamily?: string): string => {
+    const fontMap: Record<string, string> = {
+        "1": "irancell",
+        "2": "irancell",
+    };
+    return fontMap[fontFamily || "1"] || "irancell";
+};
+
+const getFontWeight = (fontWeight?: string): string | number => {
+    const weightMap: Record<string, string | number> = {
+        bold: "600",
+        normal: "300",
+        "300": "300",
+    };
+    return weightMap[fontWeight || "normal"] || "300";
+};
+
+const getColorWithOpacity = (fill?: string, opacity?: number): string => {
+    if (!fill) return "#000000";
+    if (opacity === undefined || opacity === 100) return fill;
+
+    const hex = fill.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const alpha = opacity / 100;
+
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 const TextShape = ({
   obj,
   isSelected,
@@ -21,6 +51,10 @@ const TextShape = ({
     }
   }, [isSelected, transformerRef]);
 
+  const fontFamily = useMemo(() => getFontFamily(obj.fontFamily), [obj.fontFamily]);
+  const fontWeight = useMemo(() => getFontWeight(obj.fontWeight), [obj.fontWeight]);
+  const fillColor = useMemo(() => getColorWithOpacity(obj.fill, obj.opacity), [obj.fill, obj.opacity]);
+
   return (
     <Text
       ref={shapeRef}
@@ -28,8 +62,10 @@ const TextShape = ({
       y={obj.y}
       text={obj.text || ""}
       fontSize={obj.fontSize || 24}
-      fill={obj.fill || "#000000"}
-      fontFamily="irancell"
+      fill={fillColor}
+      fontFamily={fontFamily}
+      fontWeight={fontWeight}
+      letterSpacing={obj.letterSpacing}
       width={obj.width}
       height={obj.height}
       rotation={obj.rotation || 0}
@@ -90,7 +126,9 @@ const TextShape = ({
         textarea.style.background = "transparent";
         textarea.style.outline = "none";
         textarea.style.resize = "none";
-        textarea.style.fontFamily = "irancell";
+        textarea.style.fontFamily = fontFamily;
+        textarea.style.fontWeight = String(fontWeight);
+        textarea.style.letterSpacing = `${obj.letterSpacing || 0}px`;
         textarea.style.direction = "rtl";
         textarea.focus();