#34 depth 열리는 값 추가

- 옵션 값 추가
- replace 메서드 파라메터 변경

Author: redgoose-dev

README.md

@@ -26,6 +26,8 @@ const jsonEditor = new JsonEditor(document.getElementById('target'), {
   live: true,
   theme: 'system',
   edit: 'all',
+  node: {},
+  openDepth: 2,
 })
 ```
 
@@ -40,6 +42,10 @@ const jsonEditor = new JsonEditor(document.getElementById('target'), {
   다크모드를 사용하는지에 대한 값입니다.
 - `edit` / (all,value,none)  
   컨트롤할 수 있는 범위를 정합니다.
+- `node` / ({},[])  
+  클래스를 초기화할때 사용하는 노드 데이터 값입니다.
+- `openDepth` / 0  
+  x번째 뎁스의 노드가 열리는지에 대하여 정합니다.
 
 
 ## Methods
@@ -186,16 +192,20 @@ jsonEditor.import(node, { foo: 'bar' }, true, true)
 데이터를 모두 교체합니다.
 
 ```javascript
-jsonEditor.replace(data, useUpdate)
+jsonEditor.replace(data, options, useUpdate)
 ```
 
 - `data`: 새로 교체할 데이터
+- `options`: 옵션
+  - `openDepth`: 데이터가 교체될때 노드가 열리는 x번째 뎁스
 - `useUpdate`: 노드를 수정하고 업데이트 메서드를 실행합니다.
 
 다음과 같이 사용할 수 있습니다.
 
 ```javascript
-jsonEditor.replace({ foo: 'bar' }, true)
+jsonEditor.replace({ foo: 'bar' }, {
+  openDepth: 2,
+}, true)
 ```
 
 ### export

package.json

@@ -2,7 +2,7 @@
   "name": "@redgoose/json-editor",
   "description": "Easy editing JSON data",
   "author": "redgoose <[email protected]>",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "keywords": [ "json", "editor", "library", "tool" ],
   "license": "MIT",
   "main": "./lib/json-editor.js",
@@ -40,11 +40,11 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.6",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "cash-dom": "^8.1.5",
-    "feather-icons": "^4.29.1",
-    "sass": "^1.69.5",
-    "svelte": "^4.2.2",
-    "vite": "^4.5.0"
+    "feather-icons": "^4.29.2",
+    "sass": "^1.77.5",
+    "svelte": "^4.2.18",
+    "vite": "^5.3.1"
   }
 }

src/dev/main.js

@@ -42,6 +42,8 @@ window.jsonEditor = new JsonEditor(editor, {
   theme: options.theme,
   live: options.live,
   edit: options.edit,
+  openDepth: 3,
+  node: {},
 })
 $ = window.$ = jsonEditor.$
 initJsonEditor()
@@ -126,7 +128,9 @@ function visiblePreview(sw)
 
 function randomReplaceSampleItem()
 {
-  jsonEditor.replace(randomPickInArray(samples), true)
+  jsonEditor.replace(randomPickInArray(samples), {
+    openDepth: 2,
+  }, true)
 }
 
 function renderPreview(src)

src/docs/components/editor/index.svelte

@@ -61,7 +61,7 @@ function setupJsonEditor()
     live: true,
     theme: $theme,
   })
-  editor.replace($source, false)
+  editor.replace($source, {}, false)
   _editor.addEventListener('update', updateSource)
   _editor.addEventListener('context', customContext)
   dispatch('init', { instance: editor })

src/json-editor/index.d.ts

@@ -4,6 +4,8 @@ declare module '@redgoose/json-editor' {
     live?: boolean
     theme?: 'system' | 'light' | 'dark'
     edit?: 'all' | 'value' | 'none'
+    openDepth?: boolean
+    node?: object | any[]
   }
   type typeData = any[] | object
   type typeAddNodeOptions = {
@@ -12,7 +14,7 @@ declare module '@redgoose/json-editor' {
   }
   type typeNames = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null'
 
-  class JsonEditor {
+  export default class JsonEditor {
     // properties
     options: typeOptions
     context: Context
@@ -28,13 +30,13 @@ declare module '@redgoose/json-editor' {
     fold(node: HTMLElement, sw?: boolean): void
     clear(): void
     destroy(): void
-    replace(data: typeData, useUpdate?: boolean): void
+    replace(data: typeData, options?: object, useUpdate?: boolean): void
     import(target: HTMLElement, data: typeData, useUpdate?: boolean): void
     export(node: HTMLElement, json?: boolean, space?: number): any[]|object
     updateLanguage(): void
   }
 
-  class Context {
+  export class Context {
     constructor(parent: JsonEditor, node: HTMLElement, isRoot: boolean)
     close(): void
   }

src/json-editor/index.js

@@ -36,7 +36,8 @@ class JsonEditorCore {
     this.el.wrap.append(this.el.body)
     this.#changeTheme(this.options.theme)
     this.#changeEdit(this.options.edit)
-    this.replace({}, false)
+    this.replace(options.node || {}, {}, false)
+    this.#openNodesWithDepth(options.openDepth)
   }
 
   #setOptions(obj, prop, value)
@@ -277,6 +278,20 @@ class JsonEditorCore {
     }
   }
 
+  /**
+   * depth 이하의 노드를 열어준다.
+   * @param {number} depth
+   */
+  #openNodesWithDepth(depth = 0)
+  {
+    if (!(depth > 0)) return
+    const $nodes = this.el.body.find('.node:not(.root)')
+    let arr = []
+    $nodes.each((i, el) => {
+      if ($(el).data('depth') < depth) this.fold($(el), true)
+    })
+  }
+
   /**
    * NODE EVENTS
    */
@@ -620,7 +635,7 @@ class JsonEditorCore {
   {
     if (!this.el.tree) return
     this.el.body.empty()
-    this.replace({}, false)
+    this.replace({}, {}, false)
     this.#updateTick()
   }
 
@@ -636,15 +651,17 @@ class JsonEditorCore {
   /**
    * replace
    * @param {object|array} data
+   * @param {object} options
    * @param {boolean} useUpdate
    */
-  replace(data, useUpdate = true)
+  replace(data, options = {}, useUpdate = true)
   {
     this.el.body.empty()
     data = checkData(data)
     const $item = this.#createRoot(data)
     this.import($item, data, false, false)
     if (useUpdate) this.#updateTick()
+    if (options?.openDepth) this.#openNodesWithDepth(options?.openDepth)
   }
 
   /**

src/json-editor/libs/assets.js

@@ -2,6 +2,8 @@ export const defaultOptions = {
   live: false, // live update
   theme: 'system', // system,light,dark
   edit: 'all', // all,value,none
+  openDepth: 0, // open a node with a depth
+  node: undefined, // initial node
 }
 
 export const defaultAddNodeOptions = {