Navigation Menu

Skip to content

Commit

Permalink
Add jsplumb to draggy droppy view, rendering is crap still
Browse files Browse the repository at this point in the history
  • Loading branch information
@gashcrumb
gashcrumb committed Oct 9, 2013
1 parent 3535136 commit 3e09df1
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 91 deletions.
220 changes: 141 additions & 79 deletions hawtio-web/src/main/webapp/app/ui/js/jsPlumbDirective.ts
View file
Expand Up @@ -5,72 +5,94 @@ module UI {

public link = ($scope, $element, $attrs) => {

$element.bind('DOMNodeInserted', (event) => {
// TODO - handle added nodes here, like from ng-repeat for example
});

setTimeout(() => {
$scope.jsPlumb = jsPlumb.getInstance({
Container: $element
// Whether or not each node in the graph can be dragged around
var enableDragging = true;
if (angular.isDefined($attrs['draggable'])) {
enableDragging = Core.parseBooleanValue($attrs['draggable']);
}

var useLayout = true;
if (angular.isDefined($attrs['layout'])) {
useLayout = Core.parseBooleanValue($attrs['layout']);
}

var endpointStyle:any[] = ["Dot", { radius: 10, cssClass: 'jsplumb-circle', hoverClass: 'jsplumb-circle-hover' }];
var labelStyles:any[] = [ "Label" ];
var arrowStyles:any[] = [ "Arrow", {
location: 1,
id: "arrow",
length: 8,
width: 8,
foldback: 0.8
} ];

var connectorStyle:any[] = [ "Flowchart", { cornerRadius: 4, gap: 8 } ];


// Given an element, create a node data structure
var createNode = (nodeEl) => {
var el = $(nodeEl);
var id = el.attr('id');
var anchors:any = el.attr('anchors');
if (anchors.has("{{") || anchors.has("}}")) {
// we don't want to add this yet...
return null;
}
if (anchors) {
anchors = anchors.split(',').map((anchor) => { return anchor.trim()});
} else {
anchors = ["Top"];
}

var node = {
id: id,
label: 'node ' + id,
el: el,
width: el.outerWidth(),
height: el.outerHeight(),
edges: [],
connections: [],
endpoints: [],
anchors: anchors
};

return node;
};


var createEndpoint = (jsPlumb, node) => {
var endpoint = jsPlumb.addEndpoint(node.el, {
isSource: true,
isTarget: true,
anchor: node.anchors,
connector: connectorStyle,
maxConnections: -1
});
node.endpoints.push(endpoint);
//$scope.jsPlumbEndpoints[node.id] = endpoint
if (enableDragging) {
jsPlumb.draggable(node.el, {
containment: $element
});
}
};

var nodes = [];
var transitions = [];
var nodesById = {};

var endpointStyle:any[] = ["Dot", { radius: 10, cssClass: 'jsplumb-circle', hoverClass: 'jsplumb-circle-hover' }];
var labelStyles:any[] = [ "Label" ];
var arrowStyles:any[] = [ "Arrow", {
location: 1,
id: "arrow",
length: 8,
width: 8,
foldback: 0.8
} ];

var connectorStyle:any[] = [ "Flowchart", { cornerRadius: 4, gap: 8 } ];

$scope.jsPlumb.importDefaults({
Anchor: "AutoDefault",
Connector: "Flowchart",
ConnectorStyle: connectorStyle,
DragOptions : { cursor: "pointer", zIndex:2000 },
Endpoint: endpointStyle,
PaintStyle: { strokeStyle: "#42a62c", lineWidth: 4 },
HoverPaintStyle: { strokeStyle: "#42a62c", lineWidth: 4 },
ConnectionOverlays: [
arrowStyles,
labelStyles
]
});

var nodes = [];
var transitions = [];
var nodesById = {};
var gatherElements = () => {

var nodeEls = $element.find('.jsplumb-node');

angular.forEach(nodeEls, (nodeEl) => {

var el = $(nodeEl);
var id = el.attr('id');
var anchors:any = el.attr('anchors');
if (anchors) {
anchors = anchors.split(',').map((anchor) => { return anchor.trim()});
} else {
anchors = ["Top"];
if (!nodesById[nodeEl.id]) {
var node = createNode(nodeEl);
if (node) {
nodes.push(node);
nodesById[node.id] = node;
}
}

var node = {
id: id,
label: 'node ' + id,
el: el,
width: el.outerWidth(),
height: el.outerHeight(),
edges: [],
connections: [],
endpoints: [],
anchors: anchors
};
nodes.push(node);
nodesById[id] = node;
});

angular.forEach(nodes, (sourceNode) => {
Expand All @@ -92,6 +114,53 @@ module UI {
}
});

};


$element.bind('DOMNodeInserted', (event) => {
if ($scope.jsPlumb) {
if (angular.isString(event.target.className)
&& !event.target.className.has("_jsPlumb_endpoint_anchor_")
&& event.target.className.has("jsplumb-node")) {
// TODO - handle added nodes here, like from ng-repeat for example
console.log("DOMNodeInserted: ", event);
gatherElements();
var newNodes = nodes.filter((node) => { return node.endpoints.isEmpty(); });
if (newNodes && newNodes.length) {
angular.forEach(newNodes, (node) => {
console.log("Adding node: ", node.id);
createEndpoint($scope.jsPlumb, node);
});
$scope.jsPlumb.repaintEverything();
Core.$applyLater($scope);
}
}
}
});


// Kick off the initial layout of elements in the container
setTimeout(() => {
$scope.jsPlumb = jsPlumb.getInstance({
Container: $element
});

$scope.jsPlumb.importDefaults({
Anchor: "AutoDefault",
Connector: "Flowchart",
ConnectorStyle: connectorStyle,
DragOptions : { cursor: "pointer", zIndex:2000 },
Endpoint: endpointStyle,
PaintStyle: { strokeStyle: "#42a62c", lineWidth: 4 },
HoverPaintStyle: { strokeStyle: "#42a62c", lineWidth: 4 },
ConnectionOverlays: [
arrowStyles,
labelStyles
]
});

gatherElements();

$scope.jsPlumbNodes = nodes;
$scope.jsPlumbNodesById = nodesById;
$scope.jsPlumbTransitions = transitions;
Expand All @@ -100,29 +169,22 @@ module UI {

// First we'll lay out the graph and then later apply jsplumb to all
// of the nodes and connections
$scope.layout = dagre.layout()
.nodeSep(50)
.edgeSep(10)
.rankSep(50)
.nodes(nodes)
.edges(transitions)
.debugLevel(1)
.run();
if (useLayout) {
$scope.layout = dagre.layout()
.nodeSep(50)
.edgeSep(10)
.rankSep(50)
.nodes(nodes)
.edges(transitions)
.debugLevel(1)
.run();
}

angular.forEach($scope.jsPlumbNodes, (node) => {
node.el.css({top: node.dagre.y, left: node.dagre.x});
var endpoint = $scope.jsPlumb.addEndpoint(node.el, {
isSource: true,
isTarget: true,
anchor: node.anchors,
connector: connectorStyle,
maxConnections: -1
});
node.endpoints.push(endpoint);
//$scope.jsPlumbEndpoints[node.id] = endpoint
$scope.jsPlumb.draggable(node.el, {
containment: $element
});
if (useLayout) {
node.el.css({top: node.dagre.y, left: node.dagre.x});
}
createEndpoint($scope.jsPlumb, node);
});

angular.forEach($scope.jsPlumbTransitions, (edge) => {
Expand Down
29 changes: 22 additions & 7 deletions hawtio-web/src/main/webapp/app/wiki/html/dozerMappings.html
View file
Expand Up @@ -61,11 +61,17 @@
<script type="text/ng-template" id="property.html">
{{field.displayName}} : {{field.typeName}}
<ul>
<li ng-repeat="field in field.properties" ng-include="'property.html'"></li>
<li class="jsplumb-node dozer-mapping-node"
ng-repeat="field in field.properties"
id="{{field.id}}"
anchors="{{field.anchor}}"
ng-include="'property.html'"></li>
</ul>
</script>

<div class="row-fluid" hawtio-js-plumb>
<div class="row-fluid" hawtio-jsplumb draggable="false" layout="false">

<!-- "from" class -->
<div class="span6">
<div class="row-fluid">
<input type="text" class="span12"
Expand All @@ -88,13 +94,18 @@
</div>

<div class="row-fluid" ng-hide="selectedMapping.class_a.error">
<ul>
<li ng-repeat="field in selectedMapping.class_a.properties" ng-include="'property.html'"></li>
<ul class="dozer-mappings">
<li class="jsplumb-node dozer-mapping-node"
ng-repeat="field in selectedMapping.class_a.properties"
id="{{field.id}}"
anchors="{{field.anchor}}"
ng-include="'property.html'"></li>
</ul>
</div>
</div>


</div>
<!-- "to" class -->
<div class="span6">
<div class="row-fluid">
<input type="text" class="span12"
Expand All @@ -117,8 +128,12 @@
</div>

<div class="row-fluid" ng-hide="selectedMapping.class_b.error">
<ul>
<li ng-repeat="field in selectedMapping.class_b.properties" ng-include="'property.html'"></li>
<ul class="dozer-mappings">
<li class="jsplumb-node dozer-mapping-node"
ng-repeat="field in selectedMapping.class_b.properties"
anchors="{{field.anchor}}"
id="{{field.id}}"
ng-include="'property.html'"></li>
</ul>
</div>

Expand Down
10 changes: 6 additions & 4 deletions hawtio-web/src/main/webapp/app/wiki/js/dozerMappings.ts
View file
Expand Up @@ -45,17 +45,17 @@ module Wiki {

$scope.$watch('selectedMapping.class_a.value', (newValue, oldValue) => {
if (newValue !== oldValue) {
$scope.fetchProperties(newValue, $scope.selectedMapping.class_a);
$scope.fetchProperties(newValue, $scope.selectedMapping.class_a, 'Right');
}
});

$scope.$watch('selectedMapping.class_b.value', (newValue, oldValue) => {
if (newValue !== oldValue) {
$scope.fetchProperties(newValue, $scope.selectedMapping.class_b);
$scope.fetchProperties(newValue, $scope.selectedMapping.class_b, 'Left');
}
});

$scope.fetchProperties = (className, target) => {
$scope.fetchProperties = (className, target, anchor) => {
jolokia.request({
type: 'exec',
mbean: Dozer.getIntrospectorMBean(workspace),
Expand All @@ -66,9 +66,11 @@ module Wiki {
target.error = null;
target.properties = response.value;
angular.forEach(target.properties, (property) => {
property.id = Core.getUUID();
property.anchor = anchor;
var lookup = !Dozer.excludedPackages.any((excluded) => { return property.typeName.has(excluded); });
if (lookup) {
$scope.fetchProperties(property.typeName, property);
$scope.fetchProperties(property.typeName, property, anchor);
}
});
console.log("got: ", response);
Expand Down
2 changes: 1 addition & 1 deletion hawtio-web/src/main/webapp/app/wiki/js/wikiPlugin.ts
View file
Expand Up @@ -4,7 +4,7 @@ module Wiki {

export var templatePath = 'app/wiki/html/';

angular.module(pluginName, ['bootstrap', 'ui.bootstrap.dialog', 'ui.bootstrap.tabs', 'ngResource', 'hawtioCore', 'tree', 'camel']).
angular.module(pluginName, ['bootstrap', 'ui.bootstrap.dialog', 'ui.bootstrap.tabs', 'ngResource', 'hawtioCore', 'hawtio-ui', 'tree', 'camel']).
config(($routeProvider) => {

// allow optional branch paths...
Expand Down

0 comments on commit 3e09df1

Please sign in to comment.