diff --git a/src/pages/editor/components/canvas/useDrawingHandlers.ts b/src/pages/editor/components/canvas/useDrawingHandlers.ts index f7c27d5..ea7c532 100644 --- a/src/pages/editor/components/canvas/useDrawingHandlers.ts +++ b/src/pages/editor/components/canvas/useDrawingHandlers.ts @@ -71,6 +71,7 @@ export const useDrawingHandlers = () => { text: "متن جدید", fontSize: defaults.fontSize, lineHeight: 1.2, + textAlign: "right", fontFamily: defaults.fontFamily, fontWeight: defaults.fontWeight, fill: defaults.fill, diff --git a/src/pages/editor/components/sidebar/settings/TextSettings.tsx b/src/pages/editor/components/sidebar/settings/TextSettings.tsx index 4cfa2e7..cc7ad66 100644 --- a/src/pages/editor/components/sidebar/settings/TextSettings.tsx +++ b/src/pages/editor/components/sidebar/settings/TextSettings.tsx @@ -21,6 +21,15 @@ const normalizeNumericInput = (value: string): string => { const parseNumber = (value: string): number => Number(normalizeNumericInput(value)); const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => { + const textAlign = selectedObject.textAlign ?? "right"; + + const alignButtonClass = (align: "right" | "center" | "left") => + `rounded-md border px-3 py-1 text-xs transition-colors ${ + textAlign === align + ? "border-blue-500 bg-blue-50 text-blue-700" + : "border-border text-foreground hover:bg-muted" + }`; + return ( <> { }) } /> +
+

چینش متن

+
+ + + +
+
0 && h > 0 && (w !== obj.width || h !== obj.height)) { - onUpdate(obj.id, { width: w, height: h }); + const nextWidth = obj.width && obj.width > 0 ? obj.width : measuredWidth; + + // For text alignment to be visible, keep an existing text box width + // and only auto-calc width when the object has no width yet. + if ( + nextWidth > 0 && + h > 0 && + (nextWidth !== obj.width || h !== obj.height) + ) { + onUpdate(obj.id, { width: nextWidth, height: h }); } textNode.getLayer()?.batchDraw(); }; @@ -156,6 +164,7 @@ const TextShape = ({ const fontFamily = useMemo(() => getFontFamily(obj.fontFamily), [obj.fontFamily]); const konvaFontStyle = useMemo(() => getKonvaFontStyle(obj.fontWeight), [obj.fontWeight]); const fillColor = useMemo(() => getColorWithOpacity(obj.fill, obj.opacity), [obj.fill, obj.opacity]); + const textAlign = obj.textAlign ?? "right"; const handleDblClick = () => { if (!shapeRef.current || !groupRef.current) return; @@ -203,7 +212,7 @@ const TextShape = ({ color: obj.fill || "#000000", letterSpacing: `${(obj.letterSpacing || 0) * stageScale}px`, lineHeight: textNode.lineHeight().toString(), - textAlign: "right", + textAlign, direction: "rtl", padding: "0", margin: "0", @@ -306,7 +315,7 @@ const TextShape = ({ > ); diff --git a/src/pages/editor/store/editorStore.types.ts b/src/pages/editor/store/editorStore.types.ts index d97962c..001f8bc 100644 --- a/src/pages/editor/store/editorStore.types.ts +++ b/src/pages/editor/store/editorStore.types.ts @@ -46,6 +46,7 @@ export type EditorObject = { text?: string; fontSize?: number; lineHeight?: number; + textAlign?: "left" | "center" | "right"; fontFamily?: string; fontWeight?: string; letterSpacing?: number;