You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@qpid.apache.org by ea...@apache.org on 2018/11/03 18:40:24 UTC
qpid-dispatch git commit: DISPATCH-1161 Clean up arrows
Repository: qpid-dispatch
Updated Branches:
refs/heads/master ca22c9d13 -> bae8dbd81
DISPATCH-1161 Clean up arrows
Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo
Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/bae8dbd8
Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/bae8dbd8
Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/bae8dbd8
Branch: refs/heads/master
Commit: bae8dbd81dc5908539e0e5ec64af9a01449c6730
Parents: ca22c9d
Author: Ernest Allen <ea...@redhat.com>
Authored: Sat Nov 3 14:40:09 2018 -0400
Committer: Ernest Allen <ea...@redhat.com>
Committed: Sat Nov 3 14:40:09 2018 -0400
----------------------------------------------------------------------
console/stand-alone/plugin/css/dispatch.css | 83 +++----------
console/stand-alone/plugin/js/topology/links.js | 5 +
console/stand-alone/plugin/js/topology/nodes.js | 12 +-
.../plugin/js/topology/qdrTopology.js | 115 ++++++++-----------
4 files changed, 79 insertions(+), 136 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/css/dispatch.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/dispatch.css b/console/stand-alone/plugin/css/dispatch.css
index dc56aa2..477b76c 100644
--- a/console/stand-alone/plugin/css/dispatch.css
+++ b/console/stand-alone/plugin/css/dispatch.css
@@ -37,10 +37,6 @@ ul.qdrListNodes > li > span {
width: auto;
}
-.selectedItems {
- /* margin-left: 21em; */
-}
-
.qdrListPane {
top: 110px;
}
@@ -78,10 +74,6 @@ div.listAggrValue button {
}
}
-div.listAttrName i.icon-bar-chart.active, div.hastip i.icon-bar-chart.active, li.haschart i {
- /*background-color: #AAFFAA; */
-}
-
div#main div ul.nav li a:not(.btn) {
background: initial !important;
}
@@ -159,13 +151,6 @@ div.chartContainer {
stroke: black;
}
-/* the line surrounding the area chart */
-div.d3Chart path {
-/* stroke: black; */
-/* stroke-width: 0; */
-/* opacity: 0.5; */
-}
-
/* the line above the area chart */
/* the color gets overridden */
div.d3Chart path.line {
@@ -223,9 +208,6 @@ div.d3Chart .title {
fill: none;
stroke: steelblue;
}
-.focus .fo-table {
- /* box-shadow: 2px 2px 3px #EEE; */
-}
div.d3Chart {
/* padding: 1em 0; */
@@ -240,10 +222,6 @@ div.d3Chart .axis path {
display: inherit;
}
-.c3-circle {
- /* display: none; */
-}
-
.fo-table {
border: 1px solid darkgray;
background-color: white;
@@ -442,9 +420,6 @@ ul.qdrTopoModes {
position: relative;
top: -10px;
}
-.overview.section {
- /* width: 35em; */
-}
.overview.section .ngGrid {
height: 12em !important;
min-height: 12em !important;
@@ -454,9 +429,6 @@ ul.qdrTopoModes {
height: 16em !important;
min-height: 16em !important;
}
-.overview.routers.section {
- /*width: 15em; */
- }
.grid-align-value {
text-align: right;
@@ -673,16 +645,9 @@ div.login.container {
text-decoration: none;
}
-.fancytree-ico-c.router .fancytree-icon {
-
-}
-
.tabs-left .nav-tabs {
float: left;
}
-.tabs-left .nav-tabs > li {
-/* float: initial; */
-}
div.modal.dlg-large {
width: 53em;
@@ -864,10 +829,6 @@ span:not(.fancytree-has-children).vhostStats .fancytree-icon:before {
}
-.ngCellText {
-/* color: #333333; */
-}
-
.changed {
color: #339933;
}
@@ -919,10 +880,6 @@ div.operations label {
padding-top: 4px;
margin-bottom: 4px;
}
-.qdrListActions .ngGrid {
- /*min-height: 40em;
- height: 100%; */
-}
div.qdrListActions .ngViewport {
height: initial !important;
}
@@ -1037,7 +994,9 @@ svg {
svg:not(.active):not(.ctrl) {
cursor: crosshair;
}
- #end-arrow-selected, #start-arrow-selected {
+ #end-selected-28, #start-selected-28,
+ #end-selected-20, #start-selected-20,
+ #end-selected-15, #start-selected-15 {
stroke: #33F;
fill: #33F;
}
@@ -1049,7 +1008,7 @@ svg {
path.link {
fill: #000;
/* stroke: #000; */
- stroke-width: 4px;
+ stroke-width: 2.5px;
cursor: default;
}
@@ -1059,26 +1018,29 @@ svg {
svg:not(.active):not(.ctrl) path.link {
cursor: pointer;
}
-
+
+ path.link.hittarget {
+ stroke-width: 15px;
+ stroke: transparent;
+ }
+
path.link.small {
stroke-width: 2.5;
}
path.link.small:not(.traffic) {
- stroke: darkgray;
+ stroke: #000;
}
path.link.highlighted:not(.traffic) {
stroke: #6F6 !important;
}
- marker#start-arrow-highlighted,
- marker#end-arrow-highlighted {
+ marker#start-highlighted-28, marker#end-highlighted-28,
+ marker#start-highlighted-20, marker#end-highlighted-20,
+ marker#start-highlighted-15, marker#end-highlighted-15 {
fill: #6F6;
}
- marker#start-arrow-small,
- marker#end-arrow-small {
- fill: darkgray;
- }
marker {
- stroke-width: 0;
+ fill: #000;
+ stroke-width: 0;
}
path.link.dragline {
pointer-events: none;
@@ -1146,9 +1108,6 @@ svg {
border-radius: 5px;
}
- .tiptable {
-
- }
.tiptable tr {
border-bottom: 1px solid #ccc;
}
@@ -1259,11 +1218,9 @@ svg {
stroke-linejoin: round;
fill:none;
}
- .arc { }
.arc:hover {
stroke: darkred;
}
- .flyer { }
.flyer:hover {
stroke: darkgreen;
}
@@ -1347,10 +1304,6 @@ svg {
display: inline-block;
}
*/
- .ui-tabs .ui-tabs-panel {
- /* padding-top: 0 !important; */
- }
-
.ui-widget-content fieldset {
float: left;
padding: 0 1em 0 0;
@@ -1421,7 +1374,6 @@ svg {
.entity-fields label {
font-weight: 600;
- margin-top: 0.5em;
display: inline;
}
@@ -1511,9 +1463,6 @@ svg {
left: 600px;
}
- .cross-rect {
- /* fill: #cfe2f3; */
- }
.cross-line {
stroke: black;
stroke-width: 4px;
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/js/topology/links.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/topology/links.js b/console/stand-alone/plugin/js/topology/links.js
index dd722bb..377ce79 100644
--- a/console/stand-alone/plugin/js/topology/links.js
+++ b/console/stand-alone/plugin/js/topology/links.js
@@ -26,6 +26,11 @@ class Link {
this.cls = cls;
this.uid = uid;
}
+ markerId (selected_link, node) {
+ let selhigh = this.highlighted ? 'highlighted' : selected_link && this.uid === selected_link.uid ? 'selected' : '';
+ return `-${selhigh}-${node.radius()}`;
+
+ }
}
export class Links {
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/js/topology/nodes.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/topology/nodes.js b/console/stand-alone/plugin/js/topology/nodes.js
index 4be7ff7..7f53428 100644
--- a/console/stand-alone/plugin/js/topology/nodes.js
+++ b/console/stand-alone/plugin/js/topology/nodes.js
@@ -121,7 +121,9 @@ export class Node {
}.bind(this));
}.bind(this)));
}
-
+ radius() {
+ return nodeProperties[this.nodeType].radius;
+ }
}
const nodeProperties = {
// router types
@@ -154,6 +156,14 @@ export class Nodes {
}
return max;
}
+ // return all possible values of node radii
+ static discrete() {
+ let values = {};
+ for (let key in nodeProperties) {
+ values[nodeProperties[key].radius] = true;
+ }
+ return Object.keys(values);
+ }
// vary the following force graph attributes based on nodeCount
static forceScale (nodeCount, minmax) {
let count = Math.max(Math.min(nodeCount, 80), 6);
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/bae8dbd8/console/stand-alone/plugin/js/topology/qdrTopology.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/topology/qdrTopology.js b/console/stand-alone/plugin/js/topology/qdrTopology.js
index c884522..5a91e6e 100644
--- a/console/stand-alone/plugin/js/topology/qdrTopology.js
+++ b/console/stand-alone/plugin/js/topology/qdrTopology.js
@@ -294,26 +294,35 @@ export class TopologyController {
.start();
// This section adds in the arrows
- svg.append('svg:defs').attr('class', 'marker-defs').selectAll('marker')
- .data(['end-arrow', 'end-arrow-selected', 'end-arrow-small', 'end-arrow-highlighted',
- 'start-arrow', 'start-arrow-selected', 'start-arrow-small', 'start-arrow-highlighted'])
- .enter().append('svg:marker')
- .attr('id', function (d) { return d; })
- .attr('viewBox', '0 -5 10 10')
- .attr('refX', function (d) {
- if (d.substr(0, 3) === 'end') {
- return 24;
+ // Generate a marker for each combination of:
+ // start|end, ''|selected highlighted, and each possible node radius
+ {
+ let sten = ['start', 'end'];
+ let states = ['', 'selected', 'highlighted'];
+ let radii = Nodes.discrete();
+ let defs = [];
+ for (let isten=0; isten<sten.length; isten++) {
+ for (let istate=0; istate<states.length; istate++) {
+ for (let iradii=0; iradii<radii.length; iradii++) {
+ defs.push({sten: sten[isten], state: states[istate], r: radii[iradii]});
+ }
}
- return d !== 'start-arrow-small' ? -14 : -24;})
- .attr('markerWidth', 4)
- .attr('markerHeight', 4)
- .attr('orient', 'auto')
- .classed('small', function (d) {return d.indexOf('small') > -1;})
- .append('svg:path')
- .attr('d', function (d) {
- return d.substr(0, 3) === 'end' ? 'M 0 -5 L 10 0 L 0 5 z' : 'M 10 -5 L 0 0 L 10 5 z';
- });
-
+ }
+ svg.append('svg:defs').attr('class', 'marker-defs').selectAll('marker')
+ .data(defs)
+ .enter().append('svg:marker')
+ .attr('id', function (d) { return [d.sten, d.state, d.r].join('-'); })
+ .attr('viewBox', '0 -5 10 10')
+ .attr('refX', function (d) { return d.sten === 'end' ? d.r : -d.r; })
+ .attr('markerWidth', 4)
+ .attr('markerHeight', 4)
+ .attr('orient', 'auto')
+ .classed('small', function (d) {return d.sten === 'small';})
+ .append('svg:path')
+ .attr('d', function (d) {
+ return d.sten === 'end' ? 'M 0 -5 L 10 0 L 0 5 z' : 'M 10 -5 L 0 0 L 10 5 z';
+ });
+ }
// gradient for sender/receiver client
let grad = svg.append('svg:defs').append('linearGradient')
.attr('id', 'half-circle')
@@ -399,45 +408,19 @@ export class TopologyController {
// update force layout (called automatically each iteration)
function tick() {
+ // move the circles
circle.attr('transform', function(d) {
+ // don't let the edges of the circle go beyond the edges of the svg
let r = Nodes.radius(d.nodeType);
d.x = Math.max(Math.min(d.x, width - r), r);
d.y = Math.max(Math.min(d.y, height - r), r);
-
return `translate(${d.x},${d.y})`;
});
- // draw lines with arrows with proper padding from node centers
- path.attr('d', function(d) {
- let sourcePadding, targetPadding;
- let rT = Nodes.radius(d.target.nodeType);
- let rS = Nodes.radius(d.source.nodeType);
- sourcePadding = targetPadding = 0;
- let dtx = Math.max(targetPadding, Math.min(width - rT, d.target.x)),
- dty = Math.max(targetPadding, Math.min(height - rT, d.target.y)),
- dsx = Math.max(sourcePadding, Math.min(width - rS, d.source.x)),
- dsy = Math.max(sourcePadding, Math.min(height - rS, d.source.y));
-
- let deltaX = dtx - dsx,
- deltaY = dty - dsy,
- dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
- if (dist == 0)
- dist = 0.001;
- let normX = deltaX / dist,
- normY = deltaY / dist;
- let sourceX = dsx + (sourcePadding * normX),
- sourceY = dsy + (sourcePadding * normY),
- targetX = dtx - (targetPadding * normX),
- targetY = dty - (targetPadding * normY);
- sourceX = Math.max(0, sourceX);
- sourceY = Math.max(0, sourceY);
- targetX = Math.max(0, targetX);
- targetY = Math.max(0, targetY);
-
- return `M${sourceX},${sourceY}L${targetX},${targetY}`;
- })
- .attr('id', function (d) {
- return ['path', d.source.index, d.target.index].join('-');
+ // draw lines from node centers
+ path
+ .attr('d', function(d) {
+ return `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`;
});
if (!animate) {
@@ -476,7 +459,10 @@ export class TopologyController {
circle.call(force.drag);
// path (link) group
- path = path.data(links.links, function(d) {return d.uid;});
+ path = path.data(links.links, function(d) {return d.uid;})
+ .attr('id', function (d) {
+ return ['path', d.source.index, d.target.index].join('-');
+ });
// update existing links
path.classed('selected', function(d) {
@@ -485,31 +471,24 @@ export class TopologyController {
.classed('highlighted', function(d) {
return d.highlighted;
});
+ // reset the markers based on current highlighted/selected
if (!$scope.legend.status.optionsOpen || $scope.legendOptions.trafficType === 'dots') {
path
- .attr('marker-start', function(d) {
- let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : '');
- if (d.highlighted)
- sel = '-highlighted';
- return d.left ? `url(${urlPrefix}#start-arrow${sel})` : '';
- })
.attr('marker-end', function(d) {
- let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : '');
- if (d.highlighted)
- sel = '-highlighted';
- return d.right ? `url(${urlPrefix}#end-arrow${sel})` : '';
+ return d.right ? `url(${urlPrefix}#end${d.markerId(selected_link, d.source)})` : '';
+ })
+ .attr('marker-start', function(d) {
+ return d.left ? `url(${urlPrefix}#start${d.markerId(selected_link, d.source)})` : '';
});
}
// add new links. if a link with a new uid is found in the data, add a new path
path.enter().append('svg:path')
.attr('class', 'link')
- .attr('marker-start', function(d) {
- let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : '');
- return d.left ? `url(${urlPrefix}#start-arrow${sel})` : '';
- })
.attr('marker-end', function(d) {
- let sel = d === selected_link ? '-selected' : (d.cls === 'small' ? '-small' : '');
- return d.right ? `url(${urlPrefix}#end-arrow${sel})` : '';
+ return d.right ? `url(${urlPrefix}#end${d.markerId(selected_link, d.source)})` : null;
+ })
+ .attr('marker-start', function(d) {
+ return d.left ? `url(${urlPrefix}#start${d.markerId(selected_link, d.source)})` : null;
})
.classed('small', function(d) {
return d.cls == 'small';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org