Merge pull request #3203 from EliotRagueneau/border-radius

Border radius
cytoscape · Jan 24, 2024 · 3892b9b · 3892b9b
2 parents 6e49d3f + d8941d1
commit 3892b9b
Show file tree

Hide file tree

Showing 20 changed files with 764 additions and 336 deletions.
diff --git a/debug/init.js b/debug/init.js
@@ -8,15 +8,55 @@ var cy, defaultSty, options;
 
       .selector('node')
         .style({
-          'label': 'data(id)'
+          'background-opacity': 0.4,
+          'label': 'data(id)',
+          'outline-offset': 5,
+          'outline-color': 'red',
+          'outline-opacity': 0.5,
+          'outline-width': 10,
+          'outline-style': 'solid',
+          'border-width': 5,
+          'border-opacity': 0.5,
+          'border-color': 'blue',
+          'border-position': 'inside',
+          'width': 220,
+          'height': 60
         })
+      .selector('node#a')
+        .style({
+          'shape': 'round-rectangle',
+          'width': 220,
+          'height': 60,
+          'corner-radius': 30
+        })
+      .selector('node#b')
+      .style({
+        'shape': 'round-hexagon',
+        'width': 60,
+        'height': 60,
+        'corner-radius': 10
+      })
+      .selector('node#c')
+      .style({
+        'shape': 'round-rectangle',
+        'width': 220,
+        'height': 60,
+        'corner-radius': 5
+      })
+      .selector('node#e')
+      .style({
+        'shape': 'cut-rectangle',
+        'width': 50,
+        'corner-radius': 10,
+      })
 
       .selector('edge')
         .style({
           'source-arrow-shape': 'triangle-backcurve',
           'target-arrow-shape': 'triangle',
           'mid-target-arrow-shape': 'triangle',
           'mid-source-arrow-shape': 'triangle-backcurve',
+          'curve-style': 'straight',
         })
       .selector('#ab')
         .style({
@@ -59,6 +99,29 @@ var cy, defaultSty, options;
         .style({
           'curve-style': 'taxi'
         })
+      .selector('#eg')
+        .style({
+          'curve-style': 'round-taxi',
+          "taxi-direction": "downward",
+          // "taxi-turn": 100,
+          "taxi-turn-min-distance": 50,
+          "taxi-radius": 50
+        })
+      .selector('#eh')
+        .style({
+          'curve-style': 'round-segments',
+          'segment-distances': [ 0  , 50 , 0  , -50, 0  , 0  , 100 ],
+          'segment-weights': [   0.5, 0.6, 0.7, 0.6, 0.5, 0.8, 0.85],
+          'segment-radii': [ 50, 100 ],
+        })
+      .selector('#ei')
+        .style({
+          'curve-style': 'round-taxi'
+        })
+      .selector('#gh')
+        .style({
+          'curve-style': 'round-taxi'
+        })
   ;
 
   options = {
@@ -83,7 +146,10 @@ var cy, defaultSty, options;
         { data: { id: 'c', weight: 20 } },
         { data: { id: 'd', weight: 10 } },
         { data: { id: 'e', weight: 75 } },
-        { data: { id: 'f', weight: 100 } }
+        { data: { id: 'f', weight: 100 } },
+        { data: { id: 'g', weight: 40 } },
+        { data: { id: 'h', weight: 16 } },
+        { data: { id: 'i', weight: 16 } },
       ],
 
       edges: [
@@ -103,7 +169,11 @@ var cy, defaultSty, options;
         { data: { id: 'de4', weight: 7, source: 'd', target: 'e' } },
         { data: { id: 'de5', weight: 7, source: 'd', target: 'e' } },
         { data: { id: 'bf', weight: 3, source: 'b', target: 'f' } },
-        { data: { id: 'ef', weight: 3, source: 'e', target: 'f' } }
+        { data: { id: 'ef', weight: 3, source: 'e', target: 'f' } },
+        { data: { id: 'eg', weight: 3, source: 'e', target: 'g' } },
+        { data: { id: 'eh', weight: 3, source: 'e', target: 'h' } },
+        { data: { id: 'ei', weight: 3, source: 'e', target: 'i' } },
+        { data: { id: 'gh', weight: 3, source: 'g', target: 'h' } },
       ]
     }
   };

diff --git a/debug/tests.js b/debug/tests.js
@@ -94,6 +94,24 @@
     }
   });
 
