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
