agentscape/io/ActionPalette.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

/**
 * ActionPalette is a draggable pane that contains a list of buttons.
 * Each button triggers an action when clicked.
 */
export default class ActionPalette {
    constructor(opts) {
        const { root, actions } = opts;
        const title = 'Actions';
        const container = document.createElement('div');
        const draggable = document.createElement('drag-pane');
        draggable.setAttribute('heading', title);
        draggable.setAttribute('key', title);
        draggable.appendChild(container);
        container.style.display = 'flex';
        container.style.flexDirection = 'column';
        container.style.alignItems = 'flex-start';
        container.style.padding = '5px';
        container.style.width = 200 + 'px';
        actions.forEach(action => {
            const button = document.createElement('button');
            button.innerText = action.label;
            button.style.margin = '5px';
            button.style.width = '90%';
            button.style.height = '30px';
            button.addEventListener('click', () => {
                action.action();
                // emit a 'render' event to trigger a render
                // this is useful for actions modifying the model's state
                window.dispatchEvent(new Event('render'));
            });
            container.appendChild(button);
        });
        root.appendChild(draggable);
    }
}
//# sourceMappingURL=ActionPalette.js.map