+  test({
+    name: 'outlines',
+    displayName: 'Outlines on all shapes',
+    description: 'Load an example network',
+    setup: function(){
+      cy.elements().remove();
+      const rounds = ['triangle', 'rectangle',  'diamond', 'pentagon', 'hexagon', 'heptagon', 'octagon', 'tag']
+      const shapes = ['ellipse', 'bottom-round-rectangle', 'cut-rectangle', 'barrel', 'rhomboid', 'right-rhomboid', 'concave-hexagon', 'star', 'vee', ...rounds, ...rounds.map(l => 'round-' + l)]
+      shapes.forEach((shape, i) => {
+        cy.add({data: { id: i, weight: 50 }}).style({shape})
+      })
+
+      cy.layout({ name: 'grid' }).run();
+
+      cy.fit();
+    }
+  });
+
   test({
     name: "randomEdgeColors",
     displayName: "Random edge colours",

diff --git a/documentation/demos/compound-nodes/code.js b/documentation/demos/compound-nodes/code.js
@@ -7,6 +7,7 @@ var cy = window.cy = cytoscape({
     {
       selector: 'node',
       css: {
+        'shape': 'rectangle',
         'content': 'data(id)',
         'text-valign': 'center',
         'text-halign': 'center'
@@ -17,6 +18,16 @@ var cy = window.cy = cytoscape({
       css: {
         'text-valign': 'top',
         'text-halign': 'center',
+        'shape': 'round-rectangle',
+        'corner-radius': "10",
+        'padding': 10
+      }
+    },
+    {
+      selector: 'node#e',
+      css: {
+        'corner-radius': "10",
+        'padding': 0
       }
     },
     {

diff --git a/documentation/demos/edge-types/code.js b/documentation/demos/edge-types/code.js
@@ -8,7 +8,7 @@
 
     layout: {
       name: 'grid',
-      columns: 4
+      columns: 6
     },
 
     style: fetch('cy-style.json').then(toJson),
@@ -17,18 +17,34 @@
   });
 
   cy.ready(function(){ // make taxi nodes better organised
-    var n13 = cy.$('#n13');
-    var n11 = cy.$('#n11');
-    var n12 = cy.$('#n12');
-    var p11 = n11.position();
-    var p12 = n12.position();
-    var d = (p12.x - p11.x)/4;
-
-    n13.position({
-      x: (p11.x + p12.x)/2,
-      y: p11.y - d
+    var n19 = cy.$('#n19');
+    var n17 = cy.$('#n17');
+    var n18 = cy.$('#n18');
+    var p17 = n17.position();
+    var p18 = n18.position();
+    var d = (p18.x - p17.x)/4;
+
+    n19.position({
+      x: (p17.x + p18.x)/2,
+      y: p17.y - d
     });
 
-    n11.add(n12).position({ y: p11.y + d });
+    n17.add(n18).position({ y: p17.y + d });
+
+    // make round-taxi nodes better organised
+    var n22 = cy.$('#n22');
+    var n20 = cy.$('#n20');
+    var n21 = cy.$('#n21');
+    var p20 = n20.position();
+    var p21 = n21.position();
+    var dr = (p21.x - p20.x)/4;
+
+    n22.position({
+      x: (p20.x + p21.x)/2,
+      y: p20.y -d
+    });
+
+    n20.add(n21).position({ y: p20.y + dr });
+
   });
 })();
diff --git a/documentation/demos/edge-types/cy-style.json b/documentation/demos/edge-types/cy-style.json
@@ -53,13 +53,29 @@
     "segment-weights": [0.250 , 0.75]
   }
 }, {
+  "selector": "edge.round-segments",
+  "style": {
+    "curve-style": "round-segments",
+    "segment-distances": [ 40, -40 ],
+    "segment-weights": [0.250 , 0.75]
+  }
+},  {
   "selector": "edge.taxi",
   "style": {
     "curve-style": "taxi",
     "taxi-direction": "downward",
     "taxi-turn": 20,
     "taxi-turn-min-distance": 5
   }
+},  {
+  "selector": "edge.round-taxi",
+  "style": {
+    "curve-style": "round-taxi",
+    "taxi-direction": "downward",
+    "taxi-turn": 20,
+    "taxi-turn-min-distance": 5,
+    "taxi-radius": 10
+  }
 }, {
   "selector": "edge.straight-triangle",
   "style": {