agentscape/runtime/ui/customElements/AnimationToolbar.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

// The control bar at the bottom of the canvas pane.
// it contains the play/pause button, the step button, and the speed control
import Log from '../../Log';
var PlayPauseState;
(function (PlayPauseState) {
    PlayPauseState["Play"] = "Play";
    PlayPauseState["Pause"] = "Pause";
})(PlayPauseState || (PlayPauseState = {}));
class AnimationToolbar extends HTMLElement {
    connectedCallback() {
        const style = `
            .row {
                border-top: 1px solid black;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            button {
                width: 50px;
                height: 25px;
                margin: 3px;
            }

            label {
                margin-left: 5px;
                margin-right: 3px;
            }

            #fpsDisplay {
                width: 35px;
            }
        `;
        const template = document.createElement('template');
        template.innerHTML = `
        <style>${style}</style>
        <div class="row">
            <button title="Space" id="play-pause"></button>
            <button title="Enter" id="step">Step</button>

            <label for="fpsSetter">Framerate</label>
            <input type="range" min="1" max="60" id="fpsSetter">
            <input type="number" id="fpsDisplay" disabled>

            <label for="toggleInspectorPane">Inspector</label>
            <input type="checkbox" id="toggleInspectorPane">

            <label for="setLogLevel">Log Level</label>
            <select id="setLogLevel">
                <option value=-1>Off</option>
                <option value=0>Debug</option>
                <option value=1>Info</option>
                <option value=2>Warn</option>
                <option value=3>Error</option>
            </select>
        <div>
        `;
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.appendChild(template.content.cloneNode(true));
        this.fpsDisplayRef = shadowRoot.getElementById('fpsDisplay');
        this.fpsSetterRef = shadowRoot.getElementById('fpsSetter');
        this.playPauseBtnRef = shadowRoot.getElementById('play-pause');
        this.stepBtnRef = shadowRoot.getElementById('step');
        // the inspector pane toggle emits a custom event to toggle the inspector pane
        // the event detail is wherever the checkbox is checked or not
        const toggleInspectorPane = shadowRoot.getElementById('toggleInspectorPane');
        toggleInspectorPane.addEventListener('change', (e) => {
            window.dispatchEvent(new CustomEvent('toggleInspectorPane', { detail: e.target.checked }));
        });
        const toggleLogs = shadowRoot.getElementById('setLogLevel');
        toggleLogs.addEventListener('change', (e) => {
            Log.setLevel(parseInt(e.target.value));
        });
        this.playPauseBtnRef.addEventListener('click', this.handlePlayPauseClick.bind(this));
        this.stepBtnRef.addEventListener('click', this.handleStepClick.bind(this));
        // set playPauseState to Play if autoPlay is true
        if (this.getAttribute('autoPlay') === 'true') {
            this.playPauseState = PlayPauseState.Play;
            this.playPauseBtnRef.innerHTML = PlayPauseState.Pause;
        }
        else {
            this.playPauseState = PlayPauseState.Pause;
            this.playPauseBtnRef.innerHTML = PlayPauseState.Play;
        }
        // init the frame rate setter
        const fps = this.getAttribute('fps') || '60';
        this.fpsDisplayRef.value = fps;
        this.fpsSetterRef.value = fps;
        this.fpsSetterRef.addEventListener('change', this.handleFpsChange.bind(this));
        // keep the play/pause button in sync with the simulation state
        window.addEventListener('play', () => {
            this.playPauseState = PlayPauseState.Play;
            this.playPauseBtnRef.innerText = PlayPauseState.Pause;
        });
        window.addEventListener('pause', () => {
            this.playPauseState = PlayPauseState.Pause;
            this.playPauseBtnRef.innerText = PlayPauseState.Play;
        });
    }
    handlePlayPauseClick() {
        if (this.playPauseState === PlayPauseState.Play) {
            // if the simulation is playing, pause it
            this.playPauseBtnRef.innerText = PlayPauseState.Play;
            this.playPauseState = PlayPauseState.Pause;
            // emit a custom 'play' event
            window.dispatchEvent(new CustomEvent('pause'));
        }
        else {
            // if the simulation is paused, play it
            this.playPauseBtnRef.innerText = PlayPauseState.Pause;
            this.playPauseState = PlayPauseState.Play;
            // emit a custom 'pause' event
            window.dispatchEvent(new CustomEvent('play'));
        }
    }
    handleStepClick() {
        // emit a custom 'step' event if the simulation is paused
        window.dispatchEvent(new CustomEvent('step'));
    }
    handleFpsChange() {
        // emit a custom 'fps' event
        this.fpsDisplayRef.value = this.fpsSetterRef.value;
        window.dispatchEvent(new CustomEvent('fps', { detail: this.fpsSetterRef.value }));
    }
}
customElements.define('animation-toolbar', AnimationToolbar);
export default AnimationToolbar;
//# sourceMappingURL=AnimationToolbar.js.map