StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create `before-childs` and `after-childs`

This commit is contained in:
jos 2018-09-26 21:40:33 +02:00
parent f33342b54b
commit f1ddc03c6d
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/jsoneditor/components/JSONNode.js
View File

@ -91,7 +91,7 @@ export default class JSONNode extends PureComponent {
const nodeStart = h('div', { const nodeStart = h('div', {
key: 'node', key: 'node',
onKeyDown: this.handleKeyDown, onKeyDown: this.handleKeyDown,
'data-selection-area': 'on', 'data-selection-area': 'inside',
className: 'jsoneditor-node jsoneditor-object' className: 'jsoneditor-node jsoneditor-object'
}, [ }, [
this.renderExpandButton(), this.renderExpandButton(),
@ -147,14 +147,14 @@ export default class JSONNode extends PureComponent {
'data-selection-area': 'after', 'data-selection-area': 'after',
'data-area': 'empty', // TODO: remove 'data-area': 'empty', // TODO: remove
}, [ }, [
this.renderDelimiter('}', 'jsoneditor-delimiter-end', 'before') this.renderDelimiter('}', 'jsoneditor-delimiter-end', 'after-childs')
]) ])
: null : null
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.state.path), 'data-path': compileJSONPointer(this.state.path),
'data-area': 'empty', // TODO: remove 'data-area': 'empty', // TODO: remove
'data-selection-area': 'after', 'data-selection-area': this.props.eson[EXPANDED] ? 'before-childs' : 'after',
className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover), className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover),
// onMouseOver: this.handleMouseOver, // onMouseOver: this.handleMouseOver,
// onMouseLeave: this.handleMouseLeave // onMouseLeave: this.handleMouseLeave
@ -167,7 +167,7 @@ export default class JSONNode extends PureComponent {
const nodeStart = h('div', { const nodeStart = h('div', {
key: 'node', key: 'node',
onKeyDown: this.handleKeyDown, onKeyDown: this.handleKeyDown,
'data-selection-area': 'on', 'data-selection-area': 'inside',
className: 'jsoneditor-node jsoneditor-array' className: 'jsoneditor-node jsoneditor-array'
}, [ }, [
this.renderExpandButton(), this.renderExpandButton(),
@ -216,15 +216,20 @@ export default class JSONNode extends PureComponent {
} }
const nodeEnd = this.props.eson[EXPANDED] const nodeEnd = this.props.eson[EXPANDED]
? h('div', {key: 'node-end', className: 'jsoneditor-node-end', 'data-area': 'empty'}, [ // TODO: remove data-area ? h('div', {
this.renderDelimiter(']', 'jsoneditor-delimiter-end', 'before') key: 'node-end',
className: 'jsoneditor-node-end',
'data-selection-area': 'after',
'data-area': 'empty'// TODO: remove data-area
}, [
this.renderDelimiter(']', 'jsoneditor-delimiter-end', 'after-childs')
]) ])
: null : null
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.state.path), 'data-path': compileJSONPointer(this.state.path),
'data-area': 'empty', // TODO: remove data-area 'data-area': 'empty', // TODO: remove data-area
'data-selection-area': 'after', 'data-selection-area': this.props.eson[EXPANDED] ? 'before-childs' : 'after',
className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover), className: this.getContainerClassName(this.props.eson[SELECTION], this.state.hover),
// onMouseOver: this.handleMouseOver, // onMouseOver: this.handleMouseOver,
// onMouseLeave: this.handleMouseLeave // onMouseLeave: this.handleMouseLeave
@ -235,7 +240,7 @@ export default class JSONNode extends PureComponent {
const node = h('div', { const node = h('div', {
key: 'node', key: 'node',
onKeyDown: this.handleKeyDown, onKeyDown: this.handleKeyDown,
'data-selection-area': 'on', 'data-selection-area': 'inside',
className: 'jsoneditor-node' className: 'jsoneditor-node'
}, [ }, [
this.renderPlaceholder(), this.renderPlaceholder(),
@ -270,7 +275,7 @@ export default class JSONNode extends PureComponent {
className: 'jsoneditor-node-container' className: 'jsoneditor-node-container'
}, h('div', { }, h('div', {
className: 'jsoneditor-node', className: 'jsoneditor-node',
'data-selection-area': 'on', 'data-selection-area': 'inside',
onKeyDown: this.handleKeyDownAppend onKeyDown: this.handleKeyDownAppend
}, [ }, [
this.renderPlaceholder(), this.renderPlaceholder(),

6
src/jsoneditor/components/TreeMode.js
View File

@ -786,6 +786,8 @@ export default class TreeMode extends PureComponent {
this.selectionStartPointer = this.findSelectionPointerFromEvent(event.target, event.clientY) this.selectionStartPointer = this.findSelectionPointerFromEvent(event.target, event.clientY)
console.log('selectionPointer', this.selectionStartPointer)
const pointer = this.findJSONPointerFromElement(event.target) const pointer = this.findJSONPointerFromElement(event.target)
const clickedOnEmptySpace = (event.target.nodeName === 'DIV') && const clickedOnEmptySpace = (event.target.nodeName === 'DIV') &&
(event.target.contentEditable !== 'true') && (event.target.contentEditable !== 'true') &&
@ -899,13 +901,15 @@ export default class TreeMode extends PureComponent {
const startChildPath = startPath.slice(0, sharedPath.length + 1) const startChildPath = startPath.slice(0, sharedPath.length + 1)
const endChildPath = endPath.slice(0, sharedPath.length + 1) const endChildPath = endPath.slice(0, sharedPath.length + 1)
// FIXME: handle area === 'before-childs' and area === 'after-childs'
if (isEqual(startChildPath, sharedPath) || isEqual(endChildPath, sharedPath)) { if (isEqual(startChildPath, sharedPath) || isEqual(endChildPath, sharedPath)) {
// one element // one element
if (start.area === 'after' && end.area === 'after' && start.path === end.path) { if (start.area === 'after' && end.area === 'after' && start.path === end.path) {
return { type: 'after', after: compileJSONPointer(sharedPath) } return { type: 'after', after: compileJSONPointer(sharedPath) }
} }
if (start.path !== end.path || start.area !== end.area || start.area === 'on' || end.area === 'on') { if (start.path !== end.path || start.area !== end.area || start.area === 'inside' || end.area === 'inside') {
return { type: 'multi', multi: [ compileJSONPointer(sharedPath) ] } return { type: 'multi', multi: [ compileJSONPointer(sharedPath) ] }
} }
} }