You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2017/02/10 21:03:54 UTC
[05/18] nifi git commit: [NIFI-3360] taking bottom up approach to
modularizing the canvas...wrapping modulaes with UMD and keep the app loading
- taking top down approach from this point and leveraging inversion of
control desgin pattern - This closes #1
http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
index a771fc5..bdccfe3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
@@ -15,10 +15,48 @@
* limitations under the License.
*/
-/* global nf, d3 */
-
-nf.Draggable = (function () {
-
+/* global define, module, require, exports */
+
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery',
+ 'd3',
+ 'nf.Connection',
+ 'nf.Birdseye',
+ 'nf.CanvasUtils',
+ 'nf.Common',
+ 'nf.Dialog',
+ 'nf.Client',
+ 'nf.ErrorHandler'],
+ function ($, d3, connection, birdseye, canvasUtils, common, dialog, client, errorHandler) {
+ return (nf.Draggable = factory($, d3, connection, birdseye, canvasUtils, common, dialog, client, errorHandler));
+ });
+ } else if (typeof exports === 'object' && typeof module === 'object') {
+ module.exports = (nf.Draggable =
+ factory(require('jquery'),
+ require('d3'),
+ require('nf.Connection'),
+ require('nf.Birdseye'),
+ require('nf.CanvasUtils'),
+ require('nf.Common'),
+ require('nf.Dialog'),
+ require('nf.Client'),
+ require('nf.ErrorHandler')));
+ } else {
+ nf.Draggable = factory(root.$,
+ root.d3,
+ root.nf.Connection,
+ root.nf.Birdseye,
+ root.nf.CanvasUtils,
+ root.nf.Common,
+ root.nf.Dialog,
+ root.nf.Client,
+ root.nf.ErrorHandler);
+ }
+}(this, function ($, d3, connection, birdseye, canvasUtils, common, dialog, client, errorHandler) {
+ 'use strict';
+
+ var nfCanvas;
var drag;
/**
@@ -45,8 +83,8 @@ nf.Draggable = (function () {
var selectedComponents = d3.selectAll('g.component.selected');
// ensure every component is writable
- if (nf.CanvasUtils.canModify(selectedConnections) === false || nf.CanvasUtils.canModify(selectedComponents) === false) {
- nf.Dialog.showOkDialog({
+ if (canvasUtils.canModify(selectedConnections) === false || canvasUtils.canModify(selectedComponents) === false) {
+ dialog.showOkDialog({
headerText: 'Component Position',
dialogContent: 'Must be authorized to modify every component selected.'
});
@@ -55,7 +93,7 @@ nf.Draggable = (function () {
// go through each selected connection
selectedConnections.each(function (d) {
- var connectionUpdate = nf.Draggable.updateConnectionPosition(d, delta);
+ var connectionUpdate = nfDraggable.updateConnectionPosition(d, delta);
if (connectionUpdate !== null) {
updates.set(d.id, connectionUpdate);
}
@@ -64,10 +102,10 @@ nf.Draggable = (function () {
// go through each selected component
selectedComponents.each(function (d) {
// consider any self looping connections
- var connections = nf.Connection.getComponentConnections(d.id);
- $.each(connections, function(_, connection) {
- if (!updates.has(connection.id) && nf.CanvasUtils.getConnectionSourceComponentId(connection) === nf.CanvasUtils.getConnectionDestinationComponentId(connection)) {
- var connectionUpdate = nf.Draggable.updateConnectionPosition(nf.Connection.get(connection.id), delta);
+ var connections = connection.getComponentConnections(d.id);
+ $.each(connections, function (_, connection) {
+ if (!updates.has(connection.id) && canvasUtils.getConnectionSourceComponentId(connection) === canvasUtils.getConnectionDestinationComponentId(connection)) {
+ var connectionUpdate = nfDraggable.updateConnectionPosition(connection.get(connection.id), delta);
if (connectionUpdate !== null) {
updates.set(connection.id, connectionUpdate);
}
@@ -75,10 +113,10 @@ nf.Draggable = (function () {
});
// consider the component itself
- updates.set(d.id, nf.Draggable.updateComponentPosition(d, delta));
+ updates.set(d.id, nfDraggable.updateComponentPosition(d, delta));
});
- nf.Draggable.refreshConnections(updates);
+ nfDraggable.refreshConnections(updates);
};
/**
@@ -88,15 +126,15 @@ nf.Draggable = (function () {
var selection = d3.selectAll('g.component.selected, g.connection.selected');
var group = d3.select('g.drop');
- if (nf.CanvasUtils.canModify(selection) === false) {
- nf.Dialog.showOkDialog({
+ if (canvasUtils.canModify(selection) === false) {
+ dialog.showOkDialog({
headerText: 'Component Position',
dialogContent: 'Must be authorized to modify every component selected.'
});
return;
}
- if (nf.CanvasUtils.canModify(group) === false) {
- nf.Dialog.showOkDialog({
+ if (canvasUtils.canModify(group) === false) {
+ dialog.showOkDialog({
headerText: 'Component Position',
dialogContent: 'Not authorized to modify the destination group.'
});
@@ -104,102 +142,104 @@ nf.Draggable = (function () {
}
// move the seleciton into the group
- nf.CanvasUtils.moveComponents(selection, group);
+ canvasUtils.moveComponents(selection, group);
};
- return {
- init: function () {
+ var nfDraggable = {
+ init: function (canvas) {
+ nfCanvas = canvas;
+
// handle component drag events
drag = d3.behavior.drag()
- .on('dragstart', function () {
- // stop further propagation
- d3.event.sourceEvent.stopPropagation();
- })
- .on('drag', function () {
- var dragSelection = d3.select('rect.drag-selection');
-
- // lazily create the drag selection box
- if (dragSelection.empty()) {
- // get the current selection
- var selection = d3.selectAll('g.component.selected');
-
- // determine the appropriate bounding box
- var minX = null, maxX = null, minY = null, maxY = null;
- selection.each(function (d) {
- if (minX === null || d.position.x < minX) {
- minX = d.position.x;
- }
- if (minY === null || d.position.y < minY) {
- minY = d.position.y;
- }
- var componentMaxX = d.position.x + d.dimensions.width;
- var componentMaxY = d.position.y + d.dimensions.height;
- if (maxX === null || componentMaxX > maxX) {
- maxX = componentMaxX;
- }
- if (maxY === null || componentMaxY > maxY) {
- maxY = componentMaxY;
- }
+ .on('dragstart', function () {
+ // stop further propagation
+ d3.event.sourceEvent.stopPropagation();
+ })
+ .on('drag', function () {
+ var dragSelection = d3.select('rect.drag-selection');
+
+ // lazily create the drag selection box
+ if (dragSelection.empty()) {
+ // get the current selection
+ var selection = d3.selectAll('g.component.selected');
+
+ // determine the appropriate bounding box
+ var minX = null, maxX = null, minY = null, maxY = null;
+ selection.each(function (d) {
+ if (minX === null || d.position.x < minX) {
+ minX = d.position.x;
+ }
+ if (minY === null || d.position.y < minY) {
+ minY = d.position.y;
+ }
+ var componentMaxX = d.position.x + d.dimensions.width;
+ var componentMaxY = d.position.y + d.dimensions.height;
+ if (maxX === null || componentMaxX > maxX) {
+ maxX = componentMaxX;
+ }
+ if (maxY === null || componentMaxY > maxY) {
+ maxY = componentMaxY;
+ }
+ });
+
+ // create a selection box for the move
+ d3.select('#canvas').append('rect')
+ .attr('rx', 6)
+ .attr('ry', 6)
+ .attr('x', minX)
+ .attr('y', minY)
+ .attr('class', 'drag-selection')
+ .attr('pointer-events', 'none')
+ .attr('width', maxX - minX)
+ .attr('height', maxY - minY)
+ .attr('stroke-width', function () {
+ return 1 / canvasUtils.scaleCanvasView();
+ })
+ .attr('stroke-dasharray', function () {
+ return 4 / canvasUtils.scaleCanvasView();
+ })
+ .datum({
+ original: {
+ x: minX,
+ y: minY
+ },
+ x: minX,
+ y: minY
+ });
+ } else {
+ // update the position of the drag selection
+ dragSelection.attr('x', function (d) {
+ d.x += d3.event.dx;
+ return d.x;
+ })
+ .attr('y', function (d) {
+ d.y += d3.event.dy;
+ return d.y;
});
+ }
+ })
+ .on('dragend', function () {
+ // stop further propagation
+ d3.event.sourceEvent.stopPropagation();
- // create a selection box for the move
- d3.select('#canvas').append('rect')
- .attr('rx', 6)
- .attr('ry', 6)
- .attr('x', minX)
- .attr('y', minY)
- .attr('class', 'drag-selection')
- .attr('pointer-events', 'none')
- .attr('width', maxX - minX)
- .attr('height', maxY - minY)
- .attr('stroke-width', function () {
- return 1 / nf.Canvas.View.scale();
- })
- .attr('stroke-dasharray', function () {
- return 4 / nf.Canvas.View.scale();
- })
- .datum({
- original: {
- x: minX,
- y: minY
- },
- x: minX,
- y: minY
- });
- } else {
- // update the position of the drag selection
- dragSelection.attr('x', function (d) {
- d.x += d3.event.dx;
- return d.x;
- })
- .attr('y', function (d) {
- d.y += d3.event.dy;
- return d.y;
- });
- }
- })
- .on('dragend', function () {
- // stop further propagation
- d3.event.sourceEvent.stopPropagation();
-
- // get the drag selection
- var dragSelection = d3.select('rect.drag-selection');
-
- // ensure we found a drag selection
- if (dragSelection.empty()) {
- return;
- }
-
- // either move or update the selections group as appropriate
- if (d3.select('g.drop').empty()) {
- updateComponentsPosition(dragSelection);
- } else {
- updateComponentsGroup();
- }
-
- // remove the drag selection
- dragSelection.remove();
- });
+ // get the drag selection
+ var dragSelection = d3.select('rect.drag-selection');
+
+ // ensure we found a drag selection
+ if (dragSelection.empty()) {
+ return;
+ }
+
+ // either move or update the selections group as appropriate
+ if (d3.select('g.drop').empty()) {
+ updateComponentsPosition(dragSelection);
+ } else {
+ updateComponentsGroup();
+ }
+
+ // remove the drag selection
+ dragSelection.remove();
+ });
},
/**
@@ -209,7 +249,7 @@ nf.Draggable = (function () {
* @param delta The change in position
* @returns {*}
*/
- updateComponentPosition: function(d, delta) {
+ updateComponentPosition: function (d, delta) {
var newPosition = {
'x': d.position.x + delta.x,
'y': d.position.y + delta.y
@@ -217,7 +257,7 @@ nf.Draggable = (function () {
// build the entity
var entity = {
- 'revision': nf.Client.getRevision(d),
+ 'revision': client.getRevision(d),
'component': {
'id': d.id,
'position': newPosition
@@ -234,7 +274,7 @@ nf.Draggable = (function () {
contentType: 'application/json'
}).done(function (response) {
// update the component
- nf[d.type].set(response);
+ canvasUtils.getComponentByType(d.type).set(response);
// resolve with an object so we can refresh when finished
deferred.resolve({
@@ -243,12 +283,12 @@ nf.Draggable = (function () {
});
}).fail(function (xhr, status, error) {
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
- nf.Dialog.showOkDialog({
+ dialog.showOkDialog({
headerText: 'Component Position',
- dialogContent: nf.Common.escapeHtml(xhr.responseText)
+ dialogContent: common.escapeHtml(xhr.responseText)
});
} else {
- nf.ErrorHandler.handleAjaxError(xhr, status, error);
+ errorHandler.handleAjaxError(xhr, status, error);
}
deferred.reject();
@@ -263,7 +303,7 @@ nf.Draggable = (function () {
* @param delta The change in position
* @returns {*}
*/
- updateConnectionPosition: function(d, delta) {
+ updateConnectionPosition: function (d, delta) {
// only update if necessary
if (d.bends.length === 0) {
return null;
@@ -278,7 +318,7 @@ nf.Draggable = (function () {
});
var entity = {
- 'revision': nf.Client.getRevision(d),
+ 'revision': client.getRevision(d),
'component': {
id: d.id,
bends: newBends
@@ -295,7 +335,7 @@ nf.Draggable = (function () {
contentType: 'application/json'
}).done(function (response) {
// update the component
- nf.Connection.set(response);
+ connection.set(response);
// resolve with an object so we can refresh when finished
deferred.resolve({
@@ -304,12 +344,12 @@ nf.Draggable = (function () {
});
}).fail(function (xhr, status, error) {
if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) {
- nf.Dialog.showOkDialog({
+ dialog.showOkDialog({
headerText: 'Component Position',
- dialogContent: nf.Common.escapeHtml(xhr.responseText)
+ dialogContent: common.escapeHtml(xhr.responseText)
});
} else {
- nf.ErrorHandler.handleAjaxError(xhr, status, error);
+ errorHandler.handleAjaxError(xhr, status, error);
}
deferred.reject();
@@ -322,7 +362,7 @@ nf.Draggable = (function () {
*
* @param updates
*/
- refreshConnections: function(updates) {
+ refreshConnections: function (updates) {
// wait for all updates to complete
$.when.apply(window, updates.values()).done(function () {
var dragged = $.makeArray(arguments);
@@ -335,7 +375,7 @@ nf.Draggable = (function () {
connections.add(component.id);
} else {
// get connections that need to be refreshed because its attached to this component
- var componentConnections = nf.Connection.getComponentConnections(component.id);
+ var componentConnections = connection.getComponentConnections(component.id);
$.each(componentConnections, function (_, connection) {
connections.add(connection.id);
});
@@ -344,10 +384,10 @@ nf.Draggable = (function () {
// refresh the connections
connections.forEach(function (connectionId) {
- nf.Connection.refresh(connectionId);
+ connection.refresh(connectionId);
});
- }).always(function(){
- nf.Birdseye.refresh();
+ }).always(function () {
+ birdseye.refresh();
});
},
@@ -369,4 +409,6 @@ nf.Draggable = (function () {
components.classed('moveable', false).on('.drag', null);
}
};
-}());
\ No newline at end of file
+
+ return nfDraggable;
+}));
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
index 543cd6d..0488314 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js
@@ -15,9 +15,39 @@
* limitations under the License.
*/
-/* global nf, d3 */
-
-nf.Funnel = (function () {
+/* global define, module, require, exports */
+
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery',
+ 'd3',
+ 'nf.Common',
+ 'nf.Client',
+ 'nf.CanvasUtils'],
+ function ($, d3, common, client, canvasUtils) {
+ return (nf.Funnel = factory($, d3, common, client, canvasUtils));
+ });
+ } else if (typeof exports === 'object' && typeof module === 'object') {
+ module.exports = (nf.Funnel =
+ factory(require('jquery'),
+ require('d3'),
+ require('nf.Common'),
+ require('nf.Client'),
+ require('nf.CanvasUtils')));
+ } else {
+ nf.Funnel = factory(root.$,
+ root.d3,
+ root.nf.Common,
+ root.nf.Client,
+ root.nf.CanvasUtils);
+ }
+}(this, function ($, d3, common, client, canvasUtils) {
+ 'use strict';
+
+ var nfConnectable;
+ var nfDraggable;
+ var nfSelectable;
+ var nfContextMenu;
var dimensions = {
width: 48,
@@ -75,7 +105,7 @@ nf.Funnel = (function () {
'class': 'funnel component'
})
.classed('selected', selected)
- .call(nf.CanvasUtils.position);
+ .call(canvasUtils.position);
// funnel border
funnel.append('rect')
@@ -119,7 +149,7 @@ nf.Funnel = (function () {
.text('\ue803');
// always support selection
- funnel.call(nf.Selectable.activate).call(nf.ContextMenu.activate);
+ funnel.call(nfSelectable.activate).call(nfContextMenu.activate);
};
/**
@@ -148,7 +178,7 @@ nf.Funnel = (function () {
var funnel = d3.select(this);
// update the component behavior as appropriate
- nf.CanvasUtils.editable(funnel);
+ canvasUtils.editable(funnel, nfConnectable, nfDraggable);
});
};
@@ -161,11 +191,16 @@ nf.Funnel = (function () {
removed.remove();
};
- return {
+ var nfFunnel = {
/**
* Initializes of the Processor handler.
*/
- init: function () {
+ init: function (connectable, draggable, selectable, contextMenu) {
+ nfConnectable = connectable;
+ nfDraggable = draggable;
+ nfSelectable = selectable;
+ nfContextMenu = contextMenu;
+
funnelMap = d3.map();
removedCache = d3.map();
addedCache = d3.map();
@@ -186,8 +221,8 @@ nf.Funnel = (function () {
*/
add: function (funnelEntities, options) {
var selectAll = false;
- if (nf.Common.isDefinedAndNotNull(options)) {
- selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+ if (common.isDefinedAndNotNull(options)) {
+ selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
}
// get the current time
@@ -208,7 +243,7 @@ nf.Funnel = (function () {
$.each(funnelEntities, function (_, funnelEntity) {
add(funnelEntity);
});
- } else if (nf.Common.isDefinedAndNotNull(funnelEntities)) {
+ } else if (common.isDefinedAndNotNull(funnelEntities)) {
add(funnelEntities);
}
@@ -217,7 +252,7 @@ nf.Funnel = (function () {
selection.enter().call(renderFunnels, selectAll);
selection.call(updateFunnels);
},
-
+
/**
* Populates the graph with the specified funnels.
*
@@ -227,16 +262,16 @@ nf.Funnel = (function () {
set: function (funnelEntities, options) {
var selectAll = false;
var transition = false;
- if (nf.Common.isDefinedAndNotNull(options)) {
- selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
- transition = nf.Common.isDefinedAndNotNull(options.transition) ? options.transition : transition;
+ if (common.isDefinedAndNotNull(options)) {
+ selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+ transition = common.isDefinedAndNotNull(options.transition) ? options.transition : transition;
}
var set = function (proposedFunnelEntity) {
var currentFunnelEntity = funnelMap.get(proposedFunnelEntity.id);
// set the funnel if appropriate due to revision and wasn't previously removed
- if (nf.Client.isNewerRevision(currentFunnelEntity, proposedFunnelEntity) && !removedCache.has(proposedFunnelEntity.id)) {
+ if (client.isNewerRevision(currentFunnelEntity, proposedFunnelEntity) && !removedCache.has(proposedFunnelEntity.id)) {
funnelMap.set(proposedFunnelEntity.id, $.extend({
type: 'Funnel',
dimensions: dimensions
@@ -259,14 +294,14 @@ nf.Funnel = (function () {
$.each(funnelEntities, function (_, funnelEntity) {
set(funnelEntity);
});
- } else if (nf.Common.isDefinedAndNotNull(funnelEntities)) {
+ } else if (common.isDefinedAndNotNull(funnelEntities)) {
set(funnelEntities);
}
// apply the selection and handle all new processors
var selection = select();
selection.enter().call(renderFunnels, selectAll);
- selection.call(updateFunnels).call(nf.CanvasUtils.position, transition);
+ selection.call(updateFunnels).call(canvasUtils.position, transition);
selection.exit().call(removeFunnels);
},
@@ -277,7 +312,7 @@ nf.Funnel = (function () {
* @param {string} id
*/
get: function (id) {
- if (nf.Common.isUndefined(id)) {
+ if (common.isUndefined(id)) {
return funnelMap.values();
} else {
return funnelMap.get(id);
@@ -291,7 +326,7 @@ nf.Funnel = (function () {
* @param {string} id Optional
*/
refresh: function (id) {
- if (nf.Common.isDefinedAndNotNull(id)) {
+ if (common.isDefinedAndNotNull(id)) {
d3.select('#id-' + id).call(updateFunnels);
} else {
d3.selectAll('g.funnel').call(updateFunnels);
@@ -312,7 +347,7 @@ nf.Funnel = (function () {
url: funnelEntity.uri,
dataType: 'json'
}).done(function (response) {
- nf.Funnel.set(response);
+ nfFunnel.set(response);
});
}
},
@@ -323,7 +358,7 @@ nf.Funnel = (function () {
* @param {string} id The id
*/
position: function (id) {
- d3.select('#id-' + id).call(nf.CanvasUtils.position);
+ d3.select('#id-' + id).call(canvasUtils.position);
},
/**
@@ -352,7 +387,7 @@ nf.Funnel = (function () {
* Removes all processors.
*/
removeAll: function () {
- nf.Funnel.remove(funnelMap.keys());
+ nfFunnel.remove(funnelMap.keys());
},
/**
@@ -373,4 +408,6 @@ nf.Funnel = (function () {
expire(removedCache);
}
};
-}());
\ No newline at end of file
+
+ return nfFunnel;
+}));
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
index 5e387ef..b69f143 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
@@ -15,12 +15,31 @@
* limitations under the License.
*/
-/* global nf */
+/* global define, module, require, exports */
/**
* Handles the upstream/downstream dialogs.
*/
-nf.GoTo = (function () {
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery',
+ 'nf.ErrorHandler',
+ 'nf.CanvasUtils'],
+ function ($, errorHandler, canvasUtils) {
+ return (nf.GoTo = factory($, errorHandler, canvasUtils));
+ });
+ } else if (typeof exports === 'object' && typeof module === 'object') {
+ module.exports = (nf.GoTo =
+ factory(require('jquery'),
+ require('nf.ErrorHandler'),
+ require('nf.CanvasUtils')));
+ } else {
+ nf.GoTo = factory(root.$,
+ root.nf.ErrorHandler,
+ root.nf.CanvasUtils);
+ }
+}(this, function ($, errorHandler, canvasUtils) {
+ 'use strict';
var config = {
urls: {
@@ -57,7 +76,7 @@ nf.GoTo = (function () {
var connectionStyle = 'unset';
var connectionName = 'Connection';
if (connectionEntity.permissions.canRead === true) {
- var formattedConnectionName = nf.CanvasUtils.formatConnectionName(connectionEntity.component);
+ var formattedConnectionName = canvasUtils.formatConnectionName(connectionEntity.component);
if (formattedConnectionName !== '') {
connectionStyle = '';
connectionName = formattedConnectionName;
@@ -68,7 +87,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-connect"></div>').appendTo(connectionEntry);
$('<div class="connection-entry-name go-to-link"></div>').attr('title', connectionName).addClass(connectionStyle).text(connectionName).on('click', function () {
// go to the connection
- nf.CanvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
+ canvasUtils.showComponent(parentProcessGroupId, connectionEntity.id);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -117,7 +136,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(downstreamComponent);
$('<div class="destination-component-name go-to-link"></div>').attr('title', destinationName).text(destinationName).on('click', function () {
// go to the component
- nf.CanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
+ canvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -152,7 +171,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-group"></div>').appendTo(downstreamComponent);
$('<div class="destination-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
// go to the remote process group
- nf.CanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
+ canvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -174,7 +193,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-port-in"></div>').appendTo(downstreamInputPort);
$('<div class="destination-input-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
// go to the remote process group
- nf.CanvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
+ canvasUtils.showComponent(connectionEntity.destinationGroupId, connectionEntity.destinationId);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -209,7 +228,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-group-remote"></div>').appendTo(downstreamComponent);
$('<div class="destination-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
// go to the remote process group
- nf.CanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
+ canvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -263,7 +282,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon"></div>').addClass(smallIconClass).appendTo(sourceComponent);
$('<div class="source-component-name go-to-link"></div>').attr('title', sourceName).text(sourceName).on('click', function () {
// go to the component
- nf.CanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
+ canvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -298,7 +317,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-group"></div>').appendTo(sourceComponent);
$('<div class="source-component-name go-to-link"></div>').attr('title', groupLabel).text(groupLabel).on('click', function () {
// go to the process group
- nf.CanvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
+ canvasUtils.showComponent(parentProcessGroupId, processGroupEntity.id);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -319,7 +338,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-port-out"></div>').appendTo(sourceOutputPort);
$('<div class="source-output-port-name go-to-link"></div>').attr('title', portLabel).text(portLabel).on('click', function () {
// go to the output port
- nf.CanvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
+ canvasUtils.showComponent(connectionEntity.sourceGroupId, connectionEntity.sourceId);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -354,7 +373,7 @@ nf.GoTo = (function () {
$('<div class="search-result-icon icon-group-remote"></div>').appendTo(sourceComponent);
$('<div class="source-component-name go-to-link"></div>').attr('title', remoteGroupLabel).text(remoteGroupLabel).on('click', function () {
// go to the remote process group
- nf.CanvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
+ canvasUtils.showComponent(parentProcessGroupId, remoteProcessGroupEntity.id);
// close the dialog
$('#connections-dialog').modal('hide');
@@ -432,9 +451,9 @@ nf.GoTo = (function () {
*/
showDownstreamFromProcessor: function (selection) {
var processorEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
var processorLabel = getDisplayName(processorEntity);
@@ -452,7 +471,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source
if (connectionEntity.sourceId === processorEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -472,9 +491,9 @@ nf.GoTo = (function () {
*/
showUpstreamFromProcessor: function (selection) {
var processorEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
var processorLabel = getDisplayName(processorEntity);
@@ -492,7 +511,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination
if (connectionEntity.destinationId === processorEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -512,12 +531,12 @@ nf.GoTo = (function () {
*/
showDownstreamFromGroup: function (selection) {
var groupEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
var iconStyle = 'icon-group';
- if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
+ if (canvasUtils.isRemoteProcessGroup(selection)) {
iconStyle = 'icon-group-remote';
}
@@ -537,7 +556,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source
if (connectionEntity.sourceGroupId === groupEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -557,12 +576,12 @@ nf.GoTo = (function () {
*/
showUpstreamFromGroup: function (selection) {
var groupEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
var iconStyle = 'icon-group';
- if (nf.CanvasUtils.isRemoteProcessGroup(selection)) {
+ if (canvasUtils.isRemoteProcessGroup(selection)) {
iconStyle = 'icon-group-remote';
}
@@ -582,7 +601,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination
if (connectionEntity.destinationGroupId === groupEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -602,9 +621,9 @@ nf.GoTo = (function () {
*/
showDownstreamFromInputPort: function (selection) {
var portEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
var portLabel = getDisplayName(portEntity);
@@ -622,7 +641,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source
if (connectionEntity.sourceId === portEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -645,7 +664,7 @@ nf.GoTo = (function () {
$.ajax({
type: 'GET',
- url: config.urls.processGroups + encodeURIComponent(nf.Canvas.getParentGroupId()),
+ url: config.urls.processGroups + encodeURIComponent(canvasUtils.getParentGroupId()),
dataType: 'json'
}).done(function (response) {
var flow = response.processGroupFlow.flow;
@@ -662,7 +681,7 @@ nf.GoTo = (function () {
// populate the upstream dialog
$('#connections-context')
.append('<div class="search-result-icon icon-group"></div>')
- .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName()))
+ .append($('<div class="connections-component-name"></div>').text(canvasUtils.getGroupName()))
.append('<div class="clear"></div>')
.append('<div class="search-result-icon icon-port-in" style="margin-left: 20px;"></div>')
.append($('<div class="connections-component-name"></div>').text(portLabel))
@@ -672,7 +691,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination
if (connectionEntity.destinationId === portEntity.id) {
- addConnection(nf.Canvas.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -683,7 +702,7 @@ nf.GoTo = (function () {
// show the upstream dialog
$('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
- }).fail(nf.ErrorHandler.handleAjaxError);
+ }).fail(errorHandler.handleAjaxError);
},
/**
@@ -696,7 +715,7 @@ nf.GoTo = (function () {
$.ajax({
type: 'GET',
- url: config.urls.processGroups + encodeURIComponent(nf.Canvas.getParentGroupId()),
+ url: config.urls.processGroups + encodeURIComponent(canvasUtils.getParentGroupId()),
dataType: 'json'
}).done(function (response) {
var flow = response.processGroupFlow.flow;
@@ -713,7 +732,7 @@ nf.GoTo = (function () {
// populate the downstream dialog
$('#connections-context')
.append('<div class="search-result-icon icon-group"></div>')
- .append($('<div class="connections-component-name"></div>').text(nf.Canvas.getGroupName()))
+ .append($('<div class="connections-component-name"></div>').text(canvasUtils.getGroupName()))
.append('<div class="clear"></div>')
.append('<div class="search-result-icon icon-port-out" style="margin-left: 20px;"></div>')
.append($('<div class="connections-component-name"></div>').text(portLabel))
@@ -723,7 +742,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source
if (connectionEntity.sourceId === portEntity.id) {
- addConnection(nf.Canvas.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getParentGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -734,7 +753,7 @@ nf.GoTo = (function () {
// show the downstream dialog
$('#connections-dialog').modal('setHeaderText', 'Downstream Connections').modal('show');
- }).fail(nf.ErrorHandler.handleAjaxError);
+ }).fail(errorHandler.handleAjaxError);
},
/**
@@ -744,9 +763,9 @@ nf.GoTo = (function () {
*/
showUpstreamFromOutputPort: function (selection) {
var portEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
var portLabel = getDisplayName(portEntity);
@@ -764,7 +783,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination
if (connectionEntity.destinationId === portEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -784,9 +803,9 @@ nf.GoTo = (function () {
*/
showDownstreamFromFunnel: function (selection) {
var funnelEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
// record details of the current component
currentComponentId = funnelEntity.id;
@@ -802,7 +821,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the source
if (connectionEntity.sourceId === funnelEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -822,9 +841,9 @@ nf.GoTo = (function () {
*/
showUpstreamFromFunnel: function (selection) {
var funnelEntity = selection.datum();
- var connections = nf.Connection.get();
- var processGroups = nf.ProcessGroup.get();
- var remoteProcessGroups = nf.RemoteProcessGroup.get();
+ var connections = canvasUtils.getComponentByType('Connection').get();
+ var processGroups = canvasUtils.getComponentByType('ProcessGroup').get();
+ var remoteProcessGroups = canvasUtils.getComponentByType('RemoteProcessGroup').get();
// record details of the current component
currentComponentId = funnelEntity.id;
@@ -840,7 +859,7 @@ nf.GoTo = (function () {
$.each(connections, function (_, connectionEntity) {
// only show connections for which this selection is the destination
if (connectionEntity.destinationId === funnelEntity.id) {
- addConnection(nf.Canvas.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
+ addConnection(canvasUtils.getGroupId(), connectionEntity, processGroups, remoteProcessGroups);
}
});
@@ -853,4 +872,4 @@ nf.GoTo = (function () {
$('#connections-dialog').modal('setHeaderText', 'Upstream Connections').modal('show');
}
};
-}());
\ No newline at end of file
+}));
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
index cf33394..bf21846 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
@@ -15,16 +15,74 @@
* limitations under the License.
*/
-/* global nf */
+/* global define, module, require, exports */
-nf.Graph = (function () {
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery',
+ 'd3',
+ 'nf.Common',
+ 'nf.ng.Bridge',
+ 'nf.Label',
+ 'nf.Funnel',
+ 'nf.Port',
+ 'nf.RemoteProcessGroup',
+ 'nf.ProcessGroup',
+ 'nf.Processor',
+ 'nf.Connection',
+ 'nf.CanvasUtils',
+ 'nf.Connectable',
+ 'nf.Draggable',
+ 'nf.Selectable',
+ 'nf.ContextMenu'],
+ function ($, d3, common, angularBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, canvasUtils, connectable, draggable, selectable, contextMenu) {
+ return (nf.Graph = factory($, d3, common, angularBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, canvasUtils, connectable, draggable, selectable, contextMenu));
+ });
+ } else if (typeof exports === 'object' && typeof module === 'object') {
+ module.exports = (nf.Graph =
+ factory(require('jquery'),
+ require('d3'),
+ require('nf.Common'),
+ require('nf.ng.Bridge'),
+ require('nf.Label'),
+ require('nf.Funnel'),
+ require('nf.Port'),
+ require('nf.RemoteProcessGroup'),
+ require('nf.ProcessGroup'),
+ require('nf.Processor'),
+ require('nf.Connection'),
+ require('nf.CanvasUtils'),
+ require('nf.Connectable'),
+ require('nf.Draggable'),
+ require('nf.Selectable'),
+ require('nf.ContextMenu')));
+ } else {
+ nf.Graph = factory(root.$,
+ root.d3,
+ root.nf.Common,
+ root.nf.ng.Bridge,
+ root.nf.Label,
+ root.nf.Funnel,
+ root.nf.Port,
+ root.nf.RemoteProcessGroup,
+ root.nf.ProcessGroup,
+ root.nf.Processor,
+ root.nf.Connection,
+ root.nf.CanvasUtils,
+ root.nf.Connectable,
+ root.nf.Draggable,
+ root.nf.Selectable,
+ root.nf.ContextMenu);
+ }
+}(this, function ($, d3, common, angularBridge, nfLabel, nfFunnel, nfPort, nfRemoteProcessGroup, nfProcessGroup, nfProcessor, nfConnection, canvasUtils, connectable, draggable, selectable, contextMenu) {
+ 'use strict';
var combinePorts = function (contents) {
- if (nf.Common.isDefinedAndNotNull(contents.inputPorts) && nf.Common.isDefinedAndNotNull(contents.outputPorts)) {
+ if (common.isDefinedAndNotNull(contents.inputPorts) && common.isDefinedAndNotNull(contents.outputPorts)) {
return contents.inputPorts.concat(contents.outputPorts);
- } else if (nf.Common.isDefinedAndNotNull(contents.inputPorts)) {
+ } else if (common.isDefinedAndNotNull(contents.inputPorts)) {
return contents.inputPorts;
- } else if (nf.Common.isDefinedAndNotNull(contents.outputPorts)) {
+ } else if (common.isDefinedAndNotNull(contents.outputPorts)) {
return contents.outputPorts;
} else {
return [];
@@ -32,31 +90,121 @@ nf.Graph = (function () {
};
var combinePortStatus = function (status) {
- if (nf.Common.isDefinedAndNotNull(status.inputPortStatusSnapshots) && nf.Common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
+ if (common.isDefinedAndNotNull(status.inputPortStatusSnapshots) && common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
return status.inputPortStatusSnapshots.concat(status.outputPortStatusSnapshots);
- } else if (nf.Common.isDefinedAndNotNull(status.inputPortStatusSnapshots)) {
+ } else if (common.isDefinedAndNotNull(status.inputPortStatusSnapshots)) {
return status.inputPortStatusSnapshots;
- } else if (nf.Common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
+ } else if (common.isDefinedAndNotNull(status.outputPortStatusSnapshots)) {
return status.outputPortStatusSnapshots;
} else {
return [];
}
};
- return {
- init: function () {
+ /**
+ * Updates component visibility based on their proximity to the screen's viewport.
+ */
+ var updateComponentVisibility = function () {
+ var canvasContainer = $('#canvas-container');
+ var translate = canvasUtils.translateCanvasView();
+ var scale = canvasUtils.scaleCanvasView();
+
+ // scale the translation
+ translate = [translate[0] / scale, translate[1] / scale];
+
+ // get the normalized screen width and height
+ var screenWidth = canvasContainer.width() / scale;
+ var screenHeight = canvasContainer.height() / scale;
+
+ // calculate the screen bounds one screens worth in each direction
+ var screenLeft = -translate[0] - screenWidth;
+ var screenTop = -translate[1] - screenHeight;
+ var screenRight = screenLeft + (screenWidth * 3);
+ var screenBottom = screenTop + (screenHeight * 3);
+
+ // detects whether a component is visible and should be rendered
+ var isComponentVisible = function (d) {
+ if (!canvasUtils.shouldRenderPerScale()) {
+ return false;
+ }
+
+ var left = d.position.x;
+ var top = d.position.y;
+ var right = left + d.dimensions.width;
+ var bottom = top + d.dimensions.height;
+
+ // determine if the component is now visible
+ return screenLeft < right && screenRight > left && screenTop < bottom && screenBottom > top;
+ };
+
+ // detects whether a connection is visible and should be rendered
+ var isConnectionVisible = function (d) {
+ if (!canvasUtils.shouldRenderPerScale()) {
+ return false;
+ }
+
+ var x, y;
+ if (d.bends.length > 0) {
+ var i = Math.min(Math.max(0, d.labelIndex), d.bends.length - 1);
+ x = d.bends[i].x;
+ y = d.bends[i].y;
+ } else {
+ x = (d.start.x + d.end.x) / 2;
+ y = (d.start.y + d.end.y) / 2;
+ }
+
+ return screenLeft < x && screenRight > x && screenTop < y && screenBottom > y;
+ };
+
+ // marks the specific component as visible and determines if its entering or leaving visibility
+ var updateVisibility = function (d, isVisible) {
+ var selection = d3.select('#id-' + d.id);
+ var visible = isVisible(d);
+ var wasVisible = selection.classed('visible');
+ // mark the selection as appropriate
+ selection.classed('visible', visible)
+ .classed('entering', function () {
+ return visible && !wasVisible;
+ }).classed('leaving', function () {
+ return !visible && wasVisible;
+ });
+ };
+
+ // get the all components
+ var graph = nfGraph.get();
+
+ // update the visibility for each component
+ $.each(graph.processors, function (_, d) {
+ updateVisibility(d, isComponentVisible);
+ });
+ $.each(graph.ports, function (_, d) {
+ updateVisibility(d, isComponentVisible);
+ });
+ $.each(graph.processGroups, function (_, d) {
+ updateVisibility(d, isComponentVisible);
+ });
+ $.each(graph.remoteProcessGroups, function (_, d) {
+ updateVisibility(d, isComponentVisible);
+ });
+ $.each(graph.connections, function (_, d) {
+ updateVisibility(d, isConnectionVisible);
+ });
+ };
+
+ var nfGraph = {
+ init: function () {
// initialize the object responsible for each type of component
- nf.Label.init();
- nf.Funnel.init();
- nf.Port.init();
- nf.RemoteProcessGroup.init();
- nf.ProcessGroup.init();
- nf.Processor.init();
- nf.Connection.init();
+ nfLabel.init(connectable, draggable, selectable, contextMenu);
+ nfFunnel.init(connectable, draggable, selectable, contextMenu);
+ nfPort.init(connectable, draggable, selectable, contextMenu);
+ nfRemoteProcessGroup.init(connectable, draggable, selectable, contextMenu);
+ nfProcessGroup.init(connectable, draggable, selectable, contextMenu);
+ nfProcessor.init(connectable, draggable, selectable, contextMenu);
+ nfConnection.init(selectable, contextMenu);
// load the graph
- return nf.CanvasUtils.enterGroup(nf.Canvas.getGroupId());
+ return nfProcessGroup.enterGroup(canvasUtils.getGroupId());
},
/**
@@ -67,65 +215,65 @@ nf.Graph = (function () {
*/
add: function (processGroupContents, options) {
var selectAll = false;
- if (nf.Common.isDefinedAndNotNull(options)) {
- selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+ if (common.isDefinedAndNotNull(options)) {
+ selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
}
// if we are going to select the new components, deselect the previous selection
if (selectAll) {
- nf.CanvasUtils.getSelection().classed('selected', false);
+ canvasUtils.getSelection().classed('selected', false);
}
// merge the ports together
var ports = combinePorts(processGroupContents);
// add the components to the responsible object
- nf.Label.add(processGroupContents.labels, options);
- nf.Funnel.add(processGroupContents.funnels, options);
- nf.RemoteProcessGroup.add(processGroupContents.remoteProcessGroups, options);
- nf.Port.add(ports, options);
- nf.ProcessGroup.add(processGroupContents.processGroups, options);
- nf.Processor.add(processGroupContents.processors, options);
- nf.Connection.add(processGroupContents.connections, options);
+ nfLabel.add(processGroupContents.labels, options);
+ nfFunnel.add(processGroupContents.funnels, options);
+ nfRemoteProcessGroup.add(processGroupContents.remoteProcessGroups, options);
+ nfPort.add(ports, options);
+ nfProcessGroup.add(processGroupContents.processGroups, options);
+ nfProcessor.add(processGroupContents.processors, options);
+ nfConnection.add(processGroupContents.connections, options);
// inform Angular app if the selection is changing
if (selectAll) {
- nf.ng.Bridge.digest();
+ angularBridge.digest();
}
},
-
+
/**
* Populates the graph with the resources defined in the response.
- *
+ *
* @argument {object} processGroupContents The contents of the process group
* @argument {object} options Configuration options
*/
set: function (processGroupContents, options) {
var selectAll = false;
- if (nf.Common.isDefinedAndNotNull(options)) {
- selectAll = nf.Common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
+ if (common.isDefinedAndNotNull(options)) {
+ selectAll = common.isDefinedAndNotNull(options.selectAll) ? options.selectAll : selectAll;
}
// if we are going to select the new components, deselect the previous selection
if (selectAll) {
- nf.CanvasUtils.getSelection().classed('selected', false);
+ canvasUtils.getSelection().classed('selected', false);
}
// merge the ports together
var ports = combinePorts(processGroupContents);
// add the components to the responsible object
- nf.Label.set(processGroupContents.labels, options);
- nf.Funnel.set(processGroupContents.funnels, options);
- nf.RemoteProcessGroup.set(processGroupContents.remoteProcessGroups, options);
- nf.Port.set(ports, options);
- nf.ProcessGroup.set(processGroupContents.processGroups, options);
- nf.Processor.set(processGroupContents.processors, options);
- nf.Connection.set(processGroupContents.connections, options);
+ nfLabel.set(processGroupContents.labels, options);
+ nfFunnel.set(processGroupContents.funnels, options);
+ nfRemoteProcessGroup.set(processGroupContents.remoteProcessGroups, options);
+ nfPort.set(ports, options);
+ nfProcessGroup.set(processGroupContents.processGroups, options);
+ nfProcessor.set(processGroupContents.processors, options);
+ nfConnection.set(processGroupContents.connections, options);
// inform Angular app if the selection is changing
if (selectAll) {
- nf.ng.Bridge.digest();
+ angularBridge.digest();
}
},
@@ -140,54 +288,133 @@ nf.Graph = (function () {
* @param timestamp expire caches before
*/
expireCaches: function (timestamp) {
- nf.Label.expireCaches(timestamp);
- nf.Funnel.expireCaches(timestamp);
- nf.RemoteProcessGroup.expireCaches(timestamp);
- nf.Port.expireCaches(timestamp);
- nf.ProcessGroup.expireCaches(timestamp);
- nf.Processor.expireCaches(timestamp);
- nf.Connection.expireCaches(timestamp);
+ nfLabel.expireCaches(timestamp);
+ nfFunnel.expireCaches(timestamp);
+ nfRemoteProcessGroup.expireCaches(timestamp);
+ nfPort.expireCaches(timestamp);
+ nfProcessGroup.expireCaches(timestamp);
+ nfProcessor.expireCaches(timestamp);
+ nfConnection.expireCaches(timestamp);
},
-
+
/**
* Gets the components currently on the canvas.
*/
get: function () {
return {
- labels: nf.Label.get(),
- funnels: nf.Funnel.get(),
- ports: nf.Port.get(),
- remoteProcessGroups: nf.RemoteProcessGroup.get(),
- processGroups: nf.ProcessGroup.get(),
- processors: nf.Processor.get(),
- connections: nf.Connection.get()
+ labels: nfLabel.get(),
+ funnels: nfFunnel.get(),
+ ports: nfPort.get(),
+ remoteProcessGroups: nfRemoteProcessGroup.get(),
+ processGroups: nfProcessGroup.get(),
+ processors: nfProcessor.get(),
+ connections: nfConnection.get()
};
},
-
+
+ /**
+ * Gets a graph component `type`.
+ *
+ * @param type The type of component.
+ */
+ getComponentByType: function (type) {
+ switch (type)
+ {
+ case "Label":
+ return nfLabel;
+ break;
+
+ case "Funnel":
+ return nfFunnel;
+ break;
+
+ case "Port":
+ return nfPort;
+ break;
+
+ case "RemoteProcessGroup":
+ return nfRemoteProcessGroup;
+ break;
+
+ case "ProcessGroup":
+ return nfProcessGroup;
+ break;
+
+ case "Processor":
+ return nfProcessor;
+ break;
+
+ case "Connection":
+ return nfConnection;
+ break;
+
+ default:
+ throw new Error('Unknown component type.');
+ break;
+ }
+ },
+
/**
* Clears all the components currently on the canvas. This function does not automatically refresh.
*/
removeAll: function () {
// remove all the components
- nf.Label.removeAll();
- nf.Funnel.removeAll();
- nf.Port.removeAll();
- nf.RemoteProcessGroup.removeAll();
- nf.ProcessGroup.removeAll();
- nf.Processor.removeAll();
- nf.Connection.removeAll();
+ nfLabel.removeAll();
+ nfFunnel.removeAll();
+ nfPort.removeAll();
+ nfRemoteProcessGroup.removeAll();
+ nfProcessGroup.removeAll();
+ nfProcessor.removeAll();
+ nfConnection.removeAll();
},
-
+
/**
* Refreshes all components currently on the canvas.
*/
pan: function () {
// refresh the components
- nf.Port.pan();
- nf.RemoteProcessGroup.pan();
- nf.ProcessGroup.pan();
- nf.Processor.pan();
- nf.Connection.pan();
+ nfPort.pan();
+ nfRemoteProcessGroup.pan();
+ nfProcessGroup.pan();
+ nfProcessor.pan();
+ nfConnection.pan();
+ },
+
+ /**
+ * Updates component visibility based on the current translation/scale.
+ */
+ updateVisibility: function () {
+ updateComponentVisibility();
+ nfGraph.pan();
+ },
+
+ /**
+ * Gets the currently selected components and connections.
+ *
+ * @returns {selection} The currently selected components and connections
+ */
+ getSelection: function () {
+ return d3.selectAll('g.component.selected, g.connection.selected');
+ },
+
+ /**
+ * Reload the component on the canvas.
+ *
+ * @param component The component.
+ */
+ reload: function (component) {
+ var componentData = component.datum();
+ if (componentData.permissions.canRead) {
+ if (canvasUtils.isProcessor(component)) {
+ nfProcessor.reload(componentData.id);
+ } else if (canvasUtils.isInputPort(component)) {
+ nfPort.reload(componentData.id);
+ } else if (canvasUtils.isRemoteProcessGroup(component)) {
+ nfRemoteProcessGroup.reload(componentData.id);
+ }
+ }
}
};
-}());
\ No newline at end of file
+
+ return nfGraph;
+}));
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi/blob/bf3b1640/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
index 0eba38e..4c22c56 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
@@ -15,9 +15,43 @@
* limitations under the License.
*/
-/* global nf */
-
-nf.LabelConfiguration = (function () {
+/* global define, module, require, exports */
+
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define(['jquery',
+ 'd3',
+ 'nf.ErrorHandler',
+ 'nf.Common',
+ 'nf.Client',
+ 'nf.CanvasUtils',
+ 'nf.ng.Bridge',
+ 'nf.Label'],
+ function ($, d3, errorHandler, common, client, canvasUtils, angularBridge, label) {
+ return (nf.LabelConfiguration = factory($, d3, errorHandler, common, client, canvasUtils, angularBridge, label));
+ });
+ } else if (typeof exports === 'object' && typeof module === 'object') {
+ module.exports = (nf.LabelConfiguration =
+ factory(require('jquery'),
+ require('d3'),
+ require('nf.ErrorHandler'),
+ require('nf.Common'),
+ require('nf.Client'),
+ require('nf.CanvasUtils'),
+ require('nf.ng.Bridge'),
+ require('nf.Label')));
+ } else {
+ nf.LabelConfiguration = factory(root.$,
+ root.d3,
+ root.nf.ErrorHandler,
+ root.nf.Common,
+ root.nf.Client,
+ root.nf.CanvasUtils,
+ root.nf.ng.Bridge,
+ root.nf.Label);
+ }
+}(this, function ($, d3, errorHandler, common, client, canvasUtils, angularBridge, label) {
+ 'use strict';
var labelId = '';
@@ -48,7 +82,7 @@ nf.LabelConfiguration = (function () {
// build the label entity
var labelEntity = {
- 'revision': nf.Client.getRevision(labelData),
+ 'revision': client.getRevision(labelData),
'component': {
'id': labelId,
'label': labelValue,
@@ -67,11 +101,11 @@ nf.LabelConfiguration = (function () {
contentType: 'application/json'
}).done(function (response) {
// get the label out of the response
- nf.Label.set(response);
+ label.set(response);
// inform Angular app values have changed
- nf.ng.Bridge.digest();
- }).fail(nf.ErrorHandler.handleAjaxError);
+ angularBridge.digest();
+ }).fail(errorHandler.handleAjaxError);
// reset and hide the dialog
this.modal('hide');
@@ -132,18 +166,18 @@ nf.LabelConfiguration = (function () {
* @argument {selection} selection The selection
*/
showConfiguration: function (selection) {
- if (nf.CanvasUtils.isLabel(selection)) {
+ if (canvasUtils.isLabel(selection)) {
var selectionData = selection.datum();
// get the label value
var labelValue = '';
- if (nf.Common.isDefinedAndNotNull(selectionData.component.label)) {
+ if (common.isDefinedAndNotNull(selectionData.component.label)) {
labelValue = selectionData.component.label;
}
// get the font size
var fontSize = '12px';
- if (nf.Common.isDefinedAndNotNull(selectionData.component.style['font-size'])) {
+ if (common.isDefinedAndNotNull(selectionData.component.style['font-size'])) {
fontSize = selectionData.component.style['font-size'];
}
@@ -161,4 +195,4 @@ nf.LabelConfiguration = (function () {
}
}
};
-}());
\ No newline at end of file
+}));
\ No newline at end of file