Draw text border for 'text-background-shape':'round-rectangle'

Apply PR #3205 to 3.27.x branch. Refs #3093 #3206
cytoscape · Dec 19, 2023 · 804d4c7 · 804d4c7
1 parent 200311c
commit 804d4c7
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 8 deletions.
diff --git a/debug/tests.js b/debug/tests.js
@@ -108,6 +108,65 @@
     }
   });
 
+  test({
+    name: "text-background",
+    displayName: "Text Background Styles",
+    description: "Look at labels with different text background styles.",
+    setup: function(){
+      cy.$('#a').css({
+        'text-background-color': '#e5e5e5',
+        'text-background-opacity': 1
+      });
+      cy.$('#b').css({
+        'text-background-color': '#e5e5e5',
+        'text-background-opacity': 1,
+        'text-background-shape': 'round-rectangle',
+        'text-background-padding': '2px',
+      });
+      cy.$('#c').css({
+        'text-background-color': '#e5e5e5',
+        'text-background-opacity': 1,
+        'text-background-shape': 'round-rectangle',
+        'text-background-padding': '2px',
+        'text-border-width': 1,
+        'text-border-opacity': 1,
+        'text-border-color': 'red',
+      });
+      cy.$('#d').css({
+        'text-background-color': '#e5e5e5',
+        'text-background-opacity': 1,
+        'text-background-shape': 'rectangle',
+        'text-background-padding': '2px',
+        'text-border-width': 1,
+        'text-border-opacity': 1,
+        'text-border-color': 'red',
+      });
+      cy.$('#e').css({
+        'text-background-color': '#e5e5e5',
+        'text-background-opacity': 1,
+        'text-background-shape': 'rectangle',
+        'text-background-padding': '2px',
+        'text-border-width': 1,
+        'text-border-opacity': 1,
+        'text-border-color': 'red',
+        'text-border-style': 'dashed',
+      });
+      cy.$('#f').css({
+        'text-background-color': '#e5e5e5',
+        'text-background-opacity': 1,
+        'text-background-shape': 'round-rectangle',
+        'text-background-padding': '10px',
+        'text-border-width': 5,
+        'text-border-opacity': 1,
+        'text-border-color': 'red',
+        'text-border-style': 'double',
+      });
+    },
+    teardown: function(){
+      cy.nodes().removeCss();
+    }
+  });
+
   test({
     name: "bypassOnClick",
     displayName: "Bypass on click",

diff --git a/src/extensions/renderer/canvas/drawing-label-text.js b/src/extensions/renderer/canvas/drawing-label-text.js
@@ -130,7 +130,7 @@ CRp.setupTextStyle = function( context, ele, useEleOpacity = true ){
 };
 
 // TODO ensure re-used
-function roundRect( ctx, x, y, width, height, radius = 5 ){
+function roundRect( ctx, x, y, width, height, radius = 5, stroke){
   ctx.beginPath();
   ctx.moveTo( x + radius, y );
   ctx.lineTo( x + width - radius, y );
@@ -142,7 +142,10 @@ function roundRect( ctx, x, y, width, height, radius = 5 ){
   ctx.lineTo( x, y + radius );
   ctx.quadraticCurveTo( x, y, x + radius, y );
   ctx.closePath();
-  ctx.fill();
+  if(stroke)
+    ctx.stroke();
+  else
+    ctx.fill();
 }
 
 CRp.getTextAngle = function( ele, prefix ){
@@ -237,6 +240,9 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
     let borderOpacity = ele.pstyle( 'text-border-opacity' ).value;
     let textBorderWidth = ele.pstyle( 'text-border-width' ).pfValue;
     let backgroundPadding = ele.pstyle( 'text-background-padding' ).pfValue;
+    let styleShape = ele.pstyle( 'text-background-shape' ).strValue;
+    let rounded = styleShape.indexOf('round') === 0;
+    let roundRadius = 2;
 
     if( backgroundOpacity > 0 || ( textBorderWidth > 0 && borderOpacity > 0 ) ){
       let bgX = textX - backgroundPadding;
@@ -261,9 +267,8 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
         let textBackgroundColor = ele.pstyle( 'text-background-color' ).value;
 
         context.fillStyle = 'rgba(' + textBackgroundColor[ 0 ] + ',' + textBackgroundColor[ 1 ] + ',' + textBackgroundColor[ 2 ] + ',' + backgroundOpacity * parentOpacity + ')';
-        let styleShape = ele.pstyle( 'text-background-shape' ).strValue;
-        if( styleShape.indexOf('round') === 0 ){
-          roundRect( context, bgX, bgY, bgW, bgH, 2 );
+        if( rounded ){
+          roundRect( context, bgX, bgY, bgW, bgH, roundRadius );
         } else {
           context.fillRect( bgX, bgY, bgW, bgH );
         }
@@ -297,12 +302,19 @@ CRp.drawText = function( context, ele, prefix, applyRotation = true, useEleOpaci
           }
         }
 
-        context.strokeRect( bgX, bgY, bgW, bgH );
+        if( rounded ){
+          roundRect( context, bgX, bgY, bgW, bgH, roundRadius, 'stroke' );
+        } else {
+          context.strokeRect( bgX, bgY, bgW, bgH );
+        }
 
         if( textBorderStyle === 'double' ){
           let whiteWidth = textBorderWidth / 2;
-
-          context.strokeRect( bgX + whiteWidth, bgY + whiteWidth, bgW - whiteWidth * 2, bgH - whiteWidth * 2 );
+          if( rounded ){
+            roundRect( context, bgX + whiteWidth, bgY + whiteWidth, bgW - whiteWidth * 2, bgH - whiteWidth * 2, roundRadius, 'stroke' );
+          } else {
+            context.strokeRect( bgX + whiteWidth, bgY + whiteWidth, bgW - whiteWidth * 2, bgH - whiteWidth * 2 );
+          }
         }
 
         if( context.setLineDash ){ // for very outofdate browsers