Fixed not being able to select a single node

This commit is contained in:
jos 2015-12-30 22:20:15 +01:00
parent e372441542
commit 1fe49e0c39
3 changed files with 79 additions and 39 deletions

View File

@ -6,7 +6,7 @@ https://github.com/josdejong/jsoneditor
## not yet released, version 5.0.0 ## not yet released, version 5.0.0
- Implemented selection of multiple nodes, allowing to move/duplicate/remove - Implemented selection of multiple nodes, allowing to move/duplicate/remove
multiple nodes at once. multiple nodes at once (See #106).
- Implemented a new option `escapeUnicode`, which will show the hexadecimal - Implemented a new option `escapeUnicode`, which will show the hexadecimal
unicode instead of the character itself. (See #93 and #230). unicode instead of the character itself. (See #93 and #230).
- Implemented method `getMode`. - Implemented method `getMode`.

View File

@ -1434,6 +1434,11 @@ Node.onDragEnd = function (nodes, event) {
var firstIndex = parent.childs.indexOf(firstNode); var firstIndex = parent.childs.indexOf(firstNode);
var beforeNode = parent.childs[firstIndex + nodes.length] || parent.append; var beforeNode = parent.childs[firstIndex + nodes.length] || parent.append;
// set focus to the context menu button of the first node
if (nodes[0]) {
nodes[0].dom.menu.focus();
}
var params = { var params = {
nodes: nodes, nodes: nodes,
oldSelection: editor.drag.oldSelection, oldSelection: editor.drag.oldSelection,
@ -1954,9 +1959,8 @@ Node.prototype.onEvent = function (event) {
// focus // focus
// when clicked in whitespace left or right from the field or value, set focus // when clicked in whitespace left or right from the field or value, set focus
var domTree = dom.tree; var domTree = dom.tree;
if (target == domTree.parentNode) { if (target == domTree.parentNode &&
switch (type) { type == 'click' && !event.hasMoved) {
case 'click':
var left = (event.offsetX != undefined) ? var left = (event.offsetX != undefined) ?
(event.offsetX < (this.getLevel() + 1) * 24) : (event.offsetX < (this.getLevel() + 1) * 24) :
(event.pageX < util.getAbsoluteLeft(dom.tdSeparator));// for FF (event.pageX < util.getAbsoluteLeft(dom.tdSeparator));// for FF
@ -1973,19 +1977,14 @@ Node.prototype.onEvent = function (event) {
domValue.focus(); domValue.focus();
} }
} }
break;
}
} }
if ((target == dom.tdExpand && !expandable) || target == dom.tdField || if ((target == dom.tdExpand && !expandable) || target == dom.tdField ||
target == dom.tdSeparator) { target == dom.tdSeparator &&
switch (type) { type == 'click' && !event.hasMoved) {
case 'click':
if (domField) { if (domField) {
util.setEndOfContentEditable(domField); util.setEndOfContentEditable(domField);
domField.focus(); domField.focus();
} }
break;
}
} }
if (type == 'keydown') { if (type == 'keydown') {

View File

@ -641,20 +641,29 @@ treemode._onEvent = function (event) {
domFocus = event.target; domFocus = event.target;
} }
if (event.type == 'mousedown') {
this._startDragDistance(event);
}
if (event.type == 'mousemove' || event.type == 'mouseup' || event.type == 'click') {
this._updateDragDistance(event);
}
var node = Node.getNodeFromTarget(event.target); var node = Node.getNodeFromTarget(event.target);
if (node && node.selected) { if (node && node.selected) {
if (event.type == 'click' && event.target == node.dom.menu) { if (event.type == 'click') {
if (event.target == node.dom.menu) {
this.showContextMenu(event.target); this.showContextMenu(event.target);
// stop propagation // stop propagation (else we will open the context menu of a single node)
return; return;
} }
if (event.type == 'click') {
// deselect a multi selection // deselect a multi selection
if (!event.hasMoved) {
this.deselect(); this.deselect();
} }
}
if (event.type == 'mousedown') { if (event.type == 'mousedown') {
// drag multiple nodes // drag multiple nodes
@ -681,6 +690,30 @@ treemode._onEvent = function (event) {
} }
}; };
treemode._startDragDistance = function (event) {
this.dragDistanceEvent = {
initialTarget: event.target,
initialPageX: event.pageX,
initialPageY: event.pageY,
dragDistance: 0,
hasMoved: false
};
};
treemode._updateDragDistance = function (event) {
var diffX = event.pageX - this.dragDistanceEvent.initialPageX;
var diffY = event.pageY - this.dragDistanceEvent.initialPageY;
this.dragDistanceEvent.dragDistance = Math.sqrt(diffX * diffX + diffY * diffY);
this.dragDistanceEvent.hasMoved =
this.dragDistanceEvent.hasMoved || this.dragDistanceEvent.dragDistance > 10;
event.dragDistance = this.dragDistanceEvent.dragDistance;
event.hasMoved = this.dragDistanceEvent.hasMoved;
return event.dragDistance;
};
/** /**
* Start multi selection of nodes by dragging the mouse * Start multi selection of nodes by dragging the mouse
* @param event * @param event
@ -695,6 +728,8 @@ treemode._onMultiSelectStart = function (event) {
nodes: [] nodes: []
}; };
this._startDragDistance(event);
var editor = this; var editor = this;
if (!this.mousemove) { if (!this.mousemove) {
this.mousemove = util.addEventListener(window, 'mousemove', function (event) { this.mousemove = util.addEventListener(window, 'mousemove', function (event) {
@ -717,6 +752,11 @@ treemode._onMultiSelectStart = function (event) {
treemode._onMultiSelect = function (event) { treemode._onMultiSelect = function (event) {
event.preventDefault(); event.preventDefault();
this._updateDragDistance(event);
if (!event.hasMoved) {
return;
}
var node = Node.getNodeFromTarget(event.target); var node = Node.getNodeFromTarget(event.target);
if (node) { if (node) {
@ -745,8 +785,9 @@ treemode._onMultiSelect = function (event) {
* @private * @private
*/ */
treemode._onMultiSelectEnd = function (event) { treemode._onMultiSelectEnd = function (event) {
if (this.multiselection.end) { // set focus to the context menu button of the first node
this.multiselection.end.dom.menu.focus(); if (this.multiselection.nodes[0]) {
this.multiselection.nodes[0].dom.menu.focus();
} }
this.multiselection.start = null; this.multiselection.start = null;