Remove floating menu

This commit is contained in:
jos 2018-09-19 11:01:12 +02:00
parent 4c539cb4f5
commit 0349f94ead
2 changed files with 5 additions and 88 deletions

View File

@ -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()

View File

@ -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))