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/controllers/nf-ng-canvas-toolbox-controller.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js index 8bd7fcd..212ecc3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js @@ -15,134 +15,154 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.Canvas.ToolboxCtrl = function (processorComponent, - inputPortComponent, - outputPortComponent, - groupComponent, - remoteGroupComponent, - funnelComponent, - templateComponent, - labelComponent) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['nf.CanvasUtils', + 'nf.ContextMenu'], + function (canvasUtils, contextMenu) { + return (nf.ng.Canvas.ToolboxCtrl = factory(canvasUtils, contextMenu)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.Canvas.ToolboxCtrl = + factory(require('nf.CanvasUtils'), + require('nf.ContextMenu'))); + } else { + nf.ng.Canvas.ToolboxCtrl = factory(root.nf.CanvasUtils, + root.nf.ContextMenu); + } +}(this, function (canvasUtils, contextMenu) { 'use strict'; - function ToolboxCtrl(processorComponent, - inputPortComponent, - outputPortComponent, - groupComponent, - remoteGroupComponent, - funnelComponent, - templateComponent, - labelComponent) { - this.processorComponent = processorComponent; - this.inputPortComponent = inputPortComponent; - this.outputPortComponent = outputPortComponent; - this.groupComponent = groupComponent; - this.remoteGroupComponent = remoteGroupComponent; - this.funnelComponent = funnelComponent; - this.templateComponent = templateComponent; - this.labelComponent = labelComponent; + return function (processorComponent, + inputPortComponent, + outputPortComponent, + groupComponent, + remoteGroupComponent, + funnelComponent, + templateComponent, + labelComponent) { + 'use strict'; - /** - * Config for the toolbox - */ - this.config = { - type: { - processor: 'Processor', - inputPort: 'Input Port', - outputPort: 'Output Port', - processGroup: 'Process Group', - remoteProcessGroup: 'Remote Process Group', - connection: 'Connection', - funnel: 'Funnel', - template: 'Template', - label: 'Label' - }, - urls: { - api: '../nifi-api', - controller: '../nifi-api/controller', - processorTypes: '../nifi-api/flow/processor-types' - } - }; - } - ToolboxCtrl.prototype = { - constructor: ToolboxCtrl, + function ToolboxCtrl(processorComponent, + inputPortComponent, + outputPortComponent, + groupComponent, + remoteGroupComponent, + funnelComponent, + templateComponent, + labelComponent) { + this.processorComponent = processorComponent; + this.inputPortComponent = inputPortComponent; + this.outputPortComponent = outputPortComponent; + this.groupComponent = groupComponent; + this.remoteGroupComponent = remoteGroupComponent; + this.funnelComponent = funnelComponent; + this.templateComponent = templateComponent; + this.labelComponent = labelComponent; + + /** + * Config for the toolbox + */ + this.config = { + type: { + processor: 'Processor', + inputPort: 'Input Port', + outputPort: 'Output Port', + processGroup: 'Process Group', + remoteProcessGroup: 'Remote Process Group', + connection: 'Connection', + funnel: 'Funnel', + template: 'Template', + label: 'Label' + }, + urls: { + api: '../nifi-api', + controller: '../nifi-api/controller', + processorTypes: '../nifi-api/flow/processor-types' + } + }; + } - /** - * Initialize the toolbox controller. - */ - init: function() { - // initialize modal dialogs - processorComponent.modal.init(); - inputPortComponent.modal.init(); - outputPortComponent.modal.init(); - groupComponent.modal.init(); - remoteGroupComponent.modal.init(); - templateComponent.modal.init(); - }, + ToolboxCtrl.prototype = { + constructor: ToolboxCtrl, - /** - * Gets the draggable configuration for a toolbox component. - * - * @param {object} component The component responsible for handling the stop event. - * @returns {object} The draggable configuration. - * - * NOTE: The `component` must implement a dropHandler. - */ - draggableComponentConfig: function(component) { + /** + * Initialize the toolbox controller. + */ + init: function () { + // initialize modal dialogs + processorComponent.modal.init(); + inputPortComponent.modal.init(); + outputPortComponent.modal.init(); + groupComponent.modal.init(); + remoteGroupComponent.modal.init(); + templateComponent.modal.init(); + }, - //add hover effect - component.getElement().hover(function () { - component.getElement().removeClass(component.icon).addClass(component.hoverIcon); - }, function () { - component.getElement().removeClass(component.hoverIcon).addClass(component.icon); - }) + /** + * Gets the draggable configuration for a toolbox component. + * + * @param {object} component The component responsible for handling the stop event. + * @returns {object} The draggable configuration. + * + * NOTE: The `component` must implement a dropHandler. + */ + draggableComponentConfig: function (component) { - return { - zIndex: 1011, - revert: true, - revertDuration: 0, - cancel: false, - containment: 'body', - cursor: '-webkit-grabbing', - start: function (e, ui) { - // hide the context menu if necessary - nf.ContextMenu.hide(); - }, - stop: function (e, ui) { - var translate = nf.Canvas.View.translate(); - var scale = nf.Canvas.View.scale(); + //add hover effect + component.getElement().hover(function () { + component.getElement().removeClass(component.icon).addClass(component.hoverIcon); + }, function () { + component.getElement().removeClass(component.hoverIcon).addClass(component.icon); + }) - var mouseX = e.originalEvent.pageX; - var mouseY = e.originalEvent.pageY - nf.Canvas.CANVAS_OFFSET; + return { + zIndex: 1011, + revert: true, + revertDuration: 0, + cancel: false, + containment: 'body', + cursor: '-webkit-grabbing', + start: function (e, ui) { + // hide the context menu if necessary + contextMenu.hide(); + }, + stop: function (e, ui) { + var translate = canvasUtils.translateCanvasView(); + var scale = canvasUtils.scaleCanvasView(); - // invoke the drop handler if we're over the canvas - if (mouseX >= 0 && mouseY >= 0) { - // adjust the x and y coordinates accordingly - var x = (mouseX / scale) - (translate[0] / scale); - var y = (mouseY / scale) - (translate[1] / scale); + var mouseX = e.originalEvent.pageX; + var mouseY = e.originalEvent.pageY - canvasUtils.getCanvasOffset(); - //each component must implement a dropHandler function - component.dropHandler.apply(component, [{ - x: x, - y: y - }]); - } - }, - helper: component.dragIcon + // invoke the drop handler if we're over the canvas + if (mouseX >= 0 && mouseY >= 0) { + // adjust the x and y coordinates accordingly + var x = (mouseX / scale) - (translate[0] / scale); + var y = (mouseY / scale) - (translate[1] / scale); + + //each component must implement a dropHandler function + component.dropHandler.apply(component, [{ + x: x, + y: y + }]); + } + }, + helper: component.dragIcon + } } } - } - var toolboxCtrl = - new ToolboxCtrl(processorComponent, - inputPortComponent, - outputPortComponent, - groupComponent, - remoteGroupComponent, - funnelComponent, - templateComponent, - labelComponent); - return toolboxCtrl; -}; \ No newline at end of file + var toolboxCtrl = + new ToolboxCtrl(processorComponent, + inputPortComponent, + outputPortComponent, + groupComponent, + remoteGroupComponent, + funnelComponent, + templateComponent, + labelComponent); + return toolboxCtrl; + }; +})); \ 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/directives/nf-ng-breadcrumbs-directive.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js index 8e487de..cb8a8b2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js @@ -15,20 +15,36 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.BreadcrumbsDirective = function (breadcrumbsCtrl) { - return { - restrict: 'E', - templateUrl: 'views/nf-ng-breadcrumbs-directive-view.html', - scope: { - 'breadcrumbs': '=', - 'clickFunc': '=', - 'highlightCrumbId': '=', - 'separatorFunc': '=' - }, - link: function (scope, element, attrs) { - breadcrumbsCtrl.registerMouseWheelEvent(element); - } +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], + function () { + return (nf.ng.BreadcrumbsDirective = factory()); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.BreadcrumbsDirective = + factory()); + } else { + nf.ng.BreadcrumbsDirective = factory(); + } +}(this, function () { + 'use strict'; + + return function (breadcrumbsCtrl) { + return { + restrict: 'E', + templateUrl: 'views/nf-ng-breadcrumbs-directive-view.html', + scope: { + 'breadcrumbs': '=', + 'clickFunc': '=', + 'highlightCrumbId': '=', + 'separatorFunc': '=' + }, + link: function (scope, element, attrs) { + breadcrumbsCtrl.registerMouseWheelEvent(element); + } + }; }; -}; \ 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/directives/nf-ng-draggable-directive.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js index 5c47d5e..93afc5f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/directives/nf-ng-draggable-directive.js @@ -15,13 +15,29 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.DraggableDirective = function () { - return { - restrict: 'AE', - link: function (scope, element, attrs) { - element.draggable(scope.$eval(attrs.nfDraggable)); - } +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], + function () { + return (nf.ng.DraggableDirective = factory()); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.DraggableDirective = + factory()); + } else { + nf.ng.DraggableDirective = factory(); + } +}(this, function () { + 'use strict'; + + return function () { + return { + restrict: 'AE', + link: function (scope, element, attrs) { + element.draggable(scope.$eval(attrs.nfDraggable)); + } + }; }; -}; \ 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/header/components/nf-ng-funnel-component.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js index 334a3fe..c324a8d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-funnel-component.js @@ -15,102 +15,134 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.FunnelComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.FunnelComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.FunnelComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.FunnelComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - function FunnelComponent() { - this.icon = 'icon icon-funnel'; + return function (serviceProvider) { + 'use strict'; - this.hoverIcon = 'icon icon-funnel-add'; - } - FunnelComponent.prototype = { - constructor: FunnelComponent, + function FunnelComponent() { + this.icon = 'icon icon-funnel'; - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function() { - return $('#funnel-component'); - }, + this.hoverIcon = 'icon icon-funnel-add'; + } - /** - * Enable the component. - */ - enabled: function() { - this.getElement().attr('disabled', false); - }, + FunnelComponent.prototype = { + constructor: FunnelComponent, - /** - * Disable the component. - */ - disabled: function() { - this.getElement().attr('disabled', true); - }, + /** + * Gets the component. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#funnel-component'); + }, - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function(pt) { - this.createFunnel(pt); - }, + /** + * Enable the component. + */ + enabled: function () { + this.getElement().attr('disabled', false); + }, - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-funnel-add"></div>'); - }, + /** + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, - /** - * Creates a new funnel at the specified point. - * - * @argument {object} pt The point that the funnel was dropped. - */ - createFunnel: function(pt) { - var outputPortEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'position': { - 'x': pt.x, - 'y': pt.y + /** + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. + */ + dropHandler: function (pt) { + this.createFunnel(pt); + }, + + /** + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} + */ + dragIcon: function (event) { + return $('<div class="icon icon-funnel-add"></div>'); + }, + + /** + * Creates a new funnel at the specified point. + * + * @argument {object} pt The point that the funnel was dropped. + */ + createFunnel: function (pt) { + var outputPortEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'position': { + 'x': pt.x, + 'y': pt.y + } } - } - }; + }; - // create a new funnel - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/funnels', - data: JSON.stringify(outputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the funnel to the graph - nf.Graph.add({ - 'funnels': [response] - }, { - 'selectAll': true - }); + // create a new funnel + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/funnels', + data: JSON.stringify(outputPortEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the funnel to the graph + graph.add({ + 'funnels': [response] + }, { + 'selectAll': true + }); - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + } } - } - var funnelComponent = new FunnelComponent(); - return funnelComponent; -}; \ No newline at end of file + var funnelComponent = new FunnelComponent(); + return funnelComponent; + }; +})); \ 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/header/components/nf-ng-group-component.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js index f654560..5e7463a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js @@ -15,229 +15,260 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.GroupComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.GroupComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.GroupComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.GroupComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - /** - * Create the group and add to the graph. - * - * @argument {string} groupName The name of the group. - * @argument {object} pt The point that the group was dropped. - */ - var createGroup = function (groupName, pt) { - var processGroupEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'name': groupName, - 'position': { - 'x': pt.x, - 'y': pt.y + return function (serviceProvider) { + 'use strict'; + + /** + * Create the group and add to the graph. + * + * @argument {string} groupName The name of the group. + * @argument {object} pt The point that the group was dropped. + */ + var createGroup = function (groupName, pt) { + var processGroupEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'name': groupName, + 'position': { + 'x': pt.x, + 'y': pt.y + } } - } + }; + + // create a new processor of the defined type + return $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/process-groups', + data: JSON.stringify(processGroupEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the process group to the graph + graph.add({ + 'processGroups': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); }; - // create a new processor of the defined type - return $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/process-groups', - data: JSON.stringify(processGroupEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the process group to the graph - nf.Graph.add({ - 'processGroups': [response] - }, { - 'selectAll': true - }); + function GroupComponent() { - // update component visibility - nf.Canvas.View.updateVisibility(); + this.icon = 'icon icon-group'; - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; + this.hoverIcon = 'icon icon-group-add'; - function GroupComponent() { + /** + * The group component's modal. + */ + this.modal = { - this.icon = 'icon icon-group'; + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-process-group-dialog'); + }, - this.hoverIcon = 'icon icon-group-add'; + /** + * Initialize the modal. + */ + init: function () { + // configure the new process group dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Process Group', + handler: { + close: function () { + $('#new-process-group-name').val(''); + } + } + }); + }, - /** - * The group component's modal. - */ - this.modal = { + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, + + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + GroupComponent.prototype = { + constructor: GroupComponent, /** - * Gets the modal element. + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-process-group-dialog'); + return $('#group-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - // configure the new process group dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Process Group', - handler: { - close: function () { - $('#new-process-group-name').val(''); - } - } - }); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * Disable the component. */ - update: function (name, config) { - this.getElement().modal(name, config); + disabled: function () { + this.getElement().attr('disabled', true); }, /** - * Show the modal. + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. */ - show: function () { - this.getElement().modal('show'); + dropHandler: function (pt) { + this.promptForGroupName(pt); }, /** - * Hide the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } - - GroupComponent.prototype = { - constructor: GroupComponent, - - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#group-component'); - }, + dragIcon: function (event) { + return $('<div class="icon icon-group-add"></div>'); + }, - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, + /** + * Prompts the user to enter the name for the group. + * + * @argument {object} pt The point that the group was dropped. + */ + promptForGroupName: function (pt) { + var groupComponent = this; + return $.Deferred(function (deferred) { + var addGroup = function () { + // get the name of the group and clear the textfield + var groupName = $('#new-process-group-name').val(); - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, + // hide the dialog + groupComponent.modal.hide(); - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForGroupName(pt); - }, + // create the group and resolve the deferred accordingly + createGroup(groupName, pt).done(function (response) { + deferred.resolve(response.component); + }).fail(function () { + deferred.reject(); + }); + }; - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-group-add"></div>'); - }, - - /** - * Prompts the user to enter the name for the group. - * - * @argument {object} pt The point that the group was dropped. - */ - promptForGroupName: function (pt) { - var groupComponent = this; - return $.Deferred(function (deferred) { - var addGroup = function () { - // get the name of the group and clear the textfield - var groupName = $('#new-process-group-name').val(); - - // hide the dialog - groupComponent.modal.hide(); - - // create the group and resolve the deferred accordingly - createGroup(groupName, pt).done(function (response) { - deferred.resolve(response.component); - }).fail(function () { - deferred.reject(); - }); - }; - - groupComponent.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addGroup - } - }, - { - buttonText: 'Cancel', + groupComponent.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - // reject the deferred - deferred.reject(); + click: addGroup + } + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + // reject the deferred + deferred.reject(); - // close the dialog - groupComponent.modal.hide(); + // close the dialog + groupComponent.modal.hide(); + } } - } - }]); + }]); - // show the dialog - groupComponent.modal.show(); + // show the dialog + groupComponent.modal.show(); - // set up the focus and key handlers - $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addGroup(); - } - }); - }).promise(); + // set up the focus and key handlers + $('#new-process-group-name').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addGroup(); + } + }); + }).promise(); + } } - } - var groupComponent = new GroupComponent(); - return groupComponent; -}; \ No newline at end of file + var groupComponent = new GroupComponent(); + return groupComponent; + }; +})); \ 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/header/components/nf-ng-input-port-component.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js index 64d310e..9aab07b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js @@ -15,222 +15,253 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.InputPortComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.InputPortComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.InputPortComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.InputPortComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - /** - * Create the input port and add to the graph. - * - * @argument {string} portName The input port name. - * @argument {object} pt The point that the input port was dropped. - */ - var createInputPort = function (portName, pt) { - var inputPortEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'name': portName, - 'position': { - 'x': pt.x, - 'y': pt.y + return function (serviceProvider) { + 'use strict'; + + /** + * Create the input port and add to the graph. + * + * @argument {string} portName The input port name. + * @argument {object} pt The point that the input port was dropped. + */ + var createInputPort = function (portName, pt) { + var inputPortEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'name': portName, + 'position': { + 'x': pt.x, + 'y': pt.y + } } - } + }; + + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/input-ports', + data: JSON.stringify(inputPortEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the port to the graph + graph.add({ + 'inputPorts': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); }; - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/input-ports', - data: JSON.stringify(inputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the port to the graph - nf.Graph.add({ - 'inputPorts': [response] - }, { - 'selectAll': true - }); + function InputPortComponent() { - // update component visibility - nf.Canvas.View.updateVisibility(); + this.icon = 'icon icon-port-in'; - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; + this.hoverIcon = 'icon icon-port-in-add'; + + /** + * The input port component's modal. + */ + this.modal = { + + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-port-dialog'); + }, - function InputPortComponent() { + /** + * Initialize the modal. + */ + init: function () { + // configure the new port dialog + this.getElement().modal({ + scrollableContentStyle: 'scrollable', + headerText: 'Add Port', + handler: { + close: function () { + $('#new-port-name').val(''); + } + } + }); + }, - this.icon = 'icon icon-port-in'; + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - this.hoverIcon = 'icon icon-port-in-add'; + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, - /** - * The input port component's modal. - */ - this.modal = { + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + InputPortComponent.prototype = { + constructor: InputPortComponent, /** - * Gets the modal element. + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-port-dialog'); + return $('#port-in-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - // configure the new port dialog - this.getElement().modal({ - scrollableContentStyle: 'scrollable', - headerText: 'Add Port', - handler: { - close: function () { - $('#new-port-name').val(''); - } - } - }); + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * Disable the component. */ - update: function (name, config) { - this.getElement().modal(name, config); + disabled: function () { + this.getElement().attr('disabled', true); }, /** - * Show the modal. + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. */ - show: function () { - this.getElement().modal('show'); + dropHandler: function (pt) { + this.promptForInputPortName(pt); }, /** - * Hide the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } - - InputPortComponent.prototype = { - constructor: InputPortComponent, - - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#port-in-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForInputPortName(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-port-in-add"></div>'); - }, + dragIcon: function (event) { + return $('<div class="icon icon-port-in-add"></div>'); + }, - /** - * Prompts the user to enter the name for the input port. - * - * @argument {object} pt The point that the input port was dropped. - */ - promptForInputPortName: function (pt) { - var inputPortComponent = this; - var addInputPort = function () { - // get the name of the input port and clear the textfield - var portName = $('#new-port-name').val(); + /** + * Prompts the user to enter the name for the input port. + * + * @argument {object} pt The point that the input port was dropped. + */ + promptForInputPortName: function (pt) { + var inputPortComponent = this; + var addInputPort = function () { + // get the name of the input port and clear the textfield + var portName = $('#new-port-name').val(); - // hide the dialog - inputPortComponent.modal.hide(); + // hide the dialog + inputPortComponent.modal.hide(); - // create the input port - createInputPort(portName, pt); - }; + // create the input port + createInputPort(portName, pt); + }; - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addInputPort - } - }, - { - buttonText: 'Cancel', + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - inputPortComponent.modal.hide(); - } + click: addInputPort } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + inputPortComponent.modal.hide(); + } + } + }]); - // update the port type - $('#new-port-type').text('Input'); + // update the port type + $('#new-port-type').text('Input'); - // show the dialog - this.modal.show(); + // show the dialog + this.modal.show(); - // set up the focus and key handlers - $('#new-port-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addInputPort(); - } - }); + // set up the focus and key handlers + $('#new-port-name').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addInputPort(); + } + }); + } } - } - var inputPortComponent = new InputPortComponent(); - return inputPortComponent; -}; \ No newline at end of file + var inputPortComponent = new InputPortComponent(); + return inputPortComponent; + }; +})); \ 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/header/components/nf-ng-label-component.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js index a77739e..f3c4263 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-label-component.js @@ -15,104 +15,139 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.LabelComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler', + 'nf.Label'], + function ($, client, birdseye, graph, canvasUtils, errorHandler, label) { + return (nf.ng.LabelComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler, label)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.LabelComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'), + require('nf.Label'))); + } else { + nf.ng.LabelComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler, + root.nf.Label); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler, label) { 'use strict'; - function LabelComponent() { - this.icon = 'icon icon-label'; + return function (serviceProvider) { + 'use strict'; - this.hoverIcon = 'icon icon-label-add'; - } - LabelComponent.prototype = { - constructor: LabelComponent, + function LabelComponent() { + this.icon = 'icon icon-label'; - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function() { - return $('#label-component'); - }, + this.hoverIcon = 'icon icon-label-add'; + } - /** - * Enable the component. - */ - enabled: function() { - this.getElement().attr('disabled', false); - }, + LabelComponent.prototype = { + constructor: LabelComponent, - /** - * Disable the component. - */ - disabled: function() { - this.getElement().attr('disabled', true); - }, + /** + * Gets the component. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#label-component'); + }, - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function(pt) { - this.createLabel(pt); - }, + /** + * Enable the component. + */ + enabled: function () { + this.getElement().attr('disabled', false); + }, - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-label-add"></div>'); - }, + /** + * Disable the component. + */ + disabled: function () { + this.getElement().attr('disabled', true); + }, - /** - * Create the label and add to the graph. - * - * @argument {object} pt The point that the label was dropped. - */ - createLabel: function(pt) { - var labelEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'width': nf.Label.config.width, - 'height': nf.Label.config.height, - 'position': { - 'x': pt.x, - 'y': pt.y + /** + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. + */ + dropHandler: function (pt) { + this.createLabel(pt); + }, + + /** + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} + */ + dragIcon: function (event) { + return $('<div class="icon icon-label-add"></div>'); + }, + + /** + * Create the label and add to the graph. + * + * @argument {object} pt The point that the label was dropped. + */ + createLabel: function (pt) { + var labelEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'width': label.config.width, + 'height': label.config.height, + 'position': { + 'x': pt.x, + 'y': pt.y + } } - } - }; + }; - // create a new label - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/labels', - data: JSON.stringify(labelEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the label to the graph - nf.Graph.add({ - 'labels': [response] - }, { - 'selectAll': true - }); + // create a new label + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/labels', + data: JSON.stringify(labelEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the label to the graph + graph.add({ + 'labels': [response] + }, { + 'selectAll': true + }); - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); + } } - } - var labelComponent = new LabelComponent(); - return labelComponent; -}; \ No newline at end of file + var labelComponent = new LabelComponent(); + return labelComponent; + }; +})); \ 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/header/components/nf-ng-output-port-component.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js index d856691..8b4c637 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-output-port-component.js @@ -15,213 +15,244 @@ * limitations under the License. */ -/* global nf, d3 */ +/* global define, module, require, exports */ -nf.ng.OutputPortComponent = function (serviceProvider) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery', + 'nf.Client', + 'nf.Birdseye', + 'nf.Graph', + 'nf.CanvasUtils', + 'nf.ErrorHandler'], + function ($, client, birdseye, graph, canvasUtils, errorHandler) { + return (nf.ng.OutputPortComponent = factory($, client, birdseye, graph, canvasUtils, errorHandler)); + }); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = (nf.ng.OutputPortComponent = + factory(require('jquery'), + require('nf.Client'), + require('nf.Birdseye'), + require('nf.Graph'), + require('nf.CanvasUtils'), + require('nf.ErrorHandler'))); + } else { + nf.ng.OutputPortComponent = factory(root.$, + root.nf.Client, + root.nf.Birdseye, + root.nf.Graph, + root.nf.CanvasUtils, + root.nf.ErrorHandler); + } +}(this, function ($, client, birdseye, graph, canvasUtils, errorHandler) { 'use strict'; - /** - * Create the input port and add to the graph. - * - * @argument {string} portName The output port name. - * @argument {object} pt The point that the output port was dropped. - */ - var createOutputPort = function (portName, pt) { - var outputPortEntity = { - 'revision': nf.Client.getRevision({ - 'revision': { - 'version': 0 - } - }), - 'component': { - 'name': portName, - 'position': { - 'x': pt.x, - 'y': pt.y + return function (serviceProvider) { + 'use strict'; + + /** + * Create the input port and add to the graph. + * + * @argument {string} portName The output port name. + * @argument {object} pt The point that the output port was dropped. + */ + var createOutputPort = function (portName, pt) { + var outputPortEntity = { + 'revision': client.getRevision({ + 'revision': { + 'version': 0 + } + }), + 'component': { + 'name': portName, + 'position': { + 'x': pt.x, + 'y': pt.y + } } - } + }; + + // create a new processor of the defined type + $.ajax({ + type: 'POST', + url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(canvasUtils.getGroupId()) + '/output-ports', + data: JSON.stringify(outputPortEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + // add the port to the graph + graph.add({ + 'outputPorts': [response] + }, { + 'selectAll': true + }); + + // update component visibility + graph.updateVisibility(); + + // update the birdseye + birdseye.refresh(); + }).fail(errorHandler.handleAjaxError); }; - // create a new processor of the defined type - $.ajax({ - type: 'POST', - url: serviceProvider.headerCtrl.toolboxCtrl.config.urls.api + '/process-groups/' + encodeURIComponent(nf.Canvas.getGroupId()) + '/output-ports', - data: JSON.stringify(outputPortEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - // add the port to the graph - nf.Graph.add({ - 'outputPorts': [response] - }, { - 'selectAll': true - }); + function OutputPortComponent() { - // update component visibility - nf.Canvas.View.updateVisibility(); + this.icon = 'icon icon-port-out'; - // update the birdseye - nf.Birdseye.refresh(); - }).fail(nf.ErrorHandler.handleAjaxError); - }; + this.hoverIcon = 'icon icon-port-out-add'; + + /** + * The output port component's modal. + */ + this.modal = { - function OutputPortComponent() { + /** + * Gets the modal element. + * + * @returns {*|jQuery|HTMLElement} + */ + getElement: function () { + return $('#new-port-dialog'); //Reuse the input port dialog.... + }, - this.icon = 'icon icon-port-out'; + /** + * Initialize the modal. + */ + init: function () { + //Reuse the input port dialog.... + }, - this.hoverIcon = 'icon icon-port-out-add'; + /** + * Updates the modal config. + * + * @param {string} name The name of the property to update. + * @param {object|array} config The config for the `name`. + */ + update: function (name, config) { + this.getElement().modal(name, config); + }, - /** - * The output port component's modal. - */ - this.modal = { + /** + * Show the modal. + */ + show: function () { + this.getElement().modal('show'); + }, + + /** + * Hide the modal. + */ + hide: function () { + this.getElement().modal('hide'); + } + }; + } + + OutputPortComponent.prototype = { + constructor: OutputPortComponent, /** - * Gets the modal element. + * Gets the component. * * @returns {*|jQuery|HTMLElement} */ getElement: function () { - return $('#new-port-dialog'); //Reuse the input port dialog.... + return $('#port-out-component'); }, /** - * Initialize the modal. + * Enable the component. */ - init: function () { - //Reuse the input port dialog.... + enabled: function () { + this.getElement().attr('disabled', false); }, /** - * Updates the modal config. - * - * @param {string} name The name of the property to update. - * @param {object|array} config The config for the `name`. + * Disable the component. */ - update: function (name, config) { - this.getElement().modal(name, config); + disabled: function () { + this.getElement().attr('disabled', true); }, /** - * Show the modal. + * Handler function for when component is dropped on the canvas. + * + * @argument {object} pt The point that the component was dropped. */ - show: function () { - this.getElement().modal('show'); + dropHandler: function (pt) { + this.promptForOutputPortName(pt); }, /** - * Hide the modal. + * The drag icon for the toolbox component. + * + * @param event + * @returns {*|jQuery|HTMLElement} */ - hide: function () { - this.getElement().modal('hide'); - } - }; - } - - OutputPortComponent.prototype = { - constructor: OutputPortComponent, - - /** - * Gets the component. - * - * @returns {*|jQuery|HTMLElement} - */ - getElement: function () { - return $('#port-out-component'); - }, - - /** - * Enable the component. - */ - enabled: function () { - this.getElement().attr('disabled', false); - }, - - /** - * Disable the component. - */ - disabled: function () { - this.getElement().attr('disabled', true); - }, - - /** - * Handler function for when component is dropped on the canvas. - * - * @argument {object} pt The point that the component was dropped. - */ - dropHandler: function (pt) { - this.promptForOutputPortName(pt); - }, - - /** - * The drag icon for the toolbox component. - * - * @param event - * @returns {*|jQuery|HTMLElement} - */ - dragIcon: function (event) { - return $('<div class="icon icon-port-out-add"></div>'); - }, + dragIcon: function (event) { + return $('<div class="icon icon-port-out-add"></div>'); + }, - /** - * Prompts the user to enter the name for the output port. - * - * @argument {object} pt The point that the output port was dropped. - */ - promptForOutputPortName: function (pt) { - var outputPortComponent = this; - var addOutputPort = function () { - // get the name of the output port and clear the textfield - var portName = $('#new-port-name').val(); + /** + * Prompts the user to enter the name for the output port. + * + * @argument {object} pt The point that the output port was dropped. + */ + promptForOutputPortName: function (pt) { + var outputPortComponent = this; + var addOutputPort = function () { + // get the name of the output port and clear the textfield + var portName = $('#new-port-name').val(); - // hide the dialog - outputPortComponent.modal.hide(); + // hide the dialog + outputPortComponent.modal.hide(); - // create the output port - createOutputPort(portName, pt); - }; + // create the output port + createOutputPort(portName, pt); + }; - this.modal.update('setButtonModel', [{ - buttonText: 'Add', - color: { - base: '#728E9B', - hover: '#004849', - text: '#ffffff' - }, - handler: { - click: addOutputPort - } - }, - { - buttonText: 'Cancel', + this.modal.update('setButtonModel', [{ + buttonText: 'Add', color: { - base: '#E3E8EB', - hover: '#C7D2D7', - text: '#004849' + base: '#728E9B', + hover: '#004849', + text: '#ffffff' }, handler: { - click: function () { - outputPortComponent.modal.hide(); - } + click: addOutputPort } - }]); + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + outputPortComponent.modal.hide(); + } + } + }]); - // update the port type - $('#new-port-type').text('Output'); + // update the port type + $('#new-port-type').text('Output'); - // set the focus and show the dialog - this.modal.show(); + // set the focus and show the dialog + this.modal.show(); - // set up the focus and key handlers - $('#new-port-name').focus().off('keyup').on('keyup', function (e) { - var code = e.keyCode ? e.keyCode : e.which; - if (code === $.ui.keyCode.ENTER) { - addOutputPort(); - } - }); + // set up the focus and key handlers + $('#new-port-name').focus().off('keyup').on('keyup', function (e) { + var code = e.keyCode ? e.keyCode : e.which; + if (code === $.ui.keyCode.ENTER) { + addOutputPort(); + } + }); + } } - } - var outputPortComponent = new OutputPortComponent(); - return outputPortComponent; -}; \ No newline at end of file + var outputPortComponent = new OutputPortComponent(); + return outputPortComponent; + }; +})); \ No newline at end of file
