Skip to content

Commit

Permalink
Defer using jsplumb until a configurable timeout, add a callback that…
Browse files Browse the repository at this point in the history 
… fires after jsplumb is ready so that connections can be added in the scope, start making stuff configurable
  • Loading branch information
@gashcrumb
gashcrumb committed Oct 11, 2013
1 parent 56191bd commit 6465339
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 51 deletions.
25 changes: 21 additions & 4 deletions hawtio-web/src/main/webapp/app/ui/js/jsPlumbDirective.ts
View file
Expand Up @@ -16,6 +16,11 @@ module UI {
useLayout = Core.parseBooleanValue($attrs['layout']);
}

var timeout = 100;
if (angular.isDefined($attrs['timeout'])) {
timeout = Core.parseIntValue($attrs['timeout'], "timeout");
}

var endpointStyle:any[] = ["Dot", { radius: 10, cssClass: 'jsplumb-circle', hoverClass: 'jsplumb-circle-hover' }];
var labelStyles:any[] = [ "Label" ];
var arrowStyles:any[] = [ "Arrow", {
Expand All @@ -28,6 +33,10 @@ module UI {

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

if (angular.isDefined($scope.connectorStyle)) {
connectorStyle = $scope.connectorStyle;
}


// Given an element, create a node data structure
var createNode = (nodeEl) => {
Expand Down Expand Up @@ -116,19 +125,19 @@ 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);
//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);
//console.log("Adding node: ", node.id);
createEndpoint($scope.jsPlumb, node);
});
$scope.jsPlumb.repaintEverything();
Expand All @@ -137,6 +146,7 @@ module UI {
}
}
});
*/


// Kick off the initial layout of elements in the container
Expand Down Expand Up @@ -200,8 +210,15 @@ module UI {
//$scope.jsPlumbConnections.push(connection);
});

$scope.jsPlumb.recalculateOffsets($element);
$scope.jsPlumb.repaintEverything();

if (angular.isDefined($scope.jsPlumbCallback) && angular.isFunction($scope.jsPlumbCallback)) {
$scope.jsPlumbCallback($scope.jsPlumb, $scope.jsPlumbNodes, $scope.jsPlumbNodesById, $scope.jsPlumbTransitions);
}

Core.$apply($scope);
}, 10);
}, timeout);
};
}
}
31 changes: 13 additions & 18 deletions hawtio-web/src/main/webapp/app/wiki/html/dozerMappings.html
View file
Expand Up @@ -59,20 +59,21 @@
</div>

<script type="text/ng-template" id="property.html">
{{field.displayName}} : {{field.typeName}}
<ul>
<li class="jsplumb-node dozer-mapping-node"
ng-repeat="field in field.properties"
<span class="jsplumb-node dozer-mapping-node"
id="{{field.id}}"
anchors="{{field.anchor}}"
anchors="{{field.anchor}}">
{{field.displayName}} : {{field.typeName}}
</span>
<ul>
<li ng-repeat="field in field.properties"
ng-include="'property.html'"></li>
</ul>
</script>

<div class="row-fluid" hawtio-jsplumb draggable="false" layout="false">
<div class="row-fluid" hawtio-jsplumb draggable="false" layout="false" timeout="300">

<!-- "from" class -->
<div class="span6">
<div class="span5">
<div class="row-fluid">
<input type="text" class="span12"
ng-model="selectedMapping.class_a.value"
Expand All @@ -94,19 +95,16 @@
</div>

<div class="row-fluid" ng-hide="selectedMapping.class_a.error">
<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}}"
<ul class="dozer-mappings from">
<li ng-repeat="field in selectedMapping.class_a.properties"
ng-include="'property.html'"></li>
</ul>
</div>
</div>


<!-- "to" class -->
<div class="span6">
<div class="span5 offset2">
<div class="row-fluid">
<input type="text" class="span12"
ng-model="selectedMapping.class_b.value"
Expand All @@ -128,11 +126,8 @@
</div>

<div class="row-fluid" ng-hide="selectedMapping.class_b.error">
<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}}"
<ul class="dozer-mappings to">
<li ng-repeat="field in selectedMapping.class_b.properties"
ng-include="'property.html'"></li>
</ul>
</div>
Expand Down
48 changes: 19 additions & 29 deletions hawtio-web/src/main/webapp/app/wiki/js/dozerMappings.ts
View file
Expand Up @@ -15,6 +15,8 @@ module Wiki {
$scope.schemas = [];
$scope.selectedMapping = {};

$scope.connectorStyle = [ "Bezier" ];

$scope.gridOptions = {
selectedItems: $scope.selectedItems,
data: 'mappings',
Expand Down Expand Up @@ -56,38 +58,26 @@ module Wiki {
});

$scope.fetchProperties = (className, target, anchor) => {
jolokia.request({
type: 'exec',
mbean: Dozer.getIntrospectorMBean(workspace),
operation: 'getProperties(java.lang.String)',
arguments: [className]
}, {
success: (response) => {
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, anchor);
}
});
console.log("got: ", response);
Core.$apply($scope);
},
error: (response) => {
target.properties = null;
target.error = {
'type': response.error_type,
'stackTrace': response.error
};
console.log("got error: ", response);
Core.$apply($scope);

var properties = jolokia.execute(Dozer.getIntrospectorMBean(workspace), 'getProperties', [className]);
angular.forEach(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, anchor);
}
})
});

target.properties = properties;
};


$scope.jsPlumbCallback = (jsplumb, nodes, nodesById, connections) => {
console.log("jsplumb callback called...");
};


$scope.formatStackTrace = (exception) => {
return Log.formatStackTrace(exception);
};
Expand Down
13 changes: 13 additions & 0 deletions hawtio-web/src/main/webapp/css/site-base.css
View file
Expand Up @@ -2456,4 +2456,17 @@ a.dashboard-link:hover {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.dozer-mapping-node {
border: 1px solid #f3f3f3;
border-radius: 4px;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding: 20px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.dozer-mappings li {
list-style-type: none;
}

0 comments on commit 6465339

Please sign in to comment.