Implemented the new inside label alignment values.

- Added left-inside / right-inside for text-halign
- Added top-inside / bottom-inside for text-valign
- Updated label projection, bounds, canvas drawing, texture offsets, and edge endpoint label intersection logic
- Updated docs and TypeScript definitions
- Added tests for style acceptance and label anchor math

Ref: Inside-shape alignment of text labels #3443

Author: maxkfranz

documentation/md/style.md

@@ -695,8 +695,8 @@ Wrapping text:
 
 Node label alignment:
 
- * **`text-halign`** : The horizontal alignment of a node's label; may have value `left`, `center`, or `right`.
- * **`text-valign`** : The vertical alignment of a node's label; may have value `top`, `center`, or `bottom`.
+ * **`text-halign`** : The horizontal alignment of a node's label; may have value `left`, `left-inside`, `center`, `right`, or `right-inside`.
+ * **`text-valign`** : The vertical alignment of a node's label; may have value `top`, `top-inside`, `center`, `bottom`, or `bottom-inside`.
 
 Edge label alignment:
 

index.d.ts

@@ -5598,11 +5598,11 @@ declare namespace cytoscape {
             /**
              * The horizontal alignment of a node’s label.
              */
-            "text-halign": PropertyValue<SingularType, "left" | "center" | "right">;
+            "text-halign": PropertyValue<SingularType, "left" | "left-inside" | "center" | "right" | "right-inside">;
             /**
              * The vertical alignment of a node’s label.
              */
-            "text-valign": PropertyValue<SingularType, "top" | "center" | "bottom">;
+            "text-valign": PropertyValue<SingularType, "top" | "top-inside" | "center" | "bottom" | "bottom-inside">;
 
             /**
              * Edge label alignment:

src/collection/dimensions/bounds.mjs

@@ -1,6 +1,7 @@
 import * as is from '../../is.mjs';
 import { assignBoundingBox, expandBoundingBoxSides,  clearBoundingBox, expandBoundingBox, makeBoundingBox, copyBoundingBox, shiftBoundingBox, updateBoundingBox } from '../../math.mjs';
 import {defaults, endsWith, getPrefixedProperty, hashIntsArray, memoize} from '../../util/index.mjs';
+import { labelHalign, labelValign } from '../../style/align.mjs';
 
 let fn, elesfn;
 
@@ -305,7 +306,7 @@ let updateBoundsFromLabel = function( bounds, ele, prefix ){
       ly1 = labelY - lh_2;
       ly2 = labelY + lh_2;
     } else {
-      switch( halign.value ){
+      switch( labelHalign( halign.value ) ){
         case 'left':
           lx1 = labelX - lw;
           lx2 = labelX;
@@ -322,7 +323,7 @@ let updateBoundsFromLabel = function( bounds, ele, prefix ){
           break;
       }
 
-      switch( valign.value ){
+      switch( labelValign( valign.value ) ){
         case 'top':
           ly1 = labelY - lh;
           ly2 = labelY;
@@ -379,7 +380,7 @@ let updateBoundsFromLabel = function( bounds, ele, prefix ){
       let yo = (ly1 + ly2)/2;
 
       if( !isEdge ){
-        switch( halign.value ){
+        switch( labelHalign( halign.value ) ){
           case 'left':
             xo = lx2;
             break;
@@ -389,7 +390,7 @@ let updateBoundsFromLabel = function( bounds, ele, prefix ){
             break;
         }
 
-        switch( valign.value ){
+        switch( labelValign( valign.value ) ){
           case 'top':
             yo = ly2;
             break;

src/extensions/renderer/base/coord-ele-math/edge-endpoints.mjs

@@ -1,6 +1,7 @@
 import * as math from '../../../../math.mjs';
 import * as is from '../../../../is.mjs';
 import {endsWith} from "../../../../util/index.mjs";
+import { labelHalign, labelValign } from '../../../../style/align.mjs';
 
 let BRp = {};
 
@@ -155,13 +156,15 @@ BRp.findEndpoints = function( edge ){
       let lh2 = lh/2;
 
       let va = target.pstyle('text-valign').value;
+      va = labelValign( va );
       if( va === 'top' ){
         ly -= lh2;
       } else if( va === 'bottom' ){
         ly += lh2;
       }
 
       let ha = target.pstyle('text-halign').value;
+      ha = labelHalign( ha );
       if( ha === 'left' ){
         lx -= lw2;
       } else if( ha === 'right' ){
@@ -247,13 +250,15 @@ BRp.findEndpoints = function( edge ){
       let lh2 = lh/2;
 
       let va = source.pstyle('text-valign').value;
+      va = labelValign( va );
       if( va === 'top' ){
         ly -= lh2;
       } else if( va === 'bottom' ){
         ly += lh2;
       }
 
       let ha = source.pstyle('text-halign').value;
+      ha = labelHalign( ha );
       if( ha === 'left' ){
         lx -= lw2;
       } else if( ha === 'right' ){

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

@@ -1,6 +1,7 @@
 import * as math from '../../../../math.mjs';
 import * as is from '../../../../is.mjs';
 import * as util from '../../../../util/index.mjs';
+import { labelJustification } from '../../../../style/align.mjs';
 
 let BRp = {};
 
@@ -25,10 +26,18 @@ BRp.recalculateNodeLabelProjection = function( node ){
       textX = nodePos.x - nodeWidth / 2 - padding;
       break;
 
+    case 'left-inside':
+      textX = nodePos.x - nodeWidth / 2 + padding;
+      break;
+
     case 'right':
       textX = nodePos.x + nodeWidth / 2 + padding;
       break;
 
+    case 'right-inside':
+      textX = nodePos.x + nodeWidth / 2 - padding;
+      break;
+
     default: // e.g. center
       textX = nodePos.x;
   }
@@ -38,10 +47,18 @@ BRp.recalculateNodeLabelProjection = function( node ){
       textY = nodePos.y - nodeHeight / 2 - padding;
       break;
 
+    case 'top-inside':
+      textY = nodePos.y - nodeHeight / 2 + padding;
+      break;
+
     case 'bottom':
       textY = nodePos.y + nodeHeight / 2 + padding;
       break;
 
+    case 'bottom-inside':
+      textY = nodePos.y + nodeHeight / 2 - padding;
+      break;
+
     default: // e.g. middle
       textY = nodePos.y;
   }
@@ -459,14 +476,7 @@ BRp.getLabelJustification = function(ele){
 
   if( justification === 'auto' ){
     if( ele.isNode() ){
-      switch( textHalign ){
-        case 'left':
-          return 'right';
-        case 'right':
-          return 'left';
-        default:
-          return 'center';
-      }
+      return labelJustification( textHalign );
     } else {
       return 'center';
     }

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

@@ -1,5 +1,6 @@
 import * as util from '../../../util/index.mjs';
 import * as math from '../../../math.mjs';
+import { labelHalign, labelValign } from '../../../style/align.mjs';
 
 let CRp = {};
 
@@ -233,7 +234,10 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
       textY = 0;
     }
 
-    switch( valign ){
+    let boxHalign = labelHalign( halign );
+    let boxValign = labelValign( valign );
+
+    switch( boxValign ){
       case 'top':
         break;
       case 'center':
@@ -266,7 +270,7 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
       let doStroke = textBorderWidth > 0 && borderOpacity > 0;
 
       let bgX = textX - backgroundPadding;
-      switch( halign ){
+      switch( boxHalign ){
         case 'left':   bgX -= textW; break;
         case 'center': bgX -= textW / 2; break;
       }
@@ -344,27 +348,27 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
 
       if( justification === 'auto' ){
         // then it's already ok, so skip all the other ifs
-      } else if( halign === 'left' ){ // auto justification : right
+      } else if( boxHalign === 'left' ){ // auto justification : right
         if( justification === 'left' ){
           textX += -textW;
         } else if( justification === 'center' ){
           textX += -halfTextW;
         } // else same as auto
-      } else if( halign === 'center' ){ // auto justfication : center
+      } else if( boxHalign === 'center' ){ // auto justfication : center
         if( justification === 'left' ){
           textX += -halfTextW;
         } else if( justification === 'right' ){
           textX += halfTextW;
         } // else same as auto
-      } else if( halign === 'right' ){ // auto justification : left
+      } else if( boxHalign === 'right' ){ // auto justification : left
         if( justification === 'center' ){
           textX += halfTextW;
         } else if( justification === 'right' ){
           textX += textW;
         } // else same as auto
       }
 
-      switch( valign ){
+      switch( boxValign ){
         case 'top':
           textY -= ( lines.length - 1 ) * lineHeight;
           break;

src/extensions/renderer/canvas/index.mjs

@@ -9,6 +9,7 @@ Modifications tracked on Github.
 import * as util from '../../../util/index.mjs';
 import * as is from '../../../is.mjs';
 import { makeBoundingBox } from '../../../math.mjs';
+import { labelHalign, labelValign } from '../../../style/align.mjs';
 import ElementTextureCache from './ele-texture-cache.mjs';
 import LayeredTextureCache from './layered-texture-cache.mjs';
 
@@ -186,7 +187,7 @@ function CanvasRenderer( options ){
     let p = getCenterOffset( getLabelBox(ele) );
 
     if( ele.isNode() ){
-      switch( ele.pstyle('text-halign').value ){
+      switch( labelHalign( ele.pstyle('text-halign').value ) ){
         case 'left':
           p.x = -bb.w - (bb.leftPad || 0);
           break;
@@ -195,7 +196,7 @@ function CanvasRenderer( options ){
           break;
       }
 
-      switch( ele.pstyle('text-valign').value ){
+      switch( labelValign( ele.pstyle('text-valign').value ) ){
         case 'top':
           p.y = -bb.h - (bb.topPad || 0);
           break;

src/style/align.mjs

@@ -0,0 +1,48 @@
+export const labelHalign = halign => {
+  switch( halign ){
+    case 'left':
+    case 'right-inside':
+      return 'left';
+
+    case 'right':
+    case 'left-inside':
+      return 'right';
+
+    default:
+      return 'center';
+  }
+};
+
+export const labelValign = valign => {
+  switch( valign ){
+    case 'top':
+    case 'bottom-inside':
+      return 'top';
+
+    case 'bottom':
+    case 'top-inside':
+      return 'bottom';
+
+    default:
+      return 'center';
+  }
+};
+
+export const labelJustification = halign => {
+  switch( halign ){
+    case 'left':
+      return 'right';
+
+    case 'right':
+      return 'left';
+
+    case 'left-inside':
+      return 'left';
+
+    case 'right-inside':
+      return 'right';
+
+    default:
+      return 'center';
+  }
+};

src/style/properties.mjs

@@ -88,8 +88,8 @@ const styfn = {};
     visibility: { enums: [ 'hidden', 'visible' ] },
     zCompoundDepth: { enums: [ 'bottom', 'orphan', 'auto', 'top' ] },
     zIndexCompare: { enums: [ 'auto', 'manual' ] },
-    valign: { enums: [ 'top', 'center', 'bottom' ] },
-    halign: { enums: [ 'left', 'center', 'right' ] },
+    valign: { enums: [ 'top', 'top-inside', 'center', 'bottom', 'bottom-inside' ] },
+    halign: { enums: [ 'left', 'left-inside', 'center', 'right', 'right-inside' ] },
     justification: { enums: [ 'left', 'center', 'right', 'auto' ] },
     text: { string: true },
     data: { mapping: true, regex: data( 'data' ) },

test/collection-style.mjs

@@ -197,6 +197,26 @@ describe('Collection style', function(){
       expect( cy.$('#n1').style('width') ).to.equal('20px');
     });
 
+    it('ele.style() accepts inside label alignment values', function(){
+      var n1 = cy.$('#n1');
+
+      n1.style({
+        'text-halign': 'left-inside',
+        'text-valign': 'top-inside'
+      });
+
+      expect( n1.style('text-halign') ).to.equal('left-inside');
+      expect( n1.style('text-valign') ).to.equal('top-inside');
+
+      n1.style({
+        'text-halign': 'right-inside',
+        'text-valign': 'bottom-inside'
+      });
+
+      expect( n1.style('text-halign') ).to.equal('right-inside');
+      expect( n1.style('text-valign') ).to.equal('bottom-inside');
+    });
+
     it('ele.style(propName) works for unitless property value', function(){
       expect( cy.$('#n1').style('opacity') ).to.equal('0.5');
     });