Merge pull request #3202 from EliotRagueneau/border-properties

Border properties

debug/tests.js

@@ -534,6 +534,9 @@
             backgroundColor: "lightblue",
             borderColor: "black",
             borderWidth: 1,
+            borderStyle: 'dashed',
+            borderCap: 'round',
+            borderDashPattern: [8, 16],
             width: "mapData(weight, 20, 100, 20, 100)",
             height: 20,
             labelFontWeight: "normal",
@@ -542,6 +545,40 @@
             textValign: "center",
             textHalign: "center"
           })
+        .selector("node#a")
+          .css({
+            borderWidth: 2,
+            borderCap: 'butt',
+            borderDashPattern: [3, 12, 8, 16],
+            borderPosition: 'inside',
+            shape: "round-hexagon",
+            height: 40
+          })
+        .selector("node#b")
+          .css({
+            borderWidth: 2,
+            borderCap: 'square',
+            borderDashPattern: [4, 12],
+            borderPosition: 'outside',
+            shape: "round-triangle",
+            height: 40
+          })
+        .selector("node#c")
+          .css({
+            borderWidth: 3,
+            borderCap: 'round',
+            borderJoin: 'round',
+            borderDashPattern: [3, 12],
+            borderPosition: 'outside',
+            shape: "polygon",
+            shapePolygonPoints: [
+              -1, -1,
+               1, -1,
+              -1,  1,
+               1,  1
+            ],
+            height: 40
+          })
         .selector("edge")
           .css({
             lineColor: "mapData(weight, 0, 100, blue, red)",
@@ -557,12 +594,27 @@
           })
         .update()
       ;
+
+      cy.on('tap', 'node', function(e){
+        var n = e.target;
+        var p = n.position();
+
+        var a1 = n.animation({
+          style: {
+            'border-dash-offset': 10000
+          },
+          duration: 1000000
+        });
+
+        a1.play()
+      });
     },
 
     teardown: function(){
       var stylesheet = window.defaultSty;
 
       cy.style( stylesheet );
+      cy.off('tap', 'node');
     }
   });
 
@@ -830,7 +882,7 @@
     name: "events:no",
     displayName: "events: no",
     description: "Apply events:no style to all nodes. Clicking on nodes should no longer affect the node.",
-    
+
     setup: function(){
       cy.nodes().style(
         { events: 'no' }
@@ -845,7 +897,7 @@
     name: "text-events:yes",
     displayName: "text-events: yes",
     description: "Apply text-events:yes style to all nodes. Clicking on node labels should select the node.",
-    
+
     setup: function(){
       cy.nodes().style(
         { 'text-events': 'yes' }
@@ -945,5 +997,5 @@
       cy.style(prevStyle);
     }
   });
-  
+
 })();

documentation/md/style.md

@@ -220,6 +220,11 @@ Border:
 
  * **`border-width`** : The size of the node's border.
  * **`border-style`** : The style of the node's border; may be `solid`, `dotted`, `dashed`, or `double`.
+ * **`border-cap`** : The cap style of the node's border; may be `butt`, `round` or `square`.
+ * **`border-join`** : The join style of the node's border; may be `miter`, `bevel` or `round`.
+ * **`border-dash-pattern`** : The `dashed` line pattern which specifies alternating lengths of lines and gaps. (e.g. `[6, 3]`).
+ * **`border-dash-offset`** : The `dashed` line offset (e.g. `24`). It is useful for creating edge animations.
+ * **`border-position`** : The position of the node's border; may be `center`, `inside`, `outside`.
  * **`border-color`** : The colour of the node's border.
  * **`border-opacity`** : The opacity of the node's border.
 

src/extensions/renderer/canvas/drawing-nodes.js

@@ -74,15 +74,18 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel = true, s
   let bgOpacity = node.pstyle('background-opacity').value * eleOpacity;
   let borderColor = node.pstyle('border-color').value;
   let borderStyle = node.pstyle('border-style').value;
