Basic setting menu structure

editor/css/editor.css

@@ -29,6 +29,10 @@ div#ks-editor .medium-width {
     max-width: 20rem;
 }
 
+div#ks-editor .small-width {
+    max-width: 5rem;
+}
+
 div#ks-editor input#node-name {
     font-size: large;
     font-weight: bolder;

editor/editor.php

@@ -35,13 +35,30 @@
                 <label for="node-references">References</label> <small>One URL per line</small>
                 <textarea id="node-references" name="node-references" class="bottom-space"></textarea>
 
-                <label for="node-videos">Videos</label> <small>One video URL per line</small>
+                <label>Videos</label> <small>One video URL per line</small>
                 <textarea id="node-videos" name="node-videos"></textarea>
             </div>
             <div id="link-selected" class="hidden">
                 <h3 id="link-name"></h3>
             </div>
         </div>
+        <div id="settings-menu" class="hidden" checked>
+            <input type="checkbox" id="label-toggle" name="label-toggle" class="bottom-space">
+            <label for="label-toggle">Show labels in graph</label>
+            </input>
+
+            </br>
+            
+            <label>Simulate physics from beginning</label>
+            </br>
+            <button id="reanimate-button" name="reanimate-button" class="bottom-space">Re-simulate</button>
+
+            </br>
+
+            <label for="stop-physics-delay">Amount of time [in seconds] after which the physics simulation is stopped</label>
+            <input type="number" id="stop-physics-delay" name="stop-physics-delay" class="small-width">
+            </input>
+        </div>
     </section>
     <button id="save" type="submit" class="primary">Save and publish</button>
 </div>
\ No newline at end of file

editor/js/state.js

@@ -6,6 +6,7 @@ import CollectTool from "./tools/collecttool";
 import DeleteTool from "./tools/deletetool";
 import AddNodeTool from "./tools/addnodetool";
 import ConnectTool from "./tools/connecttool";
+import SettingsTool from "./tools/settingstool";
 import { graph } from "./editor";
 import Toolbar from "./toolbar";
 import * as Graph from "./graph";
@@ -18,6 +19,7 @@ export const TOOLS = {
     delete: new DeleteTool("delete"),
     addnode: new AddNodeTool("addnode"),
     connect: new ConnectTool("connect"),
+    settings: new SettingsTool("settings"),
 };
 
 export const CONTEXT = {

editor/js/tools/menus/settingsmenu.js

+import ToolMenu from "./toolmenu";
+
+export const LABEL_TOGGLE_ID = "#label-toggle";
+export const RESIMULATE_BUTTON_ID = "#reanimate-button";
+export const PHYSICS_DELAY_ID = "#stop-physics-delay";
+
+export const PHYSICS_DELAY_KEY = "delay";
+export const RESIMULATE_KEY = "resimulate";
+export const LABELS_KEY = "labels";
+
+export class SettingsMenu extends ToolMenu {
+    constructor() {
+        super();
+    }
+
+    onMenuShow(initial) {
+        if (initial === false) {
+            return;
+        }
+
+        // Initial interface hooks
+        this.find(LABEL_TOGGLE_ID).on("change", (e) => {
+            this.notifyTool(LABELS_KEY, e.target.checked);
+        });
+        this.find(PHYSICS_DELAY_ID).on("change", (e) => {
+            this.notifyTool(PHYSICS_DELAY_KEY, e.target.value);
+        });
+        this.find(RESIMULATE_BUTTON_ID).on("click", () => {
+            this.notifyTool(RESIMULATE_KEY);
+        });
+    }
+}

editor/js/tools/settingstool.js

+import { SettingsMenu } from "./menus/settingsmenu";
+import Tool from "./tool";
+
+export default class SettingsTool extends Tool {
+    constructor(key) {
+        super("Settings", "settings", key, new SettingsMenu());
+    }
+}