w-component-vue 2.1.67 → 2.1.71

package/src/components/WJsonView.vue

@@ -1,75 +1,119 @@
 <template>
-    <WPanelScrollyCore
-        ref="wpsc"
-        :ratio.sync="scrollRatio"
-        :viewHeightMax="viewHeightMax"
-        :contentHeight="itemsHeight"
-        :changeColors="changeColors"
-        :changeFilterKeyWords="changeFilterKeyWords"
-        @change="changeScrollInfor"
-        @after-toggle-items="afterToggleItems"
-    >
-
-        <template v-for="(item,kitem) in useItems">
-            <WJsonViewCore
-                ref="wjvc"
-                :key="kitem"
-                :item="item"
-                :lineNumberWidth="lineNumberWidth"
-                :iconColor="iconColor"
-                :keyColor="keyColor"
-                :keyNumbersColor="keyNumbersColor"
-                :valueStyleBreakAll="valueStyleBreakAll"
-                @toggle-items="toggleItems"
-            ></WJsonViewCore>
-        </template>
-
-        <div style="padding:12px; font-size:0.8rem;" v-if="useItems.length===0">
-            {{searchEmpty}}
+    <div>
+
+        <WTree
+            ref="wt"
+            :viewHeightMax="viewHeightMax"
+            :defaultDisplayLevel="defaultDisplayLevel"
+            :indent="indent"
+            :iconHeight="iconHeight"
+            :iconToggleColor="iconToggleColor"
+            :iconToggleBackgroundColor="iconToggleBackgroundColor"
+            :iconToggleBackgroundColorHover="iconToggleBackgroundColorHover"
+            :filterKeywords="filterKeywords"
+            :filterFunction="filterFunction"
+            :noResultsText="lockFromSetData?'':noResultsText"
+            :defItemHeight="defItemHeight"
+            :itemsPreload="itemsPreload"
+            :show="show"
+        >
+            <template v-slot:head="props">
+
+                <div :style="`min-width:${lineNumberWidth}px; display:flex; align-items:center; justify-content:end; font-size:0.8rem; line-height:1.5625rem; color:#f26; user-select:none;`">
+                    {{props.index+1}}
+                </div>
+
+            </template>
+
+            <template v-slot:item="props">
+
+                <div style="display:flex; align-items:center;">
+
+                    <div style="display:flex;">
+                        <div :style="`padding-right:5px; color:${useColors.keyColor};`" v-if="getKey(props.data)!==''">
+                            {{getKey(props.data)}}:
+                        </div>
+                        <div :style="`padding-right:3px; color:${useColors.keyColor};`" v-if="getType(props.data)!==''">
+                            {{getType(props.data)}}
+                        </div>
+                        <div :style="`color:${getTextTypeColor(props.data)};`">
+                            {{getText(props.data)}}
+                        </div>
+                    </div>
+
+                    <div :style="`padding-left:5px; color:${useColors.keyNumbersColor};`">
+                        {{genBlock(props.data)}}
+                    </div>
+
+                </div>
+            </template>
+        </WTree>
+
+        <div style="padding:12px; font-size:0.8rem;" v-if="lockFromSetData">
+            {{loadingText}}
         </div>
 
-    </WPanelScrollyCore>
+    </div>
 </template>
 
 <script>
-import color2hex from '../js/vuetifyColor.mjs'
-import each from 'lodash/each'
-import get from 'lodash/get'
+// import each from 'lodash/each'
+// import map from 'lodash/map'
+// import get from 'lodash/get'
 import size from 'lodash/size'
-import keys from 'lodash/keys'
-import last from 'lodash/last'
+// import keys from 'lodash/keys'
+// import last from 'lodash/last'
 import cloneDeep from 'lodash/cloneDeep'
 import isNumber from 'lodash/isNumber'
-import isString from 'lodash/isString'
-import isBoolean from 'lodash/isBoolean'
+// import isString from 'lodash/isString'
+// import isBoolean from 'lodash/isBoolean'
 // import isArray from 'lodash/isArray' //會誤判function為array
 // import isObject from 'lodash/isObject' //會誤判function為object
-import isFunction from 'lodash/isFunction'
-import toString from 'lodash/toString'
-import cint from 'wsemi/src/cint.mjs'
+// import isFunction from 'lodash/isFunction'
+// import toString from 'lodash/toString'
+// import cint from 'wsemi/src/cint.mjs'
 import isarr from 'wsemi/src/isarr.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
