fix: Add types to memoized functions

This commit is contained in:
Sidharth Vinod
2022-11-20 22:46:12 +05:30
parent 7d3a0577d2
commit 931661ed67

View File

@@ -561,54 +561,77 @@ export const drawSimpleText = function (
return textElem; return textElem;
}; };
export const wrapLabel = memoize( interface WrapLabelConfig {
(label, maxWidth, config) => { fontSize: number;
if (!label) { fontFamily: string;
return label; fontWeight: number;
} joinWith: string;
config = Object.assign( }
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '<br/>' },
config
);
if (common.lineBreakRegex.test(label)) {
return label;
}
const words = label.split(' ');
const completedLines = [];
let nextLine = '';
words.forEach((word, index) => {
const wordLength = calculateTextWidth(`${word} `, config);
const nextLineLength = calculateTextWidth(nextLine, config);
if (wordLength > maxWidth) {
const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);
completedLines.push(nextLine, ...hyphenatedStrings);
nextLine = remainingWord;
} else if (nextLineLength + wordLength >= maxWidth) {
completedLines.push(nextLine);
nextLine = word;
} else {
nextLine = [nextLine, word].filter(Boolean).join(' ');
}
const currentWord = index + 1;
const isLastWord = currentWord === words.length;
if (isLastWord) {
completedLines.push(nextLine);
}
});
return completedLines.filter((line) => line !== '').join(config.joinWith);
},
(label, maxWidth, config) =>
`${label}${maxWidth}${config.fontSize}${config.fontWeight}${config.fontFamily}${config.joinWith}`
);
const breakString = memoize( export const wrapLabel: (label: string, maxWidth: string, config: WrapLabelConfig) => string =
(word, maxWidth, hyphenCharacter = '-', config) => { memoize(
(label: string, maxWidth: string, config: WrapLabelConfig): string => {
if (!label) {
return label;
}
config = Object.assign(
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: '<br/>' },
config
);
if (common.lineBreakRegex.test(label)) {
return label;
}
const words = label.split(' ');
const completedLines = [];
let nextLine = '';
words.forEach((word, index) => {
const wordLength = calculateTextWidth(`${word} `, config);
const nextLineLength = calculateTextWidth(nextLine, config);
if (wordLength > maxWidth) {
const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);
completedLines.push(nextLine, ...hyphenatedStrings);
nextLine = remainingWord;
} else if (nextLineLength + wordLength >= maxWidth) {
completedLines.push(nextLine);
nextLine = word;
} else {
nextLine = [nextLine, word].filter(Boolean).join(' ');
}
const currentWord = index + 1;
const isLastWord = currentWord === words.length;
if (isLastWord) {
completedLines.push(nextLine);
}
});
return completedLines.filter((line) => line !== '').join(config.joinWith);
},
(label, maxWidth, config) =>
`${label}${maxWidth}${config.fontSize}${config.fontWeight}${config.fontFamily}${config.joinWith}`
);
interface BreakStringOutput {
hyphenatedStrings: string[];
remainingWord: string;
}
const breakString: (
word: string,
maxWidth: number,
hyphenCharacter: string,
config: WrapLabelConfig
) => BreakStringOutput = memoize(
(
word: string,
maxWidth: number,
hyphenCharacter = '-',
config: WrapLabelConfig
): BreakStringOutput => {
config = Object.assign( config = Object.assign(
{ fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 }, { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 },
config config
); );
const characters = word.split(''); const characters = word.split('');
const lines = []; const lines: string[] = [];
let currentLine = ''; let currentLine = '';
characters.forEach((character, index) => { characters.forEach((character, index) => {
const nextLine = `${currentLine}${character}`; const nextLine = `${currentLine}${character}`;
@@ -667,6 +690,16 @@ export function calculateTextWidth(
return calculateTextDimensions(text, config).width; return calculateTextDimensions(text, config).width;
} }
interface TextDimensionConfig {
fontSize?: number;
fontWeight?: number;
fontFamily?: string;
}
interface TextDimensions {
width: number;
height: number;
lineHeight?: number;
}
/** /**
* This calculates the dimensions of the given text, font size, font family, font weight, and * This calculates the dimensions of the given text, font size, font family, font weight, and
* margins. * margins.
@@ -676,15 +709,11 @@ export function calculateTextWidth(
* the resulting size * the resulting size
* @returns The dimensions for the given text * @returns The dimensions for the given text
*/ */
export const calculateTextDimensions = memoize( export const calculateTextDimensions: (
function ( text: string,
text: string, config: TextDimensionConfig
config: { ) => TextDimensions = memoize(
fontSize?: number; (text: string, config: TextDimensionConfig): TextDimensions => {
fontWeight?: number;
fontFamily?: string;
}
) {
config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config); config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);
const { fontSize, fontFamily, fontWeight } = config; const { fontSize, fontFamily, fontWeight } = config;
if (!text) { if (!text) {