diff --git a/docs/api.md b/docs/api.md index a5931b2..d1863ba 100644 --- a/docs/api.md +++ b/docs/api.md @@ -209,7 +209,7 @@ Constructs a new JSONEditor. ``` Only applicable when `mode` is 'code' or 'text'. -- `{function} onNodeSelectionChange` +- `{function} onSelectionChange` Set a callback function triggered when Nodes are selected in the JSONEditor. @@ -218,7 +218,7 @@ Constructs a new JSONEditor. /** * @param {Array} nodes selected nodes */ - function onNodeSelectionChange(nodes) { + function onSelectionChange(nodes) { ... } ``` @@ -368,7 +368,7 @@ Set text selection for a range, Only applicable for mode 'text' and 'code'. Position for selection end -#### `JSONEditor.getNodeSelection()` +#### `JSONEditor.getSelection()` Get the current selected nodes, Only applicable for mode 'tree'. @@ -376,7 +376,7 @@ Get the current selected nodes, Only applicable for mode 'tree'. - `{Array} nodes` -#### `JSONEditor.setNodeSelection(node1, node2)` +#### `JSONEditor.setSelection(node1, node2)` Set selection for a range of nodes, Only applicable for mode 'tree'. diff --git a/examples/14_selection_api.html b/examples/14_selection_api.html index 7500166..323b0f1 100644 --- a/examples/14_selection_api.html +++ b/examples/14_selection_api.html @@ -40,8 +40,8 @@ editor.getTextSelection() editor.setTextSelection(startPos,endPos) // tree mode: - editor.getNodeSelection() - editor.setNodeSelection(Node1,Node2) + editor.getSelection() + editor.setSelection(Node1,Node2)

