diff --git a/debug/init.js b/debug/init.js index eae160cc9b..f93d769de2 100644 --- a/debug/init.js +++ b/debug/init.js @@ -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); diff --git a/src/extensions/renderer/base/coord-ele-math/edge-control-points.js b/src/extensions/renderer/base/coord-ele-math/edge-control-points.js index 16a3733684..c07f3ad938 100644 --- a/src/extensions/renderer/base/coord-ele-math/edge-control-points.js +++ b/src/extensions/renderer/base/coord-ele-math/edge-control-points.js @@ -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) { @@ -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, @@ -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,