uielements/tsp.html

<!DOCTYPE html>

<head>
    <title>TSP</title>

    <script type="module" src="./uielements.html.js"></script>
    <link rel="stylesheet" href="./uielements.css" />
</head>

<body>

    <script type="module">
        // ====== Import uielements.js, only additional import needed ======

        import * as UI from './uielements.js'
        import elements from './tspElements.js'
        import minElements from './minElements.js'

        // ====== The views2mv code as-is ======

        import Animator from 'https://code.agentscript.org/src/Animator.js'
        import TwoDraw from 'https://code.agentscript.org/src/TwoDraw.js'

        import Model from 'https://code.agentscript.org/models/TspModel.js'
        import TwoDrawOptions from 'https://code.agentscript.org/views2mv/tspOptions.js'

        const model = new Model()
        await model.startup()
        model.setup()

        const view = new TwoDraw(model, TwoDrawOptions("modelDiv", model))

        const anim = new Animator(
            () => {
                model.step()
                view.draw()
                if (model.done) anim.stop()
            },
            500, // how many steps
            30 // at fps steps/second
        )

        // ====== Additional code for uielements usage ======

        anim.stop() // let uielements start/stop animator
        anim.setSteps(-1) // in case you want to run forever

        await UI.setAppState(model, view, anim) // connect model to uielements

        // UI.createElements() // use minElements, editable
        UI.createElements(elements, true) // use elements from file, editable
        // UI.createElements(minElements, true) // use elements from file, editable
        // UI.createElements(elements) // use elements from file, not editable

    </script>

    <!-- <div id="modelDiv"></div>
    <div id="plotDiv"></div> -->
    <div id="modelDiv"></div>

</body>

</html>