1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 13:07:58 +00:00

Implement object viewer based on codemirror

This commit is contained in:
Romein van Buren 2023-05-29 17:07:58 +02:00
parent 8319f0bd82
commit 5015a47495
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
10 changed files with 415 additions and 248 deletions

View File

@ -8,7 +8,11 @@
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"@codemirror/lang-javascript": "^6.1.8",
"@codemirror/language": "^6.7.0",
"@codemirror/view": "^6.12.0",
"bson": "^4.7.2",
"codemirror": "^6.0.1",
"date-fns": "^2.29.3"
},
"devDependencies": {
@ -123,6 +127,96 @@
"node": ">=4"
}
},
"node_modules/@codemirror/autocomplete": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.7.1.tgz",
"integrity": "sha512-hSxf9S0uB+GV+gBsjY1FZNo53e1FFdzPceRfCfD1gWOnV6o21GfB5J5Wg9G/4h76XZMPrF0A6OCK/Rz5+V1egg==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.6.0",
"@lezer/common": "^1.0.0"
},
"peerDependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"node_modules/@codemirror/commands": {
"version": "6.2.4",
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
"integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"node_modules/@codemirror/lang-javascript": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.8.tgz",
"integrity": "sha512-5cIA6IOkslTu1DtldcYnj7hsBm3p+cD37qSaKvW1kV16M6q9ysKvKrveCOWgbrj4+ilSWRL2JtSLudbeB158xg==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.6.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/javascript": "^1.0.0"
}
},
"node_modules/@codemirror/language": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.7.0.tgz",
"integrity": "sha512-4SMwe6Fwn57klCUsVN0y4/h/iWT+XIXFEmop2lIHHuWO0ubjCrF3suqSZLyOQlznxkNnNbOOfKe5HQbQGCAmTg==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0",
"style-mod": "^4.0.0"
}
},
"node_modules/@codemirror/lint": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.1.tgz",
"integrity": "sha512-y1muai5U/uUPAGRyHMx9mHuHLypPcHWxzlZGknp/U5Mdb5Ol8Q5ZLp67UqyTbNFJJ3unVxZ8iX3g1fMN79S1JQ==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"node_modules/@codemirror/search": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.4.0.tgz",
"integrity": "sha512-zMDgaBXah+nMLK2dHz9GdCnGbQu+oaGRXS1qviqNZkvOCv/whp5XZFyoikLp/23PM9RBcbuKUUISUmQHM1eRHw==",
"dependencies": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"node_modules/@codemirror/state": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
"integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
},
"node_modules/@codemirror/view": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.12.0.tgz",
"integrity": "sha512-xNHvbJBc2v8JuEcIGOck6EUGShpP+TYGCEMVEVQMYxbFXfMhYnoF3znxB/2GgeKR0nrxBs+nhBupiTYQqCp2kw==",
"dependencies": {
"@codemirror/state": "^6.1.4",
"style-mod": "^4.0.0",
"w3c-keyname": "^2.2.4"
}
},
"node_modules/@esbuild/android-arm": {
"version": "0.15.18",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@ -211,6 +305,36 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"node_modules/@lezer/common": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz",
"integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng=="
},
"node_modules/@lezer/highlight": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
"integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
"dependencies": {
"@lezer/common": "^1.0.0"
}
},
"node_modules/@lezer/javascript": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.3.tgz",
"integrity": "sha512-k7Eo9z9B1supZ5cCD4ilQv/RZVN30eUQL+gGbr6ybrEY3avBAL5MDiYi2aa23Aj0A79ry4rJRvPAwE2TM8bd+A==",
"dependencies": {
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.0"
}
},
"node_modules/@lezer/lr": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.5.tgz",
"integrity": "sha512-Kye0rxYBi+OdToLUN2tQfeH5VIrpESC6XznuvxmIxbO1lz6M1C90vkjMNYoX1SfbUcuvoPXvLYsBquZ//77zVQ==",
"dependencies": {
"@lezer/common": "^1.0.0"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -514,6 +638,20 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/codemirror": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
"integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -538,6 +676,11 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"node_modules/crelt": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -2987,6 +3130,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/style-mod": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
"integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
},
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -3219,6 +3367,11 @@
}
}
},
"node_modules/w3c-keyname": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.7.tgz",
"integrity": "sha512-XB8aa62d4rrVfoZYQaYNy3fy+z4nrfy2ooea3/0BnBzXW0tSdZ+lRgjzBZhk0La0H6h8fVyYCxx/qkQcAIuvfg=="
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -3389,6 +3542,90 @@
}
}
},
"@codemirror/autocomplete": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.7.1.tgz",
"integrity": "sha512-hSxf9S0uB+GV+gBsjY1FZNo53e1FFdzPceRfCfD1gWOnV6o21GfB5J5Wg9G/4h76XZMPrF0A6OCK/Rz5+V1egg==",
"requires": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.6.0",
"@lezer/common": "^1.0.0"
}
},
"@codemirror/commands": {
"version": "6.2.4",
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
"integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
"requires": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
}
},
"@codemirror/lang-javascript": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.8.tgz",
"integrity": "sha512-5cIA6IOkslTu1DtldcYnj7hsBm3p+cD37qSaKvW1kV16M6q9ysKvKrveCOWgbrj4+ilSWRL2JtSLudbeB158xg==",
"requires": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.6.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/javascript": "^1.0.0"
}
},
"@codemirror/language": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.7.0.tgz",
"integrity": "sha512-4SMwe6Fwn57klCUsVN0y4/h/iWT+XIXFEmop2lIHHuWO0ubjCrF3suqSZLyOQlznxkNnNbOOfKe5HQbQGCAmTg==",
"requires": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0",
"style-mod": "^4.0.0"
}
},
"@codemirror/lint": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.1.tgz",
"integrity": "sha512-y1muai5U/uUPAGRyHMx9mHuHLypPcHWxzlZGknp/U5Mdb5Ol8Q5ZLp67UqyTbNFJJ3unVxZ8iX3g1fMN79S1JQ==",
"requires": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"@codemirror/search": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.4.0.tgz",
"integrity": "sha512-zMDgaBXah+nMLK2dHz9GdCnGbQu+oaGRXS1qviqNZkvOCv/whp5XZFyoikLp/23PM9RBcbuKUUISUmQHM1eRHw==",
"requires": {
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"crelt": "^1.0.5"
}
},
"@codemirror/state": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
"integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
},
"@codemirror/view": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.12.0.tgz",
"integrity": "sha512-xNHvbJBc2v8JuEcIGOck6EUGShpP+TYGCEMVEVQMYxbFXfMhYnoF3znxB/2GgeKR0nrxBs+nhBupiTYQqCp2kw==",
"requires": {
"@codemirror/state": "^6.1.4",
"style-mod": "^4.0.0",
"w3c-keyname": "^2.2.4"
}
},
"@esbuild/android-arm": {
"version": "0.15.18",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@ -3443,6 +3680,36 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"@lezer/common": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz",
"integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng=="
},
"@lezer/highlight": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
"integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
"requires": {
"@lezer/common": "^1.0.0"
}
},
"@lezer/javascript": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.3.tgz",
"integrity": "sha512-k7Eo9z9B1supZ5cCD4ilQv/RZVN30eUQL+gGbr6ybrEY3avBAL5MDiYi2aa23Aj0A79ry4rJRvPAwE2TM8bd+A==",
"requires": {
"@lezer/highlight": "^1.1.3",
"@lezer/lr": "^1.3.0"
}
},
"@lezer/lr": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.5.tgz",
"integrity": "sha512-Kye0rxYBi+OdToLUN2tQfeH5VIrpESC6XznuvxmIxbO1lz6M1C90vkjMNYoX1SfbUcuvoPXvLYsBquZ//77zVQ==",
"requires": {
"@lezer/common": "^1.0.0"
}
},
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -3642,6 +3909,20 @@
"supports-color": "^7.1.0"
}
},
"codemirror": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
"integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
"requires": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -3663,6 +3944,11 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"crelt": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
},
"cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -5334,6 +5620,11 @@
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true
},
"style-mod": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
"integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -5486,6 +5777,11 @@
"dev": true,
"requires": {}
},
"w3c-keyname": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.7.tgz",
"integrity": "sha512-XB8aa62d4rrVfoZYQaYNy3fy+z4nrfy2ooea3/0BnBzXW0tSdZ+lRgjzBZhk0La0H6h8fVyYCxx/qkQcAIuvfg=="
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