+  let borderJoin = node.pstyle('border-join').value;
+  let borderCap = node.pstyle('border-cap').value;
+  let borderPosition = node.pstyle('border-position').value;
+  let borderPattern = node.pstyle('border-dash-pattern').pfValue;
+  let borderOffset = node.pstyle('border-dash-offset').pfValue;
   let borderOpacity = node.pstyle('border-opacity').value * eleOpacity;
   let outlineWidth = node.pstyle('outline-width').pfValue;
   let outlineColor = node.pstyle('outline-color').value;
   let outlineStyle = node.pstyle('outline-style').value;
   let outlineOpacity = node.pstyle('outline-opacity').value * eleOpacity;
   let outlineOffset = node.pstyle('outline-offset').value;
 
-  context.lineJoin = 'miter'; // so borders are square with the node shape
-
   let setupShapeColor = ( bgOpy = bgOpacity ) => {
     r.eleFillStyle( context, node, bgOpy );
   };
@@ -225,7 +228,8 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel = true, s
     if( borderWidth > 0 ){
 
       context.lineWidth = borderWidth;
-      context.lineCap = 'butt';
+      context.lineCap = borderCap;
+      context.lineJoin = borderJoin;
 
       if( context.setLineDash ){ // for very outofdate browsers
         switch( borderStyle ){
@@ -234,7 +238,8 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel = true, s
             break;
 
           case 'dashed':
-            context.setLineDash( [ 4, 2 ] );
+            context.setLineDash( borderPattern );
+            context.lineDashOffset = borderOffset;
             break;
 
           case 'solid':
@@ -244,10 +249,26 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel = true, s
         }
       }
 
-      if( usePaths ){
-        context.stroke( path );
+      if ( borderPosition !== 'center') {
+        context.save();
+        context.lineWidth *= 2;
+        if (borderPosition === 'inside') {
+          usePaths ? context.clip(path) : context.clip();
+        } else {
+          const region = new Path2D();
+          region.rect(
+          -nodeWidth / 2 - borderWidth,
+          -nodeHeight / 2 - borderWidth,
+          nodeWidth + 2 * borderWidth,
+          nodeHeight + 2 * borderWidth
+          );
+          region.addPath(path);
+          context.clip(region, 'evenodd');
+        }
+        usePaths ? context.stroke(path) : context.stroke();
+        context.restore();
       } else {
-        context.stroke();
+        usePaths ? context.stroke(path) : context.stroke();
       }
 
       if( borderStyle === 'double' ){

src/style/properties.js

@@ -57,6 +57,8 @@ const styfn = {};
     bools: { enums: [ 'yes', 'no' ], multiple: true },
     lineStyle: { enums: [ 'solid', 'dotted', 'dashed' ] },
     lineCap: { enums: [ 'butt', 'round', 'square' ] },
+    linePosition: { enums: [ 'center', 'inside', 'outside' ] },
+    lineJoin: { enums: [ 'round', 'bevel', 'miter' ] },
     borderStyle: { enums: [ 'solid', 'dotted', 'dashed', 'double' ] },
     curveStyle: { enums: [ 'bezier', 'unbundled-bezier', 'haystack', 'segments', 'straight', 'straight-triangle', 'taxi' ] },
     fontFamily: { regex: '^([\\w- \\"]+(?:\\s*,\\s*[\\w- \\"]+)*)$' },
@@ -296,7 +298,12 @@ const styfn = {};
     { name: 'border-color', type: t.color },
     { name: 'border-opacity', type: t.zeroOneNumber },
     { name: 'border-width', type: t.size, triggersBounds: diff.any },
-    { name: 'border-style', type: t.borderStyle }
+    { name: 'border-style', type: t.borderStyle },
+    { name: 'border-cap', type: t.lineCap },
+    { name: 'border-join', type: t.lineJoin },
+    { name: 'border-dash-pattern', type: t.numbers },
+    { name: 'border-dash-offset', type: t.number },
+    { name: 'border-position', type: t.linePosition },
   ];
 
   let nodeOutline = [
@@ -635,6 +642,11 @@ styfn.getDefaultProperties = function(){
     'border-opacity': 1,
     'border-width': 0,
     'border-style': 'solid',
+    'border-dash-pattern': [ 4, 2 ],
+    'border-dash-offset': 0,
+    'border-cap': 'butt',
+    'border-join': 'miter',
+    'border-position': 'center',
     'outline-color': '#999',
     'outline-opacity': 1,
     'outline-width': 0,