agentscape/lib/runtime/ui/Inspector.ts

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

import { Cell } from '../../entities'


export interface InspectorConstructor {
    root: HTMLDivElement
    fetchCell: (position: [number, number]) => Cell
    title?: string
    id?: string
    height?: number
}

export default class Inspector {
    public title: string
    public id: string
    private contentRef: HTMLPreElement

    constructor(opts: InspectorConstructor) {
        const {
            title = 'Inspector',
            id = 'inspector_0',
            height = 600
        } = opts

        this.title = title
        this.id = id

        const inspectorPane = document.createElement('drag-pane')
        inspectorPane.setAttribute('heading', title)
        inspectorPane.setAttribute('key', id)
        inspectorPane.style.display = 'none'

        const inspectorContainer = document.createElement('div')
        inspectorContainer.style.overflow = 'scroll'
        inspectorContainer.style.height = (height - 40) + 'px'

        const inspectorContent = document.createElement('pre')
        inspectorContent.style.width = '300px'
        inspectorContent.style.height = (height - 40) + 'px'
        inspectorContent.style.padding = '10px'
        inspectorContent.style.whiteSpace = 'pre-wrap'
        inspectorContent.style.textAlign = 'justify'

        this.contentRef = inspectorContent

        window.addEventListener('inspectClick', (event: Event) => {
            const customEvent = event as CustomEvent
            const clickedCellPosition = customEvent.detail
            const clickedCell = opts.fetchCell(clickedCellPosition)
            this.contentRef.innerHTML = JSON.stringify(clickedCell, null, 2)
        })

        window.addEventListener('toggleInspectorPane', (event: Event) => {
            const customEvent = event as CustomEvent
            if (customEvent.detail) {
                inspectorPane.style.display = 'block'
            } else {
                inspectorPane.style.display = 'none'
            }
        })

        inspectorContainer.appendChild(inspectorContent)
        inspectorPane.appendChild(inspectorContainer)
        opts.root.appendChild(inspectorPane)
    }

}