From 9a23799d5f14c1c9992fbb1272521929349e47db Mon Sep 17 00:00:00 2001 From: josdejong Date: Wed, 24 Jun 2020 14:20:25 +0200 Subject: [PATCH] Implement selecting one or multiple nodes by dragging --- src/JSONEditor.scss | 5 +- src/JSONEditor.svelte | 25 ++++++++- src/JSONNode.scss | 19 ++++--- src/JSONNode.svelte | 101 +++++++++++++++++++++++++++++++----- src/constants.js | 2 + src/selection.js | 83 +++++++++++++++++++++++++++++ src/selection.test.js | 68 ++++++++++++++++++++++++ src/singleton.js | 5 ++ src/styles.scss | 4 +- src/utils/syncState.test.js | 12 ++--- 10 files changed, 294 insertions(+), 30 deletions(-) create mode 100644 src/selection.js create mode 100644 src/selection.test.js create mode 100644 src/singleton.js diff --git a/src/JSONEditor.scss b/src/JSONEditor.scss index 7248daf..491494e 100644 --- a/src/JSONEditor.scss +++ b/src/JSONEditor.scss @@ -64,8 +64,7 @@ flex: 1; overflow: auto; - .bottom { - height: $input-padding; - } + //display: flex; + //flex-direction: column; } } \ No newline at end of file diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte index 0ad937a..a6ce91f 100644 --- a/src/JSONEditor.svelte +++ b/src/JSONEditor.svelte @@ -11,6 +11,7 @@ import { faSearch, faUndo, faRedo } from '@fortawesome/free-solid-svg-icons' import { createHistory } from './history.js' import Node from './JSONNode.svelte' + import { expandSelection } from './selection.js' import { existsIn, getIn, @@ -36,6 +37,19 @@ export let doc = {} let state = undefined + let selection = null + let selectionMap = {} + + $: { + selectionMap = {} + if (selection != null) { + selection.forEach(path => { + selectionMap[compileJSONPointer(path)] = true + }) + } + } + + $: console.log('selectionMap', selectionMap) export let onChangeJson = () => {} @@ -257,6 +271,14 @@ state = setIn(state, path.concat(STATE_LIMIT), limit) } + function handleSelect (anchorPath, focusPath) { + if (anchorPath && focusPath) { + selection = expandSelection(doc, state, anchorPath, focusPath) + } else { + selection = null + } + } + /** * Expand all nodes on given path * @param {Path} path @@ -373,8 +395,9 @@ onPatch={handlePatch} onExpand={handleExpand} onLimit={handleLimit} + onSelect={handleSelect} + selectionMap={selectionMap} /> -
diff --git a/src/JSONNode.scss b/src/JSONNode.scss index c2dd531..835cdd7 100644 --- a/src/JSONNode.scss +++ b/src/JSONNode.scss @@ -5,6 +5,18 @@ font-size: $font-size; color: $black; + &.root { + min-height: 100%; + padding-bottom: $input-padding; + box-sizing: border-box; + } + + &.selected .header, + &.selected .contents, + &.selected .footer { + background-color: $selection-background; + } + .header { position: relative; } @@ -27,6 +39,7 @@ } .footer { + display: inline-block; padding-left: $line-height + $input-padding; // must be the same as the width of the expand button } } @@ -86,10 +99,6 @@ } } -.items, -.props { - padding-left: $indentation-width; -} .value { &.string { @@ -125,8 +134,6 @@ } div.limit { - margin-left: $indentation-width; - button { background: none; border: none; diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte index 6ddab14..ef4293c 100644 --- a/src/JSONNode.svelte +++ b/src/JSONNode.svelte @@ -1,18 +1,21 @@ -
+
{#if type === 'array'} -
+
)
{/if}
-
+
]
{/if} {:else if type === 'object'} -
+
-
+
}
{/if} {:else} -
+
{#if typeof key === 'string'}
prop.key === anchorProp) + const focusIndex = props.findIndex(prop => prop.key === focusProp) + + if (anchorIndex !== -1 && focusIndex !== -1) { + const startIndex = Math.min(anchorIndex, focusIndex) + const endIndex = Math.max(anchorIndex, focusIndex) + const paths = [] + + for (let i = startIndex; i <= endIndex; i++) { + paths.push(sharedPath.concat(props[i].key)) + } + + return paths + } + } + + if (Array.isArray(value)) { + const startIndex = Math.min(anchorProp, focusProp) + const endIndex = Math.max(anchorProp, focusProp) + const paths = [] + + for (let i = startIndex; i <= endIndex; i++) { + paths.push(sharedPath.concat(i)) + } + + return paths + } + } + + // should never happen + return [] +} + +/** + * Find the common path of two paths. + * For example findCommonRoot(['arr', '1', 'name'], ['arr', '1', 'address', 'contact']) returns ['arr', '1'] + * @param {Path} path1 + * @param {Path} path2 + * @return {Path} + */ +// TODO: write unit tests for findSharedPath +export function findSharedPath (path1, path2) { + let i = 0; + while (i < path1.length && path1[i] === path2[i]) { + i++; + } + + return path1.slice(0, i) +} diff --git a/src/selection.test.js b/src/selection.test.js new file mode 100644 index 0000000..6b1037a --- /dev/null +++ b/src/selection.test.js @@ -0,0 +1,68 @@ +import assert from 'assert' +import { expandSelection } from './selection.js' +import { syncState } from './utils/syncState.js' + +describe ('selection', () => { + const doc = { + "obj": { + "arr": [1,2, {"first":3,"last":4}] + }, + "str": "hello world", + "nill": null, + "bool": false + } + const state = syncState(doc, undefined, [], () => true) + + it('should expand a selection (object)', () => { + const start = ['obj', 'arr', '2', 'last'] + const end = ['nill'] + + const actual = expandSelection(doc, state, start, end) + assert.deepStrictEqual(actual, [ + ['obj'], + ['str'], + ['nill'] + ]) + }) + + it('should expand a selection (array)', () => { + const start = ['obj', 'arr', 1] + const end = ['obj', 'arr', 0] // note the "wrong" order of start and end + + const actual = expandSelection(doc, state, start, end) + assert.deepStrictEqual(actual, [ + ['obj', 'arr', 0], + ['obj', 'arr', 1] + ]) + }) + + it('should expand a selection (array) (2)', () => { + const start = ['obj', 'arr', 1] // child + const end = ['obj', 'arr'] // parent + + const actual = expandSelection(doc, state, start, end) + assert.deepStrictEqual(actual, [ + ['obj', 'arr'] + ]) + }) + + it('should expand a selection (value)', () => { + const start = ['obj', 'arr', 2, 'first'] + const end = ['obj', 'arr', 2, 'first'] + + const actual = expandSelection(doc, state, start, end) + assert.deepStrictEqual(actual, [ + ['obj', 'arr', 2, 'first'] + ]) + }) + + it('should expand a selection (value)', () => { + const start = ['obj', 'arr'] + const end = ['obj', 'arr'] + + const actual = expandSelection(doc, state, start, end) + assert.deepStrictEqual(actual, [ + ['obj', 'arr'] + ]) + }) +}) diff --git a/src/singleton.js b/src/singleton.js new file mode 100644 index 0000000..4e6ef66 --- /dev/null +++ b/src/singleton.js @@ -0,0 +1,5 @@ +export const singleton = { + mousedown: false, + selectionAnchor: null, // Path + selectionFocus: null // Path +} diff --git a/src/styles.scss b/src/styles.scss index 39f67a7..8108918 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -24,12 +24,14 @@ $error-border-color: #ffd700; $gray: #9d9d9d; $gray-icon: $gray; $light-gray: #c0c0c0; +$selection-background: #e0e0e0; $line-height: 18px; -$indentation-width: 18px; +$indentation-width: 18px; // IMPORTANT: keep in sync with js constant INDENTATION_WIDTH $menu-button-size: 32px; $input-padding: 5px; $search-box-offset: 10px; $border-radius: 3px; $menu-padding: 5px; +$bottom-height: 5px; diff --git a/src/utils/syncState.test.js b/src/utils/syncState.test.js index dc392b4..0bccd01 100644 --- a/src/utils/syncState.test.js +++ b/src/utils/syncState.test.js @@ -24,9 +24,9 @@ describe('syncState', () => { const expectedState = {} expectedState[STATE_EXPANDED] = true expectedState[STATE_PROPS] = [ - { 'id': '1', 'key': 'array' }, - { 'id': '2', 'key': 'object' }, - { 'id': '3', 'key': 'value' } + { 'id': state[STATE_PROPS][0].id, 'key': 'array' }, + { 'id': state[STATE_PROPS][1].id, 'key': 'object' }, + { 'id': state[STATE_PROPS][2].id, 'key': 'value' } ] expectedState.array = [] expectedState.array[STATE_EXPANDED] = true @@ -34,13 +34,13 @@ describe('syncState', () => { expectedState.array[2] = {} expectedState.array[2][STATE_EXPANDED] = false expectedState.array[2][STATE_PROPS] = [ - { 'id': '4', 'key': 'c' } // FIXME: props should not be created because node is not expande + { 'id': state.array[2][STATE_PROPS][0].id, 'key': 'c' } // FIXME: props should not be created because node is not expanded ] expectedState.object = {} expectedState.object[STATE_EXPANDED] = true expectedState.object[STATE_PROPS] = [ - { 'id': '5', 'key': 'a' }, - { 'id': '6', 'key': 'b' } + { 'id': state.object[STATE_PROPS][0].id, 'key': 'a' }, + { 'id': state.object[STATE_PROPS][1].id, 'key': 'b' } ] assert.deepStrictEqual(state, expectedState)