Add boolean nodes

src/app/app.ts

@@ -6,6 +6,7 @@ import { DataModel } from '../model/DataModel'
 import { TreeView } from '../view/TreeView'
 import { SourceView } from '../view/SourceView'
 import { ListNode } from '../nodes/ListNode'
+import { BooleanNode } from '../nodes/BooleanNode'
 
 const EntityCollection = ['sheep', 'pig']
 
@@ -15,7 +16,8 @@ const predicateTree = new RootNode('predicate', {
   }),
   predicate: new ObjectNode({
     type: new EnumNode(EntityCollection),
-    nbt: new StringNode()
+    nbt: new StringNode(),
+    test: new BooleanNode()
   }),
   effects: new ListNode(
     new ObjectNode({

src/model/DataModel.ts

@@ -24,14 +24,18 @@ export class DataModel {
     this.listeners.forEach(listener => listener.invalidated(this))
   }
 
-  set(path: Path, value: any) {
+  get(path: Path) {
     let node = this.data;
-    for (let index of path.pop()) {
-      if (node[index] === undefined) {
-        node[index] = {}
-      }
+    for (let index of path) {
+      if (node === undefined) node = {}
       node = node[index]
     }
+    return node
+  }
+
+  set(path: Path, value: any) {
+    let node = this.get(path.pop())
+    if (node === undefined) node = {}
 
     console.log('Set', path.toString(), JSON.stringify(value))
 

src/nodes/BooleanNode.ts

@@ -0,0 +1,22 @@
+import { AbstractNode, NodeMods, RenderOptions } from "./AbstractNode";
+import { Path } from "../model/Path";
+import { TreeView } from "../view/TreeView";
+
+export class BooleanNode extends AbstractNode<boolean> {
+  constructor(mods?: NodeMods<boolean>) {
+    super(mods)
+  }
+
+  render(path: Path, value: boolean, view: TreeView, options?: RenderOptions) {
+    const falseButton = view.registerClick(el => {
+      view.model.set(path, value === false ? undefined : false)
+    })
+    const trueButton = view.registerClick(el => {
+      view.model.set(path, value === true ? undefined : true)
+    })
+    return this.wrap(path, view, `
+      ${options?.hideLabel ? `` : `<label>${path.last()}</label>`}
+      <button${value === false ? ' style="font-weight: bold"' : ' '} data-id="${falseButton}">False</button>
+      <button${value === true ? ' style="font-weight: bold"' : ' '} data-id="${trueButton}">True</button>`)
+  }
+}