Browse Source

Implemented multi select nodes in graph using long press

css_transitions
josdejong 11 years ago
parent
commit
430361a491
4 changed files with 128 additions and 42 deletions
  1. +2
    -4
      docs/graph.html
  2. +60
    -16
      src/graph/Graph.js
  3. +60
    -16
      vis.js
  4. +6
    -6
      vis.min.js

+ 2
- 4
docs/graph.html View File

@ -831,10 +831,8 @@ var options = {
<td>selectable</td> <td>selectable</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>If true, nodes in the graph can be selected by clicking them, or
by keeping the <code>Shift</code> key down and dragging a selection area around them.
When the <code>Ctrl</code> key is down, the new selection is appended to the
previous selection. If not, the new selection replaces the previous selection.</td>
<td>If true, nodes in the graph can be selected by clicking them.
Long press can be used to select multiple nodes.</td>
</tr> </tr>
<tr> <tr>

+ 60
- 16
src/graph/Graph.js View File

@ -363,14 +363,45 @@ Graph.prototype._onTouch = function (event) {
* handle drag start event * handle drag start event
* @private * @private
*/ */
Graph.prototype._onDragStart = function (event) {
Graph.prototype._onDragStart = function () {
var drag = this.drag; var drag = this.drag;
drag.translation = this._getTranslation(); drag.translation = this._getTranslation();
// note: drag.pointer is set in _onTouch to get the initial touch location // note: drag.pointer is set in _onTouch to get the initial touch location
drag.nodeId = this._getNodeAt(drag.pointer); drag.nodeId = this._getNodeAt(drag.pointer);
drag.node = this.nodes[drag.nodeId];
// select the clicked node if not yet selected
var node = this.nodes[drag.nodeId];
if (node && !node.isSelected()) {
this._selectNodes([drag.nodeId]);
}
// creat an array with the selected nodes and their original location and status
var me = this;
drag.selection = [];
this.selection.forEach(function (id) {
var node = me.nodes[id];
if (node) {
var s = {
id: id,
node: node,
// store original x, y, xFixed and yFixed, make the node temporarily Fixed
x: node.x,
y: node.y,
xFixed: node.xFixed,
yFixed: node.yFixed
};
node.xFixed = true;
node.yFixed = true;
drag.selection.push(s);
}
});
/* TODO: cleanup
if (drag.node) { if (drag.node) {
this._selectNodes([drag.nodeId]); this._selectNodes([drag.nodeId]);
@ -380,6 +411,7 @@ Graph.prototype._onDragStart = function (event) {
drag.node.xFixed = true; drag.node.xFixed = true;
drag.node.yFixed = true; drag.node.yFixed = true;
} }
*/
}; };
/** /**
@ -393,14 +425,26 @@ Graph.prototype._onDrag = function (event) {
var pointer = this._getPointer(event.gesture.touches[0]); var pointer = this._getPointer(event.gesture.touches[0]);
var drag= this.drag,
node = drag.node;
if (node) {
if (!drag.xFixed)
node.x = this._xToCanvas(pointer.x);
var me = this,
drag = this.drag,
selection = drag.selection;
if (selection && selection.length) {
// calculate delta's and new location
var deltaX = pointer.x - drag.pointer.x,
deltaY = pointer.y - drag.pointer.y;
// update position of all selected nodes
selection.forEach(function (s) {
var node = s.node;
if (!drag.yFixed)
node.y = this._yToCanvas(pointer.y);
if (!s.xFixed) {
node.x = me._xToCanvas(me._canvasToX(s.x) + deltaX);
}
if (!s.yFixed) {
node.y = me._yToCanvas(me._canvasToX(s.y) + deltaY);
}
});
// start animation if not yet running // start animation if not yet running
if (!this.moving) { if (!this.moving) {
@ -427,13 +471,13 @@ Graph.prototype._onDrag = function (event) {
* @private * @private
*/ */
Graph.prototype._onDragEnd = function () { Graph.prototype._onDragEnd = function () {
var drag = this.drag,
node = drag.node;
if (node) {
// restore orginal xFixed and yFixed
node.xFixed = drag.xFixed;
node.yFixed = drag.yFixed;
var selection = this.drag.selection;
if (selection) {
selection.forEach(function (s) {
// restore original xFixed and yFixed
s.node.xFixed = s.xFixed;
s.node.yFixed = s.yFixed;
});
} }
}; };

+ 60
- 16
vis.js View File

@ -13216,14 +13216,45 @@ Graph.prototype._onTouch = function (event) {
* handle drag start event * handle drag start event
* @private * @private
*/ */
Graph.prototype._onDragStart = function (event) {
Graph.prototype._onDragStart = function () {
var drag = this.drag; var drag = this.drag;
drag.translation = this._getTranslation(); drag.translation = this._getTranslation();
// note: drag.pointer is set in _onTouch to get the initial touch location // note: drag.pointer is set in _onTouch to get the initial touch location
drag.nodeId = this._getNodeAt(drag.pointer); drag.nodeId = this._getNodeAt(drag.pointer);
drag.node = this.nodes[drag.nodeId];
// select the clicked node if not yet selected
var node = this.nodes[drag.nodeId];
if (node && !node.isSelected()) {
this._selectNodes([drag.nodeId]);
}
// creat an array with the selected nodes and their original location and status
var me = this;
drag.selection = [];
this.selection.forEach(function (id) {
var node = me.nodes[id];
if (node) {
var s = {
id: id,
node: node,
// store original x, y, xFixed and yFixed, make the node temporarily Fixed
x: node.x,
y: node.y,
xFixed: node.xFixed,
yFixed: node.yFixed
};
node.xFixed = true;
node.yFixed = true;
drag.selection.push(s);
}
});
/* TODO: cleanup
if (drag.node) { if (drag.node) {
this._selectNodes([drag.nodeId]); this._selectNodes([drag.nodeId]);
@ -13233,6 +13264,7 @@ Graph.prototype._onDragStart = function (event) {
drag.node.xFixed = true; drag.node.xFixed = true;
drag.node.yFixed = true; drag.node.yFixed = true;
} }
*/
}; };
/** /**
@ -13246,14 +13278,26 @@ Graph.prototype._onDrag = function (event) {
var pointer = this._getPointer(event.gesture.touches[0]); var pointer = this._getPointer(event.gesture.touches[0]);
var drag= this.drag,
node = drag.node;
if (node) {
if (!drag.xFixed)
node.x = this._xToCanvas(pointer.x);
var me = this,
drag = this.drag,
selection = drag.selection;
if (selection && selection.length) {
// calculate delta's and new location
var deltaX = pointer.x - drag.pointer.x,
deltaY = pointer.y - drag.pointer.y;
if (!drag.yFixed)
node.y = this._yToCanvas(pointer.y);
// update position of all selected nodes
selection.forEach(function (s) {
var node = s.node;
if (!s.xFixed) {
node.x = me._xToCanvas(me._canvasToX(s.x) + deltaX);
}
if (!s.yFixed) {
node.y = me._yToCanvas(me._canvasToX(s.y) + deltaY);
}
});
// start animation if not yet running // start animation if not yet running
if (!this.moving) { if (!this.moving) {
@ -13280,13 +13324,13 @@ Graph.prototype._onDrag = function (event) {
* @private * @private
*/ */
Graph.prototype._onDragEnd = function () { Graph.prototype._onDragEnd = function () {
var drag = this.drag,
node = drag.node;
if (node) {
// restore orginal xFixed and yFixed
node.xFixed = drag.xFixed;
node.yFixed = drag.yFixed;
var selection = this.drag.selection;
if (selection) {
selection.forEach(function (s) {
// restore original xFixed and yFixed
s.node.xFixed = s.xFixed;
s.node.yFixed = s.yFixed;
});
} }
}; };

+ 6
- 6
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save