feat: text-metrics

Author: fzaman-linz

src/collection/dimensions/bounds.mjs

@@ -3,6 +3,7 @@ import { assignBoundingBox, expandBoundingBoxSides,  clearBoundingBox, expandBou
 import {defaults, endsWith, getPrefixedProperty, hashIntsArray, memoize} from '../../util/index.mjs';
 
 let fn, elesfn;
+const BBOX_MARGIN_ERROR = 2;
 
 fn = elesfn = {};
 
@@ -291,7 +292,8 @@ let updateBoundsFromLabel = function( bounds, ele, prefix ){
     let borderWidth = ele.pstyle( 'text-border-width' ).pfValue;
     let halfBorderWidth = borderWidth / 2;
     let padding = ele.pstyle( 'text-background-padding' ).pfValue;
-    let marginOfError = 2; // expand to work around browser dimension inaccuracies
+    let marginOfErrorX = BBOX_MARGIN_ERROR; // expand to work around browser dimension inaccuracies
+    let marginOfErrorY = BBOX_MARGIN_ERROR; // expand to work around browser dimension inaccuracies
 
     let lh = labelHeight;
     let lw = labelWidth;
@@ -341,10 +343,10 @@ let updateBoundsFromLabel = function( bounds, ele, prefix ){
     }
 
     // shift by margin and expand by outline and border
-    let leftPad  = marginX - Math.max( outlineWidth, halfBorderWidth ) - padding - marginOfError;
-    let rightPad = marginX + Math.max( outlineWidth, halfBorderWidth ) + padding + marginOfError;
-    let topPad   = marginY - Math.max( outlineWidth, halfBorderWidth ) - padding - marginOfError;
-    let botPad   = marginY + Math.max( outlineWidth, halfBorderWidth ) + padding + marginOfError;
+    let leftPad  = marginX - Math.max( outlineWidth, halfBorderWidth ) - padding - marginOfErrorX;
+    let rightPad = marginX + Math.max( outlineWidth, halfBorderWidth ) + padding + marginOfErrorX;
+    let topPad   = marginY - Math.max( outlineWidth, halfBorderWidth ) - padding - marginOfErrorY;
+    let botPad   = marginY + Math.max( outlineWidth, halfBorderWidth ) + padding + marginOfErrorY;
 
     lx1 += leftPad;
     lx2 += rightPad;

src/extensions/renderer/base/coord-ele-math/labels.mjs

@@ -312,14 +312,14 @@ BRp.applyPrefixedLabelDimensions = function( ele, prefix ){
 
   let labelDims = this.calculateLabelDimensions( ele, text );
   let lineHeight = ele.pstyle('line-height').pfValue;
+  let size = ele.pstyle('font-size').pfValue;
   let textWrap = ele.pstyle('text-wrap').strValue;
   let lines = util.getPrefixedProperty( _p.rscratch, 'labelWrapCachedLines', prefix ) || [];
   let numLines = textWrap !== 'wrap' ? 1 : Math.max(lines.length, 1);
-  let normPerLineHeight = labelDims.height / numLines;
-  let labelLineHeight = normPerLineHeight * lineHeight;
+  let labelLineHeight = size * lineHeight;
 
   let width = labelDims.width;
-  let height = labelDims.height + (numLines - 1) * (lineHeight - 1) * normPerLineHeight;
+  let height = labelDims.height + (numLines - 1) * (lineHeight - 1) * size;
 
   util.setPrefixedProperty( _p.rstyle,   'labelWidth', prefix, width );
   util.setPrefixedProperty( _p.rscratch, 'labelWidth', prefix, width );
@@ -328,6 +328,7 @@ BRp.applyPrefixedLabelDimensions = function( ele, prefix ){
   util.setPrefixedProperty( _p.rscratch, 'labelHeight', prefix, height );
 
   util.setPrefixedProperty( _p.rscratch, 'labelLineHeight', prefix, labelLineHeight );
+  util.setPrefixedProperty( _p.rscratch, 'labelActualDescent', prefix, labelDims.labelActualDescent );
 };
 
 BRp.getLabelText = function( ele, prefix ){
@@ -509,23 +510,34 @@ BRp.calculateLabelDimensions = function( ele, text ){
   let width = 0;
   let height = 0;
   let lines = text.split('\n');
+  let lineCount = lines.length;
+  let labelActualDescent = 0;
+  let labelActualAscent = 0;
 
-  for( let i = 0; i < lines.length; i++ ){
+  for( let i = 0; i < lineCount; i++ ){
     let line = lines[i];
     let metrics = c2d.measureText(line);
     let w = Math.ceil(metrics.width);
     let h = size;
+    if (i === 0) {
+      labelActualAscent = Number.isFinite(metrics.actualBoundingBoxAscent) ? metrics.actualBoundingBoxAscent : size; 
+    }
+    if (i === lineCount - 1) {
+      labelActualDescent = Number.isFinite(metrics.actualBoundingBoxDescent) ? metrics.actualBoundingBoxDescent : 0;
+    }
 
     width = Math.max(w, width);
     height += h;
   }
-
+  height -= size - labelActualAscent - labelActualDescent;
   width += padding;
   height += padding;
 
   return {
     width,
-    height
+    height,
+    labelActualAscent,
+    labelActualDescent
   };
 };
 

src/extensions/renderer/canvas/drawing-label-text.mjs

@@ -39,7 +39,7 @@ CRp.drawElementText = function( context, ele, shiftToOriginWithBb, force, prefix
     let justification = r.getLabelJustification(ele);
 
     context.textAlign = justification;
-    context.textBaseline = 'bottom';
+    context.textBaseline = 'alphabetic';
   } else {
     let badLine = ele.element()._private.rscratch.badLine;
     let label = ele.pstyle( 'label' );
@@ -198,6 +198,7 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
     let pdash = prefix ? prefix + '-' : '';
     let textW = util.getPrefixedProperty( rscratch, 'labelWidth', prefix );
     let textH = util.getPrefixedProperty( rscratch, 'labelHeight', prefix );
+    let labelActualDescent = util.getPrefixedProperty( rscratch, 'labelActualDescent', prefix );
     let marginX = ele.pstyle( pdash + 'text-margin-x' ).pfValue;
     let marginY = ele.pstyle( pdash + 'text-margin-y' ).pfValue;
 
@@ -335,7 +336,8 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
     if( lineWidth > 0 ){
       context.lineWidth = lineWidth;
     }
-
+    
+    textY -= labelActualDescent;
     if( ele.pstyle( 'text-wrap' ).value === 'wrap' ){
       let lines = util.getPrefixedProperty( rscratch, 'labelWrapCachedLines', prefix );
       let lineHeight = util.getPrefixedProperty( rscratch, 'labelLineHeight', prefix );

src/style/properties.mjs

@@ -217,7 +217,7 @@ const styfn = {};
     { name: 'text-overflow-wrap', type: t.textOverflowWrap, triggersBounds: diff.any },
     { name: 'text-max-width', type: t.size, triggersBounds: diff.any },
     { name: 'text-outline-width', type: t.size, triggersBounds: diff.any },
-    { name: 'line-height', type: t.positiveNumber, triggersBounds: diff.any }
+    { name: 'line-height', type: t.positiveNumber, triggersBounds: diff.any },
   ];
 
   let commonLabel = [