You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2015/02/12 20:41:38 UTC
[1/2] incubator-nifi git commit: NIFI-347: - Restoring the add
connect image when stopping a drag event while still over the original source
component and inside of where the source will become the destination (self
loop).
Repository: incubator-nifi
Updated Branches:
refs/heads/develop a416dfdb0 -> 851fe298b
NIFI-347:
- Restoring the add connect image when stopping a drag event while still over the original source component and inside of where the source will become the destination (self loop).
Project: http://git-wip-us.apache.org/repos/asf/incubator-nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-nifi/commit/a7eb1b76
Tree: http://git-wip-us.apache.org/repos/asf/incubator-nifi/tree/a7eb1b76
Diff: http://git-wip-us.apache.org/repos/asf/incubator-nifi/diff/a7eb1b76
Branch: refs/heads/develop
Commit: a7eb1b76447ead258973aee0e109db5b2c70ef89
Parents: a416dfd
Author: Matt Gilman <ma...@gmail.com>
Authored: Thu Feb 12 12:33:59 2015 -0500
Committer: Matt Gilman <ma...@gmail.com>
Committed: Thu Feb 12 12:33:59 2015 -0500
----------------------------------------------------------------------
.../main/webapp/js/nf/canvas/nf-connectable.js | 34 +++++++++++++++++---
1 file changed, 30 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/a7eb1b76/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
index 598b2ef..e34c2a2 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
@@ -122,19 +122,41 @@ nf.Connectable = (function () {
// stop further propagation
d3.event.sourceEvent.stopPropagation();
+ // get the add connect img
+ var addConnect = d3.select(this);
+
// get the connector, if it the current point is not over a new destination
// the connector will be removed. otherwise it will be removed after the
// connection has been configured/cancelled
var connector = d3.select('path.connector');
+ var connectorData = connector.datum();
// get the destination
var destination = d3.select('g.connectable-destination');
// we are not over a new destination
if (destination.empty()) {
+ // get the source to determine if we are still over it
+ var source = d3.select('#id-' + connectorData.sourceId);
+ var sourceData = source.datum();
+
+ // get the mouse position relative to the source
+ var position = d3.mouse(source.node());
+
+ // 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) {
+ addConnect.remove();
+ } else {
+ // reset the add connect img by restoring the position and place in the DOM
+ addConnect.classed('dragging', false).attr('transform', function () {
+ return 'translate(' + d.origX + ', ' + d.origY + ')';
+ });
+ source.node().appendChild(this);
+ }
+
+ // remove the connector
connector.remove();
} else {
- var connectorData = connector.datum();
var destinationData = destination.datum();
// if this is a self loop we need to insert some bend points
@@ -148,13 +170,13 @@ nf.Connectable = (function () {
return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
});
}
+
+ // remove the add connect img
+ addConnect.remove();
// create the connection
nf.ConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.component.id);
}
-
- // remove this component
- d3.select(this).remove();
});
},
@@ -173,6 +195,10 @@ nf.Connectable = (function () {
var y = (d.dimensions.height / 2) - 14;
selection.append('image')
+ .datum({
+ origX: x,
+ origY: y
+ })
.call(connect)
.call(nf.CanvasUtils.disableImageHref)
.attr({
[2/2] incubator-nifi git commit: NIFI-347: - Fixing threshold for
self loops. - Drawing preview of self loops while dragging the new
connection. - Addressing all cases when we want to prevent new connection
attempts.
Posted by mc...@apache.org.
NIFI-347:
- Fixing threshold for self loops.
- Drawing preview of self loops while dragging the new connection.
- Addressing all cases when we want to prevent new connection attempts.
Project: http://git-wip-us.apache.org/repos/asf/incubator-nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-nifi/commit/851fe298
Tree: http://git-wip-us.apache.org/repos/asf/incubator-nifi/tree/851fe298
Diff: http://git-wip-us.apache.org/repos/asf/incubator-nifi/diff/851fe298
Branch: refs/heads/develop
Commit: 851fe298b836f19e2f3f0fa890639f070de62d3d
Parents: a7eb1b7
Author: Matt Gilman <ma...@gmail.com>
Authored: Thu Feb 12 14:17:36 2015 -0500
Committer: Matt Gilman <ma...@gmail.com>
Committed: Thu Feb 12 14:17:36 2015 -0500
----------------------------------------------------------------------
.../src/main/webapp/js/nf/canvas/nf-canvas.js | 6 +-
.../main/webapp/js/nf/canvas/nf-connectable.js | 79 +++++++++++---------
2 files changed, 48 insertions(+), 37 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/851fe298/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index f11ec30..2886f21 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -409,10 +409,10 @@ nf.Canvas = (function () {
// update the selection box
selectionBox.attr(d);
+
+ // prevent further propagation (to parents)
+ d3.event.stopPropagation();
}
-
- // prevent further propagation (to parents)
- d3.event.stopPropagation();
}
})
.on('mouseup.selection', function () {
http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/851fe298/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
----------------------------------------------------------------------
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
index e34c2a2..24f0f45 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
@@ -20,6 +20,21 @@ nf.Connectable = (function () {
var canvas;
var origin;
+ /**
+ * Determines if we want to allow adding connections in the current state:
+ *
+ * 1) When shift is down, we could be adding components to the current selection.
+ * 2) When the selection box is visible, we are in the process of moving all the
+ * components currently selected.
+ * 3) When the drag selection box is visible, we are in the process or selecting components
+ * using the selection box.
+ *
+ * @returns {boolean}
+ */
+ var allowConnection = function () {
+ return !d3.event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.selection').empty();
+ };
+
return {
init: function () {
canvas = d3.select('#canvas');
@@ -102,17 +117,27 @@ nf.Connectable = (function () {
}).attr('d', function (pathDatum) {
if (!destination.empty() && destination.classed('connectable-destination')) {
var destinationData = destination.datum();
-
- // get the position on the destination perimeter
- var end = nf.CanvasUtils.getPerimeterPoint(pathDatum, {
- 'x': destinationData.component.position.x,
- 'y': destinationData.component.position.y,
- 'width': destinationData.dimensions.width,
- 'height': destinationData.dimensions.height
- });
-
- // direct line between components to provide a 'snap feel'
- return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
+
+ // show the line preview as appropriate
+ if (pathDatum.sourceId === destinationData.component.id) {
+ var x = pathDatum.x;
+ var y = pathDatum.y;
+ var componentOffset = pathDatum.sourceWidth / 2;
+ var xOffset = nf.Connection.config.selfLoopXOffset;
+ var yOffset = nf.Connection.config.selfLoopYOffset;
+ return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
+ } else {
+ // get the position on the destination perimeter
+ var end = nf.CanvasUtils.getPerimeterPoint(pathDatum, {
+ 'x': destinationData.component.position.x,
+ 'y': destinationData.component.position.y,
+ 'width': destinationData.dimensions.width,
+ 'height': destinationData.dimensions.height
+ });
+
+ // direct line between components to provide a 'snap feel'
+ return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
+ }
} else {
return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + d3.event.x + ' ' + d3.event.y;
}
@@ -157,24 +182,11 @@ nf.Connectable = (function () {
// remove the connector
connector.remove();
} else {
- var destinationData = destination.datum();
-
- // if this is a self loop we need to insert some bend points
- if (connectorData.sourceId === destinationData.component.id) {
- connector.attr('d', function (pathDatum) {
- var x = pathDatum.x;
- var y = pathDatum.y;
- var componentOffset = pathDatum.sourceWidth / 2;
- var xOffset = nf.Connection.config.selfLoopXOffset;
- var yOffset = nf.Connection.config.selfLoopYOffset;
- return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
- });
- }
-
// remove the add connect img
addConnect.remove();
// create the connection
+ var destinationData = destination.datum();
nf.ConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.component.id);
}
});
@@ -183,14 +195,14 @@ nf.Connectable = (function () {
activate: function (components) {
components
.on('mouseenter.connectable', function (d) {
- if (!d3.event.shiftKey && d3.select('rect.drag-selection').empty()) {
+ if (allowConnection()) {
var selection = d3.select(this);
// ensure the current component supports connection source
if (nf.CanvasUtils.isValidConnectionSource(selection)) {
// see if theres already a connector rendered
- var anyConnector = d3.select('image.add-connect');
- if (anyConnector.empty()) {
+ var addConnect = d3.select('image.add-connect');
+ if (addConnect.empty()) {
var x = (d.dimensions.width / 2) - 14;
var y = (d.dimensions.height / 2) - 14;
@@ -214,17 +226,16 @@ nf.Connectable = (function () {
})
.on('mouseleave.connectable', function () {
// conditionally remove the connector
- var connector = d3.select(this).select('image.add-connect');
- if (!connector.empty() && !connector.classed('dragging')) {
- connector.remove();
+ var addConnect = d3.select(this).select('image.add-connect');
+ if (!addConnect.empty() && !addConnect.classed('dragging')) {
+ addConnect.remove();
}
})
// Using mouseover/out to workaround chrome issue #122746
.on('mouseover.connectable', function () {
// mark that we are hovering when appropriate
- var selection = d3.select(this);
- selection.classed('hover', function () {
- return !d3.event.shiftKey && !selection.classed('hover') && d3.select('rect.drag-selection').empty();
+ d3.select(this).classed('hover', function () {
+ return allowConnection();
});
})
.on('mouseout.connection', function () {