Files
dpage-editor/src/pages/editor/components/tools/LinkShape.tsx
T
hamid zarghami 3a01267b55 fix build
2026-01-05 14:24:45 +03:30

73 lines
2.1 KiB
TypeScript

import { useRef, useMemo } from "react";
import { Text } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";
const getFontWeight = (fontWeight?: string): string => {
const weightMap: Record<string, string> = {
bold: "bold",
normal: "normal",
"300": "300",
};
return weightMap[fontWeight || "normal"] || "normal";
};
const LinkShape = ({
obj,
onSelect,
onUpdate,
draggable,
}: ShapeProps) => {
const shapeRef = useRef<Konva.Text>(null);
const fontWeight = useMemo(() => getFontWeight(obj.fontWeight), [obj.fontWeight]);
// Transformer is managed in EditorCanvas for multi-select support
return (
<Text
ref={shapeRef}
x={obj.x}
y={obj.y}
text={obj.text || obj.linkUrl || ""}
fontSize={obj.fontSize || 24}
fill={obj.fill || "#0000ff"}
fontFamily="irancell"
fontStyle={fontWeight}
underline={true}
rotation={obj.rotation || 0}
draggable={draggable}
onClick={(e) => {
// در حالت editor، لینک‌ها قابل کلیک نیستند
// این قابلیت در viewer اضافه خواهد شد
if (shapeRef.current) {
onSelect(obj.id, shapeRef.current, e);
}
}}
onDragEnd={(e) => {
const node = e.target;
onUpdate(obj.id, {
x: node.x(),
y: node.y(),
});
}}
onTransformEnd={() => {
const node = shapeRef.current;
if (!node) return;
const scaleX = node.scaleX();
node.scaleX(1);
node.scaleY(1);
onUpdate(obj.id, {
x: node.x(),
y: node.y(),
rotation: node.rotation(),
fontSize: obj.fontSize ? Math.max(5, obj.fontSize * scaleX) : undefined,
});
}}
/>
);
};
export default LinkShape;