refactor(#178): improved text width calculation with canvas

Author: sametcodes

lib/@dsvgui/document/fonts/manrope.ts renamed to lib/@dsvgui/document/fonts/manrope/index.ts

@@ -19,6 +19,7 @@
     "@storybook/react": "^7.0.6",
     "@storybook/testing-library": "^0.1.0",
     "buffer": "^6.0.3",
+    "canvas": "^2.11.2",
     "image-size": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

lib/@dsvgui/document/fonts/manrope/index.ttf

@@ -1,31 +1,40 @@
 import getImageSize from "image-size";
+import { createCanvas } from "canvas";
 
 type IGetTextWidth = (
   inputText: string | number | null,
   options: {
     fontSize: number;
-    ratio?: number;
+    fontFamily?: string;
+    fontWeight?: string;
   }
 ) => number;
 
 export const getTextWidth: IGetTextWidth = (inputText, options) => {
-  const { fontSize = 16, ratio = 0.5 } = options;
+  const {
+    fontSize = 16,
+    fontFamily = "sans-serif",
+    fontWeight = "normal",
+  } = options;
 
-  let width = 0;
   let text = inputText ?? "";
   text = text.toString();
 
-  // Estimate the width using a monospace font (each character has the same width)
-  width = text.length * fontSize * ratio;
-  return width;
+  const canvas = createCanvas(0, 0);
+  const context = canvas.getContext("2d");
+  context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+
+  const metrics = context.measureText(text);
+  return metrics.width;
 };
 
 type IWrapText = (
   inputText: string,
   options: {
     maxLineWidth: number;
-    fontSize: number;
     maxLines?: number;
+    fontSize: number;
+    fontWeight?: string;
   },
   cb: (value: string, index: number, array: Array<string>) => JSX.Element
 ) => Array<JSX.Element>;
@@ -40,7 +49,10 @@ export const wrapText: IWrapText = (inputText, options, cb) => {
   for (let i = 1; i < words.length; i++) {
     const word = words[i];
     const testLine = currentLine + " " + word;
-    const testWidth = getTextWidth(testLine, { fontSize: options.fontSize });
+    const testWidth = getTextWidth(testLine, {
+      fontSize: options.fontSize,
+      fontWeight: options.fontWeight,
+    });
 
     if (testWidth > maxLineWidth) {
       lines.push(currentLine);
@@ -83,6 +95,10 @@ export const convertDateToReadableFormat: IConvertDateToReadbleFormat = (
   return `${month} ${day} '${year}`;
 };
 
+export function rgbToHex([r, g, b]: Array<number>) {
+  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+
 export function hexToRgb(hex: string, alpha = 1) {
   const bigint = parseInt(hex.slice(1), 16);
   const r = (bigint >> 16) & 255;