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;