Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Border radius #3203

Merged
merged 22 commits into from
Jan 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
29a3aa6
:construction: WIP
EliotRagueneau Dec 15, 2023
620b277
:construction: WIP
EliotRagueneau Dec 15, 2023
79ce93e
:sparkles: Support rounded rectangle up to pill shape
EliotRagueneau Dec 15, 2023
6514eb3
:sparkles: Support rounded polygons (path + intersect + checkPoint)
EliotRagueneau Dec 15, 2023
4a245ea
:sparkles: Support rounded edges (round-segments + round-taxi)
EliotRagueneau Dec 15, 2023
8bf1725
:memo::boom: Start documentation + WARNING noticed bug within demos/e…
EliotRagueneau Dec 16, 2023
6f67e96
:lipstick: update edge types demo
cqgong Dec 21, 2023
e4ecb44
:lipstick: grid layout up to 6 columns in edge types demo
cqgong Dec 21, 2023
15c32ec
:lipstick: round edge types documentation
cqgong Dec 22, 2023
8bfdee2
:memo: Avoid using midVector cache when not available (not round)
EliotRagueneau Jan 8, 2024
53ccf2f
:memo: Update documentation
EliotRagueneau Jan 8, 2024
6222b6f
:memo: Add corner radius documentation
EliotRagueneau Jan 8, 2024
acff429
:sparkles: update corner radius for outline
EliotRagueneau Jan 11, 2024
9377211
:zap: Optimise round calculation by using previous vectors when possible
EliotRagueneau Jan 12, 2024
7e99cf7
:rotating_light: Fix lint issues
EliotRagueneau Jan 12, 2024
4221f78
:zap: Optimise vector inversion angle recalculation (atan2 average ti…
EliotRagueneau Jan 12, 2024
619c3e2
Merge branch 'cytoscape:unstable' into border-radius
EliotRagueneau Jan 17, 2024
530ee3e
:sparkles: Introduce node caching + support outline + include test fo…
EliotRagueneau Jan 17, 2024
d2b66b3
:memo: Include corner-radius cut-rectangle support in documentation
EliotRagueneau Jan 17, 2024
3013eef
:bug: Avoid caching issue with different corner-radii
EliotRagueneau Jan 18, 2024
7c54ec1
:mute: Remove logs
EliotRagueneau Jan 18, 2024
d8941d1
:wastebasket: Remove TODO
EliotRagueneau Jan 18, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 73 additions & 3 deletions debug/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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 = {
Expand All @@ -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: [
Expand All @@ -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' } },
]
}
};
Expand Down
18 changes: 18 additions & 0 deletions debug/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 11 additions & 0 deletions documentation/demos/compound-nodes/code.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ var cy = window.cy = cytoscape({
{
selector: 'node',
css: {
'shape': 'rectangle',
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
Expand All @@ -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
}
},
{
Expand Down
40 changes: 28 additions & 12 deletions documentation/demos/edge-types/code.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

layout: {
name: 'grid',
columns: 4
columns: 6
},

style: fetch('cy-style.json').then(toJson),
Expand All @@ -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 });

});
})();
16 changes: 16 additions & 0 deletions documentation/demos/edge-types/cy-style.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Loading
Loading