add options arg to font.textBounds/font.fontBounds per processing#7147

dhowe · Dec 21, 2024 · 5b4a87b · 5b4a87b
1 parent 83c6db9
commit 5b4a87b
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 22 deletions.
diff --git a/src/type/p5.Font.js b/src/type/p5.Font.js
@@ -32,14 +32,6 @@
 import Typr from './lib/Typr.js';
 import { createFromCommands } from '@davepagurek/bezier-path';
 
-function unquote(name) {
-  // Unquote name from CSS
-  if ((name.startsWith('"') || name.startsWith("'")) && name.at(0) === name.at(-1)) {
-    return name.slice(1, -1).replace(/\/(['"])/g, '$1');
-  }
-  return name;
-}
-
 function font(p5, fn) {
 
   const pathArgCounts = { M: 2, L: 2, C: 6, Q: 4 };
@@ -101,14 +93,18 @@ function font(p5, fn) {
       return meta;
     }
 
-    fontBounds(...args) { // alias for p5.fontBounds
-      if (!this._pInst) throw Error('p5 required for fontBounds()');
-      return this._pInst.fontBounds(...args);
+    fontBounds(str, x, y, width, height, options) {
+      ({ width, height, options } = this._parseArgs(width, height, options));
+      let renderer = options?.graphics?._renderer || this._pInst._renderer;
+      if (!renderer) throw Error('p5 or graphics required for fontBounds()');
+      return renderer.fontBounds(str, x, y, width, height);
     }
 
-    textBounds(...args) { // alias for p5.textBounds
-      if (!this._pInst) throw Error('p5 required for textBounds()'); // TODO:
-      return this._pInst.textBounds(...args);
+    textBounds(str, x, y, width, height, options) {
+      ({ width, height, options } = this._parseArgs(width, height, options));
+      let renderer = options?.graphics?._renderer || this._pInst._renderer;
+      if (!renderer) throw Error('p5 or graphics required for fontBounds()');
+      return renderer.textBounds(str, x, y, width, height);
     }
 
     textToPaths(str, x, y, width, height, options) {
@@ -579,7 +575,7 @@ function font(p5, fn) {
 
       // parse the font data
       let fonts = Typr.parse(result);
-      console.log(fonts[0])
+
       // TODO: generate descriptors from font in the future
 
       if (fonts.length !== 1 || fonts[0].cmap === undefined) {
@@ -635,6 +631,14 @@ function font(p5, fn) {
     return new p5.Font(pInst, face, name, path, rawFont);
   }
 
+  function unquote(name) {
+    // Unquote name from CSS
+    if ((name.startsWith('"') || name.startsWith("'")) && name.at(0) === name.at(-1)) {
+      return name.slice(1, -1).replace(/\/(['"])/g, '$1');
+    }
+    return name;
+  }
+
   function createFontFace(name, path, descriptors, rawFont) {
     let fontArg = rawFont?._data;
     if (!fontArg) {

diff --git a/src/type/text2d.js b/src/type/text2d.js
@@ -94,7 +94,6 @@ function text2d(p5, fn) {
       }
       return this._renderer[func](...args);
     };
-    // TODO: is this necessary?
     p5.Graphics.prototype[func] = function (...args) {
       return this._renderer[func](...args);
     };
@@ -160,8 +159,7 @@ function text2d(p5, fn) {
    * @returns - a bounding box object for the text block: {x,y,w,h}
    */
   Renderer.prototype.textBounds = function (str, x, y, width, height) {
-    //console.log('TEXT BOUNDS: ', str, x, y, width, height);
-    // delegate to _textBoundsSingle measure function
+    // delegate to _textBoundsSingle for measuring
     return this._computeBounds(fn._TEXT_BOUNDS, str, x, y, width, height).bounds;
   };
 
@@ -175,7 +173,7 @@ function text2d(p5, fn) {
    * @returns - a bounding box object for the text block: {x,y,w,h}
    */
   Renderer.prototype.fontBounds = function (str, x, y, width, height) {
-    // delegate to _fontBoundsSingle measure function
+    // delegate to _fontBoundsSingle for measuring
     return this._computeBounds(fn._FONT_BOUNDS, str, x, y, width, height).bounds;
   };
 
@@ -260,7 +258,7 @@ function text2d(p5, fn) {
     };
   };
 
-  Renderer.prototype._currentTextFont = function() {
+  Renderer.prototype._currentTextFont = function () {
     return this.states.textFont.font || this.states.textFont.family;
   }
 
@@ -1089,7 +1087,7 @@ function text2d(p5, fn) {
   };
 
   if (p5.Renderer2D) {
-    p5.Renderer2D.prototype.textDrawingContext = function() {
+    p5.Renderer2D.prototype.textDrawingContext = function () {
       return this.drawingContext;
     };
     p5.Renderer2D.prototype._renderText = function (text, x, y, maxY, minY) {
@@ -1187,7 +1185,7 @@ function text2d(p5, fn) {
     }
   }
   if (p5.RendererGL) {
-    p5.RendererGL.prototype.textDrawingContext = function() {
+    p5.RendererGL.prototype.textDrawingContext = function () {
       if (!this._textDrawingContext) {
         this._textCanvas = document.createElement('canvas');
         this._textCanvas.width = 1;

diff --git a/test/manual-test-examples/type/text-to-points-buffer.html b/test/manual-test-examples/type/text-to-points-buffer.html
@@ -0,0 +1,76 @@
+<html>
+
+<!-- 
+CSS-style font properties (preferred, but doesn't support custom axes):
+  font-weight: 650;
+  font-style: oblique 80deg;  (must add deg)
+  font-stretch: 75%;          (only accepts percentage with %)  
+  font-optical-sizing: auto;  (only allows for 'auto' or 'none')
+Font-variation style properties:
+  font-variations-settings: 'wght' 650, 'slnt' 80, 'wdth' 75, 'opsz' 100;
+-->
+
+<head>
+  <meta charset='UTF-8'>
+  <!-- <script language="javascript" type="text/javascript" src="./lib/Typr.js"></script>
+  <script language="javascript" type="text/javascript" src="./lib/Typr.U.js"></script> -->
+
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+
+    canvas {
+      border: 1px solid #f0f0f0;
+      display: block;
+    }
+
+    img {
+      border: 1px solid #fff;
+    }
+
+    div {
+      margin: 100px 0px;
+    }
+  </style>
+</head>
+
+
+
+<body>
+  <script type='module'>
+    import p5 from '../../../src/app.js';
+    let sketch = async function (p) {
+      let f, g, pts;
+      p.setup = async function () {
+        p.createCanvas(400, 300);
+        f = await p.loadFont("https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4nY1M2xLER.ttf");
+        g = p.createGraphics(p.width, p.height)
+        g.background(220);
+        g.textAlign(p.CENTER, p.CENTER)
+        g.textFont(f, 50);
+
+        g.text('Serendipity', g.width / 2, g.height / 2);
+        //let bb = g.textBounds('Serendipity', g.width / 2, g.height / 2);
+        let bb = f.textBounds('Serendipity', g.width / 2, g.height / 2, { graphics: g });
+        g.noFill();
+        g.stroke(0);
+        g.rect(bb.x, bb.y, bb.w, bb.h);
+
+        pts = f.textToPoints('Serendipity', g.width / 2, g.height / 2, { graphics: g });
+        pts.forEach((pt, i) => {
+          g.fill(0);
+          g.circle(pt.x, pt.y, 2);
+        });
+        p.image(g, 0, 0);
+      }
+    }
+
+    new p5(sketch);
+  </script>
+
+</body>
+
+
+</html>