agentscape/io/DisplayField.js

Agentscape is a library for creating agent-based simulations. It provides a simple API for defining agents and their behavior, and for defining the environment in which the agents interact. Agentscape is designed to be flexible and extensible, allowing

/**
 * Shows the value of variables in a draggable pane.
 */
export default class DisplayField {
    constructor(opts) {
        this.refs = new Map();
        this.context = opts.context;
        const title = opts.title || 'Output';
        const container = document.createElement('div');
        const draggable = document.createElement('drag-pane');
        draggable.setAttribute('heading', title);
        draggable.setAttribute('key', title);
        draggable.appendChild(container);
        opts.root.appendChild(draggable);
        this.context.forEach(variable => {
            this.initDisplay(container, variable);
        });
    }
    update(name, value) {
        const ref = this.refs.get(name);
        if (ref) {
            ref.textContent = value.toString();
        }
    }
    // a display is a div that contains the value of a variable
    initDisplay(container, variable) {
        const display = document.createElement('div');
        display.style.display = 'flex';
        display.style.flexDirection = 'row';
        display.style.justifyContent = 'space-between';
        display.style.alignItems = 'center';
        const label = document.createElement('label');
        label.textContent = variable.label;
        label.style.marginRight = '10px';
        const value = document.createElement('div');
        value.textContent = '';
        this.refs.set(variable.name, value);
        display.appendChild(label);
        display.appendChild(value);
        container.appendChild(display);
    }
}
//# sourceMappingURL=DisplayField.js.map