Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Few tweaks here and there on the camel canvas
  • Loading branch information
gashcrumb committed Dec 5, 2013
1 parent efbf312 commit 8426fa4
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 22 deletions.
7 changes: 2 additions & 5 deletions hawtio-web/src/main/webapp/app/wiki/html/camelCanvas.html
@@ -1,5 +1,6 @@
<div ng-controller="Wiki.CamelController">
<style>

.component {
opacity: 0.8;
filter: alpha(opacity = 80);
Expand Down Expand Up @@ -58,10 +59,6 @@
z-index: 4;
}

._jsPlumb_endpoint {
z-index: 5;
}

._jsPlumb_overlay {
z-index: 6;
}
Expand Down Expand Up @@ -172,7 +169,7 @@
</div>

<div class="row-fluid">
<div class="camel-canvas canvas gridStyle"></div>
<div style="position: relative;" class="camel-canvas canvas gridStyle"></div>
</div>
</div>
</div>
54 changes: 37 additions & 17 deletions hawtio-web/src/main/webapp/app/wiki/js/camelCanvas.ts
Expand Up @@ -272,14 +272,14 @@ module Wiki {
return $scope.selectedFolder || getRouteFolder($scope.rootFolder, $scope.selectedRouteId);
}

function layoutGraph(nodes, links, width, height) {
var transitions = [];
var states = Core.createGraphStates(nodes, links, transitions);
$scope.nodeStates = states;

var rootElement = $($element);
function getContainerElement() {
var rootElement = $element;
var containerElement = rootElement.find(".canvas");
if (!containerElement || !containerElement.length) containerElement = rootElement;
return containerElement;
}

function clearCanvasLayout(jsPlumb) {
try {
jsPlumb.detachEveryConnection();
} catch (e) {
Expand All @@ -290,9 +290,30 @@ module Wiki {
} catch (e) {
// ignore errors
}
return jsPlumb;
}

function configureCanvasLayout(endpointStyle, arrowStyles, labelStyles) {
}

function layoutGraph(nodes, links, width, height) {
var transitions = [];
var states = Core.createGraphStates(nodes, links, transitions);

log.debug("links: ", links);
log.debug("transitions: ", transitions);

$scope.nodeStates = states;

var containerElement = getContainerElement();

// first clean up the existing layout, stuff may have changed
clearCanvasLayout(jsPlumb);
containerElement.find("div.component").remove();

var endpointStyle:any[] = ["Dot", {radius: 2}];
// configure canvas layout
var endpointStyle:any[] = ["Dot", { radius: 4, cssClass: 'camel-canvas-endpoint' }];
var hoverPaintStyle = { strokeStyle: "red", lineWidth: 3 };
//var labelStyles: any[] = [ "Label", { label:"FOO", id:"label" }];
var labelStyles:any[] = [ "Label" ];
var arrowStyles:any[] = [ "Arrow", {
Expand All @@ -302,15 +323,17 @@ module Wiki {
width: 8,
foldback: 0.8
} ];

jsPlumb.importDefaults({
Endpoint: endpointStyle,
HoverPaintStyle: {strokeStyle: "#42a62c", lineWidth: 4 },
HoverPaintStyle: hoverPaintStyle,
ConnectionOverlays: [
arrowStyles,
labelStyles
]
});


var offset = containerElement.offset();
var left = Core.pathGet(offset, ["left"]) || 0;
var top = Core.pathGet(offset, ["top"]) || 0;
Expand All @@ -330,38 +353,35 @@ module Wiki {
node.width = width;
node.height = height;
}
log.debug("node: ", id, " width: ", width, " height: ", height);
});

// Create the layout and get the buildGraph
dagre.layout()
.nodeSep(100)
.edgeSep(10)
.rankSep(50)
.rankSep(75)
.nodes(states)
.edges(transitions)
.debugLevel(1)
.run();

angular.forEach(states, (node) => {
var id = getNodeId(node);
var dagre = node.dagre || node;
var x = dagre.x || 0;
var y = dagre.y || dagre["y:"] || 0;
//if (left) x += left;
if (top) y += top;
var div = $("#" + id);
div.css({top: y, left: x});
div.css({top: node.dagre.y, left: node.dagre.x});
});

var nodes = containerElement.find("div.component");
var connectorStyle:any[] = [ "StateMachine", { curviness: 20 } ];
var connectorStyle:any[] = [ "StateMachine", { curviness: 10, proximityLimit: 50 } ];

nodes.each(function (i, e) {
var endpoint = $(e);
jsPlumb.makeSource(endpoint, {
filter: "img.nodeIcon",
anchor: "Continuous",
connector: connectorStyle,
connectorStyle: { strokeStyle: "#666", lineWidth: 2 },
connectorStyle: { strokeStyle: "#666", lineWidth: 3 },
maxConnections: -1
});
});
Expand Down
6 changes: 6 additions & 0 deletions hawtio-web/src/main/webapp/css/site-base.css
Expand Up @@ -3126,4 +3126,10 @@ tabset > .tabbable > .tab-content > .nav.nav-tabs > li.disabled {
padding: 10px;
}

._jsPlumb_endpoint {
z-index: 2000;
}

.camel-canvas-endpoint svg circle {
fill: #346789;
}

0 comments on commit 8426fa4

Please sign in to comment.