#24 font testing

Author: bennobuilder

packages/dtif-to-svg/package.json

@@ -19,7 +19,11 @@
   "author": "@bennodev19",
   "license": "MIT",
   "dependencies": {
-    "d3-selection": "^3.0.0"
+    "@pda/openapi-fetch": "workspace:^",
+    "@remotion/paths": "^4.0.6",
+    "d3-selection": "^3.0.0",
+    "opentype.js": "^1.3.4",
+    "webfontloader": "^1.6.28"
   },
   "peerDependencies": {
     "jsdom": "^22.1.0"
@@ -31,6 +35,7 @@
     "@types/d3-selection": "^3.0.5",
     "@types/jest": "^29.5.1",
     "@types/node": "^18.15.13",
+    "@types/opentype.js": "^1.3.4",
     "eslint": "^8.38.0",
     "eslint-config-pda-base": "workspace:*",
     "jest": "^29.5.0",

packages/dtif-to-svg/src/__tests__/dtif-to-svg.test.ts

@@ -1,12 +1,20 @@
-import { dtifToSVG } from '..';
+import { renderText } from '..';
 
 describe('dtif-to-svg library tests', () => {
   it('should work', async () => {
     // Arrange
     const dtif = '';
 
     // Act
-    const result = await dtifToSVG();
+    console.time();
+    const result = await renderText(
+      'http://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJDUc1NECPY.ttf',
+      'From',
+      96
+    );
+    console.timeEnd();
+
+    console.log(result);
 
     // Assert
     expect(result).toBe('');

packages/dtif-to-svg/src/index.ts

@@ -1,35 +1,29 @@
+import { RawFetchClientThrow } from '@pda/openapi-fetch';
 import { d3 } from './d3';
 
-export async function dtifToSVG() {
-  const svg = (await d3())
-    .select('body')
-    .append('svg')
-    .attr('width', 500)
-    .attr('height', 500);
-
-  const defs = svg.append('defs');
-
-  const gradient = defs
-    .append('linearGradient')
-    .attr('id', 'gradient')
-    .attr('x1', '0%')
-    .attr('y1', '0%')
-    .attr('x2', '100%')
-    .attr('y2', '100%');
-
-  gradient.append('stop').attr('offset', '0%').attr('stop-color', 'blue');
-
-  gradient.append('stop').attr('offset', '100%').attr('stop-color', 'red');
-
-  for (let i = 0; i < 100; i++) {
-    svg
-      .append('rect')
-      .attr('x', i * 5)
-      .attr('y', i * 5)
-      .attr('width', 50)
-      .attr('height', 50)
-      .attr('fill', 'url(#gradient)');
-  }
-
-  return (await d3()).select('body').html();
+import * as opentype from 'opentype.js';
+
+const fetchClient = new RawFetchClientThrow();
+
+async function loadFont(url: string): Promise<opentype.Font> {
+  const buffer = await fetchClient.getThrow<ArrayBuffer>(url, {
+    parseAs: 'arrayBuffer',
+  });
+  return opentype.parse(buffer);
+}
+
+export async function renderText(url: string, input: string, fontSize = 72) {
+  const font = await loadFont(url);
+
+  const textSvg = font.getPath(input, 0, 150, fontSize);
+  const path = textSvg.toPathData(2);
+  const textBB = textSvg.getBoundingBox();
+  const width = textBB.x2 - textBB.x1;
+  const height = textBB.y2 - textBB.y1;
+
+  const svg = (await d3()).create('svg').attr('viewBox', [0, 0, width, height]);
+
+  svg.append('path').attr('d', path);
+
+  return svg.node()?.outerHTML;
 }