-import sep from 'wsemi/src/sep.mjs'
-import genID from 'wsemi/src/genID.mjs'
-import genPm from 'wsemi/src/genPm.mjs'
-import delay from 'wsemi/src/delay.mjs'
-import debounce from 'wsemi/src/debounce.mjs'
-import binarySearch from '../js/binarySearch.mjs'
-import globalMemory from '../js/globalMemory.mjs'
-import WPanelScrollyCore from './WPanelScrollyCore.vue'
-import WJsonViewCore from './WJsonViewCore.vue'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import isstr from 'wsemi/src/isstr.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import isbol from 'wsemi/src/isbol.mjs'
+import isfun from 'wsemi/src/isfun.mjs'
+// import sep from 'wsemi/src/sep.mjs'
+// import convertToTree from 'wsemi/src/convertToTree.mjs'
+// import genID from 'wsemi/src/genID.mjs'
+// import genPm from 'wsemi/src/genPm.mjs'
+// import delay from 'wsemi/src/delay.mjs'
+import waitFun from 'wsemi/src/waitFun.mjs'
+// import debounce from 'wsemi/src/debounce.mjs'
+import haskey from 'wsemi/src/haskey.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
+// import binarySearch from '../js/binarySearch.mjs'
+// import globalMemory from '../js/globalMemory.mjs'
+import convertToTreeWk from '../js/convertToTreeWk.wk.umd.js'
+// import WPanelScrollyCore from './WPanelScrollyCore.vue'
+// import WDynamicList from './WDynamicList.vue'
+import WTree from './WTree.vue'
 
 
-//gm
-let gm = globalMemory()
+// //gm
+// let gm = globalMemory()
 
 
 /**
  * @vue-prop {Array|Object} [data={}] 輸入資料陣列或物件，預設{}
  * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400
- * @vue-prop {Number} [itemMinHeight=24] 輸入各元素顯示高度，單位為px，預設24，會於真實顯示後自動更新高度
+ * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
+ * @vue-prop {Number} [indent=1] 輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1
+ * @vue-prop {Number} [iconHeight=24] 輸入顯隱icon按鈕高度數字，單位為px，預設24
+ * @vue-prop {String} [iconToggleColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
+ * @vue-prop {String} [iconToggleBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
+ * @vue-prop {String} [iconToggleBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
+ * @vue-prop {String} [filterKeywords=''] 輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''
+ * @vue-prop {Function} [filterFunction=null] 輸入過濾時呼叫處理函數，傳入為各項目物件資料，回傳布林值代表項目內是否含有關鍵字，預設null
+ * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
+ * @vue-prop {Number} [defItemHeight=24] 輸入按需顯示時各項目預設高度值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設24
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
- * @vue-prop {String} [iconColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
  * @vue-prop {String} [keyColor='grey darken-2'] 輸入鍵值顏色字串，預設'grey darken-2'
  * @vue-prop {String} [keyNumbersColor='grey lighten-1'] 輸入鍵值內含子節點數量顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [numColor='indigo accent-2'] 輸入值為數值時的顏色字串，預設'indigo accent-2'
@@ -77,30 +121,64 @@ let gm = globalMemory()
  * @vue-prop {String} [bolColor='#ab0d90'] 輸入值為布林值時的顏色字串，預設'#ab0d90'
  * @vue-prop {String} [funColor='purple accent-2'] 輸入值為函數時的顏色字串，預設'purple accent-2'
  * @vue-prop {String} [defaultColor='grey darken-4'] 輸入值為其他類型時的顏色字串，預設'grey darken-4'
- * @vue-prop {Boolean} [defDisplayChildren=true] 輸入是否預先展開全部節點，預設true
- * @vue-prop {String} [searchEmpty='Empty'] 輸入無過濾結果字串，預設'Empty'
- * @vue-prop {Boolean} [valueStyleBreakAll=false] 輸入值顯示樣式是否使用強迫斷字換行，主要用於超長連續文字可避免暴版，預設false
  * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
  */
 export default {
     components: {
-        WPanelScrollyCore,
-        WJsonViewCore,
+        // WPanelScrollyCore,
+        // WDynamicList,
+        WTree,
     },
     props: {
         data: {
             type: [Array, Object],
             default: () => {},
         },
+        viewHeightMax: {
+            type: Number,
+            default: 400,
+        },
+        defaultDisplayLevel: {
+            type: Number,
+            default: null,
+        },
+        indent: {
+            type: Number,
+            default: 1,
+        },
+        iconHeight: {
+            type: Number,
+            default: 24,
+        },
+        iconToggleColor: {
+            type: String,
+            default: 'grey',
+        },
+        iconToggleBackgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+        iconToggleBackgroundColorHover: {
+            type: String,
+            default: 'rgba(128,128,128,0.15)',
+        },
         filterKeywords: {
             type: String,
             default: '',
         },
-        viewHeightMax: {
-            type: Number,
-            default: 400,
+        filterFunction: {
+            type: Function,
+            default: null,
+        },
+        loadingText: {
+            type: String,
+            default: 'Loading...',
+        },
+        noResultsText: {
+            type: String,
+            default: 'No results',
         },
-        itemMinHeight: {
+        defItemHeight: {
             type: Number,
             default: 24,
         },
@@ -108,10 +186,6 @@ export default {
             type: Number,
             default: 5,
         },
-        iconColor: {
-            type: String,
-            default: 'grey',
-        },
         keyColor: {
             type: String,
             default: 'grey darken-2',
@@ -140,18 +214,6 @@ export default {
             type: String,
             default: 'grey darken-4',
         },
-        defDisplayChildren: {
-            type: Boolean,
-            default: true,
-        },
-        searchEmpty: {
-            type: String,
-            default: 'Empty',
-        },
-        valueStyleBreakAll: {
-            type: Boolean,
-            default: false,
-        },
         show: {
             type: Boolean,
             default: true,
@@ -159,84 +221,42 @@ export default {
     },
     data: function() {
         return {
-            dbc: debounce(),
-            mmkey: null,
-            useColors: {},
-            changeHeight: true, //是否有變更高度, 預設true使一開始能強制計算各節點高度
-            changeDisplay: true, //是否有變更displayChildren
-            changeDisplayIndex: null, //變更displayChildren的item指標
-            changeFilter: false, //是否有變更過濾關鍵字
-            lineNumberWidth: 0, //列號區寬度
-            toggling: false, //上鎖afterToggleItems, 是否顯隱節點中
-            scrollRatio: 0, //捲動比例
-            scrollInfor: null, //目前捲軸資訊
-            toggleInfor: {}, //之前捲軸位置資訊物件
-            itemsHeight: 0, //儲存全部項目高度
-            filterKeywordsTemp: '', //上次過濾關鍵字
-            viewInfor: {},
-            //items: [],
-            useItems: [],
-        }
-    },
-    mounted: function() {
-        //console.log('mounted')
+            // dbcRefresh: debounce(),
+            // dbc: debounce(),
 
-        let vo = this
+            // mmkey: null,
 
-        //refresh
-        vo.refresh('mounted')
+            lockFromSetData: false, //上鎖, 指定數據時禁止變更
 
+            useColors: {}, //因模板初始化就會用到, 故得預設空物件
+            root: '___root___', //輸入數據為物件時, 會預設放在root內才能提供顯隱功能
+            lineNumberWidth: 0, //列號區寬度
+
+        }
     },
-    beforeDestroy: function() {
-        //console.log('beforeMount')
+    // beforeDestroy: function() {
+    //     //console.log('beforeMount')
 
-        let vo = this
+    //     let vo = this
 
-        //remove
-        if (vo.mmkey !== null) {
-            gm.remove(vo.mmkey)
-        }
+    //     //remove
+    //     if (vo.mmkey !== null) {
+    //         gm.remove(vo.mmkey)
+    //     }
 
-    },
+    // },
     watch: {
 
         data: {
             immediate: true,
             deep: true,
             handler(value) {
-                //console.log('watch data', value)
+                // console.log('watch data', value)
 
                 let vo = this
 
-                //check
-                if (vo.mmkey === null) {
-
-                    //mmkey
-                    vo.mmkey = genID()
-
-                }
-                else {
-
-                    //remove
-                    gm.remove(vo.mmkey)
-
-                }
-
-                //items
-                let items = vo.parseData(vo.data)
-
-                //lineNumberWidth, 每個字元使用13px寬度
-                let lineNumberWidth = (Math.ceil(Math.pow(size(items), 0.1)) + 1) * 13
-
-                //save items
-                //vo.items = items
-                gm.set(vo.mmkey, items)
-
-                //save lineNumberWidth
-                vo.lineNumberWidth = lineNumberWidth
-
-                //refresh
-                vo.refresh('watch')
+                //setData
+                vo.setData(value)
 
             }
         }
@@ -255,19 +275,19 @@ export default {
             return ''
         },
 
-        changeFilterKeyWords: function() {
-            //console.log('computed changeFilterKeyWords')
+        // changeFilterKeyWords: function() {
+        //     //console.log('computed changeFilterKeyWords')
 
-            let vo = this
+        //     let vo = this
 
-            //ft to trigger
-            let ft = vo.filterKeywords
+        //     //ft to trigger
+        //     let ft = vo.filterKeywords
 
-            //refreshDebounce
-            vo.refreshDebounce('changeFilterKeyWords')
+        //     //refreshDebounce
+        //     vo.refreshDebounce('changeFilterKeyWords')
 
-            return ft
-        },
+        //     return ft
+        // },
 
     },
     methods: {
@@ -277,894 +297,237 @@ export default {
 
             let vo = this
 
-            vo.useColors.numColor = color2hex(vo.numColor)
-            vo.useColors.strColor = color2hex(vo.strColor)
-            vo.useColors.bolColor = color2hex(vo.bolColor)
-            vo.useColors.funColor = color2hex(vo.funColor)
-            vo.useColors.defaultColor = color2hex(vo.defaultColor)
-
-        },
-
-        refresh: async function(from) {
-            //console.log('methods refresh', from)
-
-            let vo = this
-
-            let n = 0
-            let limit = 3
-            async function core() {
-                let pm = genPm()
-
-                //n
-                n += 1
-
-                //check, 取得元素高度因文字換行會有來回變動問題, 需有強制跳出機制
-                if (n > limit) {
-                    //console.log(`已重複refresh ${limit} 次, 強制跳出`)
-                    pm.resolve(false)
-                    return pm
-                }
-
-                //genUseItems
-                vo.genUseItems()
-
-                //delay
-                await delay(1)
-
-                //filterItems
-                vo.filterItems()
-
-                //delay
-                await delay(1)
-
-                //updateItemsHeight
-                let b = vo.updateItemsHeight()
-
-                //resolve
-                pm.resolve(b)
-
-                return pm
+            //check
+            if (iseobj(vo.useColors)) {
+                return
             }
 
-            async function call() {
-
-                //若任何元素高度有變更則再重新計算需顯示的節點, 此時的確有可能會載入新節點, 所以原本給予節點之預設高度不能太高, 偵測時元素就多是變高, 所以需顯示的節點就會變少, 避免造成重新載入新節點狀況
-                let r = await core()
-                while (r) {
-                    r = await core()
-                }
-
+            //useColors
+            let useColors = {
+                numColor: color2hex(vo.numColor),
+                strColor: color2hex(vo.strColor),
+                bolColor: color2hex(vo.bolColor),
+                funColor: color2hex(vo.funColor),
+                defaultColor: color2hex(vo.defaultColor),
+                keyColor: color2hex(vo.keyColor),
+                keyNumbersColor: color2hex(vo.keyNumbersColor),
             }
 
-            //call
-            await call()
-
-            //genUseItems
-            vo.genUseItems()
-
-            // //delayShow
-            // for (let k = 0; k < size(vo.useItems); k++) {
-            //     let v = vo.useItems[k]
-            //     if (!v.delayShow) {
-            //         v.delayShow = true
-            //     }
-            // }
+            //save
+            vo.useColors = useColors
 
         },
 
-        refreshDebounce: function(from) {
-            //console.log('methods refreshDebounce', from)
+        parseData: async function(data) {
+            // console.log('methods parseData', data)
 
             let vo = this
 
-            //dbc
-            vo.dbc(() => {
-
-                //refresh
-                vo.refresh(from)
-
-            })
-
-        },
-
-        genUseItems: function() {
-            //console.log('methods genUseItems')
-
-            let vo = this
-
-            //default scrollInfor
-            if (vo.scrollInfor === null) {
-                vo.scrollInfor = {
-                    r: 0,
-                    t: 0,
-                    b: vo.viewHeightMax,
-                    ch: vo.itemsHeight,
-                }
-            }
-
-            //items
-            //let items = vo.items
-            let items = gm.get(vo.mmkey)
-
-            //n
-            let n = size(items)
-
-            //check
-            if (n === 0) {
-                return
-            }
-
-            //indStart, 該元素區有侵入顯示區
-            let indStartActual = binarySearch(items, (ind) => {
-                let v = items[ind]
-                let dy = vo.scrollInfor.t - (v.y + v.height)
-                return dy
-            })
-            if (indStartActual === null) {
-                indStartActual = 0
-            }
-            let indStart = Math.max(indStartActual - vo.itemsPreload, 0)
-
-            //indEnd, 該元素區有侵入顯示區
-            let indEndActual = binarySearch(items, (ind) => {
-                let v = items[ind]
-                let dy = vo.scrollInfor.b - v.y
-                return dy
-            })
-            if (indEndActual === null) {
-                indEndActual = n - 1
-            }
-            let indEnd = Math.min(indEndActual + vo.itemsPreload, n - 1)
-
-            // //kpDelayShow
-            // let kpDelayShow = {}
-            // each(vo.useItems, (v) => {
-            //     kpDelayShow[v.index] = true
-            // })
-
-            //useItems
-            let useItems = []
-            for (let k = indStart; k <= indEnd; k++) {
-                let v = {
-                    ...items[k]
-                }
-                if (v.show && v.filterShow) {
-                    v.screenY = v.y - vo.scrollInfor.t //換算成實際顯示y向的px位置
-                    v.nowShow = k >= indStartActual //顯示區下方之預載節點都直接顯示供重算高度
-                    //v.delayShow = kpDelayShow[k] === true //已經顯示的節點就直接顯示, 否則delayShow=false就是延遲顯示
-                    useItems.push(v)
-                }
-            }
-
-            //save
-            vo.useItems = useItems
+            //convertToTree
+            // console.log('convertToTree1', cloneDeep(data))
+            // let items = convertToTree(data, { bindRoot: vo.root })
+            let items = await convertToTreeWk(data, { bindRoot: vo.root })
+            // console.log('convertToTree2', cloneDeep(items))
 
+            return items
         },
 
-        updateItemsHeight: function() {
-            // console.log('methods updateItemsHeight')
+        setData: function(data) {
+            // console.log('methods setData', data)
 
             let vo = this
 
-            //items
-            //let items = vo.items
-            let items = gm.get(vo.mmkey)
-
-            //n
-            let n = size(items)
+            async function core() {
 
-            //check
-            let showPath = []
-            function nodeShow(parent) {
-                let n = showPath.length
-                if (parent) {
-                    n -= 1
-                }
-                for (let i = 0; i < n; i++) {
-                    if (!get(showPath[i], 'displayChildren', false)) {
-                        return false
-                    }
-                }
-                return true
-            }
-            if (vo.changeDisplay) {
+                //lock
+                vo.lockFromSetData = true
 
                 //check
-                let indexClick = 0
-                if (vo.changeDisplayIndex !== null) {
-                    indexClick = vo.changeDisplayIndex
+                if (!isarr(data) && !isobj(data)) {
+                    let msg = 'data is not an array or object'
+                    //console.log(msg)
+                    return msg
                 }
 
-                //update show
-                let levelClick = null
-                for (let k = indexClick; k < n; k++) {
-                    let v = items[k]
-
-                    //有子節點
-                    if (v.stateChildren === 1) {
-
-                        //push
-                        showPath.push({
-                            displayChildren: v.displayChildren,
-                            level: v.level,
-                        })
-
-                    }
-
-                    if (k === indexClick) {
-                        //點擊此節點, 一定是當前可見(v.show=true)才能被點擊
-
-                        //save level
-                        levelClick = v.level
-
-                    }
-                    else if (k > indexClick) {
-                        //之後節點
-
-                        //show
-                        if (v.stateChildren === 1) {
-
-                            //若有子節點, 則showPath內已添加自己, 需由上一層資訊判斷是否顯示
-                            v.show = nodeShow(true)
-
-                        }
-                        else if (v.stateChildren === -1) {
+                //convertColors, 解析資料比computed還快, 故需先執行轉換顏色
+                vo.convertColors()
 
-                            //有子節點的尾節點, 由上一層資訊判斷是否顯示, 若顯示, 且起始節點亦需顯示子節點時, 才顯示尾節點
-                            let o = last(showPath)
-                            v.show = nodeShow(true) && o.displayChildren
+                //cloneDeep
+                data = cloneDeep(data)
+                // console.log('data', cloneDeep(data))
 
-                        }
-                        else {
+                //parseData, convertToTree轉出預設有root
+                let tree = await vo.parseData(data)
+                // console.log('parseData tree', cloneDeep(tree))
 
-                            //show
-                            v.show = nodeShow(false)
+                // //save
+                // //vo.rows = rows
+                // gm.set(vo.mmkey, rows)
 
-                        }
-
-                    }
-
-                    //子節點的尾節點
-                    if (v.stateChildren === -1) {
-
-                        //pop
-                        showPath.pop()
-
-                    }
-
-                    //break
-                    if (k > indexClick && v.level === levelClick) {
-                        break
-                    }
+                //wait wt, 組件初始化時會先觸發computed才會有實體元素出現, 故得用waitFun等待
+                await waitFun(() => {
+                    return vo.$refs.wt !== undefined
+                }, { timeInterval: 20 })
 
+                //setData
+                if (vo.$refs.wt) { //於async中組件切換時還是有可能消失
+                    await vo.$refs.wt.setData(tree)
                 }
 
-            }
-
-            //check changeHeight
-            let wjvc = get(vo, '$refs.wjvc', []) //可能因切換組件導致元素消失
-            each(wjvc, (cmp) => {
-                let v = cmp.$el
-                if (v.getAttribute) {
-                    let nowShow = v.getAttribute('nowShow')
-                    if (nowShow) {
-                        let index = cint(v.getAttribute('index'))
-                        if (index >= 0 && index < n) {
-                            let h = v.offsetHeight //元素不要用margin避免計算高度有誤差
-                            if (items[index].height !== h) {
-                                items[index].height = h
-                                vo.changeHeight = true
-                            }
-                        }
-                    }
-                }
-            })
+                //getLineNumberWidth
+                vo.getLineNumberWidth()
 
-            //check visible, 若組件未顯示(例如display:none)則不視為高度有變更狀態, 避免無限更新
-            if (!vo.show) {
-                vo.changeHeight = false
             }
 
-            //check
-            let b = vo.changeHeight || vo.changeDisplay || vo.changeFilter
-            if (b) {
-
-                //update y
-                let y = 0
-                for (let k = 0; k < n; k++) {
-                    let v = items[k]
-                    if (v.y !== y) {
-                        v.y = y
-                    }
-                    if (v.show && v.filterShow) {
-                        y += v.height
-                    }
-                }
-
-                //update itemsHeight
-                let itemsHeightTemp = vo.itemsHeight
-                if (itemsHeightTemp !== y) {
-                    itemsHeightTemp = y
-                }
-
-                //check empty
-                if (itemsHeightTemp === 0) {
-                    itemsHeightTemp = 43 //先預算出empty時高度
-                }
-
-                //check same
-                let pxLimit = 4 //全部項目高度誤差門檻(px)
-                if (Math.abs(vo.itemsHeight - itemsHeightTemp) > pxLimit) { //偵測總項目高度是否與前次差超過pxLimit
-                    vo.itemsHeight = itemsHeightTemp
-                }
-                else {
-                    b = vo.changeFilter //若沒超過門檻pxLimit, 則b直接使用changeFilter, 否則b為包含changeHeight影響導致refresh while持續偵測
-                }
+            //core
+            core()
+                .catch((err) => {
+                    console.log(err)
+                })
+                .finally(() => {
 
-                //reset
-                vo.changeDisplay = false
-                vo.changeDisplayIndex = null
-                vo.changeHeight = false
-                vo.changeFilter = false
+                    //unlock
+                    vo.lockFromSetData = false
 
-            }
+                })
 
-            return b
         },
 
-        parseData: function(d) {
-            //console.log('methods parseData', d)
+        getLineNumberWidth: function() {
+            // console.log('methods getLineNumberWidth')
 
             let vo = this
 
-            //convertColors, 解析資料比computed還快, 故需先執行轉換顏色
-            vo.convertColors()
+            async function core() {
 
-            let index = -1
-            let items = []
+                //wait wt, 組件初始化時會先觸發computed才會有實體元素出現, 故得用waitFun等待
+                await waitFun(() => {
+                    return vo.$refs.wt !== undefined
+                }, { timeInterval: 20 })
 
-            function cValue(v) {
-                if (isNumber(v)) {
-                    return {
-                        type: 'num',
-                        value: toString(v),
-                    }
-                }
-                else if (isString(v)) {
-                    return {
-                        type: 'str',
-                        value: `"${v}"`,
-                    }
-                }
-                else if (isBoolean(v)) {
-                    let c = 'false'
-                    if (v) {
-                        c = 'true'
-                    }
-                    return {
-                        type: 'bol',
-                        value: c,
-                    }
-                }
-                else if (isFunction(v)) {
-                    return {
-                        type: 'fun',
-                        value: v.toString(),
-                    }
-                }
-                return {
-                    type: 'default',
-                    value: v,
+                //check
+                if (!vo.$refs.wt) { //於async中組件切換時還是有可能消失
+                    return
                 }
-            }
 
-            function addItem({ parentIndex, level, key, keyNumbers, value, valueColor, valueComma, valueTail, stateChildren }) {
-                index += 1
-                let item = {
-                    index, //節點指標
-                    level, //int, 節點層數(縮排)
-                    paddingLeft: level * 24 + 16, //num, 給予16px放置顯隱icon
-                    key, //str, 鍵
-                    keyNumbers, //obj, 鍵值為陣列或物件顯示所含節點數量
-                    value, //str, 值
-                    valueColor, //str, 數值顏色, 需依照值型別給予
-                    valueComma, //bol, 數值後方是否顯示","
-                    valueTail, //str, 數值後方結尾符號, 僅用於陣列或物件, 供displayChildren=false時額外顯示出結尾符號
-                    stateChildren, //num, 子節點狀態, 僅陣列或物件才為1, 陣列或物件的尾節點為-1, 其他為0
-                    displayChildren: vo.defDisplayChildren, //bol, 是否顯示子節點
-                    show: true, //bol, 是否顯示此節點
-                    filterShow: true, //bol, 是否過濾後顯示此節點
-                    height: vo.itemMinHeight, //num, 節點高度, 日後動態更新
-                    y: index * vo.itemMinHeight, //num, 節點y向位置, 預設先由最小列高計算
-                    parentIndex, //num, 父節點編號
-                    // screenY: 0, //num, 節點換算比率後的顯示y向位置
-                    // nowShow: false, //bol, 預先載入用, 判斷節點是否隸屬於顯示區域內, 可被重算元素高度
-                    // delayShow: false, //bol, 延遲載入用, 是否顯示節點
-                }
-                items.push(item)
-            }
+                //getRows
+                let rows = vo.$refs.wt.getRows()
 
-            function pArray({ parentIndex, level, key, value, last }) {
+                //n, json展開後總列數
+                let n = size(rows)
+                // console.log('size(rows)', n)
 
-                let selfIndex = index + 1
-                let n = size(value)
-                let keyNumbers = {
-                    type: 'arr',
-                    n,
-                }
+                //nn, 列數字元數
+                let nn = Math.ceil(Math.log10(n))
 
-                let _key = `[`
-                if (key !== null) {
-                    _key = `${key} :  [`
-                }
-                addItem({
-                    parentIndex,
-                    level,
-                    key: _key,
-                    value: null,
-                    valueColor: null,
-                    valueTail: ']',
-                    keyNumbers,
-                    valueComma: false,
-                    stateChildren: 1,
-                })
-
-                // each(value, (v, k) => {
-                //     pSelf({
-                //         level: level + 1,
-                //         key: k,
-                //         value: v,
-                //         last: (k + 1) === n,
-                //     })
-                // })
-                for (let k = 0; k < n; k++) {
-                    pSelf({
-                        parentIndex: selfIndex,
-                        level: level + 1,
-                        key: k,
-                        value: value[k],
-                        last: (k + 1) === n,
-                    })
-                }
+                //lineNumberWidth, 每個字元概估使用寬度8px, 若為111這種就會很窄, 若為999就會較寬, 故多0.5字元數避免過窄
+                let lineNumberWidth = (nn + 0.5) * 8
 
-                let cend = `],`
-                if (last) {
-                    cend = `]`
-                }
-                addItem({
-                    parentIndex: selfIndex,
-                    level,
-                    key: cend,
-                    value: null,
-                    valueColor: null,
-                    keyNumbers: null,
-                    valueComma: false,
-                    stateChildren: -1,
-                })
+                //save lineNumberWidth
+                vo.lineNumberWidth = lineNumberWidth
 
             }
 
-            function pObject({ parentIndex, level, key, value, last }) {
-
-                let selfIndex = index + 1
-                let n = size(keys(value))
-                let keyNumbers = {
-                    type: 'obj',
-                    n,
-                }
-
-                let _key = `{`
-                if (key !== null) {
-                    _key = `${key} :  {`
-                }
-                addItem({
-                    parentIndex,
-                    level,
-                    key: _key,
-                    value: null,
-                    valueColor: null,
-                    valueTail: '}',
-                    keyNumbers,
-                    valueComma: false,
-                    stateChildren: 1,
+            //core
+            core()
+                .catch((err) => {
+                    console.log(err)
                 })
 
-                // each(value, (v, k) => {
-                //     pSelf({
-                //         level: level + 1,
-                //         key: k,
-                //         value: v,
-                //         last: (k + 1) === n,
-                //     })
-                // })
-                let kks = Object.keys(value)
-                for (let i = 0; i < kks.length; i++) {
-                    let k = kks[i]
-                    pSelf({
-                        parentIndex: selfIndex,
-                        level: level + 1,
-                        key: k,
-                        value: value[k],
-                        last: (k + 1) === n,
-                    })
-                }
+        },
 
-                let cend = `},`
-                if (last) {
-                    cend = `}`
-                }
-                addItem({
-                    parentIndex: selfIndex,
-                    level,
-                    key: cend,
-                    value: null,
-                    valueColor: null,
-                    keyNumbers: null,
-                    valueComma: false,
-                    stateChildren: -1,
-                })
+        genBlock: function(nodeData) {
+            // console.log('methods genBlock', nodeData)
 
-            }
+            // let vo = this
 
-            function pSelf({ parentIndex, level, key, value, last }) {
-                if (isarr(value)) {
-                    pArray({ parentIndex, level, key, value, last })
-                }
-                else if (isobj(value)) {
-                    pObject({ parentIndex, level, key, value, last })
-                }
-                else {
-                    let r = cValue(value)
-                    let c = vo.useColors[`${r.type}Color`]
-                    addItem({
-                        parentIndex,
-                        level,
-                        key: `${key} :  `,
-                        value: r.value,
-                        valueColor: c,
-                        keyNumbers: null,
-                        valueComma: !last,
-                        stateChildren: 0,
-                    })
-                }
-            }
-
-            if (isarr(d)) {
-                pArray({
-                    parentIndex: null,
-                    level: 0,
-                    key: null,
-                    value: d,
-                    last: true,
-                })
+            //bk
+            let bk = ''
+            if (nodeData.type === 'object') {
+                bk = `{${nodeData.numOfChilren}}`
             }
-            else if (isobj(d)) {
-                pObject({
-                    parentIndex: null,
-                    level: 0,
-                    key: null,
-                    value: d,
-                    last: true,
-                })
-            }
-            else {
-                let r = cValue(d)
-                let c = vo.useColors[`${r.type}Color`]
-                addItem({
-                    parentIndex: null,
-                    level: 0,
-                    key: null,
-                    value: r.value,
-                    valueColor: c,
-                    keyNumbers: null,
-                    valueComma: null,
-                    stateChildren: 0,
-                })
+            else if (nodeData.type === 'array') {
+                bk = `[${nodeData.numOfChilren}]`
             }
 
-            return items
+            return bk
         },
 
-        toggleItems: async function(item) {
-            //console.log('methods toggleItems', item)
+        getKey: function(nodeData) {
+            // console.log('methods getKey', nodeData)
 
             let vo = this
 
-            //lock
-            vo.toggling = true
-
-            //items
-            //let items = vo.items
-            let items = gm.get(vo.mmkey)
-
-            //toggle, 先變更displayChildren使頁面icon動畫先更新
-            items[item.index].displayChildren = !items[item.index].displayChildren
-
-            //changeDisplay, changeDisplayIndex
-            vo.changeDisplay = true
-            vo.changeDisplayIndex = item.index
-
-            //save toggleInfor
-            // vo.toggleInfor = {
-            //     ...vo.scrollInfor,
-            //     itemClickY: items[item.index].y, //點擊時, 點擊節點的頂端y座標
-            // }
-            vo.toggleInfor = cloneDeep(vo.scrollInfor)
-
-            //refresh
-            await vo.refresh('toggleItems')
-
-            //triggerEvent, 上鎖階段呼叫自行創建的toggleItemsEnd事件
-            vo.triggerEvent('after-toggle-items')
-
-        },
-
-        afterToggleItems: async function(e) {
-            //console.log('methods afterToggleItems', e)
-
-            let vo = this
-
-            //check, 無上鎖時不能執行
-            if (!vo.toggling) {
-                return
+            let k = ''
+            if (isestr(nodeData.key) || isNumber(nodeData.key)) {
+                k = nodeData.key
             }
-
-            //check
-            let r = 0
-            if (size(vo.useItems) > 0 && vo.itemsHeight > 0 && vo.toggleInfor.ch > 0) { //已有內容資料
-
-                //內容高度變少, 點擊節點為隱藏動作
-                if (vo.itemsHeight < vo.toggleInfor.ch) {
-
-                    //內容高度小於等於當前視窗高度
-                    if (vo.itemsHeight <= vo.viewHeightMax) {
-                        r = 0
-                        //console.log('隱藏, 內容高度小於當前視窗高度, r=', r)
-                    }
-                    // else if (vo.toggleInfor.r === 0) {
-                    //     r = vo.toggleInfor.r
-                    //     //console.log('顯示, 原本為置頂故需維持, r=', r)
-                    // }
-                    // else if (vo.toggleInfor.r === 1) { //若顯示的節點過多就不會固定畫面於滑鼠點擊處, 不使用
-                    //     r = vo.toggleInfor.r
-                    //     //console.log('顯示, 原本為置底, r=', r)
-                    // }
-                    //內容高度大於當前視窗高度
-                    else {
-                        r = vo.toggleInfor.t / (vo.itemsHeight - vo.viewHeightMax)
-                        //console.log('隱藏, 內容高度大於當前視窗高度, r=', r, vo.toggleInfor.t, vo.itemsHeight, vo.viewHeightMax)
-                    }
-
-                }
-                //內容高度變高或不變, 點擊節點為顯示動作
-                else {
-
-                    //內容高度小於等於當前視窗高度
-                    if (vo.itemsHeight <= vo.viewHeightMax) {
-                        r = 0
-                        //console.log('顯示, 內容高度小於當前視窗高度, r=', r)
-                    }
-                    // else if (vo.toggleInfor.r === 0) {
-                    //     r = vo.toggleInfor.r
-                    //     //console.log('顯示, 原本為置頂故需維持, r=', r)
-                    // }
-                    // else if (vo.toggleInfor.r === 1) { //若顯示的節點過多就不會固定畫面於滑鼠點擊處, 不使用
-                    //     r = vo.toggleInfor.r
-                    //     //console.log('顯示, 原本為置底, r=', r)
-                    // }
-                    //內容高度大於當前視窗高度
-                    else {
-                        r = vo.toggleInfor.t / (vo.itemsHeight - vo.viewHeightMax)
-                        //console.log('顯示, 內容高度大於當前視窗高度, r=', r, vo.toggleInfor.t, vo.itemsHeight, vo.viewHeightMax)
-                    }
-
-                }
-
+            if (k === vo.root) {
+                k = ''
             }
 
-            //scrollRatio, 變更scrollRatio不會觸發panel捲動事件, 得自己呼叫
-            vo.scrollRatio = r
-
-            //triggerEvent
-            vo.triggerEvent(null)
-
-            //unluck
-            vo.toggling = false
-
+            return k
         },
 
-        changeScrollInfor: async function(e) {
-            //console.log('methods changeScrollInfor', e)
-
-            let vo = this
-
-            //check
-            if (vo.mmkey === null) {
-                return
-            }
+        getType: function(nodeData) {
+            // console.log('methods getType', nodeData)
 
-            // //check, 不能判斷scrollInfor是否相等, 因wsp會有resize觸發此事件, 會給出內部的scrollInfor與上次相同故為原值, 若檢查相同則離開將無法重算各動態項目高度
-            // if (isEqual(vo.scrollInfor, e)) {
-            //     return
-            // }
+            // let vo = this
 
-            //check, 有上鎖時不能執行
-            if (vo.toggling) {
-                return
+            //t
+            let t = ''
+            if (nodeData.type !== 'node') {
+                t = nodeData.type
             }
 
-            //save
-            vo.scrollInfor = e
-
-            //refresh
-            await vo.refresh('changeWsp')
-
+            return t
         },
 
-        filterItems: function() {
-            //console.log('methods filterItems')
-
-            let vo = this
+        getText: function(nodeData) {
+            // console.log('methods getText', nodeData)
 
-            //check
-            if (vo.mmkey === null) {
-                return
-            }
+            // let vo = this
 
-            //check filterKeywordsTemp
-            if (vo.filterKeywordsTemp === vo.filterKeywords) {
-                return
+            //t
+            let t = ''
+            if (nodeData.type === 'node') {
+                t = nodeData.text
             }
-            vo.filterKeywordsTemp = vo.filterKeywords
-
-            //items
-            //let items = vo.items
-            let items = gm.get(vo.mmkey)
-
-            //n
-            let n = size(items)
-
-            //updateParent
-            function updateParent(k) {
 
-                //self
-                items[k].filterShow = true //可見
-
-                //往上找parentIndex的父節點, 更改為顯示
-                let pi = items[k].parentIndex
-                while (pi !== null) {
+            return t
+        },
 
-                    //父節點
-                    items[pi].filterShow = true //可見
+        getTextTypeColor: function(nodeData) {
+            // console.log('methods getTextTypeColor', nodeData)
 
-                    //往後找level一樣者, 也改為顯示
-                    let selfLevel = items[pi].level
-                    for (let j = pi + 1; j < n; j++) { //往後找同level就是結束區塊符號
-                        if (items[j].level === selfLevel) {
-                            items[j].filterShow = true //可見
-                            break
-                        }
-                    }
+            let vo = this
 
-                    //reset pi
-                    pi = items[pi].parentIndex
+            let c = vo.useColors.defaultColor
+            if (nodeData.type === 'node') {
 
+                //kc
+                let kc = ''
+                if (isNumber(nodeData.text)) {
+                    kc = 'numColor'
                 }
-
-            }
-
-            //check
-            if (size(vo.filterKeywords) === 0) {
-
-                //預設可見
-                for (let k = 0; k < n; k++) {
-                    items[k].filterShow = true
+                else if (isstr(nodeData.text)) {
+                    kc = 'strColor'
                 }
-
-            }
-            else {
-
-                //預設不可見
-                for (let k = 0; k < n; k++) {
-                    items[k].filterShow = false
+                else if (isbol(nodeData.text)) {
+                    kc = 'bolColor'
                 }
-
-                //kws
-                let kws = sep(vo.filterKeywords.toLowerCase(), ' ')
-
-                //filter
-                let k = -1
-                while (k < n) {
-                    k += 1
-                    if (k >= n - 1) {
-                        break //可於內圈修改k, 故需檢核
-                    }
-                    let v = items[k]
-
-                    //cKey, cValue
-                    let cKey = toString(v.key).toLowerCase()
-                    let cValue = toString(v.value).toLowerCase()
-                    let b
-
-                    //若鍵值(key)含有關建字
-                    b = false
-                    for (let i = 0; i < size(kws); i++) {
-                        let kw = kws[i]
-                        if (cKey.indexOf(kw) >= 0) {
-                            b = true
-                            break
-                        }
-                    }
-
-                    //check
-                    if (b) {
-
-                        //updateParent
-                        updateParent(k)
-
-                        //self
-                        items[k].filterShow = true //可見
-
-                        //往後修改為顯示, 直至level一樣改為顯示才停止
-                        let keyLevel = v.level
-                        while (k < n) {
-                            k += 1
-                            if (k >= n - 1) {
-                                break //可於內圈修改k, 故需檢核
-                            }
-
-                            //end-block
-                            items[k].filterShow = true //可見
-
-                            if (items[k].level === keyLevel) {
-                                break
-                            }
-
-                        }
-
-                        //continue
-                        continue
-
-                    }
-
-                    //若值(value)含有關建字
-                    b = false
-                    for (let i = 0; i < size(kws); i++) {
-                        let kw = kws[i]
-                        if (cValue.indexOf(kw) >= 0) {
-                            b = true
-                            break
-                        }
-                    }
-
-                    //check
-                    if (b) {
-
-                        //updateParent
-                        updateParent(k)
-
-                    }
-
+                else if (isfun(nodeData.text)) {
+                    kc = 'funColor'
                 }
 
-            }
-
-            //changeFilter
-            vo.changeFilter = true
-
-        },
-
-        triggerEvent: function(from) {
-            //console.log('methods triggerEvent', from)
-
-            let vo = this
+                //check
+                if (haskey(vo.useColors, kc)) {
+                    c = vo.useColors[kc]
+                }
 
-            //t
-            let t = get(vo, '$refs.wpsc.triggerEvent', null)
-            if (t) {
-                t(from)
             }
 
+            return c
         },
 
     },