Add basic button input

forum-network/src/classes/display/form.js

@@ -12,12 +12,20 @@ export class FormElement extends Box {
       updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => {
         cb(this);
       }));
-      cb(this);
+      cb(this, { initializing: true });
     }
   }
 }
 
-export class Button extends FormElement { }
+export class Button extends FormElement {
+  constructor(name, parentEl, opts) {
+    super(name, parentEl, opts);
+    this.button = document.createElement('button');
+    this.button.setAttribute('type', 'button');
+    this.button.innerHTML = name;
+    this.el.appendChild(this.button);
+  }
+}
 
 export class TextField extends FormElement {
   constructor(name, parentEl, opts) {

forum-network/src/classes/supporting/wdag.js

@@ -172,4 +172,6 @@ export class WDAG {
     }
     return Array.from(this.vertices.values()).filter((vertex) => vertex.type === type).length;
   }
+
+  // TODO: Add support for inputs to add/edit vertices and edges
 }

forum-network/src/tests/scripts/input.test.js

@@ -9,30 +9,55 @@ const scene = window.scene = new Scene('Input test', rootBox);
 
 scene.withDocument();
 
-describe('Document', () => {
+describe('Document > Form > TextField', () => {
-  it('Exists', () => {
+  before(() => {
-    scene.withDocument('Document', (doc) => doc.remark('Hello'));
+    scene.withDocument('Document 1', (d) => d.form());
   });
-
+  it('can accept input and call value update callback', () => {
-  describe('Input', () => {
-    it('Accepts input', () => {
-      scene.withDocument('Document', (doc) => doc.form());
     const doc = scene.lastDocument;
-      const form1 = doc.lastElement;
+    const form = doc.lastElement;
-      const dvMap = new Map();
     /**
      * Handler callback for form element value updates.
      * In this case we use a collection of DisplayValues as a straightforward way to render the form element values.
      */
-      const updateFieldValueDisplay = ({ name, value }) => {
+    const dvMap = new Map();
-        const dv = dvMap.get(name) ?? scene.addDisplayValue(name);
+    const updateFieldValueDisplay = ({ id, name, value }) => {
-        dvMap.set(name, dv);
+      const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
+      dvMap.set(id, dv);
       dv.set(value);
     };
 
-      form1.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay });
+    form.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay });
     doc.remark('Hmm...!');
   });
+  // it('can exist within a graph', () => {
+  //   scene.withAdditionalFlowchart({ id: 'flowchart', name: 'Graph' });
+  //   const graph = scene.lastFlowchart();
+  // });
+});
+
+describe('Document > Form > Button', () => {
+  before(() => {
+    scene.withDocument('Document 2', (d) => d.form());
+  });
+  it('calls a callback when clicked', () => {
+    const doc = scene.lastDocument;
+    const form = doc.lastElement;
+    const dvMap = new Map();
+    let clicks = 0;
+    const handleClick = ({ id, name }, { initializing = false } = {}) => {
+      const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
+      dvMap.set(id, dv);
+      if (!initializing) {
+        clicks++;
+        dv.set(`clicked ${clicks} time${clicks !== 1 ? 's' : ''}`);
+      }
+    };
+
+    doc.remark('<br/>');
+    doc.remark('Button:');
+    form.button({ id: 'button1', name: 'Button 1', cb: handleClick });
+    doc.remark('Yeah?');
   });
 });