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.

Sign up for GitHub

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

Fix/3251 #3280

Open
wants to merge 2 commits into
base: unstable
Choose a base branch
from
Open

Fix/3251 #3280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4471d7c
potential fixes for dissapearing and flipping bezier behaviour
d2fong Sep 30, 2024
0ba8dff
add the debug example temporarily for testing purposes
d2fong Sep 30, 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
208 changes: 37 additions & 171 deletions debug/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,182 +3,48 @@

var cy, defaultSty, options;

(function(){
defaultSty = cytoscape.stylesheet()

.selector('node')
.style({
'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,
"label": "I am a long label over-\u200bflowing my max width,\n but spa\u200bces are ke\u200bpt",
"text-max-width": 100,
"text-wrap": "wrap",
})
.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({
'curve-style': 'unbundled-bezier',
'control-point-distances': [ 20, -100, 20 ],
'control-point-weights': [ 0.25, 0.5, 0.75 ],
'source-arrow-fill': 'hollow',
'source-arrow-width': 2,
'target-arrow-fill': 'hollow',
'target-arrow-width': 'match-line',
})
.selector('#bc')
.style({
'curve-style': 'segments',
'segment-distances': [ 20, -80 ],
'segment-weights': [ 0.25, 0.5 ],
'source-arrow-fill': 'hollow',
'source-arrow-width': '50%',
'target-arrow-fill': 'hollow',
})
.selector('#ef')
.style({
'curve-style': 'straight-triangle',
'source-arrow-shape': 'none',
'target-arrow-shape': 'none',
'mid-target-arrow-shape': 'none',
'mid-source-arrow-shape': 'none',
'width': 6,
})
.selector('[source = "c"][target = "e"]')
.style({
'curve-style': 'haystack',
'haystack-radius': 0.5
})
.selector('[source = "d"][target = "e"]')
.style({
'curve-style': 'bezier'
})
.selector('[source = "b"][target = "f"]')
.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 , 0 , 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'
})
;

(function () {
defaultSty = {
"curve-style": "unbundled-bezier",
"control-point-weight": 0.5,
"control-point-distance": 20,
};
options = {
container: $('#cytoscape'),
container: $("#cytoscape"),

renderer: {
name: 'canvas',
showFps: true
name: "canvas",
showFps: true,
},

layout: {
name: 'grid',
cols: 3
},

style: defaultSty,

elements: {
nodes: [
{ data: { id: 'a', weight: 50 } },
{ data: { id: 'b', weight: 30 } },
{ data: { id: 'c', weight: 20 } },
{ data: { id: 'd', weight: 10 } },
{ data: { id: 'e', weight: 75 } },
{ data: { id: 'f', weight: 100 } },
{ data: { id: 'g', weight: 40 } },
{ data: { id: 'h', weight: 16 } },
{ data: { id: 'i', weight: 16 } },
],

edges: [
{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'aa', weight: 2, source: 'a', target: 'a' } },
{ data: { id: 'aa2', weight: 2, source: 'a', target: 'a' } },
{ data: { id: 'aa3', weight: 2, source: 'a', target: 'a' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
{ data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'ce2', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } },
{ data: { id: 'de2', weight: 7, source: 'd', target: 'e' } },
{ data: { id: 'de3', weight: 7, source: 'd', target: 'e' } },
{ 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: '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' } },
]
}
elements: [
// { data: { id: 1 }, position: { x: 0, y: 0 } },
// { data: { id: 2 }, position: { x: 40, y: 0 } },
// { data: { id: "e1", source: 1, target: 2 } }, // normal

{ data: { id: 3 }, position: { x: 0, y: 40 } },
{ data: { id: 4 }, position: { x: 20, y: 40 } },
{ data: { id: "e2", source: 3, target: 4 } }, // disappear
// { data: { id: 7 }, position: { x: 20, y: 40 } },
// { data: { id: 8 }, position: { x: 20, y: 60 } },
// { data: { id: "e2", source: 7, target: 8 } }, // disappear

// { data: { id: 5 }, position: { x: 0, y: 80 } },
// { data: { id: 6 }, position: { x: 19, y: 80 } },
// { data: { id: "e3", source: 5, target: 6 } }, // flip
],
style: [
{ selector: "node", style: { width: 20, height: 20 } },
{
selector: "edge",
style: {
"curve-style": "unbundled-bezier",
"control-point-weight": 0.5,
"control-point-distance": 20,
},
},
],
layout: { name: "preset" },
};

cy = cytoscape(options);
Expand Down
18 changes: 13 additions & 5 deletions src/extensions/renderer/base/coord-ele-math/edge-control-points.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import * as util from '../../../../util';
import Map from '../../../../map';
import {getRoundCorner} from "../../../../round";


const AVOID_IMPOSSIBLE_BEZIER_CONSTANT = 0.01;

let BRp = {};

BRp.findMidptPtsEtc = function(edge, pairInfo) {
Expand Down Expand Up @@ -231,8 +234,8 @@ BRp.findCompoundLoopPoints = function( edge, pairInfo, i, edgeIsUnbundled ){

// avoids cases with impossible beziers
let minCompoundStretch = 0.5;
let compoundStretchA = Math.max( minCompoundStretch, Math.log( srcW * 0.01 ) );
let compoundStretchB = Math.max( minCompoundStretch, Math.log( tgtW * 0.01 ) );
let compoundStretchA = Math.max( minCompoundStretch, Math.log( srcW * AVOID_IMPOSSIBLE_BEZIER_CONSTANT ) );
let compoundStretchB = Math.max( minCompoundStretch, Math.log( tgtW * AVOID_IMPOSSIBLE_BEZIER_CONSTANT ) );

rs.ctrlpts = [
loopPos.x,
Expand Down Expand Up @@ -882,9 +885,14 @@ BRp.findEdgeControlPoints = function( edges ){
y2: tgtPos.y
};

let dy = ( tgtOutside[1] - srcOutside[1] );
let dx = ( tgtOutside[0] - srcOutside[0] );
let l = Math.sqrt( dx * dx + dy * dy );
let dy = Math.abs( tgtOutside[1] - srcOutside[1] );
let dx = Math.abs( tgtOutside[0] - srcOutside[0] );
let l = Math.sqrt(
Math.max(dx * dx, AVOID_IMPOSSIBLE_BEZIER_CONSTANT) +
Math.max(dy * dy, AVOID_IMPOSSIBLE_BEZIER_CONSTANT)
);



let vector = pairInfo.vector = {
x: dx,
Expand Down
Loading