View File

@ -9,7 +9,11 @@
"preview": "vite preview"
},
"dependencies": {
"@codemirror/lang-javascript": "^6.1.8",
"@codemirror/language": "^6.7.0",
"@codemirror/view": "^6.12.0",
"bson": "^4.7.2",
"codemirror": "^6.0.1",
"date-fns": "^2.29.3"
},
"devDependencies": {

View File

@ -1 +1 @@
b784ae06d00b4beff63bda990c04ccac
41ff9c11369cc691cfb3189e65792ccd

View File

@ -56,7 +56,7 @@
main {
height: 100vh;
display: grid;
grid-template: 1fr / 250px 1fr;
grid-template: 1fr / minmax(300px, 0.3fr) 1fr;
}
#root.platform-darwin main {
height: calc(100vh - var(--darwin-titlebar-height));

View File

@ -62,6 +62,8 @@
return false;
}
toggleChildren(itemKey, false);
if (activeKey !== itemKey) {
activeKey = itemKey;
if (level === 0) {
@ -79,7 +81,7 @@
dispatch('closeAll');
}
function toggleChildren(itemKey, shift) {
function toggleChildren(itemKey, shift = false) {
childrenOpen[itemKey] = !childrenOpen[itemKey];
if (shift) {
closeAll();
@ -89,6 +91,7 @@
function doubleClick(itemKey) {
// toggleChildren(itemKey, false);
dispatch('trigger', { level, itemKey });
childrenOpen[itemKey] = true;
}
function showContextMenu(evt, item) {

View File

@ -0,0 +1,57 @@
<script>
import { indentWithTab } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { indentOnInput } from '@codemirror/language';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { basicSetup } from 'codemirror';
import { onMount } from 'svelte';
export let text = '';
const editorState = EditorState.create({
doc: '',
extensions: [
basicSetup,
keymap.of([ indentWithTab, indentOnInput ]),
javascript(),
EditorState.tabSize.of(4),
EditorView.updateListener.of(e => {
// if (!e.docChanged) {
// return;
// }
text = e.state.doc.toString();
}),
],
});
let editorParent;
let editor;
onMount(() => {
editor = new EditorView({
parent: editorParent,
state: editorState,
});
editor.dispatch({
changes: {
from: 0,
to: editorState.doc.length,
insert: text,
},
});
});
</script>
<div bind:this={editorParent} class="editor"></div>
<style>
.editor {
width: 100%;
}
.editor :global(.cm-editor) {
overflow: auto;
}
</style>

View File

@ -1,209 +0,0 @@
<script>
export let data;
export let depth = 0;
export let readonly = false;
export let level = 0;
export let last = true;
export let draggable = false;
export let kp = '';
const collapsedSymbol = '...';
let displayOnly = true;
let items;
let isArray;
let openBracket;
let closeBracket;
let collapsed;
let invalid = false;
let textarea;
$: items = getType(data) === 'object' ? Object.keys(data) : [];
$: isArray = Array.isArray(data);
$: openBracket = isArray ? '[' : '{';
$: closeBracket = isArray ? ']' : '}';
$: collapsed = depth < level;
$: textarea && resizeTextarea();
function getType(value) {
if (value === null) {
return 'null';
}
return typeof value;
}
function format(value) {
switch (getType(value)) {
case 'string':
return `${value}`;
case 'function':
return 'f () {...}';
case 'symbol':
return value.toString();
default:
return value;
}
}
function onClick(e) {
if (e.shiftKey) {
if (depth == 0) {
depth = 999;
}
else {
depth = 0;
}
}
collapsed = !collapsed;
}
function onDragstart(e, keypath, value) {
const item = {};
item[keypath] = value;
e.dataTransfer.setData('text/plain', JSON.stringify(item));
}
function onKeydown(event) {
const save = (event.key === 's') && (event.metaKey || event.ctrlKey);
if (!save) {
event.stopPropagation();
}
}
function onInput() {
resizeTextarea();
try {
data = JSON.parse(textarea.value);
invalid = false;
}
catch {
invalid = true;
if (textarea.value.trim == '') {
data = {};
}
}
}
function resizeTextarea() {
textarea.style.overflowY = 'hidden';
textarea.style.height = textarea.scrollHeight + 'px';
}
</script>
{#if displayOnly}
{#if items.length}
<span class:root={level == 0} class:hidden={collapsed}>
{#if draggable && isArray}
<span on:dragstart={e => onDragstart(e, kp, data)} draggable="true" class="bracket" on:click={onClick} tabindex="0">{openBracket}</span>
{:else}
<span class="bracket" on:click={onClick} tabindex="0">{openBracket}</span>
{/if}
<ul on:dblclick={() => (readonly ? displayOnly = true : displayOnly = false)} >
{#each items as i, idx}
<li>
{#if !isArray}
{#if draggable}
<span on:dragstart={e => onDragstart(e, kp ? kp + '.' + i : i, data[i])} draggable="true" class="key">{i}:</span>
{:else}
<span class="key">{i}:</span>
{/if}
{/if}
{#if getType(data[i]) === 'object'}
<svelte:self {readonly} {draggable} kp={kp ? kp + '.' + i : i} data={data[i]} {depth} level={level + 1} last={idx === items.length - 1} />
{:else}
{#if draggable}
<span on:dragstart={e => onDragstart(e, kp ? kp + '.' + i : i, data[i])} draggable="true" class="val {getType(data[i])}">{format(data[i])}</span>{#if idx < items.length - 1}<span draggable class="comma">,</span>{/if}
{:else}
<span class="val {getType(data[i])}">{format(data[i])}</span>{#if idx < items.length - 1}<span class="comma">,</span>{/if}
{/if}
{/if}
</li>
{/each}
</ul>
<span class="bracket" on:click={onClick} tabindex="0">{closeBracket}</span>{#if !last}<span class="comma">,</span>{/if}
</span>
<span style="padding: {level == 0 ? 10 : 0}px;" class="bracket" class:hidden={!collapsed} on:click={onClick} tabindex="0">{openBracket}{collapsedSymbol}{closeBracket}</span>{#if !last && collapsed}<span class="comma">,</span>{/if}
{:else}
{@html isArray ? '[]' : '{}'}
{/if}
{:else}
<textarea on:keydown={onKeydown} spellcheck="false" bind:this={textarea} class:invalid on:input={onInput}>{JSON.stringify(data, null, 2)}</textarea>
{/if}
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
padding-left: var(--nodePaddingLeft, 1rem);
border-left: var(--nodeBorderLeft, 1px dashed #d0d0f0);
color: var(--nodeColor, #666);
}
li {
white-space: nowrap;
}
.root {
font-family: menlo, monospace;
font-size: 90%;
overflow: auto;
}
.hidden {
display: none;
}
.bracket {
cursor: pointer;
}
.bracket:hover {
background: var(--bracketHoverBackground, #d1d5db);
}
.comma {
color: var(--nodeColor, #374151);
opacity: 0.5;
}
.val {
color: var(--leafDefaultColor, #9ca3af);
white-space: nowrap;
}
.val[draggable] {
cursor: move;
}
.val.string {
color: var(--leafStringColor, #000);
}
.val.string:before {
content: "'";
opacity: 0.4;
}
.val.string:after {
content: "'";
opacity: 0.4;
}
.val.number {
color: var(--leafNumberColor, #d97706);
}
.val.boolean {
color: var(--leafBooleanColor, #3994dd);
}
.key.draggable {
cursor: move;
}
textarea {
font-family: menlo, monospace;
padding: 10px;
flex: 1 0;
white-space: pre;
font-size: 90%;
border: none;
margin: 0;
width: 100%;
height: 100%;
outline: none;
line-height: 1.5;
resize: none;
}
textarea.invalid {
background: #ffe3e3;
color: #b30202 !important;
}
</style>

View File

@ -1,64 +1,77 @@
<script>
import Icon from './icon.svelte';
import Modal from './modal.svelte';
import ObjectTree from './objecttree.svelte';
import { onDestroy } from 'svelte';
import { deepClone } from '$lib/objects';
import { createEventDispatcher, onDestroy } from 'svelte';
import ObjectEditor from './objecteditor.svelte';
import { jsonLooseParse } from '$lib/strings';
export let data;
export let saveable = false;
const dispatch = createEventDispatcher();
let copySucceeded = false;
let timeout;
let _data;
let text = JSON.stringify(data, undefined, '\t');
let newData;
let invalid = false;
$: if (data) {
_data = deepClone(data);
for (const key of Object.keys(_data)) {
if (typeof _data[key] === 'undefined') {
delete _data[key];
$: {
try {
newData = jsonLooseParse(text);
}
catch {
invalid = true;
}
}
async function copy() {
await navigator.clipboard.writeText(JSON.stringify(_data));
await navigator.clipboard.writeText(text);
copySucceeded = true;
timeout = setTimeout(() => copySucceeded = false, 1500);
}
function close() {
data = undefined;
text = '';
}
function save() {
dispatch('save', text);
}
onDestroy(() => clearTimeout(timeout));
</script>
{#if data}
<Modal bind:show={data} title="Object viewer">
<Modal bind:show={data} contentPadding={false}>
<div class="objectviewer">
<div class="buttons">
<button class="btn" on:click={copy}>
<Icon name={copySucceeded ? 'check' : 'clipboard'} />
<ObjectEditor {text} />
</div>
<svelte:fragment slot="footer">
{#if saveable}
<button class="btn" on:click={save} disabled={invalid}>
<Icon name="save" /> Save
</button>
</div>
<div class="code">
<ObjectTree data={_data} />
</div>
</div>
{/if}
<button class="btn secondary" on:click={close}>
<Icon name="x" /> Close
</button>
<button class="btn secondary" on:click={copy}>
<Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy
</button>
</svelte:fragment>
</Modal>
{/if}
<style>
.objectviewer {
display: flex;
position: relative;
}
.objectviewer .code :global(span.root) {
display: block;
}
.buttons {
position: absolute;
top: 0;
right: 0;
}
.buttons button {
margin-left: 1rem;
justify-content: stretch;
align-items: stretch;
height: 100%;
}
</style>

View File

@ -6,8 +6,7 @@ import { LogError } from '$wails/runtime';
import App from './app.svelte';
window.addEventListener('unhandledrejection', event => {
LogError('Unhandled Rejection in JS! Reason:');
LogError(String(event.reason));
LogError('Unhandled JS rejection: ' + event.reason);
});
// @ts-ignore Argument IS correct.

View File

@ -13,6 +13,7 @@
import { createEventDispatcher, onMount } from 'svelte';
import ExportInfo from './components/export.svelte';
import QueryChooser from './components/querychooser.svelte';
import ObjectViewer from '$components/objectviewer.svelte';
export let collection;
export let hosts = {};
@ -256,7 +257,10 @@
<ExportInfo on:openViewConfig bind:collection bind:info={exportInfo} />
<!-- <ObjectViewer bind:data={objectViewerData} /> -->
{#key objectViewerData}
<!-- @todo Implement save -->
<ObjectViewer bind:data={objectViewerData} saveable />
{/key}
<datalist id="limits">
{#each [ 1, 5, 10, 25, 50, 100, 200 ] as value}