@@ -91,7 +91,7 @@ var textEl = document.getElementById('selectedText'); textEl.innerHTML = text; }, - onNodeSelectionChange: function(nodes) { + onSelectionChange: function(nodes) { var nodesEl = document.getElementById('selectedNodes'); var nodesCountEl = document.getElementById('selectedCount'); nodesCountEl.innerHTML = nodes.length + ' nodes selected'; diff --git a/src/js/History.js b/src/js/History.js index 1a8b0bf..fa4c9e9 100644 --- a/src/js/History.js +++ b/src/js/History.js @@ -214,7 +214,7 @@ History.prototype.undo = function () { if (action && action.undo) { action.undo(obj.params); if (obj.params.oldSelection) { - this.editor.setSelection(obj.params.oldSelection); + this.editor.setDomSelection(obj.params.oldSelection); } } else { @@ -241,7 +241,7 @@ History.prototype.redo = function () { if (action && action.redo) { action.redo(obj.params); if (obj.params.newSelection) { - this.editor.setSelection(obj.params.newSelection); + this.editor.setDomSelection(obj.params.newSelection); } } else { diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index 842fa69..e79bea4 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -44,10 +44,10 @@ var util = require('./util'); * {boolean} sortObjectKeys If true, object keys are * sorted before display. * false by default. - * {function} onNodeSelectionChange Callback method, - * triggered on node selection change - * Only applicable for modes - * 'tree', 'view', and 'form' + * {function} onSelectionChange Callback method, + * triggered on node selection change + * Only applicable for modes + * 'tree', 'view', and 'form' * {function} onTextSelectionChange Callback method, * triggered on text selection change * Only applicable for modes @@ -89,7 +89,7 @@ function JSONEditor (container, options, json) { var VALID_OPTIONS = [ 'ajv', 'schema', 'schemaRefs','templates', 'ace', 'theme','autocomplete', - 'onChange', 'onEditable', 'onError', 'onModeChange', 'onNodeSelectionChange', 'onTextSelectionChange', + 'onChange', 'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange', 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys', 'navigationBar', 'statusBar' ]; diff --git a/src/js/Node.js b/src/js/Node.js index 684949f..21c86c7 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -1164,13 +1164,13 @@ Node.prototype._getDomValue = function(silent) { Node.prototype._onChangeValue = function () { // get current selection, then override the range such that we can select // the added/removed text on undo/redo - var oldSelection = this.editor.getSelection(); + var oldSelection = this.editor.getDomSelection(); if (oldSelection.range) { var undoDiff = util.textDiff(String(this.value), String(this.previousValue)); oldSelection.range.startOffset = undoDiff.start; oldSelection.range.endOffset = undoDiff.end; } - var newSelection = this.editor.getSelection(); + var newSelection = this.editor.getDomSelection(); if (newSelection.range) { var redoDiff = util.textDiff(String(this.previousValue), String(this.value)); newSelection.range.startOffset = redoDiff.start; @@ -1195,13 +1195,13 @@ Node.prototype._onChangeValue = function () { Node.prototype._onChangeField = function () { // get current selection, then override the range such that we can select // the added/removed text on undo/redo - var oldSelection = this.editor.getSelection(); + var oldSelection = this.editor.getDomSelection(); if (oldSelection.range) { var undoDiff = util.textDiff(this.field, this.previousField); oldSelection.range.startOffset = undoDiff.start; oldSelection.range.endOffset = undoDiff.end; } - var newSelection = this.editor.getSelection(); + var newSelection = this.editor.getDomSelection(); if (newSelection.range) { var redoDiff = util.textDiff(this.previousField, this.field); newSelection.range.startOffset = redoDiff.start; @@ -1573,7 +1573,7 @@ Node.onDragStart = function (nodes, event) { editor.highlighter.lock(); editor.drag = { oldCursor: document.body.style.cursor, - oldSelection: editor.getSelection(), + oldSelection: editor.getDomSelection(), oldBeforeNode: beforeNode, mouseX: event.pageX, offsetY: offsetY, @@ -1771,7 +1771,7 @@ Node.onDragEnd = function (nodes, event) { var params = { nodes: nodes, oldSelection: editor.drag.oldSelection, - newSelection: editor.getSelection(), + newSelection: editor.getDomSelection(), oldBeforeNode: editor.drag.oldBeforeNode, newBeforeNode: beforeNode }; @@ -2323,7 +2323,7 @@ Node.prototype.onEvent = function (event) { case 'keydown': case 'mousedown': // TODO: cleanup - this.editor.selection = this.editor.getSelection(); + this.editor.selection = this.editor.getDomSelection(); break; case 'click': @@ -2374,7 +2374,7 @@ Node.prototype.onEvent = function (event) { case 'keydown': case 'mousedown': - this.editor.selection = this.editor.getSelection(); + this.editor.selection = this.editor.getDomSelection(); break; case 'keyup': @@ -2549,7 +2549,7 @@ Node.prototype.onKeyDown = function (event) { if (nextNode && nextNode instanceof AppendNode && !(lastNode.parent.childs.length == 1) && nextNode2 && nextNode2.parent) { - oldSelection = this.editor.getSelection(); + oldSelection = this.editor.getDomSelection(); oldBeforeNode = lastNode.nextSibling(); selectedNodes.forEach(function (node) { @@ -2562,7 +2562,7 @@ Node.prototype.onKeyDown = function (event) { oldBeforeNode: oldBeforeNode, newBeforeNode: nextNode2, oldSelection: oldSelection, - newSelection: this.editor.getSelection() + newSelection: this.editor.getDomSelection() }); } } @@ -2596,7 +2596,7 @@ Node.prototype.onKeyDown = function (event) { // find the previous node prevNode = firstNode._previousNode(); if (prevNode && prevNode.parent) { - oldSelection = this.editor.getSelection(); + oldSelection = this.editor.getDomSelection(); oldBeforeNode = lastNode.nextSibling(); selectedNodes.forEach(function (node) { @@ -2609,7 +2609,7 @@ Node.prototype.onKeyDown = function (event) { oldBeforeNode: oldBeforeNode, newBeforeNode: prevNode, oldSelection: oldSelection, - newSelection: this.editor.getSelection() + newSelection: this.editor.getDomSelection() }); } handled = true; @@ -2632,7 +2632,7 @@ Node.prototype.onKeyDown = function (event) { if (prevNode && prevNode.parent && (prevNode instanceof AppendNode) && !prevNode.isVisible()) { - oldSelection = this.editor.getSelection(); + oldSelection = this.editor.getDomSelection(); oldBeforeNode = lastNode.nextSibling(); selectedNodes.forEach(function (node) { @@ -2645,7 +2645,7 @@ Node.prototype.onKeyDown = function (event) { oldBeforeNode: oldBeforeNode, newBeforeNode: prevNode, oldSelection: oldSelection, - newSelection: this.editor.getSelection() + newSelection: this.editor.getDomSelection() }); } } @@ -2685,7 +2685,7 @@ Node.prototype.onKeyDown = function (event) { } var nextNode2 = nextNode && (nextNode._nextNode() || nextNode.parent.append); if (nextNode2 && nextNode2.parent) { - oldSelection = this.editor.getSelection(); + oldSelection = this.editor.getDomSelection(); oldBeforeNode = lastNode.nextSibling(); selectedNodes.forEach(function (node) { @@ -2698,7 +2698,7 @@ Node.prototype.onKeyDown = function (event) { oldBeforeNode: oldBeforeNode, newBeforeNode: nextNode2, oldSelection: oldSelection, - newSelection: this.editor.getSelection() + newSelection: this.editor.getDomSelection() }); } handled = true; @@ -2756,9 +2756,9 @@ Node.onRemove = function(nodes) { editor.highlighter.unhighlight(); // adjust the focus - var oldSelection = editor.getSelection(); + var oldSelection = editor.getDomSelection(); Node.blurNodes(nodes); - var newSelection = editor.getSelection(); + var newSelection = editor.getDomSelection(); // remove the nodes nodes.forEach(function (node) { @@ -2795,7 +2795,7 @@ Node.onDuplicate = function(nodes) { editor.deselect(editor.multiselection.nodes); // duplicate the nodes - var oldSelection = editor.getSelection(); + var oldSelection = editor.getDomSelection(); var afterNode = lastNode; var clones = nodes.map(function (node) { var clone = node.clone(); @@ -2811,7 +2811,7 @@ Node.onDuplicate = function(nodes) { else { editor.select(clones); } - var newSelection = editor.getSelection(); + var newSelection = editor.getDomSelection(); editor._onAction('duplicateNodes', { afterNode: lastNode, @@ -2831,7 +2831,7 @@ Node.onDuplicate = function(nodes) { * @private */ Node.prototype._onInsertBefore = function (field, value, type) { - var oldSelection = this.editor.getSelection(); + var oldSelection = this.editor.getDomSelection(); var newNode = new Node(this.editor, { field: (field != undefined) ? field : '', @@ -2842,7 +2842,7 @@ Node.prototype._onInsertBefore = function (field, value, type) { this.parent.insertBefore(newNode, this); this.editor.highlighter.unhighlight(); newNode.focus('field'); - var newSelection = this.editor.getSelection(); + var newSelection = this.editor.getDomSelection(); this.editor._onAction('insertBeforeNodes', { nodes: [newNode], @@ -2861,7 +2861,7 @@ Node.prototype._onInsertBefore = function (field, value, type) { * @private */ Node.prototype._onInsertAfter = function (field, value, type) { - var oldSelection = this.editor.getSelection(); + var oldSelection = this.editor.getDomSelection(); var newNode = new Node(this.editor, { field: (field != undefined) ? field : '', @@ -2872,7 +2872,7 @@ Node.prototype._onInsertAfter = function (field, value, type) { this.parent.insertAfter(newNode, this); this.editor.highlighter.unhighlight(); newNode.focus('field'); - var newSelection = this.editor.getSelection(); + var newSelection = this.editor.getDomSelection(); this.editor._onAction('insertAfterNodes', { nodes: [newNode], @@ -2891,7 +2891,7 @@ Node.prototype._onInsertAfter = function (field, value, type) { * @private */ Node.prototype._onAppend = function (field, value, type) { - var oldSelection = this.editor.getSelection(); + var oldSelection = this.editor.getDomSelection(); var newNode = new Node(this.editor, { field: (field != undefined) ? field : '', @@ -2902,7 +2902,7 @@ Node.prototype._onAppend = function (field, value, type) { this.parent.appendChild(newNode); this.editor.highlighter.unhighlight(); newNode.focus('field'); - var newSelection = this.editor.getSelection(); + var newSelection = this.editor.getDomSelection(); this.editor._onAction('appendNodes', { nodes: [newNode], @@ -2920,9 +2920,9 @@ Node.prototype._onAppend = function (field, value, type) { Node.prototype._onChangeType = function (newType) { var oldType = this.type; if (newType != oldType) { - var oldSelection = this.editor.getSelection(); + var oldSelection = this.editor.getDomSelection(); this.changeType(newType); - var newSelection = this.editor.getSelection(); + var newSelection = this.editor.getDomSelection(); this.editor._onAction('changeType', { node: this, diff --git a/src/js/treemode.js b/src/js/treemode.js index eddcbff..3ac2049 100644 --- a/src/js/treemode.js +++ b/src/js/treemode.js @@ -116,7 +116,7 @@ treemode._setOptions = function (options) { schemaRefs: null, autocomplete: null, navigationBar : true, - onNodeSelectionChange: null + onSelectionChange: null }; // copy all options @@ -134,8 +134,8 @@ treemode._setOptions = function (options) { // create a debounced validate function this._debouncedValidate = util.debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL); - if (options.onNodeSelectionChange) { - this.onNodeSelectionChange(options.onNodeSelectionChange); + if (options.onSelectionChange) { + this.onSelectionChange(options.onSelectionChange); } }; @@ -543,7 +543,7 @@ treemode.stopAutoScroll = function () { * {Node[]} nodes Nodes in case of multi selection * {Number} scrollTop Scroll position */ -treemode.setSelection = function (selection) { +treemode.setDomSelection = function (selection) { if (!selection) { return; } @@ -573,7 +573,7 @@ treemode.setSelection = function (selection) { * {Node[]} nodes Nodes in case of multi selection * {Number} scrollTop Scroll position */ -treemode.getSelection = function () { +treemode.getDomSelection = function () { var range = util.getSelectionOffset(); if (range && range.container.nodeName !== 'DIV') { // filter on (editable) divs) range = null; @@ -1342,7 +1342,7 @@ treemode.showContextMenu = function (anchor, onClose) { * Get current selected nodes * @return {Array} */ -treemode.getNodeSelection = function () { +treemode.getSelection = function () { return this.multiselection.nodes || []; }; @@ -1353,7 +1353,7 @@ treemode.getNodeSelection = function () { * @callback selectionCallback * @param {Array} nodes selected nodes */ -treemode.onNodeSelectionChange = function (callback) { +treemode.onSelectionChange = function (callback) { if (typeof callback === 'function') { this._selectionChangedHandler = util.debounce(callback, this.DEBOUNCE_INTERVAL); } @@ -1367,7 +1367,12 @@ treemode.onNodeSelectionChange = function (callback) { * @param {Node} [node1] node for selection start * @param {Node} [node2] node for selection end */ -treemode.setNodeSelection = function (node1, node2) { +treemode.setSelection = function (node1, node2) { + // check for old usage + if (node1.dom && node1.range) { + console.warn('setSelection/getSelection usage for text selection is depracated and should not be used, see documantaion for supported selection options'); + this.setDomSelection(node1); + } var nodes = []; if (node1 instanceof Node) { if (node2 instanceof Node && node2 !== node1) {