feat: text-metrics:actual|default

Author: fzaman-linz

index.d.ts

@@ -5590,6 +5590,13 @@ declare namespace cytoscape {
              * height of a line of text.
              */
             "line-height": PropertyValue<SingularType, number>;
+            /**
+             * The vertical alignment of text relative to its baseline. This affects how text 
+             * dimensions are calculated and displayed.
+             * - `default`: Calculate using font size.
+             * - `actual`: Calculate using actual label text metrics (for ascending/descending character size).
+             */
+            "text-metrics": PropertyValue<SingularType, "default" | "actual">;
 
             /**
              * Node label alignment:

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

@@ -488,6 +488,7 @@ BRp.calculateLabelDimensions = function( ele, text ){
   let size = ele.pstyle('font-size').pfValue;
   let family = ele.pstyle('font-family').strValue;
   let weight = ele.pstyle('font-weight').strValue;
+  let textMetrics = ele.pstyle('text-metrics').strValue || 'default';
 
   let canvas = this.labelCalcCanvas;
   let c2d = this.labelCalcCanvasContext;
@@ -519,17 +520,21 @@ BRp.calculateLabelDimensions = function( ele, text ){
     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;
+    if ( textMetrics === 'actual' ){
+      if (i === 0) {
+        labelActualAscent = metrics.actualBoundingBoxAscent; 
+      }
+      if (i === lineCount - 1) {
+        labelActualDescent = metrics.actualBoundingBoxDescent;
+      }
     }
 
     width = Math.max(w, width);
     height += h;
   }
-  height -= size - labelActualAscent - labelActualDescent;
+  if ( textMetrics === 'actual' ){
+    height -= size - labelActualAscent - labelActualDescent;
+  }
   width += padding;
   height += padding;
 

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

@@ -37,9 +37,10 @@ CRp.drawElementText = function( context, ele, shiftToOriginWithBb, force, prefix
     if( !label || !label.value ){ return; }
 
     let justification = r.getLabelJustification(ele);
+    let isTextMetricsActual = ele.pstyle('text-metrics').strValue === 'actual';
 
     context.textAlign = justification;
-    context.textBaseline = 'alphabetic';
+    context.textBaseline = isTextMetricsActual ? 'alphabetic' : 'bottom';
   } else {
     let badLine = ele.element()._private.rscratch.badLine;
     let label = ele.pstyle( 'label' );

src/style/properties.mjs

@@ -91,6 +91,7 @@ const styfn = {};
     valign: { enums: [ 'top', 'center', 'bottom' ] },
     halign: { enums: [ 'left', 'center', 'right' ] },
     justification: { enums: [ 'left', 'center', 'right', 'auto' ] },
+    textMetrics: { enums: [ 'default', 'actual' ] },
     text: { string: true },
     data: { mapping: true, regex: data( 'data' ) },
     layoutData: { mapping: true, regex: data( 'layoutData' ) },
@@ -235,6 +236,7 @@ const styfn = {};
     { name: 'text-border-style', type: t.borderStyle, triggersBounds: diff.any },
     { name: 'text-background-shape', type: t.textBackgroundShape, triggersBounds: diff.any },
     { name: 'text-justification', type: t.justification },
+    { name: 'text-metrics', type: t.textMetrics },
     { name: 'box-select-labels', type: t.bool, triggersBounds: diff.any },
   ];
 
@@ -671,6 +673,7 @@ styfn.getDefaultProperties = function(){
     'underlay-padding': 10,
     'underlay-shape': 'round-rectangle',
     'underlay-corner-radius': 'auto',
+    'text-metrics': 'default',
     'transition-property': 'none',
     'transition-duration': 0,
     'transition-delay': 0,