mirror of https://github.com/apache/nifi.git
[NIFI-11433] update angular, d3, moment, slickgrid, and jquery depen… (#7174)
* [NIFIF-11433] update angular, d3, moment, slickgrid, and jquery dependencies * address review feedback * .entries instead of .keys Merged #7174 into main.
This commit is contained in:
Scott Aslan
GitHub
parent
d3f2bf1c16
commit
38ece1d7d9
|
|
@ -148,7 +148,7 @@
|
||||||
<filtering>false</filtering>
|
<filtering>false</filtering>
|
||||||
<includes>
|
<includes>
|
||||||
<!-- D3 -->
|
<!-- D3 -->
|
||||||
<include>d3/build/d3.min.js*</include>
|
<include>d3/dist/d3.min.js*</include>
|
||||||
<include>d3/LICENSE</include>
|
<include>d3/LICENSE</include>
|
||||||
<!-- D3 selection multi -->
|
<!-- D3 selection multi -->
|
||||||
<include>d3-selection-multi/build/d3-selection-multi.min.js*</include>
|
<include>d3-selection-multi/build/d3-selection-multi.min.js*</include>
|
||||||
|
|
@ -496,6 +496,7 @@
|
||||||
<include>${staging.dir}/js/nf/canvas/nf-component-state.js</include>
|
<include>${staging.dir}/js/nf/canvas/nf-component-state.js</include>
|
||||||
<include>${staging.dir}/js/nf/nf-shell.js</include>
|
<include>${staging.dir}/js/nf/nf-shell.js</include>
|
||||||
<include>${staging.dir}/js/nf/nf-client.js</include>
|
<include>${staging.dir}/js/nf/nf-client.js</include>
|
||||||
|
<include>${staging.dir}/js/nf/canvas/helpers/d3-helpers.js</include>
|
||||||
<include>${staging.dir}/js/nf/canvas/nf-clipboard.js</include>
|
<include>${staging.dir}/js/nf/canvas/nf-clipboard.js</include>
|
||||||
<include>${staging.dir}/js/nf/canvas/nf-custom-ui.js</include>
|
<include>${staging.dir}/js/nf/canvas/nf-custom-ui.js</include>
|
||||||
<include>${staging.dir}/js/nf/canvas/nf-canvas-utils.js</include>
|
<include>${staging.dir}/js/nf/canvas/nf-canvas-utils.js</include>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -20,33 +20,32 @@
|
||||||
"preinstall": "npm --ignore-scripts install npm-force-resolutions && npm-force-resolutions"
|
"preinstall": "npm --ignore-scripts install npm-force-resolutions && npm-force-resolutions"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular": "1.8.2",
|
"angular": "1.8.3",
|
||||||
"angular-animate": "1.8.2",
|
"angular-animate": "1.8.3",
|
||||||
"angular-aria": "1.8.2",
|
"angular-aria": "1.8.3",
|
||||||
"angular-material": "1.1.26",
|
"angular-material": "1.1.26",
|
||||||
"angular-messages": "1.8.2",
|
"angular-messages": "1.8.3",
|
||||||
"angular-mocks": "1.8.2",
|
"angular-mocks": "1.8.3",
|
||||||
"angular-resource": "1.8.2",
|
"angular-resource": "1.8.3",
|
||||||
"angular-route": "1.8.2",
|
"angular-route": "1.8.3",
|
||||||
"angular-sanitize": "1.8.2",
|
"angular-sanitize": "1.8.3",
|
||||||
"d3": "4.13.0",
|
"d3": "7.6.1",
|
||||||
"d3-selection-multi": "1.0.1",
|
|
||||||
"font-awesome": "4.7.0",
|
"font-awesome": "4.7.0",
|
||||||
"jquery": "3.6.0",
|
"jquery": "3.6.4",
|
||||||
"jquery-form": "3.50.0",
|
"jquery-form": "3.50.0",
|
||||||
"jquery-minicolors": "2.1.10",
|
"jquery-minicolors": "2.1.10",
|
||||||
"jquery-ui-dist": "1.13.2",
|
"jquery-ui-dist": "1.13.2",
|
||||||
"JSON2": "0.1.0",
|
"JSON2": "0.1.0",
|
||||||
"jsonlint": "1.6.3",
|
"jsonlint": "1.6.3",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"moment": "2.29.2",
|
"moment": "2.29.4",
|
||||||
"qtip2": "3.0.3",
|
"qtip2": "3.0.3",
|
||||||
"reset.css": "2.0.2",
|
"reset.css": "2.0.2",
|
||||||
"slickgrid": "2.4.38",
|
"slickgrid": "2.4.45",
|
||||||
"url-search-params": "0.6.1"
|
"url-search-params": "0.6.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"npm-force-resolutions": "0.0.10"
|
"npm-force-resolutions": "^0.0.10"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"underscore": "1.13.2"
|
"underscore": "1.13.2"
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-ng-bridge.js?
|
||||||
<script type="text/javascript" src="js/nf/canvas/nf-component-state.js?${project.version}"></script>\n\
|
<script type="text/javascript" src="js/nf/canvas/nf-component-state.js?${project.version}"></script>\n\
|
||||||
<script type="text/javascript" src="js/nf/nf-shell.js?${project.version}"></script>\n\
|
<script type="text/javascript" src="js/nf/nf-shell.js?${project.version}"></script>\n\
|
||||||
<script type="text/javascript" src="js/nf/nf-client.js?${project.version}"></script>\n\
|
<script type="text/javascript" src="js/nf/nf-client.js?${project.version}"></script>\n\
|
||||||
|
<script type="text/javascript" src="js/nf/canvas/helpers/d3-helpers.js?${project.version}"></script>\n\
|
||||||
<script type="text/javascript" src="js/nf/canvas/nf-clipboard.js?${project.version}"></script>\n\
|
<script type="text/javascript" src="js/nf/canvas/nf-clipboard.js?${project.version}"></script>\n\
|
||||||
<script type="text/javascript" src="js/nf/canvas/nf-custom-ui.js?${project.version}"></script>\n\
|
<script type="text/javascript" src="js/nf/canvas/nf-custom-ui.js?${project.version}"></script>\n\
|
||||||
<script type="text/javascript" src="js/nf/canvas/nf-canvas-utils.js?${project.version}"></script>\n\
|
<script type="text/javascript" src="js/nf/canvas/nf-canvas-utils.js?${project.version}"></script>\n\
|
||||||
|
|
|
||||||
|
|
@ -47,8 +47,7 @@
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="assets/url-search-params/build/url-search-params.js"></script>
|
<script type="text/javascript" src="assets/url-search-params/build/url-search-params.js"></script>
|
||||||
<script type="text/javascript" src="js/codemirror/lib/codemirror-compressed.js"></script>
|
<script type="text/javascript" src="js/codemirror/lib/codemirror-compressed.js"></script>
|
||||||
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
|
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/d3-selection-multi/build/d3-selection-multi.min.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
|
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -33,8 +33,7 @@
|
||||||
<link rel="stylesheet" href="fonts/flowfont/flowfont.css" type="text/css" />
|
<link rel="stylesheet" href="fonts/flowfont/flowfont.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="assets/angular-material/angular-material.min.css" type="text/css" />
|
<link rel="stylesheet" href="assets/angular-material/angular-material.min.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
|
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
|
||||||
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
|
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/d3-selection-multi/build/d3-selection-multi.min.js"></script>
|
|
||||||
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/jquery.center.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.center.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
<link rel="stylesheet" href="assets/angular-material/angular-material.min.css" type="text/css" />
|
<link rel="stylesheet" href="assets/angular-material/angular-material.min.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
|
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
|
||||||
<script type="text/javascript" src="js/codemirror/lib/codemirror-compressed.js"></script>
|
<script type="text/javascript" src="js/codemirror/lib/codemirror-compressed.js"></script>
|
||||||
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
|
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
|
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<link rel="stylesheet" href="css/slick-nifi-theme.css" type="text/css" />
|
<link rel="stylesheet" href="css/slick-nifi-theme.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="fonts/flowfont/flowfont.css" type="text/css" />
|
<link rel="stylesheet" href="fonts/flowfont/flowfont.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
|
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
|
||||||
<script type="text/javascript" src="assets/d3/build/d3.min.js"></script>
|
<script type="text/javascript" src="assets/d3/dist/d3.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
|
<script type="text/javascript" src="assets/jquery-ui-dist/jquery-ui.min.js"></script>
|
||||||
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.base64.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -1033,7 +1033,7 @@
|
||||||
var descriptors = gridContainer.data('descriptors');
|
var descriptors = gridContainer.data('descriptors');
|
||||||
var propertyDescriptor = descriptors[item.property];
|
var propertyDescriptor = descriptors[item.property];
|
||||||
|
|
||||||
var controllerServiceLookup = d3.map();
|
var controllerServiceLookup = new Map();
|
||||||
var options = [];
|
var options = [];
|
||||||
$.each(response.controllerServiceTypes, function (i, controllerServiceType) {
|
$.each(response.controllerServiceTypes, function (i, controllerServiceType) {
|
||||||
controllerServiceLookup.set(i, controllerServiceType);
|
controllerServiceLookup.set(i, controllerServiceType);
|
||||||
|
|
|
||||||
|
|
@ -486,9 +486,9 @@
|
||||||
dataType: 'json'
|
dataType: 'json'
|
||||||
}).done(function (response) {
|
}).done(function (response) {
|
||||||
var tags = [];
|
var tags = [];
|
||||||
var groups = d3.set();
|
var groups = new Set();
|
||||||
var restrictedUsage = d3.map();
|
var restrictedUsage = new Map();
|
||||||
var requiredPermissions = d3.map();
|
var requiredPermissions = new Map();
|
||||||
|
|
||||||
// begin the update
|
// begin the update
|
||||||
processorTypesData.beginUpdate();
|
processorTypesData.beginUpdate();
|
||||||
|
|
@ -584,7 +584,7 @@
|
||||||
text: 'all groups',
|
text: 'all groups',
|
||||||
value: ''
|
value: ''
|
||||||
}];
|
}];
|
||||||
groups.each(function (group) {
|
groups.forEach(function (group) {
|
||||||
options.push({
|
options.push({
|
||||||
text: group,
|
text: group,
|
||||||
value: group
|
value: group
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* global define, module, require, exports */
|
||||||
|
|
||||||
|
(function (root, factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define([],
|
||||||
|
function () {
|
||||||
|
return (nf.ng.D3Helpers = factory());
|
||||||
|
});
|
||||||
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
|
module.exports = (nf.ng.D3Helpers =
|
||||||
|
factory());
|
||||||
|
} else {
|
||||||
|
nf.ng.D3Helpers = factory();
|
||||||
|
}
|
||||||
|
}(this, function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
return {
|
||||||
|
multiAttr: function(selection, attrs) {
|
||||||
|
Object.keys(attrs).forEach(function (key) {
|
||||||
|
selection.attr(key, attrs[key]);
|
||||||
|
});
|
||||||
|
return selection;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
|
@ -1286,7 +1286,7 @@
|
||||||
nfSnippet.create(snippet).done(function (response) {
|
nfSnippet.create(snippet).done(function (response) {
|
||||||
// remove the snippet, effectively removing the components
|
// remove the snippet, effectively removing the components
|
||||||
nfSnippet.remove(response.snippet.id).done(function () {
|
nfSnippet.remove(response.snippet.id).done(function () {
|
||||||
var components = d3.map();
|
var components = new Map();
|
||||||
|
|
||||||
// add the id to the type's array
|
// add the id to the type's array
|
||||||
var addComponent = function (type, id) {
|
var addComponent = function (type, id) {
|
||||||
|
|
@ -1313,7 +1313,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// remove all the non connections in the snippet first
|
// remove all the non connections in the snippet first
|
||||||
components.each(function (ids, type) {
|
components.forEach(function (ids, type) {
|
||||||
if (type !== 'Connection') {
|
if (type !== 'Connection') {
|
||||||
nfCanvasUtils.getComponentByType(type).remove(ids);
|
nfCanvasUtils.getComponentByType(type).remove(ids);
|
||||||
}
|
}
|
||||||
|
|
@ -1919,7 +1919,7 @@
|
||||||
* @param {array} selection The selection
|
* @param {array} selection The selection
|
||||||
*/
|
*/
|
||||||
alignVertical: function (selection) {
|
alignVertical: function (selection) {
|
||||||
var updates = d3.map();
|
var updates = new Map();
|
||||||
// ensure every component is writable
|
// ensure every component is writable
|
||||||
if (nfCanvasUtils.canModify(selection) === false) {
|
if (nfCanvasUtils.canModify(selection) === false) {
|
||||||
nfDialog.showOkDialog({
|
nfDialog.showOkDialog({
|
||||||
|
|
@ -1987,7 +1987,7 @@
|
||||||
* @param {array} selection The selection
|
* @param {array} selection The selection
|
||||||
*/
|
*/
|
||||||
alignHorizontal: function (selection) {
|
alignHorizontal: function (selection) {
|
||||||
var updates = d3.map();
|
var updates = new Map();
|
||||||
// ensure every component is writable
|
// ensure every component is writable
|
||||||
if (nfCanvasUtils.canModify(selection) === false) {
|
if (nfCanvasUtils.canModify(selection) === false) {
|
||||||
nfDialog.showOkDialog({
|
nfDialog.showOkDialog({
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,10 @@
|
||||||
'nf.Common',
|
'nf.Common',
|
||||||
'nf.CanvasUtils',
|
'nf.CanvasUtils',
|
||||||
'nf.ContextMenu',
|
'nf.ContextMenu',
|
||||||
'nf.Label'],
|
'nf.Label',
|
||||||
function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Birdseye = factory($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel));
|
function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel, d3Helpers) {
|
||||||
|
return (nf.Birdseye = factory($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Birdseye =
|
module.exports = (nf.Birdseye =
|
||||||
|
|
@ -35,16 +36,18 @@
|
||||||
require('nf.Common'),
|
require('nf.Common'),
|
||||||
require('nf.CanvasUtils'),
|
require('nf.CanvasUtils'),
|
||||||
require('nf.ContextMenu'),
|
require('nf.ContextMenu'),
|
||||||
require('nf.Label')));
|
require('nf.Label'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Birdseye = factory(root.$,
|
nf.Birdseye = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
root.nf.Common,
|
root.nf.Common,
|
||||||
root.nf.CanvasUtils,
|
root.nf.CanvasUtils,
|
||||||
root.nf.ContextMenu,
|
root.nf.ContextMenu,
|
||||||
root.nf.Label);
|
root.nf.Label,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel) {
|
}(this, function ($, d3, nfCommon, nfCanvasUtils, nfContextMenu, nfLabel, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var nfGraph;
|
var nfGraph;
|
||||||
|
|
@ -147,8 +150,9 @@
|
||||||
componentGroup.attr('transform', 'translate(' + birdseyeTranslate + ')');
|
componentGroup.attr('transform', 'translate(' + birdseyeTranslate + ')');
|
||||||
|
|
||||||
// update the brush
|
// update the brush
|
||||||
d3.select('rect.birdseye-brush')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
d3.select('rect.birdseye-brush'),
|
||||||
|
{
|
||||||
'width': screenWidth,
|
'width': screenWidth,
|
||||||
'height': screenHeight,
|
'height': screenHeight,
|
||||||
'stroke-width': (2 / birdseyeScale),
|
'stroke-width': (2 / birdseyeScale),
|
||||||
|
|
@ -280,9 +284,9 @@
|
||||||
source: 'birdseye'
|
source: 'birdseye'
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
.on('drag', function (d) {
|
.on('drag', function (event, d) {
|
||||||
d.x += d3.event.dx;
|
d.x += event.dx;
|
||||||
d.y += d3.event.dy;
|
d.y += event.dy;
|
||||||
|
|
||||||
// update the location of the brush
|
// update the location of the brush
|
||||||
d3.select(this).attr('transform', function () {
|
d3.select(this).attr('transform', function () {
|
||||||
|
|
@ -290,7 +294,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// transform the canvas
|
// transform the canvas
|
||||||
nfCanvasUtils.translateCanvas([-d3.event.dx, -d3.event.dy]);
|
nfCanvasUtils.translateCanvas([-event.dx, -event.dy]);
|
||||||
})
|
})
|
||||||
.on('end', function () {
|
.on('end', function () {
|
||||||
// update component visibility
|
// update component visibility
|
||||||
|
|
@ -304,8 +308,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// context area
|
// context area
|
||||||
birdseyeGroup.append('g')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
birdseyeGroup.append('g'),
|
||||||
|
{
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'class': 'birdseye-brush-container'
|
'class': 'birdseye-brush-container'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -57,8 +57,8 @@
|
||||||
var nfGraph;
|
var nfGraph;
|
||||||
var trimLengthCaches = {};
|
var trimLengthCaches = {};
|
||||||
|
|
||||||
var restrictedUsage = d3.map();
|
var restrictedUsage = new Map();
|
||||||
var requiredPermissions = d3.map();
|
var requiredPermissions = new Map();
|
||||||
|
|
||||||
var config = {
|
var config = {
|
||||||
storage: {
|
storage: {
|
||||||
|
|
@ -103,7 +103,7 @@
|
||||||
nfSnippet.create(snippet).done(function (response) {
|
nfSnippet.create(snippet).done(function (response) {
|
||||||
// move the snippet into the target
|
// move the snippet into the target
|
||||||
nfSnippet.move(response.snippet.id, groupId).done(function () {
|
nfSnippet.move(response.snippet.id, groupId).done(function () {
|
||||||
var componentMap = d3.map();
|
var componentMap = new Map();
|
||||||
|
|
||||||
// add the id to the type's array
|
// add the id to the type's array
|
||||||
var addComponent = function (type, id) {
|
var addComponent = function (type, id) {
|
||||||
|
|
@ -119,7 +119,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// refresh all component types as necessary (handle components that have been removed)
|
// refresh all component types as necessary (handle components that have been removed)
|
||||||
componentMap.each(function (ids, type) {
|
componentMap.forEach(function (ids, type) {
|
||||||
nfCanvasUtils.getComponentByType(type).remove(ids);
|
nfCanvasUtils.getComponentByType(type).remove(ids);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -808,11 +808,9 @@
|
||||||
|
|
||||||
var line = [];
|
var line = [];
|
||||||
var tspan = selection.append('tspan')
|
var tspan = selection.append('tspan')
|
||||||
.attrs({
|
.attr('x', x)
|
||||||
'x': x,
|
.attr('y', y)
|
||||||
'y': y,
|
.attr('width', width);
|
||||||
'width': width
|
|
||||||
});
|
|
||||||
|
|
||||||
// go through each word
|
// go through each word
|
||||||
var word = words.pop();
|
var word = words.pop();
|
||||||
|
|
@ -833,11 +831,9 @@
|
||||||
|
|
||||||
// create the tspan for the next line
|
// create the tspan for the next line
|
||||||
tspan = selection.append('tspan')
|
tspan = selection.append('tspan')
|
||||||
.attrs({
|
.attr('x', x)
|
||||||
'x': x,
|
.attr('dy', '1.2em')
|
||||||
'dy': '1.2em',
|
.attr('width', width);
|
||||||
'width': width
|
|
||||||
});
|
|
||||||
|
|
||||||
// if we've reached the last line, use single line ellipsis
|
// if we've reached the last line, use single line ellipsis
|
||||||
if (++i >= lineCount) {
|
if (++i >= lineCount) {
|
||||||
|
|
@ -952,9 +948,9 @@
|
||||||
* @param {selection} selection The image
|
* @param {selection} selection The image
|
||||||
*/
|
*/
|
||||||
disableImageHref: function (selection) {
|
disableImageHref: function (selection) {
|
||||||
selection.on('click.disableImageHref', function () {
|
selection.on('click.disableImageHref', function (event) {
|
||||||
if (d3.event.ctrlKey || d3.event.shiftKey) {
|
if (event.ctrlKey || event.shiftKey) {
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -1029,11 +1025,11 @@
|
||||||
* @param {selection} target The target of the tooltip
|
* @param {selection} target The target of the tooltip
|
||||||
*/
|
*/
|
||||||
canvasTooltip: function (tip, target) {
|
canvasTooltip: function (tip, target) {
|
||||||
target.on('mouseenter', function () {
|
target.on('mouseenter', function (event) {
|
||||||
tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px').style('display', 'block');
|
tip.style('top', (event.pageY + 15) + 'px').style('left', (event.pageX + 15) + 'px').style('display', 'block');
|
||||||
})
|
})
|
||||||
.on('mousemove', function () {
|
.on('mousemove', function () {
|
||||||
tip.style('top', (d3.event.pageY + 15) + 'px').style('left', (d3.event.pageX + 15) + 'px');
|
tip.style('top', (event.pageY + 15) + 'px').style('left', (event.pageX + 15) + 'px');
|
||||||
})
|
})
|
||||||
.on('mouseleave', function () {
|
.on('mouseleave', function () {
|
||||||
tip.style('display', 'none');
|
tip.style('display', 'none');
|
||||||
|
|
@ -2089,7 +2085,7 @@
|
||||||
* @param additionalRequiredPermissions
|
* @param additionalRequiredPermissions
|
||||||
*/
|
*/
|
||||||
addComponentRestrictions: function (additionalRestrictedUsages, additionalRequiredPermissions) {
|
addComponentRestrictions: function (additionalRestrictedUsages, additionalRequiredPermissions) {
|
||||||
additionalRestrictedUsages.each(function (componentRestrictions, requiredPermissionId) {
|
additionalRestrictedUsages.forEach(function (componentRestrictions, requiredPermissionId) {
|
||||||
if (!restrictedUsage.has(requiredPermissionId)) {
|
if (!restrictedUsage.has(requiredPermissionId)) {
|
||||||
restrictedUsage.set(requiredPermissionId, []);
|
restrictedUsage.set(requiredPermissionId, []);
|
||||||
}
|
}
|
||||||
|
|
@ -2098,7 +2094,7 @@
|
||||||
restrictedUsage.get(requiredPermissionId).push(componentRestriction);
|
restrictedUsage.get(requiredPermissionId).push(componentRestriction);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
additionalRequiredPermissions.each(function (requiredPermissionLabel, requiredPermissionId) {
|
additionalRequiredPermissions.forEach(function (requiredPermissionLabel, requiredPermissionId) {
|
||||||
if (!requiredPermissions.has(requiredPermissionId)) {
|
if (!requiredPermissions.has(requiredPermissionId)) {
|
||||||
requiredPermissions.set(requiredPermissionId, requiredPermissionLabel);
|
requiredPermissions.set(requiredPermissionId, requiredPermissionLabel);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,9 +35,10 @@
|
||||||
'nf.ContextMenu',
|
'nf.ContextMenu',
|
||||||
'nf.Actions',
|
'nf.Actions',
|
||||||
'nf.ProcessGroup',
|
'nf.ProcessGroup',
|
||||||
'nf.ParameterContexts'],
|
'nf.ParameterContexts',
|
||||||
function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Canvas = factory($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts));
|
function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts, d3Helpers) {
|
||||||
|
return (nf.Canvas = factory($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Canvas =
|
module.exports = (nf.Canvas =
|
||||||
|
|
@ -57,7 +58,8 @@
|
||||||
require('nf.ContextMenu'),
|
require('nf.ContextMenu'),
|
||||||
require('nf.Actions'),
|
require('nf.Actions'),
|
||||||
require('nf.ProcessGroup'),
|
require('nf.ProcessGroup'),
|
||||||
require('nf.ParameterContexts')));
|
require('nf.ParameterContexts'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Canvas = factory(root.$,
|
nf.Canvas = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
|
|
@ -75,9 +77,10 @@
|
||||||
root.nf.ContextMenu,
|
root.nf.ContextMenu,
|
||||||
root.nf.Actions,
|
root.nf.Actions,
|
||||||
root.nf.ProcessGroup,
|
root.nf.ProcessGroup,
|
||||||
root.nf.ParameterContexts);
|
root.nf.ParameterContexts,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts) {
|
}(this, function ($, d3, nfCommon, nfDialog, nfGraph, nfShell, nfNgBridge, nfClusterSummary, nfErrorHandler, nfAuthorizationStorage, nfStorage, nfCanvasUtils, nfBirdseye, nfContextMenu, nfActions, nfProcessGroup, nfParameterContexts, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var SCALE = 1;
|
var SCALE = 1;
|
||||||
|
|
@ -366,7 +369,7 @@
|
||||||
|
|
||||||
// create the canvas
|
// create the canvas
|
||||||
svg = d3.select('#canvas-container').append('svg')
|
svg = d3.select('#canvas-container').append('svg')
|
||||||
.on('contextmenu', function () {
|
.on('contextmenu', function (event) {
|
||||||
// reset the canvas click flag
|
// reset the canvas click flag
|
||||||
canvasClicked = false;
|
canvasClicked = false;
|
||||||
|
|
||||||
|
|
@ -377,20 +380,21 @@
|
||||||
nfCanvasUtils.setURLParameters();
|
nfCanvasUtils.setURLParameters();
|
||||||
|
|
||||||
// show the context menu on the canvas
|
// show the context menu on the canvas
|
||||||
nfContextMenu.show();
|
nfContextMenu.show(event);
|
||||||
|
|
||||||
// prevent default browser behavior
|
// prevent default browser behavior
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
// create the definitions element
|
// create the definitions element
|
||||||
var defs = svg.append('defs');
|
var defs = svg.append('defs');
|
||||||
|
|
||||||
// create arrow definitions for the various line types
|
// create arrow definitions for the various line types
|
||||||
defs.selectAll('marker')
|
d3Helpers.multiAttr(
|
||||||
|
defs.selectAll('marker')
|
||||||
.data(['normal', 'ghost', 'unauthorized', 'full'])
|
.data(['normal', 'ghost', 'unauthorized', 'full'])
|
||||||
.enter().append('marker')
|
.enter().append('marker'),
|
||||||
.attrs({
|
{
|
||||||
'id': function (d) {
|
'id': function (d) {
|
||||||
return d;
|
return d;
|
||||||
},
|
},
|
||||||
|
|
@ -416,46 +420,56 @@
|
||||||
.attr('d', 'M2,3 L0,6 L6,3 L0,0 z');
|
.attr('d', 'M2,3 L0,6 L6,3 L0,0 z');
|
||||||
|
|
||||||
// filter for drop shadow
|
// filter for drop shadow
|
||||||
var componentDropShadowFilter = defs.append('filter')
|
var componentDropShadowFilter = d3Helpers.multiAttr(
|
||||||
.attrs({
|
defs.append('filter'),
|
||||||
'id': 'component-drop-shadow',
|
{
|
||||||
'height': '140%',
|
id: 'component-drop-shadow',
|
||||||
'y': '-20%'
|
height: '140%',
|
||||||
});
|
y: '-20%'
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// blur
|
// blur
|
||||||
componentDropShadowFilter.append('feGaussianBlur')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
componentDropShadowFilter.append('feGaussianBlur'),
|
||||||
|
{
|
||||||
'in': 'SourceAlpha',
|
'in': 'SourceAlpha',
|
||||||
'stdDeviation': 3,
|
'stdDeviation': 3,
|
||||||
'result': 'blur'
|
'result': 'blur'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// offset
|
// offset
|
||||||
componentDropShadowFilter.append('feOffset')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
componentDropShadowFilter.append('feOffset'),
|
||||||
|
{
|
||||||
'in': 'blur',
|
'in': 'blur',
|
||||||
'dx': 0,
|
'dx': 0,
|
||||||
'dy': 1,
|
'dy': 1,
|
||||||
'result': 'offsetBlur'
|
'result': 'offsetBlur'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// color/opacity
|
// color/opacity
|
||||||
componentDropShadowFilter.append('feFlood')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
componentDropShadowFilter.append('feFlood'),
|
||||||
|
{
|
||||||
'flood-color': '#000000',
|
'flood-color': '#000000',
|
||||||
'flood-opacity': 0.4,
|
'flood-opacity': 0.4,
|
||||||
'result': 'offsetColor'
|
'result': 'offsetColor'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// combine
|
// combine
|
||||||
componentDropShadowFilter.append('feComposite')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
componentDropShadowFilter.append('feComposite'),
|
||||||
|
{
|
||||||
'in': 'offsetColor',
|
'in': 'offsetColor',
|
||||||
'in2': 'offsetBlur',
|
'in2': 'offsetBlur',
|
||||||
'operator': 'in',
|
'operator': 'in',
|
||||||
'result': 'offsetColorBlur'
|
'result': 'offsetColorBlur'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// stack the effect under the source graph
|
// stack the effect under the source graph
|
||||||
var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge');
|
var componentDropShadowFeMerge = componentDropShadowFilter.append('feMerge');
|
||||||
|
|
@ -465,46 +479,56 @@
|
||||||
.attr('in', 'SourceGraphic');
|
.attr('in', 'SourceGraphic');
|
||||||
|
|
||||||
// filter for drop shadow
|
// filter for drop shadow
|
||||||
var connectionFullDropShadowFilter = defs.append('filter')
|
var connectionFullDropShadowFilter = d3Helpers.multiAttr(
|
||||||
.attrs({
|
defs.append('filter'),
|
||||||
'id': 'connection-full-drop-shadow',
|
{
|
||||||
'height': '140%',
|
id: 'connection-full-drop-shadow',
|
||||||
'y': '-20%'
|
height: '140%',
|
||||||
});
|
y: '-20%'
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// blur
|
// blur
|
||||||
connectionFullDropShadowFilter.append('feGaussianBlur')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
connectionFullDropShadowFilter.append('feGaussianBlur'),
|
||||||
|
{
|
||||||
'in': 'SourceAlpha',
|
'in': 'SourceAlpha',
|
||||||
'stdDeviation': 3,
|
'stdDeviation': 3,
|
||||||
'result': 'blur'
|
'result': 'blur'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// offset
|
// offset
|
||||||
connectionFullDropShadowFilter.append('feOffset')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
connectionFullDropShadowFilter.append('feOffset'),
|
||||||
|
{
|
||||||
'in': 'blur',
|
'in': 'blur',
|
||||||
'dx': 0,
|
'dx': 0,
|
||||||
'dy': 1,
|
'dy': 1,
|
||||||
'result': 'offsetBlur'
|
'result': 'offsetBlur'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// color/opacity
|
// color/opacity
|
||||||
connectionFullDropShadowFilter.append('feFlood')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
connectionFullDropShadowFilter.append('feFlood'),
|
||||||
|
{
|
||||||
'flood-color': '#ba554a',
|
'flood-color': '#ba554a',
|
||||||
'flood-opacity': 1,
|
'flood-opacity': 1,
|
||||||
'result': 'offsetColor'
|
'result': 'offsetColor'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// combine
|
// combine
|
||||||
connectionFullDropShadowFilter.append('feComposite')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
connectionFullDropShadowFilter.append('feComposite'),
|
||||||
|
{
|
||||||
'in': 'offsetColor',
|
'in': 'offsetColor',
|
||||||
'in2': 'offsetBlur',
|
'in2': 'offsetBlur',
|
||||||
'operator': 'in',
|
'operator': 'in',
|
||||||
'result': 'offsetColorBlur'
|
'result': 'offsetColorBlur'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// stack the effect under the source graph
|
// stack the effect under the source graph
|
||||||
var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge');
|
var connectionFullFeMerge = connectionFullDropShadowFilter.append('feMerge');
|
||||||
|
|
@ -514,27 +538,29 @@
|
||||||
.attr('in', 'SourceGraphic');
|
.attr('in', 'SourceGraphic');
|
||||||
|
|
||||||
// create the canvas element
|
// create the canvas element
|
||||||
canvas = svg.append('g')
|
canvas = d3Helpers.multiAttr(
|
||||||
.attrs({
|
svg.append('g'),
|
||||||
|
{
|
||||||
'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')',
|
'transform': 'translate(' + TRANSLATE + ') scale(' + SCALE + ')',
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'id': 'canvas'
|
'id': 'canvas'
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// handle canvas events
|
// handle canvas events
|
||||||
svg.on('mousedown.selection', function () {
|
svg.on('mousedown.selection', function (event) {
|
||||||
canvasClicked = true;
|
canvasClicked = true;
|
||||||
|
|
||||||
if (d3.event.button !== 0) {
|
if (event.button !== 0) {
|
||||||
// prevent further propagation (to parents and others handlers
|
// prevent further propagation (to parents and others handlers
|
||||||
// on the same element to prevent zoom behavior)
|
// on the same element to prevent zoom behavior)
|
||||||
d3.event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// show selection box if shift is held down
|
// show selection box if shift is held down
|
||||||
if (d3.event.shiftKey) {
|
if (event.shiftKey) {
|
||||||
var position = d3.mouse(canvas.node());
|
var position = d3.pointer(event, canvas.node());
|
||||||
canvas.append('rect')
|
canvas.append('rect')
|
||||||
.attr('rx', 6)
|
.attr('rx', 6)
|
||||||
.attr('ry', 6)
|
.attr('ry', 6)
|
||||||
|
|
@ -553,21 +579,21 @@
|
||||||
|
|
||||||
// prevent further propagation (to parents and others handlers
|
// prevent further propagation (to parents and others handlers
|
||||||
// on the same element to prevent zoom behavior)
|
// on the same element to prevent zoom behavior)
|
||||||
d3.event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
|
|
||||||
// prevents the browser from changing to a text selection cursor
|
// prevents the browser from changing to a text selection cursor
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.on('mousemove.selection', function () {
|
.on('mousemove.selection', function (event) {
|
||||||
// update selection box if shift is held down
|
// update selection box if shift is held down
|
||||||
if (d3.event.shiftKey) {
|
if (event.shiftKey) {
|
||||||
// get the selection box
|
// get the selection box
|
||||||
var selectionBox = d3.select('rect.component-selection');
|
var selectionBox = d3.select('rect.component-selection');
|
||||||
if (!selectionBox.empty()) {
|
if (!selectionBox.empty()) {
|
||||||
// get the original position
|
// get the original position
|
||||||
var originalPosition = selectionBox.datum();
|
var originalPosition = selectionBox.datum();
|
||||||
var position = d3.mouse(canvas.node());
|
var position = d3.pointer(event, canvas.node());
|
||||||
|
|
||||||
var d = {};
|
var d = {};
|
||||||
if (originalPosition[0] < position[0]) {
|
if (originalPosition[0] < position[0]) {
|
||||||
|
|
@ -587,10 +613,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// update the selection box
|
// update the selection box
|
||||||
selectionBox.attrs(d);
|
selectionBox
|
||||||
|
.attr('width', d.width)
|
||||||
|
.attr('height', d.height)
|
||||||
|
.attr('x', d.x)
|
||||||
|
.attr('y', d.y);
|
||||||
|
|
||||||
// prevent further propagation (to parents)
|
// prevent further propagation (to parents)
|
||||||
d3.event.stopPropagation();
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -673,10 +703,12 @@
|
||||||
'height': canvasHeight + 'px',
|
'height': canvasHeight + 'px',
|
||||||
'bottom': bottom + 'px'
|
'bottom': bottom + 'px'
|
||||||
});
|
});
|
||||||
svg.attrs({
|
d3Helpers.multiAttr(
|
||||||
'height': canvasContainer.height(),
|
svg,
|
||||||
'width': $(window).width()
|
{
|
||||||
});
|
'height': canvasContainer.height(),
|
||||||
|
'width': $(window).width()
|
||||||
|
});
|
||||||
|
|
||||||
//breadcrumbs
|
//breadcrumbs
|
||||||
nfNgBridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'});
|
nfNgBridge.injector.get('breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'});
|
||||||
|
|
@ -1166,16 +1198,16 @@
|
||||||
// hide the context menu
|
// hide the context menu
|
||||||
nfContextMenu.hide();
|
nfContextMenu.hide();
|
||||||
})
|
})
|
||||||
.on('zoom', function () {
|
.on('zoom', function (event) {
|
||||||
// update the current translation and scale
|
// update the current translation and scale
|
||||||
if (!isNaN(d3.event.transform.x)) {
|
if (!isNaN(event.transform.x)) {
|
||||||
x = d3.event.transform.x;
|
x = event.transform.x;
|
||||||
}
|
}
|
||||||
if (!isNaN(d3.event.transform.y)) {
|
if (!isNaN(event.transform.y)) {
|
||||||
y = d3.event.transform.y;
|
y = event.transform.y;
|
||||||
}
|
}
|
||||||
if (!isNaN(d3.event.transform.k)) {
|
if (!isNaN(event.transform.k)) {
|
||||||
k = d3.event.transform.k;
|
k = event.transform.k;
|
||||||
}
|
}
|
||||||
|
|
||||||
// indicate that we are panning to prevent deselection in zoom.end below
|
// indicate that we are panning to prevent deselection in zoom.end below
|
||||||
|
|
@ -1184,13 +1216,13 @@
|
||||||
// refresh the canvas
|
// refresh the canvas
|
||||||
refreshed = nfCanvas.View.refresh({
|
refreshed = nfCanvas.View.refresh({
|
||||||
persist: false,
|
persist: false,
|
||||||
transition: shouldTransition(d3.event.sourceEvent),
|
transition: shouldTransition(event.sourceEvent),
|
||||||
refreshComponents: false,
|
refreshComponents: false,
|
||||||
refreshBirdseye: false
|
refreshBirdseye: false
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.on('end', function () {
|
.on('end', function (event) {
|
||||||
if (!isBirdseyeEvent(d3.event.sourceEvent)) {
|
if (!isBirdseyeEvent(event.sourceEvent)) {
|
||||||
// ensure the canvas was actually refreshed
|
// ensure the canvas was actually refreshed
|
||||||
if (nfCommon.isDefinedAndNotNull(refreshed)) {
|
if (nfCommon.isDefinedAndNotNull(refreshed)) {
|
||||||
nfGraph.updateVisibility();
|
nfGraph.updateVisibility();
|
||||||
|
|
|
||||||
|
|
@ -96,9 +96,9 @@
|
||||||
*/
|
*/
|
||||||
var resetDialog = function () {
|
var resetDialog = function () {
|
||||||
// clear the versions
|
// clear the versions
|
||||||
var versions = versionMap.keys();
|
var versions = Array.from(versionMap.keys());
|
||||||
$.each(versions, function (_, version) {
|
$.each(versions, function (_, version) {
|
||||||
versionMap.remove(version);
|
versionMap['delete'](version);
|
||||||
});
|
});
|
||||||
|
|
||||||
// clear the service apis
|
// clear the service apis
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
|
|
||||||
return {
|
return {
|
||||||
init: function (settings) {
|
init: function (settings) {
|
||||||
versionMap = d3.map();
|
versionMap = new Map();
|
||||||
nfSettings = settings;
|
nfSettings = settings;
|
||||||
|
|
||||||
// initialize the component version dialog
|
// initialize the component version dialog
|
||||||
|
|
|
||||||
|
|
@ -22,23 +22,26 @@
|
||||||
define(['d3',
|
define(['d3',
|
||||||
'nf.Connection',
|
'nf.Connection',
|
||||||
'nf.ConnectionConfiguration',
|
'nf.ConnectionConfiguration',
|
||||||
'nf.CanvasUtils'],
|
'nf.CanvasUtils',
|
||||||
function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Connectable = factory(d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils));
|
function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils, d3Helpers) {
|
||||||
|
return (nf.Connectable = factory(d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Connectable =
|
module.exports = (nf.Connectable =
|
||||||
factory(require('d3'),
|
factory(require('d3'),
|
||||||
require('nf.Connection'),
|
require('nf.Connection'),
|
||||||
require('nf.ConnectionConfiguration'),
|
require('nf.ConnectionConfiguration'),
|
||||||
require('nf.CanvasUtils')));
|
require('nf.CanvasUtils'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Connectable = factory(root.d3,
|
nf.Connectable = factory(root.d3,
|
||||||
root.nf.Connection,
|
root.nf.Connection,
|
||||||
root.nf.ConnectionConfiguration,
|
root.nf.ConnectionConfiguration,
|
||||||
root.nf.CanvasUtils);
|
root.nf.CanvasUtils,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils) {
|
}(this, function (d3, nfConnection, nfConnectionConfiguration, nfCanvasUtils, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var connect;
|
var connect;
|
||||||
|
|
@ -62,8 +65,8 @@
|
||||||
*
|
*
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
var allowConnection = function () {
|
var allowConnection = function (event) {
|
||||||
return !d3.event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.component-selection').empty();
|
return !event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.component-selection').empty();
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -72,16 +75,16 @@
|
||||||
|
|
||||||
// dragging behavior for the connector
|
// dragging behavior for the connector
|
||||||
connect = d3.drag()
|
connect = d3.drag()
|
||||||
.subject(function (d) {
|
.subject(function (event, d) {
|
||||||
origin = d3.mouse(canvas.node());
|
origin = d3.pointer(event, canvas.node());
|
||||||
return {
|
return {
|
||||||
x: origin[0],
|
x: origin[0],
|
||||||
y: origin[1]
|
y: origin[1]
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
.on('start', function (d) {
|
.on('start', function (event) {
|
||||||
// stop further propagation
|
// stop further propagation
|
||||||
d3.event.sourceEvent.stopPropagation();
|
event.sourceEvent.stopPropagation();
|
||||||
|
|
||||||
// unselect the previous components
|
// unselect the previous components
|
||||||
nfCanvasUtils.getSelection().classed('selected', false);
|
nfCanvasUtils.getSelection().classed('selected', false);
|
||||||
|
|
@ -96,20 +99,22 @@
|
||||||
var sourceData = source.datum();
|
var sourceData = source.datum();
|
||||||
|
|
||||||
// start the drag line and insert it first to keep it on the bottom
|
// start the drag line and insert it first to keep it on the bottom
|
||||||
var position = d3.mouse(canvas.node());
|
const position = d3.pointer(event, canvas.node());
|
||||||
canvas.insert('path', ':first-child')
|
d3Helpers.multiAttr(
|
||||||
.datum({
|
canvas.insert('path', ':first-child')
|
||||||
'sourceId': sourceData.id,
|
.datum({
|
||||||
'sourceWidth': sourceData.dimensions.width,
|
sourceId: sourceData.id,
|
||||||
'x': position[0],
|
sourceWidth: sourceData.dimensions.width / 2,
|
||||||
'y': position[1]
|
x: sourceData.position.x + (sourceData.dimensions.width / 2),
|
||||||
})
|
y: sourceData.position.y + (sourceData.dimensions.height / 2)
|
||||||
.attrs({
|
}),
|
||||||
|
{
|
||||||
'class': 'connector',
|
'class': 'connector',
|
||||||
'd': function (pathDatum) {
|
'd': function (pathDatum) {
|
||||||
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + pathDatum.x + ' ' + pathDatum.y;
|
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + pathDatum.x + ' ' + pathDatum.y;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// updates the location of the connection img
|
// updates the location of the connection img
|
||||||
d3.select(this).attr('transform', function () {
|
d3.select(this).attr('transform', function () {
|
||||||
|
|
@ -119,10 +124,10 @@
|
||||||
// re-append the image to keep it on top
|
// re-append the image to keep it on top
|
||||||
canvas.node().appendChild(this);
|
canvas.node().appendChild(this);
|
||||||
})
|
})
|
||||||
.on('drag', function (d) {
|
.on('drag', function (event) {
|
||||||
// updates the location of the connection img
|
// updates the location of the connection img
|
||||||
d3.select(this).attr('transform', function () {
|
d3.select(this).attr('transform', function () {
|
||||||
return 'translate(' + d3.event.x + ', ' + (d3.event.y + 50) + ')';
|
return 'translate(' + event.x + ', ' + (event.y + 50) + ')';
|
||||||
});
|
});
|
||||||
|
|
||||||
// mark node's connectable if supported
|
// mark node's connectable if supported
|
||||||
|
|
@ -133,7 +138,7 @@
|
||||||
// click and contextmenu events to appear like an attempt to connection the
|
// click and contextmenu events to appear like an attempt to connection the
|
||||||
// component to itself. requiring the mouse to have actually moved before
|
// component to itself. requiring the mouse to have actually moved before
|
||||||
// checking the eligiblity of the destination addresses the issue
|
// checking the eligiblity of the destination addresses the issue
|
||||||
return (Math.abs(origin[0] - d3.event.x) > 10 || Math.abs(origin[1] - d3.event.y) > 10) &&
|
return (Math.abs(origin[0] - event.x) > 10 || Math.abs(origin[1] - event.y) > 10) &&
|
||||||
nfCanvasUtils.isValidConnectionDestination(d3.select(this));
|
nfCanvasUtils.isValidConnectionDestination(d3.select(this));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -170,13 +175,13 @@
|
||||||
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
|
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + d3.event.x + ' ' + d3.event.y;
|
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + event.x + ' ' + event.y;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.on('end', function (d) {
|
.on('end', function (event, d) {
|
||||||
// stop further propagation
|
// stop further propagation
|
||||||
d3.event.sourceEvent.stopPropagation();
|
event.sourceEvent.stopPropagation();
|
||||||
|
|
||||||
// get the add connect img
|
// get the add connect img
|
||||||
var addConnect = d3.select(this);
|
var addConnect = d3.select(this);
|
||||||
|
|
@ -197,7 +202,7 @@
|
||||||
var sourceData = source.datum();
|
var sourceData = source.datum();
|
||||||
|
|
||||||
// get the mouse position relative to the source
|
// get the mouse position relative to the source
|
||||||
var position = d3.mouse(source.node());
|
var position = d3.pointer(event, source.node());
|
||||||
|
|
||||||
// if the position is outside the component, remove the add connect img
|
// if the position is outside the component, remove the add connect img
|
||||||
if (position[0] < 0 || position[0] > sourceData.dimensions.width || position[1] < 0 || position[1] > sourceData.dimensions.height) {
|
if (position[0] < 0 || position[0] > sourceData.dimensions.width || position[1] < 0 || position[1] > sourceData.dimensions.height) {
|
||||||
|
|
@ -243,8 +248,8 @@
|
||||||
activate: function (components) {
|
activate: function (components) {
|
||||||
components
|
components
|
||||||
.classed('connectable', true)
|
.classed('connectable', true)
|
||||||
.on('mouseenter.connectable', function (d) {
|
.on('mouseenter.connectable', function (event, d) {
|
||||||
if (allowConnection()) {
|
if (allowConnection(event)) {
|
||||||
var selection = d3.select(this);
|
var selection = d3.select(this);
|
||||||
|
|
||||||
// ensure the current component supports connection source
|
// ensure the current component supports connection source
|
||||||
|
|
@ -255,17 +260,16 @@
|
||||||
var x = (d.dimensions.width / 2) - 14;
|
var x = (d.dimensions.width / 2) - 14;
|
||||||
var y = (d.dimensions.height / 2) + 14;
|
var y = (d.dimensions.height / 2) + 14;
|
||||||
|
|
||||||
selection.append('text')
|
selection
|
||||||
|
.append('text')
|
||||||
|
.attr('class', 'add-connect')
|
||||||
|
.attr('transform', 'translate(' + x + ', ' + y + ')')
|
||||||
|
.text('\ue834')
|
||||||
.datum({
|
.datum({
|
||||||
origX: x,
|
origX: x,
|
||||||
origY: y
|
origY: y
|
||||||
})
|
})
|
||||||
.call(connect)
|
.call(connect)
|
||||||
.attrs({
|
|
||||||
'class': 'add-connect',
|
|
||||||
'transform': 'translate(' + x + ', ' + y + ')'
|
|
||||||
})
|
|
||||||
.text('\ue834');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -280,8 +284,8 @@
|
||||||
// Using mouseover/out to workaround chrome issue #122746
|
// Using mouseover/out to workaround chrome issue #122746
|
||||||
.on('mouseover.connectable', function () {
|
.on('mouseover.connectable', function () {
|
||||||
// mark that we are hovering when appropriate
|
// mark that we are hovering when appropriate
|
||||||
d3.select(this).classed('hover', function () {
|
d3.select(this).classed('hover', function (event) {
|
||||||
return allowConnection();
|
return allowConnection(event);
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.on('mouseout.connection', function () {
|
.on('mouseout.connection', function () {
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -917,7 +917,7 @@
|
||||||
/**
|
/**
|
||||||
* Shows the context menu.
|
* Shows the context menu.
|
||||||
*/
|
*/
|
||||||
show: function () {
|
show: function (event) {
|
||||||
// hide the menu if currently visible
|
// hide the menu if currently visible
|
||||||
nf.ContextMenu.hide();
|
nf.ContextMenu.hide();
|
||||||
|
|
||||||
|
|
@ -930,7 +930,7 @@
|
||||||
var selection = nfCanvasUtils.getSelection();
|
var selection = nfCanvasUtils.getSelection();
|
||||||
|
|
||||||
// get the location for the context menu
|
// get the location for the context menu
|
||||||
var position = d3.mouse(canvasBody);
|
var position = d3.pointer(event, canvasBody);
|
||||||
|
|
||||||
// determines if the specified menu positioned at x would overflow the available width
|
// determines if the specified menu positioned at x would overflow the available width
|
||||||
var overflowRight = function (x, menu) {
|
var overflowRight = function (x, menu) {
|
||||||
|
|
@ -1104,13 +1104,13 @@
|
||||||
* @param {selection} components The components to enable the context menu for
|
* @param {selection} components The components to enable the context menu for
|
||||||
*/
|
*/
|
||||||
activate: function (components) {
|
activate: function (components) {
|
||||||
components.on('contextmenu.selection', function () {
|
components.on('contextmenu.selection', function (event) {
|
||||||
// get the clicked component to update selection
|
// get the clicked component to update selection
|
||||||
nfContextMenu.show();
|
nfContextMenu.show(event);
|
||||||
|
|
||||||
// stop propagation and prevent default
|
// stop propagation and prevent default
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
d3.event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -829,15 +829,15 @@
|
||||||
* @param {object} controllerService
|
* @param {object} controllerService
|
||||||
*/
|
*/
|
||||||
var getReferencingControllerServiceIds = function (controllerService) {
|
var getReferencingControllerServiceIds = function (controllerService) {
|
||||||
var ids = d3.set();
|
var ids = new Set();
|
||||||
ids.add(controllerService.id);
|
ids.push(controllerService.id);
|
||||||
|
|
||||||
var checkReferencingServices = function (referencingComponents) {
|
var checkReferencingServices = function (referencingComponents) {
|
||||||
$.each(referencingComponents, function (_, referencingComponentEntity) {
|
$.each(referencingComponents, function (_, referencingComponentEntity) {
|
||||||
var referencingComponent = referencingComponentEntity.component;
|
var referencingComponent = referencingComponentEntity.component;
|
||||||
if (referencingComponent.referenceType === 'ControllerService') {
|
if (referencingComponent.referenceType === 'ControllerService') {
|
||||||
// add the id
|
// add the id
|
||||||
ids.add(referencingComponent.id);
|
ids.push(referencingComponent.id);
|
||||||
|
|
||||||
// consider it's referencing components if appropriate
|
// consider it's referencing components if appropriate
|
||||||
if (referencingComponent.referenceCycle === false) {
|
if (referencingComponent.referenceCycle === false) {
|
||||||
|
|
|
||||||
|
|
@ -541,9 +541,9 @@
|
||||||
}).done(function (response) {
|
}).done(function (response) {
|
||||||
var id = 0;
|
var id = 0;
|
||||||
var tags = [];
|
var tags = [];
|
||||||
var groups = d3.set();
|
var groups = new Set();
|
||||||
var restrictedUsage = d3.map();
|
var restrictedUsage = new Map();
|
||||||
var requiredPermissions = d3.map();
|
var requiredPermissions = new Map();
|
||||||
|
|
||||||
// begin the update
|
// begin the update
|
||||||
controllerServiceTypesData.beginUpdate();
|
controllerServiceTypesData.beginUpdate();
|
||||||
|
|
@ -638,7 +638,7 @@
|
||||||
text: 'all groups',
|
text: 'all groups',
|
||||||
value: ''
|
value: ''
|
||||||
}];
|
}];
|
||||||
groups.each(function (group) {
|
groups.forEach(function (group) {
|
||||||
options.push({
|
options.push({
|
||||||
text: group,
|
text: group,
|
||||||
value: group
|
value: group
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
* @param {selection} dragSelection The current drag selection
|
* @param {selection} dragSelection The current drag selection
|
||||||
*/
|
*/
|
||||||
var updateComponentsPosition = function (dragSelection) {
|
var updateComponentsPosition = function (dragSelection) {
|
||||||
var updates = d3.map();
|
var updates = new Map();
|
||||||
|
|
||||||
// determine the drag delta
|
// determine the drag delta
|
||||||
var dragData = dragSelection.datum();
|
var dragData = dragSelection.datum();
|
||||||
|
|
@ -158,11 +158,11 @@
|
||||||
|
|
||||||
// handle component drag events
|
// handle component drag events
|
||||||
drag = d3.drag()
|
drag = d3.drag()
|
||||||
.on('start', function () {
|
.on('start', function (event) {
|
||||||
// stop further propagation
|
// stop further propagation
|
||||||
d3.event.sourceEvent.stopPropagation();
|
event.sourceEvent.stopPropagation();
|
||||||
})
|
})
|
||||||
.on('drag', function () {
|
.on('drag', function (event) {
|
||||||
var dragSelection = d3.select('rect.drag-selection');
|
var dragSelection = d3.select('rect.drag-selection');
|
||||||
|
|
||||||
// lazily create the drag selection box
|
// lazily create the drag selection box
|
||||||
|
|
@ -216,19 +216,19 @@
|
||||||
} else {
|
} else {
|
||||||
// update the position of the drag selection
|
// update the position of the drag selection
|
||||||
// snap align the position unless the user is holding shift
|
// snap align the position unless the user is holding shift
|
||||||
snapEnabled = !d3.event.sourceEvent.shiftKey;
|
snapEnabled = !event.sourceEvent.shiftKey;
|
||||||
dragSelection.attr('x', function (d) {
|
dragSelection.attr('x', function (d) {
|
||||||
d.x += d3.event.dx;
|
d.x += event.dx;
|
||||||
return snapEnabled ? (Math.round(d.x/snapAlignmentPixels) * snapAlignmentPixels) : d.x;
|
return snapEnabled ? (Math.round(d.x/snapAlignmentPixels) * snapAlignmentPixels) : d.x;
|
||||||
}).attr('y', function (d) {
|
}).attr('y', function (d) {
|
||||||
d.y += d3.event.dy;
|
d.y += event.dy;
|
||||||
return snapEnabled ? (Math.round(d.y/snapAlignmentPixels) * snapAlignmentPixels) : d.y;
|
return snapEnabled ? (Math.round(d.y/snapAlignmentPixels) * snapAlignmentPixels) : d.y;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.on('end', function () {
|
.on('end', function (event) {
|
||||||
// stop further propagation
|
// stop further propagation
|
||||||
d3.event.sourceEvent.stopPropagation();
|
event.sourceEvent.stopPropagation();
|
||||||
|
|
||||||
// get the drag selection
|
// get the drag selection
|
||||||
var dragSelection = d3.select('rect.drag-selection');
|
var dragSelection = d3.select('rect.drag-selection');
|
||||||
|
|
@ -362,11 +362,11 @@
|
||||||
* @param updates
|
* @param updates
|
||||||
*/
|
*/
|
||||||
refreshConnections: function (updates) {
|
refreshConnections: function (updates) {
|
||||||
if (updates.size() > 0) {
|
if (updates.size > 0) {
|
||||||
// wait for all updates to complete
|
// wait for all updates to complete
|
||||||
$.when.apply(window, updates.values()).done(function () {
|
$.when.apply(window, Array.from(updates.values())).done(function () {
|
||||||
var dragged = $.makeArray(arguments);
|
var dragged = $.makeArray(arguments);
|
||||||
var connections = d3.set();
|
var connections = new Set();
|
||||||
|
|
||||||
// refresh this component
|
// refresh this component
|
||||||
$.each(dragged, function (_, component) {
|
$.each(dragged, function (_, component) {
|
||||||
|
|
@ -383,7 +383,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// refresh the connections
|
// refresh the connections
|
||||||
connections.each(function (connectionId) {
|
connections.forEach(function (connectionId) {
|
||||||
nfConnection.refresh(connectionId);
|
nfConnection.refresh(connectionId);
|
||||||
});
|
});
|
||||||
}).always(function () {
|
}).always(function () {
|
||||||
|
|
|
||||||
|
|
@ -23,9 +23,10 @@
|
||||||
'd3',
|
'd3',
|
||||||
'nf.Common',
|
'nf.Common',
|
||||||
'nf.Client',
|
'nf.Client',
|
||||||
'nf.CanvasUtils'],
|
'nf.CanvasUtils',
|
||||||
function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Funnel = factory($, d3, nfCommon, nfClient, nfCanvasUtils));
|
function ($, d3, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
|
return (nf.Funnel = factory($, d3, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Funnel =
|
module.exports = (nf.Funnel =
|
||||||
|
|
@ -33,15 +34,17 @@
|
||||||
require('d3'),
|
require('d3'),
|
||||||
require('nf.Common'),
|
require('nf.Common'),
|
||||||
require('nf.Client'),
|
require('nf.Client'),
|
||||||
require('nf.CanvasUtils')));
|
require('nf.CanvasUtils'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Funnel = factory(root.$,
|
nf.Funnel = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
root.nf.Common,
|
root.nf.Common,
|
||||||
root.nf.Client,
|
root.nf.Client,
|
||||||
root.nf.CanvasUtils);
|
root.nf.CanvasUtils,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils) {
|
}(this, function ($, d3, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var nfConnectable;
|
var nfConnectable;
|
||||||
|
|
@ -81,7 +84,7 @@
|
||||||
* Selects the funnel elements against the current funnel map.
|
* Selects the funnel elements against the current funnel map.
|
||||||
*/
|
*/
|
||||||
var select = function () {
|
var select = function () {
|
||||||
return funnelContainer.selectAll('g.funnel').data(funnelMap.values(), function (d) {
|
return funnelContainer.selectAll('g.funnel').data(Array.from(funnelMap.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -98,8 +101,9 @@
|
||||||
return entered;
|
return entered;
|
||||||
}
|
}
|
||||||
|
|
||||||
var funnel = entered.append('g')
|
var funnel = d3Helpers.multiAttr(
|
||||||
.attrs({
|
entered.append('g'),
|
||||||
|
{
|
||||||
'id': function (d) {
|
'id': function (d) {
|
||||||
return 'id-' + d.id;
|
return 'id-' + d.id;
|
||||||
},
|
},
|
||||||
|
|
@ -109,8 +113,9 @@
|
||||||
.call(nfCanvasUtils.position);
|
.call(nfCanvasUtils.position);
|
||||||
|
|
||||||
// funnel border
|
// funnel border
|
||||||
funnel.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
funnel.append('rect'),
|
||||||
|
{
|
||||||
'rx': 2,
|
'rx': 2,
|
||||||
'ry': 2,
|
'ry': 2,
|
||||||
'class': 'border',
|
'class': 'border',
|
||||||
|
|
@ -125,8 +130,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// funnel body
|
// funnel body
|
||||||
funnel.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
funnel.append('rect'),
|
||||||
|
{
|
||||||
'rx': 2,
|
'rx': 2,
|
||||||
'ry': 2,
|
'ry': 2,
|
||||||
'class': 'body',
|
'class': 'body',
|
||||||
|
|
@ -141,8 +147,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// funnel icon
|
// funnel icon
|
||||||
funnel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
funnel.append('text'),
|
||||||
|
{
|
||||||
'class': 'funnel-icon',
|
'class': 'funnel-icon',
|
||||||
'x': 9,
|
'x': 9,
|
||||||
'y': 34
|
'y': 34
|
||||||
|
|
@ -209,13 +216,14 @@
|
||||||
nfSelectable = nfSelectableRef;
|
nfSelectable = nfSelectableRef;
|
||||||
nfContextMenu = nfContextMenuRef;
|
nfContextMenu = nfContextMenuRef;
|
||||||
|
|
||||||
funnelMap = d3.map();
|
funnelMap = new Map();
|
||||||
removedCache = d3.map();
|
removedCache = new Map();
|
||||||
addedCache = d3.map();
|
addedCache = new Map();
|
||||||
|
|
||||||
// create the funnel container
|
// create the funnel container
|
||||||
funnelContainer = d3.select('#canvas').append('g')
|
funnelContainer = d3Helpers.multiAttr(
|
||||||
.attrs({
|
d3.select('#canvas').append('g'),
|
||||||
|
{
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'class': 'funnels'
|
'class': 'funnels'
|
||||||
});
|
});
|
||||||
|
|
@ -294,7 +302,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($.isArray(funnelEntities)) {
|
if ($.isArray(funnelEntities)) {
|
||||||
$.each(funnelMap.keys(), function (_, key) {
|
$.each(Array.from(funnelMap.keys()), function (_, key) {
|
||||||
var currentFunnelEntity = funnelMap.get(key);
|
var currentFunnelEntity = funnelMap.get(key);
|
||||||
var isPresent = $.grep(funnelEntities, function (proposedFunnelEntity) {
|
var isPresent = $.grep(funnelEntities, function (proposedFunnelEntity) {
|
||||||
return proposedFunnelEntity.id === currentFunnelEntity.id;
|
return proposedFunnelEntity.id === currentFunnelEntity.id;
|
||||||
|
|
@ -302,7 +310,7 @@
|
||||||
|
|
||||||
// if the current funnel is not present and was not recently added, remove it
|
// if the current funnel is not present and was not recently added, remove it
|
||||||
if (isPresent.length === 0 && !addedCache.has(key)) {
|
if (isPresent.length === 0 && !addedCache.has(key)) {
|
||||||
funnelMap.remove(key);
|
funnelMap['delete'](key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$.each(funnelEntities, function (_, funnelEntity) {
|
$.each(funnelEntities, function (_, funnelEntity) {
|
||||||
|
|
@ -334,7 +342,7 @@
|
||||||
*/
|
*/
|
||||||
get: function (id) {
|
get: function (id) {
|
||||||
if (nfCommon.isUndefined(id)) {
|
if (nfCommon.isUndefined(id)) {
|
||||||
return funnelMap.values();
|
return Array.from(funnelMap.values());
|
||||||
} else {
|
} else {
|
||||||
return funnelMap.get(id);
|
return funnelMap.get(id);
|
||||||
}
|
}
|
||||||
|
|
@ -393,11 +401,11 @@
|
||||||
if ($.isArray(funnelIds)) {
|
if ($.isArray(funnelIds)) {
|
||||||
$.each(funnelIds, function (_, funnelId) {
|
$.each(funnelIds, function (_, funnelId) {
|
||||||
removedCache.set(funnelId, now);
|
removedCache.set(funnelId, now);
|
||||||
funnelMap.remove(funnelId);
|
funnelMap['delete'](funnelId);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
removedCache.set(funnelIds, now);
|
removedCache.set(funnelIds, now);
|
||||||
funnelMap.remove(funnelIds);
|
funnelMap['delete'](funnelIds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply the selection and handle all removed funnels
|
// apply the selection and handle all removed funnels
|
||||||
|
|
@ -408,7 +416,7 @@
|
||||||
* Removes all processors.
|
* Removes all processors.
|
||||||
*/
|
*/
|
||||||
removeAll: function () {
|
removeAll: function () {
|
||||||
nfFunnel.remove(funnelMap.keys());
|
nfFunnel.remove(Array.from(funnelMap.keys()));
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -418,9 +426,9 @@
|
||||||
*/
|
*/
|
||||||
expireCaches: function (timestamp) {
|
expireCaches: function (timestamp) {
|
||||||
var expire = function (cache) {
|
var expire = function (cache) {
|
||||||
cache.each(function (entryTimestamp, id) {
|
cache.forEach(function (entryTimestamp, id) {
|
||||||
if (timestamp > entryTimestamp) {
|
if (timestamp > entryTimestamp) {
|
||||||
cache.remove(id);
|
cache['delete'](id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,10 @@
|
||||||
'nf.Storage',
|
'nf.Storage',
|
||||||
'nf.Common',
|
'nf.Common',
|
||||||
'nf.Client',
|
'nf.Client',
|
||||||
'nf.CanvasUtils'],
|
'nf.CanvasUtils',
|
||||||
function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Label = factory($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils));
|
function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
|
return (nf.Label = factory($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Label =
|
module.exports = (nf.Label =
|
||||||
|
|
@ -35,16 +36,18 @@
|
||||||
require('nf.Storage'),
|
require('nf.Storage'),
|
||||||
require('nf.Common'),
|
require('nf.Common'),
|
||||||
require('nf.Client'),
|
require('nf.Client'),
|
||||||
require('nf.CanvasUtils')));
|
require('nf.CanvasUtils'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Label = factory(root.$,
|
nf.Label = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
root.nf.Storage,
|
root.nf.Storage,
|
||||||
root.nf.Common,
|
root.nf.Common,
|
||||||
root.nf.Client,
|
root.nf.Client,
|
||||||
root.nf.CanvasUtils);
|
root.nf.CanvasUtils,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils) {
|
}(this, function ($, d3, nfStorage, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var nfConnectable;
|
var nfConnectable;
|
||||||
|
|
@ -100,7 +103,7 @@
|
||||||
* Selects the labels elements against the current label map.
|
* Selects the labels elements against the current label map.
|
||||||
*/
|
*/
|
||||||
var select = function () {
|
var select = function () {
|
||||||
return labelContainer.selectAll('g.label').data(labelMap.values(), function (d) {
|
return labelContainer.selectAll('g.label').data(Array.from(labelMap.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -128,8 +131,9 @@
|
||||||
return entered;
|
return entered;
|
||||||
}
|
}
|
||||||
|
|
||||||
var label = entered.append('g')
|
var label = d3Helpers.multiAttr(
|
||||||
.attrs({
|
entered.append('g'),
|
||||||
|
{
|
||||||
'id': function (d) {
|
'id': function (d) {
|
||||||
return 'id-' + d.id;
|
return 'id-' + d.id;
|
||||||
},
|
},
|
||||||
|
|
@ -139,24 +143,27 @@
|
||||||
.call(nfCanvasUtils.position);
|
.call(nfCanvasUtils.position);
|
||||||
|
|
||||||
// label border
|
// label border
|
||||||
label.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
label.append('rect'),
|
||||||
|
{
|
||||||
'class': 'border',
|
'class': 'border',
|
||||||
'fill': 'transparent',
|
'fill': 'transparent',
|
||||||
'stroke': 'transparent'
|
'stroke': 'transparent'
|
||||||
});
|
});
|
||||||
|
|
||||||
// label
|
// label
|
||||||
label.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
label.append('rect'),
|
||||||
|
{
|
||||||
'class': 'body',
|
'class': 'body',
|
||||||
'filter': 'url(#component-drop-shadow)',
|
'filter': 'url(#component-drop-shadow)',
|
||||||
'stroke-width': 0
|
'stroke-width': 0
|
||||||
});
|
});
|
||||||
|
|
||||||
// label value
|
// label value
|
||||||
label.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
label.append('text'),
|
||||||
|
{
|
||||||
'xml:space': 'preserve',
|
'xml:space': 'preserve',
|
||||||
'font-weight': 'bold',
|
'font-weight': 'bold',
|
||||||
'fill': 'black',
|
'fill': 'black',
|
||||||
|
|
@ -180,8 +187,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// update the border using the configured color
|
// update the border using the configured color
|
||||||
updated.select('rect.border')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
updated.select('rect.border'),
|
||||||
|
{
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -194,8 +202,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// update the body fill using the configured color
|
// update the body fill using the configured color
|
||||||
updated.select('rect.body')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
updated.select('rect.body'),
|
||||||
|
{
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -289,8 +298,9 @@
|
||||||
var points = labelPoint.data(pointData);
|
var points = labelPoint.data(pointData);
|
||||||
|
|
||||||
// create a point for the end
|
// create a point for the end
|
||||||
var pointsEntered = points.enter().append('rect')
|
var pointsEntered = d3Helpers.multiAttr(
|
||||||
.attrs({
|
points.enter().append('rect'),
|
||||||
|
{
|
||||||
'class': 'labelpoint',
|
'class': 'labelpoint',
|
||||||
'width': 10,
|
'width': 10,
|
||||||
'height': 10
|
'height': 10
|
||||||
|
|
@ -346,37 +356,38 @@
|
||||||
nfContextMenu = nfContextMenuRef;
|
nfContextMenu = nfContextMenuRef;
|
||||||
nfQuickSelect = nfQuickSelectRef;
|
nfQuickSelect = nfQuickSelectRef;
|
||||||
|
|
||||||
labelMap = d3.map();
|
labelMap = new Map();
|
||||||
removedCache = d3.map();
|
removedCache = new Map();
|
||||||
addedCache = d3.map();
|
addedCache = new Map();
|
||||||
|
|
||||||
// create the label container
|
// create the label container
|
||||||
labelContainer = d3.select('#canvas').append('g')
|
labelContainer = d3Helpers.multiAttr(
|
||||||
.attrs({
|
d3.select('#canvas').append('g'),
|
||||||
|
{
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'class': 'labels'
|
'class': 'labels'
|
||||||
});
|
});
|
||||||
|
|
||||||
// handle bend point drag events
|
// handle bend point drag events
|
||||||
labelPointDrag = d3.drag()
|
labelPointDrag = d3.drag()
|
||||||
.on('start', function () {
|
.on('start', function (event) {
|
||||||
// stop further propagation
|
// stop further propagation
|
||||||
d3.event.sourceEvent.stopPropagation();
|
event.sourceEvent.stopPropagation();
|
||||||
})
|
})
|
||||||
.on('drag', function () {
|
.on('drag', function (event) {
|
||||||
var label = d3.select(this.parentNode);
|
var label = d3.select(this.parentNode);
|
||||||
var labelData = label.datum();
|
var labelData = label.datum();
|
||||||
|
|
||||||
// update the dimensions and ensure they are still within bounds
|
// update the dimensions and ensure they are still within bounds
|
||||||
// snap between aligned sizes unless the user is holding shift
|
// snap between aligned sizes unless the user is holding shift
|
||||||
snapEnabled = !d3.event.sourceEvent.shiftKey;
|
snapEnabled = !event.sourceEvent.shiftKey;
|
||||||
labelData.dimensions.width = Math.max(MIN_WIDTH, snapEnabled ? (Math.round(d3.event.x/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.x);
|
labelData.dimensions.width = Math.max(MIN_WIDTH, snapEnabled ? (Math.round(event.x/snapAlignmentPixels) * snapAlignmentPixels) : event.x);
|
||||||
labelData.dimensions.height = Math.max(MIN_HEIGHT, snapEnabled ? (Math.round(d3.event.y/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.y);
|
labelData.dimensions.height = Math.max(MIN_HEIGHT, snapEnabled ? (Math.round(event.y/snapAlignmentPixels) * snapAlignmentPixels) : event.y);
|
||||||
|
|
||||||
// redraw this connection
|
// redraw this connection
|
||||||
updateLabels(label);
|
updateLabels(label);
|
||||||
})
|
})
|
||||||
.on('end', function () {
|
.on('end', function (event) {
|
||||||
var label = d3.select(this.parentNode);
|
var label = d3.select(this.parentNode);
|
||||||
var labelData = label.datum();
|
var labelData = label.datum();
|
||||||
|
|
||||||
|
|
@ -437,7 +448,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// stop further propagation
|
// stop further propagation
|
||||||
d3.event.sourceEvent.stopPropagation();
|
event.sourceEvent.stopPropagation();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -513,7 +524,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($.isArray(labelEntities)) {
|
if ($.isArray(labelEntities)) {
|
||||||
$.each(labelMap.keys(), function (_, key) {
|
$.each(Array.from(labelMap.keys()), function (_, key) {
|
||||||
var currentLabelEntity = labelMap.get(key);
|
var currentLabelEntity = labelMap.get(key);
|
||||||
var isPresent = $.grep(labelEntities, function (proposedLabelEntity) {
|
var isPresent = $.grep(labelEntities, function (proposedLabelEntity) {
|
||||||
return proposedLabelEntity.id === currentLabelEntity.id;
|
return proposedLabelEntity.id === currentLabelEntity.id;
|
||||||
|
|
@ -521,7 +532,7 @@
|
||||||
|
|
||||||
// if the current label is not present and was not recently added, remove it
|
// if the current label is not present and was not recently added, remove it
|
||||||
if (isPresent.length === 0 && !addedCache.has(key)) {
|
if (isPresent.length === 0 && !addedCache.has(key)) {
|
||||||
labelMap.remove(key);
|
labelMap['delete'](key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$.each(labelEntities, function (_, labelEntity) {
|
$.each(labelEntities, function (_, labelEntity) {
|
||||||
|
|
@ -553,7 +564,7 @@
|
||||||
*/
|
*/
|
||||||
get: function (id) {
|
get: function (id) {
|
||||||
if (nfCommon.isUndefined(id)) {
|
if (nfCommon.isUndefined(id)) {
|
||||||
return labelMap.values();
|
return Array.from(labelMap.values());
|
||||||
} else {
|
} else {
|
||||||
return labelMap.get(id);
|
return labelMap.get(id);
|
||||||
}
|
}
|
||||||
|
|
@ -612,11 +623,11 @@
|
||||||
if ($.isArray(labelIds)) {
|
if ($.isArray(labelIds)) {
|
||||||
$.each(labelIds, function (_, labelId) {
|
$.each(labelIds, function (_, labelId) {
|
||||||
removedCache.set(labelId, now);
|
removedCache.set(labelId, now);
|
||||||
labelMap.remove(labelId);
|
labelMap['delete'](labelId);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
removedCache.set(labelIds, now);
|
removedCache.set(labelIds, now);
|
||||||
labelMap.remove(labelIds);
|
labelMap['delete'](labelIds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply the selection and handle all removed labels
|
// apply the selection and handle all removed labels
|
||||||
|
|
@ -627,7 +638,7 @@
|
||||||
* Removes all label.
|
* Removes all label.
|
||||||
*/
|
*/
|
||||||
removeAll: function () {
|
removeAll: function () {
|
||||||
nfLabel.remove(labelMap.keys());
|
nfLabel.remove(Array.from(labelMap.keys()));
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -637,9 +648,9 @@
|
||||||
*/
|
*/
|
||||||
expireCaches: function (timestamp) {
|
expireCaches: function (timestamp) {
|
||||||
var expire = function (cache) {
|
var expire = function (cache) {
|
||||||
cache.each(function (entryTimestamp, id) {
|
cache.forEach(function (entryTimestamp, id) {
|
||||||
if (timestamp > entryTimestamp) {
|
if (timestamp > entryTimestamp) {
|
||||||
cache.remove(id);
|
cache['delete'](id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,10 @@
|
||||||
'nf.Connection',
|
'nf.Connection',
|
||||||
'nf.Common',
|
'nf.Common',
|
||||||
'nf.Client',
|
'nf.Client',
|
||||||
'nf.CanvasUtils'],
|
'nf.CanvasUtils',
|
||||||
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Port = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
|
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
|
return (nf.Port = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Port =
|
module.exports = (nf.Port =
|
||||||
|
|
@ -35,16 +36,18 @@
|
||||||
require('nf.Connection'),
|
require('nf.Connection'),
|
||||||
require('nf.Common'),
|
require('nf.Common'),
|
||||||
require('nf.Client'),
|
require('nf.Client'),
|
||||||
require('nf.CanvasUtils')));
|
require('nf.CanvasUtils'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Port = factory(root.$,
|
nf.Port = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
root.nf.Connection,
|
root.nf.Connection,
|
||||||
root.nf.Common,
|
root.nf.Common,
|
||||||
root.nf.Client,
|
root.nf.Client,
|
||||||
root.nf.CanvasUtils);
|
root.nf.CanvasUtils,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
|
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var nfConnectable;
|
var nfConnectable;
|
||||||
|
|
@ -96,7 +99,7 @@
|
||||||
* Selects the port elements against the current port map.
|
* Selects the port elements against the current port map.
|
||||||
*/
|
*/
|
||||||
var select = function () {
|
var select = function () {
|
||||||
return portContainer.selectAll('g.input-port, g.output-port').data(portMap.values(), function (d) {
|
return portContainer.selectAll('g.input-port, g.output-port').data(Array.from(portMap.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -129,8 +132,9 @@
|
||||||
return entered;
|
return entered;
|
||||||
}
|
}
|
||||||
|
|
||||||
var port = entered.append('g')
|
var port = d3Helpers.multiAttr(
|
||||||
.attrs({
|
entered.append('g'),
|
||||||
|
{
|
||||||
'id': function (d) {
|
'id': function (d) {
|
||||||
return 'id-' + d.id;
|
return 'id-' + d.id;
|
||||||
},
|
},
|
||||||
|
|
@ -146,8 +150,9 @@
|
||||||
.call(nfCanvasUtils.position);
|
.call(nfCanvasUtils.position);
|
||||||
|
|
||||||
// port border
|
// port border
|
||||||
port.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
port.append('rect'),
|
||||||
|
{
|
||||||
'class': 'border',
|
'class': 'border',
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
|
|
@ -160,8 +165,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// port body
|
// port body
|
||||||
port.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
port.append('rect'),
|
||||||
|
{
|
||||||
'class': 'body',
|
'class': 'body',
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
|
|
@ -174,8 +180,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// port remote banner
|
// port remote banner
|
||||||
port.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
port.append('rect'),
|
||||||
|
{
|
||||||
'class': 'remote-banner',
|
'class': 'remote-banner',
|
||||||
'width': remotePortDimensions.width,
|
'width': remotePortDimensions.width,
|
||||||
'height': OFFSET_VALUE,
|
'height': OFFSET_VALUE,
|
||||||
|
|
@ -184,8 +191,9 @@
|
||||||
.classed('hidden', isLocalPort);
|
.classed('hidden', isLocalPort);
|
||||||
|
|
||||||
// port icon
|
// port icon
|
||||||
port.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
port.append('text'),
|
||||||
|
{
|
||||||
'class': 'port-icon',
|
'class': 'port-icon',
|
||||||
'x': 10,
|
'x': 10,
|
||||||
'y': offsetY(38)
|
'y': offsetY(38)
|
||||||
|
|
@ -199,8 +207,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// port name
|
// port name
|
||||||
port.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
port.append('text'),
|
||||||
|
{
|
||||||
'x': 70,
|
'x': 70,
|
||||||
'y': offsetY(25),
|
'y': offsetY(25),
|
||||||
'width': 95,
|
'width': 95,
|
||||||
|
|
@ -230,25 +239,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// port border authorization
|
// port border authorization
|
||||||
updated.select('rect.border')
|
d3Helpers.multiAttr(
|
||||||
.classed('unauthorized', function (d) {
|
updated.select('rect.border'),
|
||||||
return d.permissions.canRead === false;
|
{
|
||||||
})
|
|
||||||
.attrs({
|
|
||||||
'height': function(d) {
|
'height': function(d) {
|
||||||
return d.dimensions.height;
|
return d.dimensions.height;
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.classed('unauthorized', function (d) {
|
||||||
|
return d.permissions.canRead === false;
|
||||||
});
|
});
|
||||||
|
|
||||||
// port body authorization
|
// port body authorization
|
||||||
updated.select('rect.body')
|
d3Helpers.multiAttr(
|
||||||
.classed('unauthorized', function (d) {
|
updated.select('rect.body'),
|
||||||
return d.permissions.canRead === false;
|
{
|
||||||
})
|
|
||||||
.attrs({
|
|
||||||
'height': function(d) {
|
'height': function(d) {
|
||||||
return d.dimensions.height;
|
return d.dimensions.height;
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.classed('unauthorized', function (d) {
|
||||||
|
return d.permissions.canRead === false;
|
||||||
});
|
});
|
||||||
|
|
||||||
updated.each(function (portData) {
|
updated.each(function (portData) {
|
||||||
|
|
@ -265,8 +276,9 @@
|
||||||
details = port.append('g').attr('class', 'port-details');
|
details = port.append('g').attr('class', 'port-details');
|
||||||
|
|
||||||
// port transmitting icon
|
// port transmitting icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'port-transmission-icon',
|
'class': 'port-transmission-icon',
|
||||||
'x': 10,
|
'x': 10,
|
||||||
'y': 18
|
'y': 18
|
||||||
|
|
@ -274,8 +286,9 @@
|
||||||
.classed('hidden', isLocalPort);
|
.classed('hidden', isLocalPort);
|
||||||
|
|
||||||
// bulletin background
|
// bulletin background
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'class': 'bulletin-background',
|
'class': 'bulletin-background',
|
||||||
'x': remotePortDimensions.width - OFFSET_VALUE,
|
'x': remotePortDimensions.width - OFFSET_VALUE,
|
||||||
'width': OFFSET_VALUE,
|
'width': OFFSET_VALUE,
|
||||||
|
|
@ -284,8 +297,9 @@
|
||||||
.classed('hidden', isLocalPort);
|
.classed('hidden', isLocalPort);
|
||||||
|
|
||||||
// bulletin icon
|
// bulletin icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'bulletin-icon',
|
'class': 'bulletin-icon',
|
||||||
'x': remotePortDimensions.width - 18,
|
'x': remotePortDimensions.width - 18,
|
||||||
'y': 18
|
'y': 18
|
||||||
|
|
@ -294,8 +308,9 @@
|
||||||
.classed('hidden', isLocalPort);
|
.classed('hidden', isLocalPort);
|
||||||
|
|
||||||
// run status icon
|
// run status icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'run-status-icon',
|
'class': 'run-status-icon',
|
||||||
'x': 50,
|
'x': 50,
|
||||||
'y': offsetY(25)
|
'y': offsetY(25)
|
||||||
|
|
@ -305,8 +320,9 @@
|
||||||
// comments
|
// comments
|
||||||
// --------
|
// --------
|
||||||
|
|
||||||
details.append('path')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('path'),
|
||||||
|
{
|
||||||
'class': 'component-comments',
|
'class': 'component-comments',
|
||||||
'transform': 'translate(' + (portData.dimensions.width - 2) + ', ' + (portData.dimensions.height - 10) + ')',
|
'transform': 'translate(' + (portData.dimensions.width - 2) + ', ' + (portData.dimensions.height - 10) + ')',
|
||||||
'd': 'm0,0 l0,8 l-8,0 z'
|
'd': 'm0,0 l0,8 l-8,0 z'
|
||||||
|
|
@ -317,16 +333,18 @@
|
||||||
// -------------------
|
// -------------------
|
||||||
|
|
||||||
// active thread count
|
// active thread count
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'active-thread-count-icon',
|
'class': 'active-thread-count-icon',
|
||||||
'y': offsetY(43)
|
'y': offsetY(43)
|
||||||
})
|
})
|
||||||
.text('\ue83f');
|
.text('\ue83f');
|
||||||
|
|
||||||
// active thread icon
|
// active thread icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'active-thread-count',
|
'class': 'active-thread-count',
|
||||||
'y': offsetY(43)
|
'y': offsetY(43)
|
||||||
});
|
});
|
||||||
|
|
@ -338,8 +356,9 @@
|
||||||
port.select('rect.remote-banner')
|
port.select('rect.remote-banner')
|
||||||
.classed('hidden', isLocalPort);
|
.classed('hidden', isLocalPort);
|
||||||
|
|
||||||
port.select('text.port-icon')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
port.select('text.port-icon'),
|
||||||
|
{
|
||||||
'y': offsetY(38)
|
'y': offsetY(38)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -353,7 +372,8 @@
|
||||||
.classed('hidden', isLocalPort);
|
.classed('hidden', isLocalPort);
|
||||||
|
|
||||||
// update the port name
|
// update the port name
|
||||||
port.select('text.port-name')
|
d3Helpers.multiAttr(
|
||||||
|
port.select('text.port-name')
|
||||||
.each(function (d) {
|
.each(function (d) {
|
||||||
var portName = d3.select(this);
|
var portName = d3.select(this);
|
||||||
var name = d.component.name;
|
var name = d.component.name;
|
||||||
|
|
@ -369,7 +389,7 @@
|
||||||
} else {
|
} else {
|
||||||
nfCanvasUtils.multilineEllipsis(portName, 2, name, 'port-name');
|
nfCanvasUtils.multilineEllipsis(portName, 2, name, 'port-name');
|
||||||
}
|
}
|
||||||
}).attrs({
|
}), {
|
||||||
'y': offsetY(25)
|
'y': offsetY(25)
|
||||||
}).append('title').text(function (d) {
|
}).append('title').text(function (d) {
|
||||||
return d.component.name;
|
return d.component.name;
|
||||||
|
|
@ -464,8 +484,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// update the run status
|
// update the run status
|
||||||
updated.select('text.run-status-icon')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
updated.select('text.run-status-icon'),
|
||||||
|
{
|
||||||
'fill': function (d) {
|
'fill': function (d) {
|
||||||
var fill = '#728e9b';
|
var fill = '#728e9b';
|
||||||
|
|
||||||
|
|
@ -536,8 +557,9 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
updated.select('text.port-transmission-icon')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
updated.select('text.port-transmission-icon'),
|
||||||
|
{
|
||||||
'font-family': function (d) {
|
'font-family': function (d) {
|
||||||
if (d.status.transmitting === true) {
|
if (d.status.transmitting === true) {
|
||||||
return 'FontAwesome';
|
return 'FontAwesome';
|
||||||
|
|
@ -641,13 +663,14 @@
|
||||||
nfContextMenu = nfContextMenuRef;
|
nfContextMenu = nfContextMenuRef;
|
||||||
nfQuickSelect = nfQuickSelectRef;
|
nfQuickSelect = nfQuickSelectRef;
|
||||||
|
|
||||||
portMap = d3.map();
|
portMap = new Map();
|
||||||
removedCache = d3.map();
|
removedCache = new Map();
|
||||||
addedCache = d3.map();
|
addedCache = new Map();
|
||||||
|
|
||||||
// create the port container
|
// create the port container
|
||||||
portContainer = d3.select('#canvas').append('g')
|
portContainer = d3Helpers.multiAttr(
|
||||||
.attrs({
|
d3.select('#canvas').append('g'),
|
||||||
|
{
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'class': 'ports'
|
'class': 'ports'
|
||||||
});
|
});
|
||||||
|
|
@ -734,7 +757,7 @@
|
||||||
|
|
||||||
// determine how to handle the specified port status
|
// determine how to handle the specified port status
|
||||||
if ($.isArray(portEntities)) {
|
if ($.isArray(portEntities)) {
|
||||||
$.each(portMap.keys(), function (_, key) {
|
$.each(Array.from(portMap.keys()), function (_, key) {
|
||||||
var currentPortEntity = portMap.get(key);
|
var currentPortEntity = portMap.get(key);
|
||||||
var isPresent = $.grep(portEntities, function (proposedPortEntity) {
|
var isPresent = $.grep(portEntities, function (proposedPortEntity) {
|
||||||
return proposedPortEntity.id === currentPortEntity.id;
|
return proposedPortEntity.id === currentPortEntity.id;
|
||||||
|
|
@ -742,7 +765,7 @@
|
||||||
|
|
||||||
// if the current port is not present and was not recently added, remove it
|
// if the current port is not present and was not recently added, remove it
|
||||||
if (isPresent.length === 0 && !addedCache.has(key)) {
|
if (isPresent.length === 0 && !addedCache.has(key)) {
|
||||||
portMap.remove(key);
|
portMap['delete'](key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$.each(portEntities, function (_, portNode) {
|
$.each(portEntities, function (_, portNode) {
|
||||||
|
|
@ -774,7 +797,7 @@
|
||||||
*/
|
*/
|
||||||
get: function (id) {
|
get: function (id) {
|
||||||
if (nfCommon.isUndefined(id)) {
|
if (nfCommon.isUndefined(id)) {
|
||||||
return portMap.values();
|
return Array.from(portMap.values());
|
||||||
} else {
|
} else {
|
||||||
return portMap.get(id);
|
return portMap.get(id);
|
||||||
}
|
}
|
||||||
|
|
@ -840,11 +863,11 @@
|
||||||
if ($.isArray(portIds)) {
|
if ($.isArray(portIds)) {
|
||||||
$.each(portIds, function (_, portId) {
|
$.each(portIds, function (_, portId) {
|
||||||
removedCache.set(portId, now);
|
removedCache.set(portId, now);
|
||||||
portMap.remove(portId);
|
portMap['delete'](portId);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
removedCache.set(portIds, now);
|
removedCache.set(portIds, now);
|
||||||
portMap.remove(portIds);
|
portMap['delete'](portIds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply the selection and handle all removed ports
|
// apply the selection and handle all removed ports
|
||||||
|
|
@ -855,7 +878,7 @@
|
||||||
* Removes all ports..
|
* Removes all ports..
|
||||||
*/
|
*/
|
||||||
removeAll: function () {
|
removeAll: function () {
|
||||||
nfPort.remove(portMap.keys());
|
nfPort.remove(Array.from(portMap.keys()));
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -865,9 +888,9 @@
|
||||||
*/
|
*/
|
||||||
expireCaches: function (timestamp) {
|
expireCaches: function (timestamp) {
|
||||||
var expire = function (cache) {
|
var expire = function (cache) {
|
||||||
cache.each(function (entryTimestamp, id) {
|
cache.forEach(function (entryTimestamp, id) {
|
||||||
if (timestamp > entryTimestamp) {
|
if (timestamp > entryTimestamp) {
|
||||||
cache.remove(id);
|
cache['delete'](id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -24,9 +24,10 @@
|
||||||
'nf.Common',
|
'nf.Common',
|
||||||
'nf.Client',
|
'nf.Client',
|
||||||
'nf.ClusterSummary',
|
'nf.ClusterSummary',
|
||||||
'nf.CanvasUtils'],
|
'nf.CanvasUtils',
|
||||||
function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.Processor = factory($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils));
|
function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils, d3Helpers) {
|
||||||
|
return (nf.Processor = factory($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.Processor =
|
module.exports = (nf.Processor =
|
||||||
|
|
@ -35,16 +36,18 @@
|
||||||
require('nf.Common'),
|
require('nf.Common'),
|
||||||
require('nf.Client'),
|
require('nf.Client'),
|
||||||
require('nf.ClusterSummary'),
|
require('nf.ClusterSummary'),
|
||||||
require('nf.CanvasUtils')));
|
require('nf.CanvasUtils'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.Processor = factory(root.$,
|
nf.Processor = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
root.nf.Common,
|
root.nf.Common,
|
||||||
root.nf.Client,
|
root.nf.Client,
|
||||||
root.nf.ClusterSummary,
|
root.nf.ClusterSummary,
|
||||||
root.nf.CanvasUtils);
|
root.nf.CanvasUtils,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils) {
|
}(this, function ($, d3, nfCommon, nfClient, nfClusterSummary, nfCanvasUtils, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var nfConnectable;
|
var nfConnectable;
|
||||||
|
|
@ -88,7 +91,7 @@
|
||||||
* Selects the processor elements against the current processor map.
|
* Selects the processor elements against the current processor map.
|
||||||
*/
|
*/
|
||||||
var select = function () {
|
var select = function () {
|
||||||
return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) {
|
return processorContainer.selectAll('g.processor').data(Array.from(processorMap.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -105,8 +108,9 @@
|
||||||
return entered;
|
return entered;
|
||||||
}
|
}
|
||||||
|
|
||||||
var processor = entered.append('g')
|
var processor = d3Helpers.multiAttr(
|
||||||
.attrs({
|
entered.append('g'),
|
||||||
|
{
|
||||||
'id': function (d) {
|
'id': function (d) {
|
||||||
return 'id-' + d.id;
|
return 'id-' + d.id;
|
||||||
},
|
},
|
||||||
|
|
@ -116,8 +120,9 @@
|
||||||
.call(nfCanvasUtils.position);
|
.call(nfCanvasUtils.position);
|
||||||
|
|
||||||
// processor border
|
// processor border
|
||||||
processor.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('rect'),
|
||||||
|
{
|
||||||
'class': 'border',
|
'class': 'border',
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
|
|
@ -130,8 +135,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// processor body
|
// processor body
|
||||||
processor.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('rect'),
|
||||||
|
{
|
||||||
'class': 'body',
|
'class': 'body',
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
|
|
@ -144,8 +150,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// processor name
|
// processor name
|
||||||
processor.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('text'),
|
||||||
|
{
|
||||||
'x': 75,
|
'x': 75,
|
||||||
'y': 18,
|
'y': 18,
|
||||||
'width': 230,
|
'width': 230,
|
||||||
|
|
@ -154,8 +161,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// processor icon container
|
// processor icon container
|
||||||
processor.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('rect'),
|
||||||
|
{
|
||||||
'x': 0,
|
'x': 0,
|
||||||
'y': 0,
|
'y': 0,
|
||||||
'width': 50,
|
'width': 50,
|
||||||
|
|
@ -164,8 +172,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// processor icon
|
// processor icon
|
||||||
processor.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('text'),
|
||||||
|
{
|
||||||
'x': 9,
|
'x': 9,
|
||||||
'y': 35,
|
'y': 35,
|
||||||
'class': 'processor-icon'
|
'class': 'processor-icon'
|
||||||
|
|
@ -173,8 +182,9 @@
|
||||||
.text('\ue807');
|
.text('\ue807');
|
||||||
|
|
||||||
// restricted icon background
|
// restricted icon background
|
||||||
processor.append('circle')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('circle'),
|
||||||
|
{
|
||||||
'r': 9,
|
'r': 9,
|
||||||
'cx': 12,
|
'cx': 12,
|
||||||
'cy': 12,
|
'cy': 12,
|
||||||
|
|
@ -182,8 +192,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// restricted icon
|
// restricted icon
|
||||||
processor.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('text'),
|
||||||
|
{
|
||||||
'x': 7.75,
|
'x': 7.75,
|
||||||
'y': 17,
|
'y': 17,
|
||||||
'class': 'restricted'
|
'class': 'restricted'
|
||||||
|
|
@ -191,8 +202,9 @@
|
||||||
.text('\uf132');
|
.text('\uf132');
|
||||||
|
|
||||||
// is primary icon background
|
// is primary icon background
|
||||||
processor.append('circle')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('circle'),
|
||||||
|
{
|
||||||
'r': 9,
|
'r': 9,
|
||||||
'cx': 38,
|
'cx': 38,
|
||||||
'cy': 36,
|
'cy': 36,
|
||||||
|
|
@ -200,16 +212,17 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// is primary icon
|
// is primary icon
|
||||||
processor.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processor.append('text'),
|
||||||
|
{
|
||||||
'x': 34.75,
|
'x': 34.75,
|
||||||
'y': 40,
|
'y': 40,
|
||||||
'class': 'is-primary'
|
'class': 'is-primary'
|
||||||
})
|
})
|
||||||
.text('P')
|
.text('P')
|
||||||
.append('title').text(function (d) {
|
.append('title').text(function (d) {
|
||||||
return 'This component is only scheduled to execute on the Primary Node';
|
return 'This component is only scheduled to execute on the Primary Node';
|
||||||
});
|
});
|
||||||
|
|
||||||
// make processors selectable
|
// make processors selectable
|
||||||
processor.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
|
processor.call(nfSelectable.activate).call(nfContextMenu.activate).call(nfQuickSelect.activate);
|
||||||
|
|
@ -255,8 +268,9 @@
|
||||||
details = processor.append('g').attr('class', 'processor-canvas-details');
|
details = processor.append('g').attr('class', 'processor-canvas-details');
|
||||||
|
|
||||||
// run status icon
|
// run status icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'run-status-icon',
|
'class': 'run-status-icon',
|
||||||
'x': 55,
|
'x': 55,
|
||||||
'y': 23,
|
'y': 23,
|
||||||
|
|
@ -265,8 +279,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// processor type
|
// processor type
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'processor-type',
|
'class': 'processor-type',
|
||||||
'x': 75,
|
'x': 75,
|
||||||
'y': 32,
|
'y': 32,
|
||||||
|
|
@ -275,8 +290,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// processor type
|
// processor type
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'processor-bundle',
|
'class': 'processor-bundle',
|
||||||
'x': 75,
|
'x': 75,
|
||||||
'y': 45,
|
'y': 45,
|
||||||
|
|
@ -291,8 +307,9 @@
|
||||||
// draw the processor statistics table
|
// draw the processor statistics table
|
||||||
|
|
||||||
// in
|
// in
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -303,8 +320,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// border
|
// border
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -315,8 +333,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// read/write
|
// read/write
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -327,8 +346,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// border
|
// border
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -339,8 +359,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// out
|
// out
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -351,8 +372,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// border
|
// border
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -363,8 +385,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// tasks/time
|
// tasks/time
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return processorData.dimensions.width;
|
return processorData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -375,14 +398,16 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// stats label container
|
// stats label container
|
||||||
var processorStatsLabel = details.append('g')
|
var processorStatsLabel = d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('g'),
|
||||||
|
{
|
||||||
'transform': 'translate(10, 55)'
|
'transform': 'translate(10, 55)'
|
||||||
});
|
});
|
||||||
|
|
||||||
// in label
|
// in label
|
||||||
processorStatsLabel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsLabel.append('text'),
|
||||||
|
{
|
||||||
'width': 73,
|
'width': 73,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 9,
|
'y': 9,
|
||||||
|
|
@ -391,8 +416,9 @@
|
||||||
.text('In');
|
.text('In');
|
||||||
|
|
||||||
// read/write label
|
// read/write label
|
||||||
processorStatsLabel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsLabel.append('text'),
|
||||||
|
{
|
||||||
'width': 73,
|
'width': 73,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 27,
|
'y': 27,
|
||||||
|
|
@ -401,8 +427,9 @@
|
||||||
.text('Read/Write');
|
.text('Read/Write');
|
||||||
|
|
||||||
// out label
|
// out label
|
||||||
processorStatsLabel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsLabel.append('text'),
|
||||||
|
{
|
||||||
'width': 73,
|
'width': 73,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 46,
|
'y': 46,
|
||||||
|
|
@ -411,8 +438,9 @@
|
||||||
.text('Out');
|
.text('Out');
|
||||||
|
|
||||||
// tasks/time label
|
// tasks/time label
|
||||||
processorStatsLabel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsLabel.append('text'),
|
||||||
|
{
|
||||||
'width': 73,
|
'width': 73,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 65,
|
'y': 65,
|
||||||
|
|
@ -421,14 +449,16 @@
|
||||||
.text('Tasks/Time');
|
.text('Tasks/Time');
|
||||||
|
|
||||||
// stats value container
|
// stats value container
|
||||||
var processorStatsValue = details.append('g')
|
var processorStatsValue = d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('g'),
|
||||||
|
{
|
||||||
'transform': 'translate(85, 55)'
|
'transform': 'translate(85, 55)'
|
||||||
});
|
});
|
||||||
|
|
||||||
// in value
|
// in value
|
||||||
var inText = processorStatsValue.append('text')
|
var inText = d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsValue.append('text'),
|
||||||
|
{
|
||||||
'width': 180,
|
'width': 180,
|
||||||
'height': 9,
|
'height': 9,
|
||||||
'y': 9,
|
'y': 9,
|
||||||
|
|
@ -436,20 +466,23 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// in count
|
// in count
|
||||||
inText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
inText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'count'
|
'class': 'count'
|
||||||
});
|
});
|
||||||
|
|
||||||
// in size
|
// in size
|
||||||
inText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
inText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'size'
|
'class': 'size'
|
||||||
});
|
});
|
||||||
|
|
||||||
// read/write value
|
// read/write value
|
||||||
processorStatsValue.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsValue.append('text'),
|
||||||
|
{
|
||||||
'width': 180,
|
'width': 180,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 27,
|
'y': 27,
|
||||||
|
|
@ -457,8 +490,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// out value
|
// out value
|
||||||
var outText = processorStatsValue.append('text')
|
var outText = d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsValue.append('text'),
|
||||||
|
{
|
||||||
'width': 180,
|
'width': 180,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 46,
|
'y': 46,
|
||||||
|
|
@ -466,20 +500,23 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// out count
|
// out count
|
||||||
outText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
outText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'count'
|
'class': 'count'
|
||||||
});
|
});
|
||||||
|
|
||||||
// out size
|
// out size
|
||||||
outText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
outText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'size'
|
'class': 'size'
|
||||||
});
|
});
|
||||||
|
|
||||||
// tasks/time value
|
// tasks/time value
|
||||||
processorStatsValue.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsValue.append('text'),
|
||||||
|
{
|
||||||
'width': 180,
|
'width': 180,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 65,
|
'y': 65,
|
||||||
|
|
@ -491,8 +528,9 @@
|
||||||
.attr('transform', 'translate(305, 55)');
|
.attr('transform', 'translate(305, 55)');
|
||||||
|
|
||||||
// in info
|
// in info
|
||||||
processorStatsInfo.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsInfo.append('text'),
|
||||||
|
{
|
||||||
'width': 25,
|
'width': 25,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 9,
|
'y': 9,
|
||||||
|
|
@ -501,8 +539,9 @@
|
||||||
.text('5 min');
|
.text('5 min');
|
||||||
|
|
||||||
// read/write info
|
// read/write info
|
||||||
processorStatsInfo.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsInfo.append('text'),
|
||||||
|
{
|
||||||
'width': 25,
|
'width': 25,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 27,
|
'y': 27,
|
||||||
|
|
@ -511,8 +550,9 @@
|
||||||
.text('5 min');
|
.text('5 min');
|
||||||
|
|
||||||
// out info
|
// out info
|
||||||
processorStatsInfo.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsInfo.append('text'),
|
||||||
|
{
|
||||||
'width': 25,
|
'width': 25,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 46,
|
'y': 46,
|
||||||
|
|
@ -521,8 +561,9 @@
|
||||||
.text('5 min');
|
.text('5 min');
|
||||||
|
|
||||||
// tasks/time info
|
// tasks/time info
|
||||||
processorStatsInfo.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processorStatsInfo.append('text'),
|
||||||
|
{
|
||||||
'width': 25,
|
'width': 25,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'y': 65,
|
'y': 65,
|
||||||
|
|
@ -534,8 +575,9 @@
|
||||||
// comments
|
// comments
|
||||||
// --------
|
// --------
|
||||||
|
|
||||||
details.append('path')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('path'),
|
||||||
|
{
|
||||||
'class': 'component-comments',
|
'class': 'component-comments',
|
||||||
'transform': 'translate(' + (processorData.dimensions.width - 2) + ', ' + (processorData.dimensions.height - 10) + ')',
|
'transform': 'translate(' + (processorData.dimensions.width - 2) + ', ' + (processorData.dimensions.height - 10) + ')',
|
||||||
'd': 'm0,0 l0,8 l-8,0 z'
|
'd': 'm0,0 l0,8 l-8,0 z'
|
||||||
|
|
@ -546,16 +588,18 @@
|
||||||
// -------------------
|
// -------------------
|
||||||
|
|
||||||
// active thread count
|
// active thread count
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'active-thread-count-icon',
|
'class': 'active-thread-count-icon',
|
||||||
'y': 46
|
'y': 46
|
||||||
})
|
})
|
||||||
.text('\ue83f');
|
.text('\ue83f');
|
||||||
|
|
||||||
// active thread background
|
// active thread background
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'active-thread-count',
|
'class': 'active-thread-count',
|
||||||
'y': 46
|
'y': 46
|
||||||
});
|
});
|
||||||
|
|
@ -565,8 +609,9 @@
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
// bulletin background
|
// bulletin background
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'class': 'bulletin-background',
|
'class': 'bulletin-background',
|
||||||
'x': function (d) {
|
'x': function (d) {
|
||||||
return processorData.dimensions.width - 24;
|
return processorData.dimensions.width - 24;
|
||||||
|
|
@ -576,8 +621,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// bulletin icon
|
// bulletin icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'bulletin-icon',
|
'class': 'bulletin-icon',
|
||||||
'x': function (d) {
|
'x': function (d) {
|
||||||
return processorData.dimensions.width - 17;
|
return processorData.dimensions.width - 17;
|
||||||
|
|
@ -599,8 +645,8 @@
|
||||||
// apply ellipsis to the processor name as necessary
|
// apply ellipsis to the processor name as necessary
|
||||||
nfCanvasUtils.ellipsis(processorName, d.component.name, 'processor-name');
|
nfCanvasUtils.ellipsis(processorName, d.component.name, 'processor-name');
|
||||||
}).append('title').text(function (d) {
|
}).append('title').text(function (d) {
|
||||||
return d.component.name;
|
return d.component.name;
|
||||||
});
|
});
|
||||||
|
|
||||||
// update the processor type
|
// update the processor type
|
||||||
processor.select('text.processor-type')
|
processor.select('text.processor-type')
|
||||||
|
|
@ -613,8 +659,8 @@
|
||||||
// apply ellipsis to the processor type as necessary
|
// apply ellipsis to the processor type as necessary
|
||||||
nfCanvasUtils.ellipsis(processorType, nfCommon.formatType(d.component), 'processor-type');
|
nfCanvasUtils.ellipsis(processorType, nfCommon.formatType(d.component), 'processor-type');
|
||||||
}).append('title').text(function (d) {
|
}).append('title').text(function (d) {
|
||||||
return nfCommon.formatType(d.component);
|
return nfCommon.formatType(d.component);
|
||||||
});
|
});
|
||||||
|
|
||||||
// update the processor bundle
|
// update the processor bundle
|
||||||
processor.select('text.processor-bundle')
|
processor.select('text.processor-bundle')
|
||||||
|
|
@ -627,8 +673,8 @@
|
||||||
// apply ellipsis to the processor type as necessary
|
// apply ellipsis to the processor type as necessary
|
||||||
nfCanvasUtils.ellipsis(processorBundle, nfCommon.formatBundle(d.component.bundle), 'processor-bundle');
|
nfCanvasUtils.ellipsis(processorBundle, nfCommon.formatBundle(d.component.bundle), 'processor-bundle');
|
||||||
}).append('title').text(function (d) {
|
}).append('title').text(function (d) {
|
||||||
return nfCommon.formatBundle(d.component.bundle);
|
return nfCommon.formatBundle(d.component.bundle);
|
||||||
});
|
});
|
||||||
|
|
||||||
// update the processor comments
|
// update the processor comments
|
||||||
processor.select('path.component-comments')
|
processor.select('path.component-comments')
|
||||||
|
|
@ -837,8 +883,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// update the run status
|
// update the run status
|
||||||
updated.select('text.run-status-icon')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
updated.select('text.run-status-icon'),
|
||||||
|
{
|
||||||
'fill': function (d) {
|
'fill': function (d) {
|
||||||
var fill = '#728e9b';
|
var fill = '#728e9b';
|
||||||
|
|
||||||
|
|
@ -1013,13 +1060,14 @@
|
||||||
nfContextMenu = nfContextMenuRef;
|
nfContextMenu = nfContextMenuRef;
|
||||||
nfQuickSelect = nfQuickSelectRef;
|
nfQuickSelect = nfQuickSelectRef;
|
||||||
|
|
||||||
processorMap = d3.map();
|
processorMap = new Map();
|
||||||
removedCache = d3.map();
|
removedCache = new Map();
|
||||||
addedCache = d3.map();
|
addedCache = new Map();
|
||||||
|
|
||||||
// create the processor container
|
// create the processor container
|
||||||
processorContainer = d3.select('#canvas').append('g')
|
processorContainer = d3Helpers.multiAttr(
|
||||||
.attrs({
|
d3.select('#canvas').append('g'),
|
||||||
|
{
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'class': 'processors'
|
'class': 'processors'
|
||||||
});
|
});
|
||||||
|
|
@ -1099,7 +1147,7 @@
|
||||||
|
|
||||||
// determine how to handle the specified processor
|
// determine how to handle the specified processor
|
||||||
if ($.isArray(processorEntities)) {
|
if ($.isArray(processorEntities)) {
|
||||||
$.each(processorMap.keys(), function (_, key) {
|
$.each(Array.from(processorMap.keys()), function (_, key) {
|
||||||
var currentProcessorEntity = processorMap.get(key);
|
var currentProcessorEntity = processorMap.get(key);
|
||||||
var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
|
var isPresent = $.grep(processorEntities, function (proposedProcessorEntity) {
|
||||||
return proposedProcessorEntity.id === currentProcessorEntity.id;
|
return proposedProcessorEntity.id === currentProcessorEntity.id;
|
||||||
|
|
@ -1107,7 +1155,7 @@
|
||||||
|
|
||||||
// if the current processor is not present and was not recently added, remove it
|
// if the current processor is not present and was not recently added, remove it
|
||||||
if (isPresent.length === 0 && !addedCache.has(key)) {
|
if (isPresent.length === 0 && !addedCache.has(key)) {
|
||||||
processorMap.remove(key);
|
processorMap['delete'](key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$.each(processorEntities, function (_, processorEntity) {
|
$.each(processorEntities, function (_, processorEntity) {
|
||||||
|
|
@ -1140,7 +1188,7 @@
|
||||||
*/
|
*/
|
||||||
get: function (id) {
|
get: function (id) {
|
||||||
if (nfCommon.isUndefined(id)) {
|
if (nfCommon.isUndefined(id)) {
|
||||||
return processorMap.values();
|
return Array.from(processorMap.values());
|
||||||
} else {
|
} else {
|
||||||
return processorMap.get(id);
|
return processorMap.get(id);
|
||||||
}
|
}
|
||||||
|
|
@ -1206,11 +1254,11 @@
|
||||||
if ($.isArray(processorIds)) {
|
if ($.isArray(processorIds)) {
|
||||||
$.each(processorIds, function (_, processorId) {
|
$.each(processorIds, function (_, processorId) {
|
||||||
removedCache.set(processorId, now);
|
removedCache.set(processorId, now);
|
||||||
processorMap.remove(processorId);
|
processorMap['delete'](processorId);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
removedCache.set(processorIds, now);
|
removedCache.set(processorIds, now);
|
||||||
processorMap.remove(processorIds);
|
processorMap['delete'](processorIds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply the selection and handle all removed processors
|
// apply the selection and handle all removed processors
|
||||||
|
|
@ -1221,7 +1269,7 @@
|
||||||
* Removes all processors.
|
* Removes all processors.
|
||||||
*/
|
*/
|
||||||
removeAll: function () {
|
removeAll: function () {
|
||||||
nfProcessor.remove(processorMap.keys());
|
nfProcessor.remove(Array.from(processorMap.keys()));
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -1231,9 +1279,9 @@
|
||||||
*/
|
*/
|
||||||
expireCaches: function (timestamp) {
|
expireCaches: function (timestamp) {
|
||||||
var expire = function (cache) {
|
var expire = function (cache) {
|
||||||
cache.each(function (entryTimestamp, id) {
|
cache.forEach(function (entryTimestamp, id) {
|
||||||
if (timestamp > entryTimestamp) {
|
if (timestamp > entryTimestamp) {
|
||||||
cache.remove(id);
|
cache['delete'](id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
/**
|
/**
|
||||||
* Attempts to show configuration or details dialog for the specified slection.
|
* Attempts to show configuration or details dialog for the specified slection.
|
||||||
*/
|
*/
|
||||||
quickSelect: function () {
|
quickSelect: function (event) {
|
||||||
var selection = nfCanvasUtils.getSelection();
|
var selection = nfCanvasUtils.getSelection();
|
||||||
|
|
||||||
if (nfCanvasUtils.isConfigurable(selection)) {
|
if (nfCanvasUtils.isConfigurable(selection)) {
|
||||||
|
|
@ -61,8 +61,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// stop propagation and prevent default
|
// stop propagation and prevent default
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
d3.event.stopPropagation();
|
event.stopPropagation();
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -71,9 +71,9 @@
|
||||||
* @param {selection} components
|
* @param {selection} components
|
||||||
*/
|
*/
|
||||||
activate: function (components) {
|
activate: function (components) {
|
||||||
components.on('dblclick', function () {
|
components.on('dblclick', function (event) {
|
||||||
// get the clicked component to update selection
|
// get the clicked component to update selection
|
||||||
nfQuickSelect.quickSelect();
|
nfQuickSelect.quickSelect(event);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,10 @@
|
||||||
'nf.Connection',
|
'nf.Connection',
|
||||||
'nf.Common',
|
'nf.Common',
|
||||||
'nf.Client',
|
'nf.Client',
|
||||||
'nf.CanvasUtils'],
|
'nf.CanvasUtils',
|
||||||
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
|
'nf.ng.D3Helpers'],
|
||||||
return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils));
|
function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
|
return (nf.RemoteProcessGroup = factory($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers));
|
||||||
});
|
});
|
||||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||||
module.exports = (nf.RemoteProcessGroup =
|
module.exports = (nf.RemoteProcessGroup =
|
||||||
|
|
@ -35,16 +36,18 @@
|
||||||
require('nf.Connection'),
|
require('nf.Connection'),
|
||||||
require('nf.Common'),
|
require('nf.Common'),
|
||||||
require('nf.Client'),
|
require('nf.Client'),
|
||||||
require('nf.CanvasUtils')));
|
require('nf.CanvasUtils'),
|
||||||
|
require('nf.ng.D3Helpers')));
|
||||||
} else {
|
} else {
|
||||||
nf.RemoteProcessGroup = factory(root.$,
|
nf.RemoteProcessGroup = factory(root.$,
|
||||||
root.d3,
|
root.d3,
|
||||||
root.nf.Connection,
|
root.nf.Connection,
|
||||||
root.nf.Common,
|
root.nf.Common,
|
||||||
root.nf.Client,
|
root.nf.Client,
|
||||||
root.nf.CanvasUtils);
|
root.nf.CanvasUtils,
|
||||||
|
root.nf.ng.D3Helpers);
|
||||||
}
|
}
|
||||||
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils) {
|
}(this, function ($, d3, nfConnection, nfCommon, nfClient, nfCanvasUtils, d3Helpers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var nfConnectable;
|
var nfConnectable;
|
||||||
|
|
@ -87,7 +90,7 @@
|
||||||
* Selects the remote process group elements against the current remote process group map.
|
* Selects the remote process group elements against the current remote process group map.
|
||||||
*/
|
*/
|
||||||
var select = function () {
|
var select = function () {
|
||||||
return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) {
|
return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(Array.from(remoteProcessGroupMap.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -104,8 +107,9 @@
|
||||||
return entered;
|
return entered;
|
||||||
}
|
}
|
||||||
|
|
||||||
var remoteProcessGroup = entered.append('g')
|
var remoteProcessGroup = d3Helpers.multiAttr(
|
||||||
.attrs({
|
entered.append('g'),
|
||||||
|
{
|
||||||
'id': function (d) {
|
'id': function (d) {
|
||||||
return 'id-' + d.id;
|
return 'id-' + d.id;
|
||||||
},
|
},
|
||||||
|
|
@ -119,8 +123,9 @@
|
||||||
// ----
|
// ----
|
||||||
|
|
||||||
// remote process group border
|
// remote process group border
|
||||||
remoteProcessGroup.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroup.append('rect'),
|
||||||
|
{
|
||||||
'class': 'border',
|
'class': 'border',
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
|
|
@ -133,8 +138,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// remote process group body
|
// remote process group body
|
||||||
remoteProcessGroup.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroup.append('rect'),
|
||||||
|
{
|
||||||
'class': 'body',
|
'class': 'body',
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
|
|
@ -147,8 +153,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// remote process group name background
|
// remote process group name background
|
||||||
remoteProcessGroup.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroup.append('rect'),
|
||||||
|
{
|
||||||
'width': function (d) {
|
'width': function (d) {
|
||||||
return d.dimensions.width;
|
return d.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -157,8 +164,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// remote process group name
|
// remote process group name
|
||||||
remoteProcessGroup.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroup.append('text'),
|
||||||
|
{
|
||||||
'x': 30,
|
'x': 30,
|
||||||
'y': 20,
|
'y': 20,
|
||||||
'width': 305,
|
'width': 305,
|
||||||
|
|
@ -207,8 +215,9 @@
|
||||||
details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
|
details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details');
|
||||||
|
|
||||||
// remote process group transmission status
|
// remote process group transmission status
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'remote-process-group-transmission-status',
|
'class': 'remote-process-group-transmission-status',
|
||||||
'x': 10,
|
'x': 10,
|
||||||
'y': 20
|
'y': 20
|
||||||
|
|
@ -218,8 +227,9 @@
|
||||||
// details background
|
// details background
|
||||||
// ------------------
|
// ------------------
|
||||||
|
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'x': 0,
|
'x': 0,
|
||||||
'y': 32,
|
'y': 32,
|
||||||
'width': function () {
|
'width': function () {
|
||||||
|
|
@ -234,16 +244,18 @@
|
||||||
// -------
|
// -------
|
||||||
|
|
||||||
// remote process group secure transfer
|
// remote process group secure transfer
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'remote-process-group-transmission-secure',
|
'class': 'remote-process-group-transmission-secure',
|
||||||
'x': 10,
|
'x': 10,
|
||||||
'y': 48
|
'y': 48
|
||||||
});
|
});
|
||||||
|
|
||||||
// remote process group uri
|
// remote process group uri
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'x': 30,
|
'x': 30,
|
||||||
'y': 48,
|
'y': 48,
|
||||||
'width': 305,
|
'width': 305,
|
||||||
|
|
@ -256,8 +268,9 @@
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
// sent
|
// sent
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return remoteProcessGroupData.dimensions.width;
|
return remoteProcessGroupData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -268,8 +281,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// border
|
// border
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return remoteProcessGroupData.dimensions.width;
|
return remoteProcessGroupData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -280,8 +294,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// received
|
// received
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'width': function () {
|
'width': function () {
|
||||||
return remoteProcessGroupData.dimensions.width;
|
return remoteProcessGroupData.dimensions.width;
|
||||||
},
|
},
|
||||||
|
|
@ -296,14 +311,16 @@
|
||||||
// -----
|
// -----
|
||||||
|
|
||||||
// stats label container
|
// stats label container
|
||||||
var remoteProcessGroupStatsLabel = details.append('g')
|
var remoteProcessGroupStatsLabel = d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('g'),
|
||||||
|
{
|
||||||
'transform': 'translate(6, 75)'
|
'transform': 'translate(6, 75)'
|
||||||
});
|
});
|
||||||
|
|
||||||
// sent label
|
// sent label
|
||||||
remoteProcessGroupStatsLabel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroupStatsLabel.append('text'),
|
||||||
|
{
|
||||||
'width': 73,
|
'width': 73,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'x': 4,
|
'x': 4,
|
||||||
|
|
@ -313,8 +330,9 @@
|
||||||
.text('Sent');
|
.text('Sent');
|
||||||
|
|
||||||
// received label
|
// received label
|
||||||
remoteProcessGroupStatsLabel.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroupStatsLabel.append('text'),
|
||||||
|
{
|
||||||
'width': 73,
|
'width': 73,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'x': 4,
|
'x': 4,
|
||||||
|
|
@ -324,14 +342,16 @@
|
||||||
.text('Received');
|
.text('Received');
|
||||||
|
|
||||||
// stats value container
|
// stats value container
|
||||||
var remoteProcessGroupStatsValue = details.append('g')
|
var remoteProcessGroupStatsValue = d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('g'),
|
||||||
|
{
|
||||||
'transform': 'translate(95, 75)'
|
'transform': 'translate(95, 75)'
|
||||||
});
|
});
|
||||||
|
|
||||||
// sent value
|
// sent value
|
||||||
var sentText = remoteProcessGroupStatsValue.append('text')
|
var sentText = d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroupStatsValue.append('text'),
|
||||||
|
{
|
||||||
'width': 180,
|
'width': 180,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'x': 4,
|
'x': 4,
|
||||||
|
|
@ -340,26 +360,30 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// sent count
|
// sent count
|
||||||
sentText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
sentText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'count'
|
'class': 'count'
|
||||||
});
|
});
|
||||||
|
|
||||||
// sent size
|
// sent size
|
||||||
sentText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
sentText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'size'
|
'class': 'size'
|
||||||
});
|
});
|
||||||
|
|
||||||
// sent ports
|
// sent ports
|
||||||
sentText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
sentText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'ports'
|
'class': 'ports'
|
||||||
});
|
});
|
||||||
|
|
||||||
// received value
|
// received value
|
||||||
var receivedText = remoteProcessGroupStatsValue.append('text')
|
var receivedText = d3Helpers.multiAttr(
|
||||||
.attrs({
|
remoteProcessGroupStatsValue.append('text'),
|
||||||
|
{
|
||||||
'width': 180,
|
'width': 180,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'x': 4,
|
'x': 4,
|
||||||
|
|
@ -368,32 +392,37 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// received ports
|
// received ports
|
||||||
receivedText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
receivedText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'ports'
|
'class': 'ports'
|
||||||
});
|
});
|
||||||
|
|
||||||
// received count
|
// received count
|
||||||
receivedText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
receivedText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'count'
|
'class': 'count'
|
||||||
});
|
});
|
||||||
|
|
||||||
// received size
|
// received size
|
||||||
receivedText.append('tspan')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
receivedText.append('tspan'),
|
||||||
|
{
|
||||||
'class': 'size'
|
'class': 'size'
|
||||||
});
|
});
|
||||||
|
|
||||||
// stats value container
|
// stats value container
|
||||||
var processGroupStatsInfo = details.append('g')
|
var processGroupStatsInfo = d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('g'),
|
||||||
|
{
|
||||||
'transform': 'translate(335, 75)'
|
'transform': 'translate(335, 75)'
|
||||||
});
|
});
|
||||||
|
|
||||||
// sent info
|
// sent info
|
||||||
processGroupStatsInfo.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processGroupStatsInfo.append('text'),
|
||||||
|
{
|
||||||
'width': 25,
|
'width': 25,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'x': 4,
|
'x': 4,
|
||||||
|
|
@ -403,8 +432,9 @@
|
||||||
.text('5 min');
|
.text('5 min');
|
||||||
|
|
||||||
// received info
|
// received info
|
||||||
processGroupStatsInfo.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
processGroupStatsInfo.append('text'),
|
||||||
|
{
|
||||||
'width': 25,
|
'width': 25,
|
||||||
'height': 10,
|
'height': 10,
|
||||||
'x': 4,
|
'x': 4,
|
||||||
|
|
@ -417,8 +447,9 @@
|
||||||
// last refreshed time
|
// last refreshed time
|
||||||
// -------------------
|
// -------------------
|
||||||
|
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'x': 0,
|
'x': 0,
|
||||||
'y': function () {
|
'y': function () {
|
||||||
return remoteProcessGroupData.dimensions.height - 24;
|
return remoteProcessGroupData.dimensions.height - 24;
|
||||||
|
|
@ -430,8 +461,9 @@
|
||||||
'fill': '#e3e8eb'
|
'fill': '#e3e8eb'
|
||||||
});
|
});
|
||||||
|
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'x': 10,
|
'x': 10,
|
||||||
'y': 168,
|
'y': 168,
|
||||||
'class': 'remote-process-group-last-refresh'
|
'class': 'remote-process-group-last-refresh'
|
||||||
|
|
@ -441,8 +473,9 @@
|
||||||
// comments
|
// comments
|
||||||
// --------
|
// --------
|
||||||
|
|
||||||
details.append('path')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('path'),
|
||||||
|
{
|
||||||
'class': 'component-comments',
|
'class': 'component-comments',
|
||||||
'transform': 'translate(' + (remoteProcessGroupData.dimensions.width - 2) + ', ' + (remoteProcessGroupData.dimensions.height - 10) + ')',
|
'transform': 'translate(' + (remoteProcessGroupData.dimensions.width - 2) + ', ' + (remoteProcessGroupData.dimensions.height - 10) + ')',
|
||||||
'd': 'm0,0 l0,8 l-8,0 z'
|
'd': 'm0,0 l0,8 l-8,0 z'
|
||||||
|
|
@ -453,16 +486,18 @@
|
||||||
// -------------------
|
// -------------------
|
||||||
|
|
||||||
// active thread count
|
// active thread count
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'active-thread-count-icon',
|
'class': 'active-thread-count-icon',
|
||||||
'y': 20
|
'y': 20
|
||||||
})
|
})
|
||||||
.text('\ue83f');
|
.text('\ue83f');
|
||||||
|
|
||||||
// active thread icon
|
// active thread icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'active-thread-count',
|
'class': 'active-thread-count',
|
||||||
'y': 20
|
'y': 20
|
||||||
});
|
});
|
||||||
|
|
@ -472,8 +507,9 @@
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
// bulletin background
|
// bulletin background
|
||||||
details.append('rect')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('rect'),
|
||||||
|
{
|
||||||
'class': 'bulletin-background',
|
'class': 'bulletin-background',
|
||||||
'x': function () {
|
'x': function () {
|
||||||
return remoteProcessGroupData.dimensions.width - 24;
|
return remoteProcessGroupData.dimensions.width - 24;
|
||||||
|
|
@ -484,8 +520,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// bulletin icon
|
// bulletin icon
|
||||||
details.append('text')
|
d3Helpers.multiAttr(
|
||||||
.attrs({
|
details.append('text'),
|
||||||
|
{
|
||||||
'class': 'bulletin-icon',
|
'class': 'bulletin-icon',
|
||||||
'x': function () {
|
'x': function () {
|
||||||
return remoteProcessGroupData.dimensions.width - 17;
|
return remoteProcessGroupData.dimensions.width - 17;
|
||||||
|
|
@ -859,13 +896,14 @@
|
||||||
nfContextMenu = nfContextMenuRef;
|
nfContextMenu = nfContextMenuRef;
|
||||||
nfQuickSelect = nfQuickSelectRef;
|
nfQuickSelect = nfQuickSelectRef;
|
||||||
|
|
||||||
remoteProcessGroupMap = d3.map();
|
remoteProcessGroupMap = new Map();
|
||||||
removedCache = d3.map();
|
removedCache = new Map();
|
||||||
addedCache = d3.map();
|
addedCache = new Map();
|
||||||
|
|
||||||
// create the process group container
|
// create the process group container
|
||||||
remoteProcessGroupContainer = d3.select('#canvas').append('g')
|
remoteProcessGroupContainer = d3Helpers.multiAttr(
|
||||||
.attrs({
|
d3.select('#canvas').append('g'),
|
||||||
|
{
|
||||||
'pointer-events': 'all',
|
'pointer-events': 'all',
|
||||||
'class': 'remote-process-groups'
|
'class': 'remote-process-groups'
|
||||||
});
|
});
|
||||||
|
|
@ -945,7 +983,7 @@
|
||||||
|
|
||||||
// determine how to handle the specified remote process groups
|
// determine how to handle the specified remote process groups
|
||||||
if ($.isArray(remoteProcessGroupEntities)) {
|
if ($.isArray(remoteProcessGroupEntities)) {
|
||||||
$.each(remoteProcessGroupMap.keys(), function (_, key) {
|
$.each(Array.from(remoteProcessGroupMap.keys()), function (_, key) {
|
||||||
var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
|
var currentRemoteProcessGroupEntity = remoteProcessGroupMap.get(key);
|
||||||
var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
|
var isPresent = $.grep(remoteProcessGroupEntities, function (proposedRemoteProcessGroupEntity) {
|
||||||
return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
|
return proposedRemoteProcessGroupEntity.id === currentRemoteProcessGroupEntity.id;
|
||||||
|
|
@ -953,7 +991,7 @@
|
||||||
|
|
||||||
// if the current remote process group is not present and was not recently added, remove it
|
// if the current remote process group is not present and was not recently added, remove it
|
||||||
if (isPresent.length === 0 && !addedCache.has(key)) {
|
if (isPresent.length === 0 && !addedCache.has(key)) {
|
||||||
remoteProcessGroupMap.remove(key);
|
remoteProcessGroupMap['delete'](key);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
|
$.each(remoteProcessGroupEntities, function (_, remoteProcessGroupEntity) {
|
||||||
|
|
@ -985,7 +1023,7 @@
|
||||||
*/
|
*/
|
||||||
get: function (id) {
|
get: function (id) {
|
||||||
if (nfCommon.isUndefined(id)) {
|
if (nfCommon.isUndefined(id)) {
|
||||||
return remoteProcessGroupMap.values();
|
return Array.from(remoteProcessGroupMap.values());
|
||||||
} else {
|
} else {
|
||||||
return remoteProcessGroupMap.get(id);
|
return remoteProcessGroupMap.get(id);
|
||||||
}
|
}
|
||||||
|
|
@ -1059,11 +1097,11 @@
|
||||||
if ($.isArray(remoteProcessGroupIds)) {
|
if ($.isArray(remoteProcessGroupIds)) {
|
||||||
$.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
|
$.each(remoteProcessGroupIds, function (_, remoteProcessGroupId) {
|
||||||
removedCache.set(remoteProcessGroupId, now);
|
removedCache.set(remoteProcessGroupId, now);
|
||||||
remoteProcessGroupMap.remove(remoteProcessGroupId);
|
remoteProcessGroupMap['delete'](remoteProcessGroupId);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
removedCache.set(remoteProcessGroupIds, now);
|
removedCache.set(remoteProcessGroupIds, now);
|
||||||
remoteProcessGroupMap.remove(remoteProcessGroupIds);
|
remoteProcessGroupMap['delete'](remoteProcessGroupIds);
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply the selection and handle all removed remote process groups
|
// apply the selection and handle all removed remote process groups
|
||||||
|
|
@ -1074,7 +1112,7 @@
|
||||||
* Removes all remote process groups.
|
* Removes all remote process groups.
|
||||||
*/
|
*/
|
||||||
removeAll: function () {
|
removeAll: function () {
|
||||||
nfRemoteProcessGroup.remove(remoteProcessGroupMap.keys());
|
nfRemoteProcessGroup.remove(Array.from(remoteProcessGroupMap.keys()));
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -1084,9 +1122,9 @@
|
||||||
*/
|
*/
|
||||||
expireCaches: function (timestamp) {
|
expireCaches: function (timestamp) {
|
||||||
var expire = function (cache) {
|
var expire = function (cache) {
|
||||||
cache.each(function (entryTimestamp, id) {
|
cache.forEach(function (entryTimestamp, id) {
|
||||||
if (timestamp > entryTimestamp) {
|
if (timestamp > entryTimestamp) {
|
||||||
cache.remove(id);
|
cache['delete'](id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -43,14 +43,14 @@
|
||||||
|
|
||||||
var nfSelectable = {
|
var nfSelectable = {
|
||||||
|
|
||||||
select: function (g) {
|
select: function (event, g) {
|
||||||
// hide any context menus as necessary
|
// hide any context menus as necessary
|
||||||
nfContextMenu.hide();
|
nfContextMenu.hide();
|
||||||
|
|
||||||
// only need to update selection if necessary
|
// only need to update selection if necessary
|
||||||
if (!g.classed('selected')) {
|
if (!g.classed('selected')) {
|
||||||
// since we're not appending, deselect everything else
|
// since we're not appending, deselect everything else
|
||||||
if (!d3.event.shiftKey) {
|
if (!event.shiftKey) {
|
||||||
d3.selectAll('g.selected').classed('selected', false);
|
d3.selectAll('g.selected').classed('selected', false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
g.classed('selected', true);
|
g.classed('selected', true);
|
||||||
} else {
|
} else {
|
||||||
// we are currently selected, if shift key the deselect
|
// we are currently selected, if shift key the deselect
|
||||||
if (d3.event.shiftKey) {
|
if (event.shiftKey) {
|
||||||
g.classed('selected', false);
|
g.classed('selected', false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
nfNgBridge.digest();
|
nfNgBridge.digest();
|
||||||
|
|
||||||
// stop propagation
|
// stop propagation
|
||||||
d3.event.stopPropagation();
|
event.stopPropagation();
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -77,9 +77,9 @@
|
||||||
* @param {selection} components
|
* @param {selection} components
|
||||||
*/
|
*/
|
||||||
activate: function (components) {
|
activate: function (components) {
|
||||||
components.on('mousedown.selection', function () {
|
components.on('mousedown.selection', function (event) {
|
||||||
// get the clicked component to update selection
|
// get the clicked component to update selection
|
||||||
nfSelectable.select(d3.select(this));
|
nfSelectable.select(event, d3.select(this));
|
||||||
|
|
||||||
// update URL deep linking params
|
// update URL deep linking params
|
||||||
nfCanvasUtils.setURLParameters();
|
nfCanvasUtils.setURLParameters();
|
||||||
|
|
|
||||||
|
|
@ -960,9 +960,9 @@
|
||||||
}).done(function (response) {
|
}).done(function (response) {
|
||||||
var id = 0;
|
var id = 0;
|
||||||
var tags = [];
|
var tags = [];
|
||||||
var groups = d3.set();
|
var groups = new Set();
|
||||||
var restrictedUsage = d3.map();
|
var restrictedUsage = new Map();
|
||||||
var requiredPermissions = d3.map();
|
var requiredPermissions = new Map();
|
||||||
|
|
||||||
// begin the update
|
// begin the update
|
||||||
reportingTaskTypesData.beginUpdate();
|
reportingTaskTypesData.beginUpdate();
|
||||||
|
|
@ -1056,7 +1056,7 @@
|
||||||
text: 'all groups',
|
text: 'all groups',
|
||||||
value: ''
|
value: ''
|
||||||
}];
|
}];
|
||||||
groups.each(function (group) {
|
groups.forEach(function (group) {
|
||||||
options.push({
|
options.push({
|
||||||
text: group,
|
text: group,
|
||||||
value: group
|
value: group
|
||||||
|
|
@ -1362,9 +1362,9 @@
|
||||||
}).done(function (response) {
|
}).done(function (response) {
|
||||||
var id = 0;
|
var id = 0;
|
||||||
var tags = [];
|
var tags = [];
|
||||||
var groups = d3.set();
|
var groups = new Set();
|
||||||
var restrictedUsage = d3.map();
|
var restrictedUsage = new Map();
|
||||||
var requiredPermissions = d3.map();
|
var requiredPermissions = new Map();
|
||||||
|
|
||||||
// begin the update
|
// begin the update
|
||||||
parameterProviderTypesData.beginUpdate();
|
parameterProviderTypesData.beginUpdate();
|
||||||
|
|
@ -1458,7 +1458,7 @@
|
||||||
text: 'all groups',
|
text: 'all groups',
|
||||||
value: ''
|
value: ''
|
||||||
}];
|
}];
|
||||||
groups.each(function (group) {
|
groups.forEach(function (group) {
|
||||||
options.push({
|
options.push({
|
||||||
text: group,
|
text: group,
|
||||||
value: group
|
value: group
|
||||||
|
|
|
||||||
|
|
@ -356,8 +356,8 @@
|
||||||
|
|
||||||
// add status history details
|
// add status history details
|
||||||
var detailsContainer = buildDetailsContainer('Status History');
|
var detailsContainer = buildDetailsContainer('Status History');
|
||||||
d3.map(statusHistory.details).each(function (value, label) {
|
Object.entries(statusHistory.details).forEach(function(key, value) {
|
||||||
addDetailItem(detailsContainer, label, value);
|
addDetailItem(detailsContainer, key, value);
|
||||||
});
|
});
|
||||||
|
|
||||||
var margin = {
|
var margin = {
|
||||||
|
|
|
||||||
|
|
@ -203,8 +203,8 @@
|
||||||
var maxMillis;
|
var maxMillis;
|
||||||
|
|
||||||
// data lookups
|
// data lookups
|
||||||
var nodeLookup = d3.map();
|
var nodeLookup = new Map();
|
||||||
var linkLookup = d3.map();
|
var linkLookup = new Map();
|
||||||
|
|
||||||
var locateDescendants = function (nodeIds, descendants, depth) {
|
var locateDescendants = function (nodeIds, descendants, depth) {
|
||||||
$.each(nodeIds, function (_, nodeId) {
|
$.each(nodeIds, function (_, nodeId) {
|
||||||
|
|
@ -225,9 +225,9 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
var positionNodes = function (nodeIds, depth, parents, levelDifference) {
|
var positionNodes = function (nodeIds, depth, parents, levelDifference) {
|
||||||
var immediateSet = d3.set(nodeIds);
|
var immediateSet = new Set(nodeIds);
|
||||||
var childSet = d3.set();
|
var childSet = new Set();
|
||||||
var descendantSet = d3.set();
|
var descendantSet = new Set();
|
||||||
|
|
||||||
// locate children
|
// locate children
|
||||||
locateDescendants(nodeIds, childSet, 1);
|
locateDescendants(nodeIds, childSet, 1);
|
||||||
|
|
@ -238,16 +238,16 @@
|
||||||
// push off processing a node until its deepest point
|
// push off processing a node until its deepest point
|
||||||
// by removing any descendants from the immediate nodes.
|
// by removing any descendants from the immediate nodes.
|
||||||
// in this case, a link is panning multiple levels
|
// in this case, a link is panning multiple levels
|
||||||
descendantSet.each(function (d) {
|
descendantSet.forEach(function (d) {
|
||||||
immediateSet.remove(d);
|
immediateSet['delete'](d);
|
||||||
});
|
});
|
||||||
|
|
||||||
// convert the children to an array to ensure consistent
|
// convert the children to an array to ensure consistent
|
||||||
// order when performing index of checks below
|
// order when performing index of checks below
|
||||||
var children = childSet.values().sort(d3.descending);
|
var children = Array.from(childSet.values()).sort(d3.descending);
|
||||||
|
|
||||||
// convert the immediate to allow for sorting below
|
// convert the immediate to allow for sorting below
|
||||||
var immediate = immediateSet.values();
|
var immediate = Array.from(immediateSet.values());
|
||||||
|
|
||||||
// attempt to identify fan in/out cases
|
// attempt to identify fan in/out cases
|
||||||
var nodesWithTwoParents = 0;
|
var nodesWithTwoParents = 0;
|
||||||
|
|
@ -475,10 +475,10 @@
|
||||||
|
|
||||||
var refresh = function (provenanceTableCtrl) {
|
var refresh = function (provenanceTableCtrl) {
|
||||||
// consider all nodes as starting points
|
// consider all nodes as starting points
|
||||||
var startNodes = d3.set(nodeLookup.keys());
|
var startNodes = new Set(Array.from(nodeLookup.keys()));
|
||||||
|
|
||||||
// go through the nodes to reset their outgoing links
|
// go through the nodes to reset their outgoing links
|
||||||
nodeLookup.each(function (node, id) {
|
nodeLookup.forEach(function (node, id) {
|
||||||
node.outgoing = [];
|
node.outgoing = [];
|
||||||
node.incoming = [];
|
node.incoming = [];
|
||||||
|
|
||||||
|
|
@ -493,17 +493,17 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// go through the links in order to compute the new layout
|
// go through the links in order to compute the new layout
|
||||||
linkLookup.each(function (link, id) {
|
linkLookup.forEach(function (link, id) {
|
||||||
// updating the nodes connections
|
// updating the nodes connections
|
||||||
link.source.outgoing.push(link);
|
link.source.outgoing.push(link);
|
||||||
link.target.incoming.push(link);
|
link.target.incoming.push(link);
|
||||||
|
|
||||||
// remove the target from being a potential starting node
|
// remove the target from being a potential starting node
|
||||||
startNodes.remove(link.target.id);
|
startNodes['delete'](link.target.id);
|
||||||
});
|
});
|
||||||
|
|
||||||
// position the nodes
|
// position the nodes
|
||||||
positionNodes(startNodes.values(), 1, [], 50);
|
positionNodes(Array.from(startNodes.values()), 1, [], 50);
|
||||||
|
|
||||||
// update the slider min/max/step values
|
// update the slider min/max/step values
|
||||||
var step = (maxMillis - minMillis) / config.sliderTickCount;
|
var step = (maxMillis - minMillis) / config.sliderTickCount;
|
||||||
|
|
@ -537,9 +537,9 @@
|
||||||
// handle zoom behavior
|
// handle zoom behavior
|
||||||
var lineageZoom = d3.zoom()
|
var lineageZoom = d3.zoom()
|
||||||
.scaleExtent([0.2, 8])
|
.scaleExtent([0.2, 8])
|
||||||
.on('zoom', function () {
|
.on('zoom', function (event) {
|
||||||
d3.select('g.lineage').attr('transform', function () {
|
d3.select('g.lineage').attr('transform', function () {
|
||||||
return 'translate(' + d3.event.transform.x + ', ' + d3.event.transform.y + ') scale(' + d3.event.transform.k + ')';
|
return 'translate(' + event.transform.x + ', ' + event.transform.y + ') scale(' + event.transform.k + ')';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -549,20 +549,20 @@
|
||||||
.attr('height', '100%')
|
.attr('height', '100%')
|
||||||
.call(lineageZoom)
|
.call(lineageZoom)
|
||||||
.on('dblclick.zoom', null)
|
.on('dblclick.zoom', null)
|
||||||
.on('mousedown', function (d) {
|
.on('mousedown', function (event, d) {
|
||||||
// hide the context menu if necessary
|
// hide the context menu if necessary
|
||||||
d3.selectAll('circle.context').classed('context', false);
|
d3.selectAll('circle.context').classed('context', false);
|
||||||
$('#provenance-lineage-context-menu').hide().empty();
|
$('#provenance-lineage-context-menu').hide().empty();
|
||||||
|
|
||||||
// prevents browser from using text cursor
|
// prevents browser from using text cursor
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
})
|
})
|
||||||
.on('contextmenu', function () {
|
.on('contextmenu', function (event) {
|
||||||
var contextMenu = $('#provenance-lineage-context-menu');
|
var contextMenu = $('#provenance-lineage-context-menu');
|
||||||
|
|
||||||
// if there is something to show in the context menu
|
// if there is something to show in the context menu
|
||||||
if (!contextMenu.is(':empty')) {
|
if (!contextMenu.is(':empty')) {
|
||||||
var position = d3.mouse(this);
|
var position = d3.pointer(event, this);
|
||||||
|
|
||||||
// show the context menu
|
// show the context menu
|
||||||
contextMenu.css({
|
contextMenu.css({
|
||||||
|
|
@ -572,41 +572,37 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// prevent the native default context menu
|
// prevent the native default context menu
|
||||||
d3.event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
svg.append('rect')
|
svg.append('rect')
|
||||||
.attrs({
|
.attr('width', '100%')
|
||||||
'width': '100%',
|
.attr('height', '100%')
|
||||||
'height': '100%',
|
.attr('fill', '#f9fafb');
|
||||||
'fill': '#f9fafb'
|
|
||||||
});
|
|
||||||
|
|
||||||
svg.append('defs').selectAll('marker')
|
svg.append('defs').selectAll('marker')
|
||||||
.data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
|
.data(['FLOWFILE', 'FLOWFILE-SELECTED', 'EVENT', 'EVENT-SELECTED'])
|
||||||
.enter().append('marker')
|
.enter().append('marker')
|
||||||
.attrs({
|
.attr('id', function (d) {
|
||||||
'id': function (d) {
|
return d;
|
||||||
return d;
|
})
|
||||||
},
|
.attr('viewBox', '0 -3 6 6')
|
||||||
'viewBox': '0 -3 6 6',
|
.attr('refX', function (d) {
|
||||||
'refX': function (d) {
|
if (d.indexOf('FLOWFILE') >= 0) {
|
||||||
if (d.indexOf('FLOWFILE') >= 0) {
|
return 16;
|
||||||
return 16;
|
} else {
|
||||||
} else {
|
return 11;
|
||||||
return 11;
|
}
|
||||||
}
|
})
|
||||||
},
|
.attr('refY', 0)
|
||||||
'refY': 0,
|
.attr('markerWidth', 6)
|
||||||
'markerWidth': 6,
|
.attr('markerHeight', 6)
|
||||||
'markerHeight': 6,
|
.attr('orient', 'auto')
|
||||||
'orient': 'auto',
|
.attr('fill', function (d) {
|
||||||
'fill': function (d) {
|
if (d.indexOf('SELECTED') >= 0) {
|
||||||
if (d.indexOf('SELECTED') >= 0) {
|
return '#ba554a';
|
||||||
return '#ba554a';
|
} else {
|
||||||
} else {
|
return '#000000';
|
||||||
return '#000000';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.append('path')
|
.append('path')
|
||||||
|
|
@ -614,11 +610,9 @@
|
||||||
|
|
||||||
// group everything together
|
// group everything together
|
||||||
var lineageContainer = svg.append('g')
|
var lineageContainer = svg.append('g')
|
||||||
.attrs({
|
.attr('transform', 'translate(0, 0) scale(1)')
|
||||||
'transform': 'translate(0, 0) scale(1)',
|
.attr('pointer-events', 'all')
|
||||||
'pointer-events': 'all',
|
.attr('class', 'lineage');
|
||||||
'class': 'lineage'
|
|
||||||
});
|
|
||||||
|
|
||||||
// select the nodes and links
|
// select the nodes and links
|
||||||
var nodes = lineageContainer.selectAll('g.node');
|
var nodes = lineageContainer.selectAll('g.node');
|
||||||
|
|
@ -673,19 +667,17 @@
|
||||||
var renderFlowFile = function (flowfiles) {
|
var renderFlowFile = function (flowfiles) {
|
||||||
flowfiles
|
flowfiles
|
||||||
.classed('flowfile', true)
|
.classed('flowfile', true)
|
||||||
.on('mousedown', function (d) {
|
.on('mousedown', function (event, d) {
|
||||||
d3.event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
});
|
||||||
|
|
||||||
// node
|
// node
|
||||||
flowfiles.append('circle')
|
flowfiles.append('circle')
|
||||||
.attrs({
|
.attr('r', 16)
|
||||||
'r': 16,
|
.attr('fill', '#fff')
|
||||||
'fill': '#fff',
|
.attr('stroke', '#000')
|
||||||
'stroke': '#000',
|
.attr('stroke-width', 1.0)
|
||||||
'stroke-width': 1.0
|
.on('mouseover', function (event, d) {
|
||||||
})
|
|
||||||
.on('mouseover', function (d) {
|
|
||||||
links.filter(function (linkDatum) {
|
links.filter(function (linkDatum) {
|
||||||
return d.id === linkDatum.flowFileUuid;
|
return d.id === linkDatum.flowFileUuid;
|
||||||
})
|
})
|
||||||
|
|
@ -694,7 +686,7 @@
|
||||||
return 'url(#' + d.target.type + '-SELECTED)';
|
return 'url(#' + d.target.type + '-SELECTED)';
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.on('mouseout', function (d) {
|
.on('mouseout', function (event, d) {
|
||||||
links.filter(function (linkDatum) {
|
links.filter(function (linkDatum) {
|
||||||
return d.id === linkDatum.flowFileUuid;
|
return d.id === linkDatum.flowFileUuid;
|
||||||
}).classed('selected', false)
|
}).classed('selected', false)
|
||||||
|
|
@ -704,21 +696,17 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
var icon = flowfiles.append('g')
|
var icon = flowfiles.append('g')
|
||||||
.attrs({
|
.attr('class', 'flowfile-icon')
|
||||||
'class': 'flowfile-icon',
|
.attr('transform', function (d) {
|
||||||
'transform': function (d) {
|
return 'translate(-9,-9)';
|
||||||
return 'translate(-9,-9)';
|
|
||||||
}
|
|
||||||
}).append('text')
|
}).append('text')
|
||||||
.attrs({
|
.attr('font-family', 'flowfont')
|
||||||
'font-family': 'flowfont',
|
.attr('font-size', '18px')
|
||||||
'font-size': '18px',
|
.attr('fill', '#ad9897')
|
||||||
'fill': '#ad9897',
|
.attr('transform', function (d) {
|
||||||
'transform': function (d) {
|
return 'translate(0,15)';
|
||||||
return 'translate(0,15)';
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.on('mouseover', function (d) {
|
.on('mouseover', function (event, d) {
|
||||||
links.filter(function (linkDatum) {
|
links.filter(function (linkDatum) {
|
||||||
return d.id === linkDatum.flowFileUuid;
|
return d.id === linkDatum.flowFileUuid;
|
||||||
})
|
})
|
||||||
|
|
@ -727,7 +715,7 @@
|
||||||
return 'url(#' + d.target.type + '-SELECTED)';
|
return 'url(#' + d.target.type + '-SELECTED)';
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.on('mouseout', function (d) {
|
.on('mouseout', function (event, d) {
|
||||||
links.filter(function (linkDatum) {
|
links.filter(function (linkDatum) {
|
||||||
return d.id === linkDatum.flowFileUuid;
|
return d.id === linkDatum.flowFileUuid;
|
||||||
}).classed('selected', false)
|
}).classed('selected', false)
|
||||||
|
|
@ -890,14 +878,14 @@
|
||||||
provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
|
provenanceTableCtrl.getEventDetails(eventId, clusterNodeId).done(function (response) {
|
||||||
var provenanceEvent = response.provenanceEvent;
|
var provenanceEvent = response.provenanceEvent;
|
||||||
var eventUuid = provenanceEvent.flowFileUuid;
|
var eventUuid = provenanceEvent.flowFileUuid;
|
||||||
var eventUuids = d3.set(provenanceEvent.childUuids);
|
var eventUuids = new Set(provenanceEvent.childUuids);
|
||||||
|
|
||||||
// determines if the specified event should be removable based on if the collapsing is fanning in/out
|
// determines if the specified event should be removable based on if the collapsing is fanning in/out
|
||||||
var allowEventRemoval = function (fanIn, node) {
|
var allowEventRemoval = function (fanIn, node) {
|
||||||
if (fanIn) {
|
if (fanIn) {
|
||||||
return node.id !== eventId;
|
return node.id !== eventId;
|
||||||
} else {
|
} else {
|
||||||
return node.flowFileUuid !== eventUuid && $.inArray(eventUuid, node.parentUuids) === -1;
|
return node.flowFileUuid !== eventUuid && $.inArray(Array.from(eventUuid), node.parentUuids) === -1;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -918,11 +906,11 @@
|
||||||
var newUuids = false;
|
var newUuids = false;
|
||||||
|
|
||||||
// consider each node for being collapsed
|
// consider each node for being collapsed
|
||||||
$.each(nodeLookup.values(), function (_, node) {
|
$.each(Array.from(nodeLookup.values()), function (_, node) {
|
||||||
// if this node is in the uuids remove it unless its the original event or is part of this and another lineage
|
// if this node is in the uuids remove it unless its the original event or is part of this and another lineage
|
||||||
if (uuids.has(node.flowFileUuid) && allowEventRemoval(fanIn, node)) {
|
if (uuids.has(node.flowFileUuid) && allowEventRemoval(fanIn, node)) {
|
||||||
// remove it from the look lookup
|
// remove it from the look lookup
|
||||||
nodeLookup.remove(node.id);
|
nodeLookup['delete'](node.id);
|
||||||
|
|
||||||
// include all related outgoing flow file uuids
|
// include all related outgoing flow file uuids
|
||||||
$.each(node.outgoing, function (_, outgoing) {
|
$.each(node.outgoing, function (_, outgoing) {
|
||||||
|
|
@ -935,11 +923,11 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// update the link data
|
// update the link data
|
||||||
$.each(linkLookup.values(), function (_, link) {
|
$.each(Array.from(linkLookup.values()), function (_, link) {
|
||||||
// if this link is in the uuids remove it
|
// if this link is in the uuids remove it
|
||||||
if (uuids.has(link.flowFileUuid) && allowLinkRemoval(fanIn, link)) {
|
if (uuids.has(link.flowFileUuid) && allowLinkRemoval(fanIn, link)) {
|
||||||
// remove it from the link lookup
|
// remove it from the link lookup
|
||||||
linkLookup.remove(link.id);
|
linkLookup['delete'](link.id);
|
||||||
|
|
||||||
// add a related uuid that needs to be collapse
|
// add a related uuid that needs to be collapse
|
||||||
var next = link.target;
|
var next = link.target;
|
||||||
|
|
@ -1002,17 +990,17 @@
|
||||||
// renders event nodes
|
// renders event nodes
|
||||||
var renderEvent = function (events, provenanceTableCtrl) {
|
var renderEvent = function (events, provenanceTableCtrl) {
|
||||||
events
|
events
|
||||||
.on('contextmenu', function (d) {
|
.on('contextmenu', function (event, d) {
|
||||||
// select the current node for a visible cue
|
// select the current node for a visible cue
|
||||||
d3.select('#event-node-' + d.id).classed('context', true);
|
d3.select('#event-node-' + d.id).classed('context', true);
|
||||||
|
|
||||||
// show the context menu
|
// show the context menu
|
||||||
showContextMenu(d, provenanceTableCtrl);
|
showContextMenu(d, provenanceTableCtrl);
|
||||||
})
|
})
|
||||||
.on('mousedown', function (d) {
|
.on('mousedown', function (event, d) {
|
||||||
d3.event.stopPropagation();
|
event.stopPropagation();
|
||||||
})
|
})
|
||||||
.on('dblclick', function (d) {
|
.on('dblclick', function (event, d) {
|
||||||
// show the event details
|
// show the event details
|
||||||
provenanceTableCtrl.showEventDetails(d.id, clusterNodeId);
|
provenanceTableCtrl.showEventDetails(d.id, clusterNodeId);
|
||||||
});
|
});
|
||||||
|
|
@ -1021,15 +1009,13 @@
|
||||||
.classed('event', true)
|
.classed('event', true)
|
||||||
// join node to its label
|
// join node to its label
|
||||||
.append('rect')
|
.append('rect')
|
||||||
.attrs({
|
.attr('x', 0)
|
||||||
'x': 0,
|
.attr('y', -8)
|
||||||
'y': -8,
|
.attr('height', 16)
|
||||||
'height': 16,
|
.attr('width', 1)
|
||||||
'width': 14,
|
.attr('opacity', 0)
|
||||||
'opacity': 0,
|
.attr('id', function (d) {
|
||||||
'id': function (d) {
|
return 'event-filler-' + d.id;
|
||||||
return 'event-filler-' + d.id;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
events
|
events
|
||||||
|
|
@ -1037,24 +1023,20 @@
|
||||||
.classed('selected', function (d) {
|
.classed('selected', function (d) {
|
||||||
return d.id === eventId;
|
return d.id === eventId;
|
||||||
})
|
})
|
||||||
.attrs({
|
.attr('r', 8)
|
||||||
'r': 8,
|
.attr('fill', '#aabbc3')
|
||||||
'fill': '#aabbc3',
|
.attr('stroke', '#000')
|
||||||
'stroke': '#000',
|
.attr('stroke-width', 1.0)
|
||||||
'stroke-width': 1.0,
|
.attr('id', function (d) {
|
||||||
'id': function (d) {
|
return 'event-node-' + d.id;
|
||||||
return 'event-node-' + d.id;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
events
|
events
|
||||||
.append('text')
|
.append('text')
|
||||||
.attrs({
|
.attr('id', function (d) {
|
||||||
'id': function (d) {
|
return 'event-text-' + d.id;
|
||||||
return 'event-text-' + d.id;
|
|
||||||
},
|
|
||||||
'class': 'event-type'
|
|
||||||
})
|
})
|
||||||
|
.attr('class', 'event-type')
|
||||||
.classed('expand-parents', function (d) {
|
.classed('expand-parents', function (d) {
|
||||||
return d.eventType === 'SPAWN';
|
return d.eventType === 'SPAWN';
|
||||||
})
|
})
|
||||||
|
|
@ -1083,10 +1065,9 @@
|
||||||
});
|
});
|
||||||
label.attr('transform', 'translate(10,-14)');
|
label.attr('transform', 'translate(10,-14)');
|
||||||
} else {
|
} else {
|
||||||
label.text(d.eventType).attrs({
|
label.text(d.eventType)
|
||||||
'x': 10,
|
.attr('x', 10)
|
||||||
'y': 4
|
.attr('y', 4);
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -1094,7 +1075,7 @@
|
||||||
// updates the ui
|
// updates the ui
|
||||||
var update = function (provenanceTableCtrl) {
|
var update = function (provenanceTableCtrl) {
|
||||||
// update the node data
|
// update the node data
|
||||||
nodes = nodes.data(nodeLookup.values(), function (d) {
|
nodes = nodes.data(Array.from(nodeLookup.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -1149,7 +1130,7 @@
|
||||||
.style('opacity', 1);
|
.style('opacity', 1);
|
||||||
|
|
||||||
// update the link data
|
// update the link data
|
||||||
links = links.data(linkLookup.values(), function (d) {
|
links = links.data(Array.from(linkLookup.values()), function (d) {
|
||||||
return d.id;
|
return d.id;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -1167,14 +1148,12 @@
|
||||||
// add new links
|
// add new links
|
||||||
var linksEntered = links.enter()
|
var linksEntered = links.enter()
|
||||||
.insert('path', '.node')
|
.insert('path', '.node')
|
||||||
.attrs({
|
.attr('class', 'link')
|
||||||
'class': 'link',
|
.attr('stroke-width', 1.5)
|
||||||
'stroke-width': 1.5,
|
.attr('stroke', '#000')
|
||||||
'stroke': '#000',
|
.attr('fill', 'none')
|
||||||
'fill': 'none',
|
.attr('d', function (d) {
|
||||||
'd': function (d) {
|
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
|
||||||
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.source.x + ',' + d.source.y;
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.style('opacity', 0);
|
.style('opacity', 0);
|
||||||
|
|
||||||
|
|
@ -1186,13 +1165,11 @@
|
||||||
links.transition()
|
links.transition()
|
||||||
.delay(200)
|
.delay(200)
|
||||||
.duration(400)
|
.duration(400)
|
||||||
.attrs({
|
.attr('marker-end', function (d) {
|
||||||
'marker-end': function (d) {
|
return 'url(#' + d.target.type + ')';
|
||||||
return 'url(#' + d.target.type + ')';
|
})
|
||||||
},
|
.attr('d', function (d) {
|
||||||
'd': function (d) {
|
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
|
||||||
return 'M' + d.source.x + ',' + d.source.y + 'L' + d.target.x + ',' + d.target.y;
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.style('opacity', 1);
|
.style('opacity', 1);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue