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

Pass `path`

This commit is contained in:
josdejong 2020-05-24 12:02:13 +02:00
parent d8c059c9b0
commit 34e45a04c4
2 changed files with 12 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/JSONEditor.svelte
View File

@ -75,10 +75,6 @@
} }
} }
function getPath() {
return []
}
function doSearch(json, searchText) { function doSearch(json, searchText) {
return search(null, json, searchText) return search(null, json, searchText)
} }
@ -297,12 +293,12 @@
<div class="contents" bind:this={divContents}> <div class="contents" bind:this={divContents}>
<Node <Node
value={json} value={json}
path={[]}
state={state} state={state}
searchResult={searchResultWithActive} searchResult={searchResultWithActive}
onChangeKey={handleChangeKey} onChangeKey={handleChangeKey}
onPatch={handlePatch} onPatch={handlePatch}
onExpand={handleExpand} onExpand={handleExpand}
getParentPath={getPath}
/> />
<div class='bottom'></div> <div class='bottom'></div>
</div> </div>

30
src/JSONNode.svelte
View File

@ -16,22 +16,15 @@
export let key = undefined // only applicable for object properties export let key = undefined // only applicable for object properties
export let value export let value
export let path
export let state export let state
export let searchResult export let searchResult
export let onPatch export let onPatch
export let onChangeKey export let onChangeKey
export let onExpand export let onExpand
export let getParentPath
$: expanded = state && state[EXPANDED_PROPERTY] $: expanded = state && state[EXPANDED_PROPERTY]
function getPath () {
return key !== undefined
? getParentPath().concat(key)
: []
}
const DEBOUNCE_DELAY = 300 // milliseconds TODO: make the debounce delay configurable? const DEBOUNCE_DELAY = 300 // milliseconds TODO: make the debounce delay configurable?
const DEFAULT_LIMIT = 100 const DEFAULT_LIMIT = 100
const escapeUnicode = false // TODO: pass via options const escapeUnicode = false // TODO: pass via options
@ -100,7 +93,7 @@
} }
function toggle () { function toggle () {
onExpand(getPath(), !expanded) onExpand(path, !expanded)
} }
function updateKey () { function updateKey () {
@ -140,7 +133,7 @@
onPatch([{ onPatch([{
op: 'replace', op: 'replace',
path: compileJSONPointer(getPath()), path: compileJSONPointer(path),
value: newValue value: newValue
}]) }])
} }
@ -205,7 +198,6 @@
}) })
} }
const path = getPath()
onPatch([{ onPatch([{
op: 'move', op: 'move',
from: compileJSONPointer(path.concat(oldChildKey)), from: compileJSONPointer(path.concat(oldChildKey)),
@ -233,7 +225,7 @@
{#if typeof key === 'string'} {#if typeof key === 'string'}
<div <div
class={keyClass} class={keyClass}
data-path={compileJSONPointer(getPath().concat(SEARCH_PROPERTY))} data-path={compileJSONPointer(path.concat(SEARCH_PROPERTY))}
contenteditable="true" contenteditable="true"
spellcheck="false" spellcheck="false"
on:input={handleKeyInput} on:input={handleKeyInput}
@ -246,7 +238,7 @@
<div class="delimiter">[</div> <div class="delimiter">[</div>
{:else} {:else}
<div class="delimiter">[</div> <div class="delimiter">[</div>
<button class="tag" on:click={() => onExpand(getPath(), true)}>{value.length} items</button> <button class="tag" on:click={() => onExpand(path, true)}>{value.length} items</button>
<div class="delimiter">]</div> <div class="delimiter">]</div>
{/if} {/if}
</div> </div>
@ -256,12 +248,12 @@
<svelte:self <svelte:self
key={index} key={index}
value={item} value={item}
path={path.concat(index)}
state={state && state[index]} state={state && state[index]}
searchResult={searchResult ? searchResult[index] : undefined} searchResult={searchResult ? searchResult[index] : undefined}
onChangeKey={handleChangeKey} onChangeKey={handleChangeKey}
onPatch={onPatch} onPatch={onPatch}
onExpand={onExpand} onExpand={onExpand}
getParentPath={getPath}
/> />
{/each} {/each}
{#if limited} {#if limited}
@ -286,7 +278,7 @@
{#if typeof key === 'string'} {#if typeof key === 'string'}
<div <div
class={keyClass} class={keyClass}
data-path={compileJSONPointer(getPath().concat(SEARCH_PROPERTY))} data-path={compileJSONPointer(path.concat(SEARCH_PROPERTY))}
contenteditable="true" contenteditable="true"
spellcheck="false" spellcheck="false"
on:input={handleKeyInput} on:input={handleKeyInput}
@ -299,7 +291,7 @@
<span class="delimiter">&#123;</span> <span class="delimiter">&#123;</span>
{:else} {:else}
<span class="delimiter"> &#123;</span> <span class="delimiter"> &#123;</span>
<button class="tag" on:click={() => onExpand(getPath(), true)}>{props.length} props</button> <button class="tag" on:click={() => onExpand(path, true)}>{props.length} props</button>
<span class="delimiter">}</span> <span class="delimiter">}</span>
{/if} {/if}
</div> </div>
@ -309,12 +301,12 @@
<svelte:self <svelte:self
key={prop.key} key={prop.key}
value={value[prop.key]} value={value[prop.key]}
path={path.concat(prop.key)}
state={state && state[prop.key]} state={state && state[prop.key]}
searchResult={searchResult ? searchResult[prop.key] : undefined} searchResult={searchResult ? searchResult[prop.key] : undefined}
onChangeKey={handleChangeKey} onChangeKey={handleChangeKey}
onPatch={onPatch} onPatch={onPatch}
onExpand={onExpand} onExpand={onExpand}
getParentPath={getPath}
/> />
{/each} {/each}
</div> </div>
@ -327,7 +319,7 @@
{#if typeof key === 'string'} {#if typeof key === 'string'}
<div <div
class={keyClass} class={keyClass}
data-path={compileJSONPointer(getPath().concat(SEARCH_PROPERTY))} data-path={compileJSONPointer(path.concat(SEARCH_PROPERTY))}
contenteditable="true" contenteditable="true"
spellcheck="false" spellcheck="false"
on:input={handleKeyInput} on:input={handleKeyInput}
@ -338,7 +330,7 @@
{/if} {/if}
<div <div
class={valueClass} class={valueClass}
data-path={compileJSONPointer(getPath().concat(SEARCH_VALUE))} data-path={compileJSONPointer(path.concat(SEARCH_VALUE))}
contenteditable="true" contenteditable="true"
spellcheck="false" spellcheck="false"
on:input={handleValueInput} on:input={handleValueInput}