From 0349f94ead157c4789e14a74256f3565ea719edb Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 19 Sep 2018 11:01:12 +0200 Subject: [PATCH] Remove floating menu --- src/jsoneditor/components/JSONNode.js | 90 +-------------------------- src/jsoneditor/components/TreeMode.js | 3 +- 2 files changed, 5 insertions(+), 88 deletions(-) diff --git a/src/jsoneditor/components/JSONNode.js b/src/jsoneditor/components/JSONNode.js index 8effdc8..252e7a0 100644 --- a/src/jsoneditor/components/JSONNode.js +++ b/src/jsoneditor/components/JSONNode.js @@ -4,7 +4,6 @@ import initial from 'lodash/initial' import isEqual from 'lodash/isEqual' import naturalSort from 'javascript-natural-sort' -import FloatingMenu from './menu/FloatingMenu' import { escapeHTML, unescapeHTML } from '../utils/stringUtils' import { getInnerText, insideRect } from '../utils/domUtils' import { stringConvert, valueType, isUrl } from '../utils/typeUtils' @@ -131,8 +130,6 @@ export default class JSONNode extends PureComponent { } } - // FIXME - const floatingMenu = this.renderFloatingMenu('object', this.props.eson[SELECTION]) const nodeEnd = this.props.eson[EXPANDED] ? h('div', {key: 'node-end', className: 'jsoneditor-node-end', 'data-area': 'empty'}, [ this.renderDelimiter('}', 'jsoneditor-delimiter-end') @@ -145,7 +142,7 @@ export default class JSONNode extends PureComponent { className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover), // onMouseOver: this.handleMouseOver, // onMouseLeave: this.handleMouseLeave - }, [floatingMenu, nodeStart, childs, nodeEnd]) + }, [nodeStart, childs, nodeEnd]) } renderJSONArray () { @@ -192,7 +189,6 @@ export default class JSONNode extends PureComponent { } } - const floatingMenu = this.renderFloatingMenu('array', this.props.eson[SELECTION]) const nodeEnd = this.props.eson[EXPANDED] ? h('div', {key: 'node-end', className: 'jsoneditor-node-end', 'data-area': 'empty'}, [ this.renderDelimiter(']', 'jsoneditor-delimiter-end') @@ -205,7 +201,7 @@ export default class JSONNode extends PureComponent { className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover), // onMouseOver: this.handleMouseOver, // onMouseLeave: this.handleMouseLeave - }, [floatingMenu, nodeStart, childs, nodeEnd]) + }, [nodeStart, childs, nodeEnd]) } renderJSONValue () { @@ -221,8 +217,6 @@ export default class JSONNode extends PureComponent { this.renderError(this.props.eson[ERROR]) ]) - const floatingMenu = this.renderFloatingMenu('value', this.props.eson[SELECTION]) - // const insertArea = this.renderInsertBeforeArea() return h('div', { @@ -231,7 +225,7 @@ export default class JSONNode extends PureComponent { className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover), // onMouseOver: this.handleMouseOver, // onMouseLeave: this.handleMouseLeave - }, [node, floatingMenu]) + }, [node]) } /** @@ -539,84 +533,6 @@ export default class JSONNode extends PureComponent { ) } - renderFloatingMenu (type, selected) { - if (((selected & SELECTED_END) === 0) && - ((selected & SELECTED_INSIDE) === 0) && - ((selected & SELECTED_AFTER) === 0)) { - return null - } - - const isLastOfMultiple = ((selected & SELECTED_LAST) !== 0) && - ((selected & SELECTED_FIRST) === 0) - const isAfter = ((selected & SELECTED_AFTER) !== 0) - // const isInside = ((selected & SELECTED_INSIDE) !== 0) // TODO: nicely position menu when selected inside - - return h(FloatingMenu, { - key: 'floating-menu', - path: this.state.path, - emit: this.props.emit, - items: this.getFloatingMenuItems(type, selected), - position: isLastOfMultiple || isAfter ? 'bottom' : 'top' - }) - } - - getFloatingMenuItems (type, selected) { - if ((selected & SELECTED_AFTER) !== 0) { - return [ - {type: 'insertStructureAfter'}, - {type: 'insertValueAfter'}, - {type: 'insertObjectAfter'}, - {type: 'insertArrayAfter'}, - {type: 'paste'}, - ] - } - - if ((selected & SELECTED_INSIDE) !== 0) { - return [ - {type: 'insertStructureInside'}, - {type: 'insertValueInside'}, - {type: 'insertObjectInside'}, - {type: 'insertArrayInside'}, - {type: 'paste'}, - ] - } - - if (type === 'object') { - return [ - {type: 'sort'}, - {type: 'duplicate'}, - {type: 'cut'}, - {type: 'copy'}, - {type: 'paste'}, - {type: 'remove'} - ] - } - - if (type === 'array') { - return [ - {type: 'sort'}, - {type: 'duplicate'}, - {type: 'cut'}, - {type: 'copy'}, - {type: 'paste'}, - {type: 'remove'} - ] - } - - if (type === 'value') { - return [ - // {text: 'String', onClick: this.props.emit('changeType', {type: 'checkbox', checked: false}}), - {type: 'duplicate'}, - {type: 'cut'}, - {type: 'copy'}, - {type: 'paste'}, - {type: 'remove'} - ] - } - - throw new Error(`Cannot create FloatingMenu items for type: ${type}, selected: ${selected})`) - } - handleMouseOver = (event) => { if (event.buttons === 0) { // no mouse button down, no dragging event.stopPropagation() diff --git a/src/jsoneditor/components/TreeMode.js b/src/jsoneditor/components/TreeMode.js index 98781de..4c04c44 100644 --- a/src/jsoneditor/components/TreeMode.js +++ b/src/jsoneditor/components/TreeMode.js @@ -765,7 +765,8 @@ export default class TreeMode extends PureComponent { const pointer = this.findJSONPointerFromElement(event.target) const clickedOnEmptySpace = (event.target.nodeName === 'DIV') && - (event.target.contentEditable !== 'true') + (event.target.contentEditable !== 'true') && + (event.target.className !== 'jsoneditor-tag') // FIXME: this is an ugly hack to prevent an object/array from being selected when expanding it by clicking the tag // TODO: cleanup // console.log('handleTouchStart', clickedOnEmptySpace && pointer, pointer && this.selectionFromJSONPointer(pointer))