editor.html

<div>
    <style>
        section {
            border: 1px lightgrey solid;
            border-radius: 1px;
            margin: 5px;
            padding: 2.5px;
            width: auto;
        }

        section > * {
            margin: 2.5px;
        }

        .selected {
            background-color: lightblue;
        }
    </style>

    <script src="https://unpkg.com/force-graph"></script>
    <!--<script src="../../dist/force-graph.js"></script>-->

    <script>
        const PLUGIN_PATH = "%WWW%";
    </script>

    <script src="%WWW%editor/js/graph.js"></script>
    <script src="%WWW%editor/js/tools/tool.js"></script>
    <script src="%WWW%editor/js/tools/selecttool.js"></script>
    <script src="%WWW%editor/js/tools/collecttool.js"></script>
    <script src="%WWW%editor/js/tools/deletetool.js"></script>
    <script src="%WWW%editor/js/tools/addnodetool.js"></script>
    <script src="%WWW%editor/js/tools/connecttool.js"></script>
    <script src="%WWW%editor/js/display.js"></script>
    <script src="%WWW%editor/js/state.js"></script>
    <script src="%WWW%editor/js/editor.js"></script>

    <h1>Interface</h1>
    <div id="2d-graph"></div>
    <section id="toolbar"></section>
    <section>
        <h3 id="selected-item">Nothing selected</h3>
        <ul id="selected-params"></ul>
        <button onclick="saveCurrentNode()">Save NOT YET IMPLEMENTED</button>
        <section>
            <h4>Sources</h4>
            <ul id="selected-sources"></ul>
        </section>
        <section>
            <h4>Targets</h4>
            <ul id="selected-targets"></ul>
        </section>
    </section>
    <section>
        <h3>Collected items</h3>
        <ul id="selected-items"></ul>
        <button onclick="state.clearSelectedItems()">Clear</button>
    </section>
</div>