This commit is contained in:
@@ -4,8 +4,11 @@ import Konva from "konva";
|
|||||||
import type { TextShapeProps } from "./types";
|
import type { TextShapeProps } from "./types";
|
||||||
import { getFontFamily } from "@/pages/editor/utils/fontFamily";
|
import { getFontFamily } from "@/pages/editor/utils/fontFamily";
|
||||||
import {
|
import {
|
||||||
|
buildCanvasFont,
|
||||||
|
buildKonvaCanvasFont,
|
||||||
DEFAULT_TEXT_MAX_WIDTH_PX,
|
DEFAULT_TEXT_MAX_WIDTH_PX,
|
||||||
getEffectiveTextWidth,
|
getEffectiveTextWidth,
|
||||||
|
getKonvaFontStyle,
|
||||||
measureTextBlock,
|
measureTextBlock,
|
||||||
resolveTextMaxWidth,
|
resolveTextMaxWidth,
|
||||||
usesWrappedLayout,
|
usesWrappedLayout,
|
||||||
@@ -30,15 +33,6 @@ const getFontWeight = (fontWeight?: string): string => {
|
|||||||
return weightMap[fontWeight] || "normal";
|
return weightMap[fontWeight] || "normal";
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Konva.Text فقط `fontStyle` دارد (نه fontWeight جداگانه)؛ مقدار باید normal|bold|italic باشد. */
|
|
||||||
const getKonvaFontStyle = (fontWeight?: string): string => {
|
|
||||||
const w = getFontWeight(fontWeight);
|
|
||||||
if (w === "bold" || w === "bolder") return "bold";
|
|
||||||
const n = parseInt(w, 10);
|
|
||||||
if (!Number.isNaN(n) && n >= 600) return "bold";
|
|
||||||
return "normal";
|
|
||||||
};
|
|
||||||
|
|
||||||
const TextShape = ({
|
const TextShape = ({
|
||||||
obj,
|
obj,
|
||||||
onSelect,
|
onSelect,
|
||||||
@@ -172,11 +166,9 @@ const TextShape = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const specs = [
|
const specs = [
|
||||||
`${fontSize}px ${resolvedFamily}`,
|
buildCanvasFont(fontSize, obj.fontFamily, obj.fontWeight),
|
||||||
|
buildKonvaCanvasFont(fontSize, obj.fontFamily, obj.fontWeight),
|
||||||
`${konvaStyle} normal ${fontSize}px ${resolvedFamily}`,
|
`${konvaStyle} normal ${fontSize}px ${resolvedFamily}`,
|
||||||
`bold ${fontSize}px ${resolvedFamily}`,
|
|
||||||
`300 ${fontSize}px ${resolvedFamily}`,
|
|
||||||
`200 ${fontSize}px ${resolvedFamily}`,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
void Promise.all(
|
void Promise.all(
|
||||||
|
|||||||
@@ -11,12 +11,18 @@ export const getCssFontWeight = (fontWeight?: string): number => {
|
|||||||
return 400;
|
return 400;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Konva.Text uses `fontStyle: bold` (canvas keyword), not numeric weight. */
|
/**
|
||||||
export const usesKonvaBoldStyle = (fontWeight?: string): boolean => {
|
* Konva.Text `fontStyle` — supports `normal`, `bold`, or numeric strings like `200`.
|
||||||
if (!fontWeight || fontWeight === "normal") return false;
|
* @see https://konvajs.org/api/Konva.Text.html#fontStyle
|
||||||
if (fontWeight === "bold" || fontWeight === "bolder") return true;
|
*/
|
||||||
|
export const getKonvaFontStyle = (fontWeight?: string): string => {
|
||||||
|
if (!fontWeight || fontWeight === "normal") return "normal";
|
||||||
|
if (fontWeight === "bold" || fontWeight === "bolder") return "bold";
|
||||||
|
|
||||||
const n = parseInt(fontWeight, 10);
|
const n = parseInt(fontWeight, 10);
|
||||||
return !Number.isNaN(n) && n >= 600;
|
if (!Number.isNaN(n)) return n.toString();
|
||||||
|
|
||||||
|
return "normal";
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Canvas/CSS `font` string shared by editor measurement and viewer layout. */
|
/** Canvas/CSS `font` string shared by editor measurement and viewer layout. */
|
||||||
@@ -30,15 +36,15 @@ export const buildCanvasFont = (
|
|||||||
return `${weight} ${fontSize}px ${family}`;
|
return `${weight} ${fontSize}px ${family}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Canvas font string that matches Konva.Text (`fontStyle: bold`). */
|
/** Canvas font string that matches Konva.Text `_getContextFont()`. */
|
||||||
export const buildKonvaCanvasFont = (
|
export const buildKonvaCanvasFont = (
|
||||||
fontSize: number,
|
fontSize: number,
|
||||||
fontFamily?: string,
|
fontFamily?: string,
|
||||||
fontWeight?: string,
|
fontWeight?: string,
|
||||||
): string => {
|
): string => {
|
||||||
const family = getFontFamily(fontFamily);
|
const family = getFontFamily(fontFamily);
|
||||||
const style = usesKonvaBoldStyle(fontWeight) ? "bold" : "normal";
|
const style = getKonvaFontStyle(fontWeight);
|
||||||
return `${style} ${fontSize}px ${family}`;
|
return `${style} normal ${fontSize}px ${family}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const LINE_BREAK_RE = /[\r\n\u2028\u2029]/;
|
const LINE_BREAK_RE = /[\r\n\u2028\u2029]/;
|
||||||
|
|||||||
Reference in New Issue
Block a user