set text line height
This commit is contained in:
@@ -70,6 +70,7 @@ export const useDrawingHandlers = () => {
|
|||||||
y: realPos.y,
|
y: realPos.y,
|
||||||
text: "متن جدید",
|
text: "متن جدید",
|
||||||
fontSize: defaults.fontSize,
|
fontSize: defaults.fontSize,
|
||||||
|
lineHeight: 1.2,
|
||||||
fontFamily: defaults.fontFamily,
|
fontFamily: defaults.fontFamily,
|
||||||
fontWeight: defaults.fontWeight,
|
fontWeight: defaults.fontWeight,
|
||||||
fill: defaults.fill,
|
fill: defaults.fill,
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { Trash } from "iconsax-react";
|
|||||||
import type { EditorObject } from "../../store/editorStore";
|
import type { EditorObject } from "../../store/editorStore";
|
||||||
import {
|
import {
|
||||||
ShapeSettings,
|
ShapeSettings,
|
||||||
|
TextSettings,
|
||||||
LineSettings,
|
LineSettings,
|
||||||
SizeSettings,
|
SizeSettings,
|
||||||
LinkSettings,
|
LinkSettings,
|
||||||
@@ -50,6 +51,9 @@ const ObjectSettings = ({
|
|||||||
<MaskSettings objectId={selectedObject.id} />
|
<MaskSettings objectId={selectedObject.id} />
|
||||||
|
|
||||||
{selectedObject.type === "text" && <TextInstruction />}
|
{selectedObject.type === "text" && <TextInstruction />}
|
||||||
|
{selectedObject.type === "text" && (
|
||||||
|
<TextSettings selectedObject={selectedObject} onUpdate={onUpdate} />
|
||||||
|
)}
|
||||||
|
|
||||||
{selectedObject.type === "rectangle" && (
|
{selectedObject.type === "rectangle" && (
|
||||||
<ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
|
<ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
|
||||||
|
|||||||
@@ -7,6 +7,19 @@ type TextSettingsProps = {
|
|||||||
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
|
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const normalizeNumericInput = (value: string): string => {
|
||||||
|
const persianDigits = "۰۱۲۳۴۵۶۷۸۹";
|
||||||
|
const arabicDigits = "٠١٢٣٤٥٦٧٨٩";
|
||||||
|
|
||||||
|
return value
|
||||||
|
.replace(/[۰-۹]/g, (d) => String(persianDigits.indexOf(d)))
|
||||||
|
.replace(/[٠-٩]/g, (d) => String(arabicDigits.indexOf(d)))
|
||||||
|
.replace("٫", ".")
|
||||||
|
.replace(",", ".");
|
||||||
|
};
|
||||||
|
|
||||||
|
const parseNumber = (value: string): number => Number(normalizeNumericInput(value));
|
||||||
|
|
||||||
const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
|
const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -19,9 +32,22 @@ const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
|
|||||||
label="اندازه فونت"
|
label="اندازه فونت"
|
||||||
type="number"
|
type="number"
|
||||||
value={selectedObject.fontSize || 24}
|
value={selectedObject.fontSize || 24}
|
||||||
|
step="1"
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
onUpdate(selectedObject.id, {
|
onUpdate(selectedObject.id, {
|
||||||
fontSize: parseInt(e.target.value) || 24,
|
fontSize: parseNumber(e.target.value) || 24,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="فاصله خطوط"
|
||||||
|
type="number"
|
||||||
|
value={selectedObject.lineHeight ?? 1.2}
|
||||||
|
step="0.1"
|
||||||
|
min="0.5"
|
||||||
|
onChange={(e) =>
|
||||||
|
onUpdate(selectedObject.id, {
|
||||||
|
lineHeight: parseNumber(e.target.value) || 1.2,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -147,6 +147,7 @@ const TextShape = ({
|
|||||||
obj.fontFamily,
|
obj.fontFamily,
|
||||||
obj.fontWeight,
|
obj.fontWeight,
|
||||||
obj.letterSpacing,
|
obj.letterSpacing,
|
||||||
|
obj.lineHeight,
|
||||||
obj.width,
|
obj.width,
|
||||||
obj.height,
|
obj.height,
|
||||||
onUpdate,
|
onUpdate,
|
||||||
@@ -313,6 +314,7 @@ const TextShape = ({
|
|||||||
fontFamily={fontFamily}
|
fontFamily={fontFamily}
|
||||||
fontStyle={konvaFontStyle}
|
fontStyle={konvaFontStyle}
|
||||||
letterSpacing={obj.letterSpacing ?? 0}
|
letterSpacing={obj.letterSpacing ?? 0}
|
||||||
|
lineHeight={obj.lineHeight ?? 1.2}
|
||||||
align="right"
|
align="right"
|
||||||
/>
|
/>
|
||||||
</Group>
|
</Group>
|
||||||
|
|||||||
@@ -45,6 +45,7 @@ export type EditorObject = {
|
|||||||
strokeWidth?: number;
|
strokeWidth?: number;
|
||||||
text?: string;
|
text?: string;
|
||||||
fontSize?: number;
|
fontSize?: number;
|
||||||
|
lineHeight?: number;
|
||||||
fontFamily?: string;
|
fontFamily?: string;
|
||||||
fontWeight?: string;
|
fontWeight?: string;
|
||||||
letterSpacing?: number;
|
letterSpacing?: number;
|
||||||
|
|||||||
Reference in New Issue
Block a user