Upgrade mschema dependencies and add pool category

package-lock.json

@@ -5,14 +5,14 @@
   "requires": true,
   "dependencies": {
     "@mcschema/core": {
-      "version": "0.9.0",
+      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.9.3.tgz",
-      "integrity": "sha512-A7sPk/EXMDbq8IfU1Tq6RnwHCD+j1EoLgfqxL4DEZC5QjceprSfmDCZbRoO/4Ak48v8I7mY1GKMGOs0pCzLcsQ=="
+      "integrity": "sha512-DtDncu+NE32OUDzjCv+IAA+owPXASEbR9WXRCikpDY/eTxpjiUkgrsjYzG9A8GhE/Hw60vbwbDuSrHjeTDYSTg=="
     },
     "@mcschema/java-1.16": {
-      "version": "0.5.6",
+      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.8.tgz",
-      "integrity": "sha512-NTrvXDrWOQIlkJqiYDEH1DZeCC6moZ0/ks7HI9cAFbHMStIrKjEl2VPjT7HQlg/ZnknnuO4QmqLGsbMoNpimuw==",
+      "integrity": "sha512-hbrDilc5fQK97x0MhbBiwHT+C4xCjsO7HPdgcZqvzhlsbcSkG2fz03Ew/myJJQyxYpShyZLq2QPl6OVtiCp40Q==",
       "requires": {
         "@mcschema/core": "^0.9.0"
       }

package.json

@@ -12,8 +12,8 @@
   "author": "Misode",
   "license": "MIT",
   "dependencies": {
-    "@mcschema/core": "^0.9.0",
+    "@mcschema/core": "^0.9.3",
-    "@mcschema/java-1.16": "^0.5.6",
+    "@mcschema/java-1.16": "^0.5.8",
     "@mcschema/locales": "^0.1.11",
     "@types/google.analytics": "0.0.40",
     "@types/split.js": "^1.4.0",

src/app/TreeView.ts

@@ -38,8 +38,17 @@ export class TreeView extends AbstractView {
    */
   invalidated() {
     const mounter = new Mounter({nodeInjector: this.nodeInjector})
-    const rendered = this.model.schema.render(new ModelPath(this.model), this.model.data, mounter)
+    const path = new ModelPath(this.model)
-    this.target.innerHTML = rendered[2];
+    const rendered = this.model.schema.render(path, this.model.data, mounter)
+    const category = this.model.schema.category(path)
+    if (rendered[1]) {
+      this.target.innerHTML = `<div class="node ${this.model.schema.type(path)}-node" ${category ? `data-category="${category}"` : ''}>
+        <div class="node-header">${rendered[1]}</div>
+        <div class="node-body">${rendered[2]}</div>
+      </div>`
+    } else {
+      this.target.innerHTML = rendered[2]
+    }
     mounter.mount(this.target);
     this.observer(this.target)
   }

src/styles/nodes.css

@@ -18,6 +18,9 @@
   --category-function: #979fa7;
   --category-function-border: #788086;
   --category-function-background: #dce0e4;
+  --category-pool: #76b865;
+  --category-pool-border: #398118;
+  --category-pool-background: #b1d6a6;
 }
 
 :root[data-theme=dark] {
@@ -40,32 +43,9 @@
   --category-function: #838383;
   --category-function-border: #6b6b6b;
   --category-function-background: #414141;
-}
+  --category-pool: #386330;
-
+  --category-pool-border: #2e4922;
-#tree-view-output > .object-node > .node-body {
+  --category-pool-background: #21331d;
-  border-left: none;
-  padding-left: 0;
-}
-
-#tree-view-output > .node > .node-body {
-  margin-top: -5px; /* no idea why this is necessary */
-}
-
-.node {
-  margin: 2px 0;
-}
-
-.node-body > .node:first-child {
-  margin-top: 4px;
-}
-
-.node:last-child {
-  margin-bottom: 0;
-}
-
-.node-body {
-  border-left: 3px solid var(--node-indent-border);
-  transition: border-color var(--style-transition);
 }
 
 /* Node headers */
@@ -129,17 +109,17 @@
 
 .node-header > *:last-child,
 .node-header > input[list]:nth-last-child(2),
-.node-header[data-help] > *:nth-last-child(2),
+.node[data-help] > .node-header > *:nth-last-child(2),
-.node-header[data-help] > input[list]:nth-last-child(3),
+.node[data-help] > .node-header > input[list]:nth-last-child(3),
-.node-header[data-error] > *:nth-last-child(2),
+.node[data-error] > .node-header > *:nth-last-child(2),
-.node-header[data-error] > input[list]:nth-last-child(3),
+.node[data-error] > .node-header > input[list]:nth-last-child(3),
-.node-header[data-help][data-error] > *:nth-last-child(3),
+.node[data-help][data-error] > .node-header > *:nth-last-child(3),
-.node-header[data-help][data-error] > input[list]:nth-last-child(4) {
+.node[data-help][data-error] > .node-header > input[list]:nth-last-child(4) {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
-.node-header > *:not(:last-child) {
+.node-header > * {
   margin-right: -1px;
 }
 
@@ -255,6 +235,23 @@ button.remove {
 
 /* Node body and list entry */
 
+.node {
+  margin-bottom: 4px;
+}
+
+.node-body > .node:first-child {
+  margin-top: 4px;
+}
+
+.node:last-child {
+  margin-bottom: 0;
+}
+
+.node-body {
+  border-left: 3px solid var(--node-indent-border);
+  transition: border-color var(--style-transition);
+}
+
 .node-body {
   display: flex;
   flex-direction: column;
@@ -269,7 +266,6 @@ button.remove {
   border-left: none;
 }
 
-.node-entry > .object-node > .node-body > .node.node-header > *:first-child,
 .node-entry > .object-node > .node-body > .node > .node-header > *:first-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -279,10 +275,12 @@ button.remove {
 .node-entry {
   display: flex;
   flex-direction: column;
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
-.node-entry > .object-node[data-category] {
+.node-entry > .object-node[data-category],
+.node-entry > .list-node[data-category],
+.node-entry > .map-node[data-category] {
   width: 100%;
   min-width: max-content;
   padding: 5px;
@@ -293,11 +291,15 @@ button.remove {
   transition: background-color var(--style-transition);
 }
 
-.node-entry:first-child > .object-node[data-category] {
+.node-entry:first-child > .object-node[data-category],
+.node-entry:first-child > .list-node[data-category],
+.node-entry:first-child > .map-node[data-category] {
   margin-top: 4px;
 }
 
-.node-entry > .node.object-node[data-category] > .node-body {
+.node-entry > .object-node[data-category] > .node-body,
+.node-entry > .list-node[data-category] > .node-body,
+.node-entry > .map-node[data-category] > .node-body {
   border: none;
 }
 
@@ -315,37 +317,55 @@ button.remove {
 /* Color categories */
 
 [data-category=predicate] > .node-header > label,
-[data-category=predicate] > .node-body > .node.node-header > label,
 [data-category=predicate] > .node-body > .node > .node-header > label {
   background-color: var(--category-predicate) !important;
 }
 
 [data-category=predicate] > .node-body,
 [data-category=predicate] > .node-header > label,
-[data-category=predicate] > .node-body > .node.node-header > *:not(.selected),
 [data-category=predicate] > .node-body > .node > .node-header > *:not(.selected) {
   border-color: var(--category-predicate-border) !important;
 }
 
-.node-entry > .node.object-node[data-category=predicate] {
+.node-entry > .node.object-node[data-category=predicate],
+.node-entry > .node.list-node[data-category=predicate],
+.node-entry > .node.map-node[data-category=predicate] {
   background-color: var(--category-predicate-background);
   border-color: var(--category-predicate-border);
 }
 
 [data-category=function] > .node-header > label,
-[data-category=function] > .node-body > .node.node-header > label,
 [data-category=function] > .node-body > .node > .node-header > label {
   background-color: var(--category-function) !important;
 }
 
 [data-category=function] > .node-body,
 [data-category=function] > .node-header > label,
-[data-category=function] > .node-body > .node.node-header > *:not(.selected),
 [data-category=function] > .node-body > .node > .node-header > *:not(.selected) {
   border-color: var(--category-function-border) !important;
 }
 
-.node-entry > .node.object-node[data-category=function] {
+.node-entry > .node.object-node[data-category=function],
+.node-entry > .node.list-node[data-category=function],
+.node-entry > .node.map-node[data-category=function] {
   background-color: var(--category-function-background);
   border-color: var(--category-function-border);
 }
+
+[data-category=pool] > .node-header > label,
+[data-category=pool] > .node-body > .node > .node-header > label {
+  background-color: var(--category-pool) !important;
+}
+
+[data-category=pool] > .node-body,
+[data-category=pool] > .node-header > label,
+[data-category=pool] > .node-body > .node > .node-header > *:not(.selected) {
+  border-color: var(--category-pool-border) !important;
+}
+
+.node-entry > .node.object-node[data-category=pool],
+.node-entry > .node.list-node[data-category=pool],
+.node-entry > .node.map-node[data-category=pool] {
+  background-color: var(--category-pool-background);
+  border-color: var(--category-pool-border);
+}