Add basic button input

This commit is contained in:
Ladd Hoffman 2023-07-02 04:16:48 -05:00
parent 9eb3451451
commit 498b5c106f
3 changed files with 58 additions and 23 deletions

View File

@ -12,12 +12,20 @@ export class FormElement extends Box {
updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => { updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => {
cb(this); 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 { export class TextField extends FormElement {
constructor(name, parentEl, opts) { constructor(name, parentEl, opts) {

View File

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

View File

@ -9,30 +9,55 @@ const scene = window.scene = new Scene('Input test', rootBox);
scene.withDocument(); 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', () => {
const doc = scene.lastDocument;
const form = doc.lastElement;
/**
* 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 dvMap = new Map();
const updateFieldValueDisplay = ({ id, name, value }) => {
const dv = dvMap.get(id) ?? scene.addDisplayValue(name);
dvMap.set(id, dv);
dv.set(value);
};
describe('Input', () => { form.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay });
it('Accepts input', () => { doc.remark('Hmm...!');
scene.withDocument('Document', (doc) => doc.form()); });
const doc = scene.lastDocument; // it('can exist within a graph', () => {
const form1 = doc.lastElement; // scene.withAdditionalFlowchart({ id: 'flowchart', name: 'Graph' });
const dvMap = new Map(); // const graph = scene.lastFlowchart();
/** // });
* 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 dv = dvMap.get(name) ?? scene.addDisplayValue(name);
dvMap.set(name, dv);
dv.set(value);
};
form1.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay }); describe('Document > Form > Button', () => {
doc.remark('Hmm...!'); 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?');
}); });
}); });