Merge branch 'editor-settings-menu'

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" checked 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" value="5" 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/editor.js

@@ -27,11 +27,7 @@ window.onload = function () {
             graph = new Graph.Graph(graphConfig);
             load();
 
-            // Deactivate physics after a short delay
-            setTimeout(() => {
-                graph.stopPhysics();
-                graph.storeCurrentData("Physics stopped");
-            }, Graph.STOP_PHYSICS_DELAY);
+            graph.restartSimulation();
         });
 };
 
@@ -74,4 +70,6 @@ function load() {
         graphObj.cooldownTicks(0);
         graphObj.graphData(data);
     });
+
+    graph.setRenderer(graphObj);
 }

editor/js/graph.js

@@ -45,6 +45,37 @@ export class Graph extends ManagedData {
 
         this.calculateLinkTypes();
         this.onChangeCallbacks = [];
+        this.physicsDelay = STOP_PHYSICS_DELAY;
+        this.physicsStopTimeoutId = undefined;
+        this.graphRenderer = undefined;
+    }
+
+    setRenderer(graphRenderer) {
+        this.graphRenderer = graphRenderer;
+    }
+
+    restartSimulation() {
+        if (this.physicsStopTimeoutId !== undefined) {
+            clearTimeout(this.physicsStopTimeoutId);
+        }
+
+        if (this.graphRenderer !== undefined) {
+            this.data[GRAPH_NODES].forEach((n) => {
+                n.x /= 10;
+                n.y /= 10;
+                n.fx = undefined;
+                n.fy = undefined;
+            });
+
+            this.graphRenderer.d3ReheatSimulation();
+        }
+
+        // Deactivate physics after a short delay
+        this.physicsStopTimeoutId = setTimeout(() => {
+            this.stopPhysics();
+            this.storeCurrentData("Physics stopped");
+            this.physicsStopTimeoutId = undefined;
+        }, this.physicsDelay);
     }
 
     triggerOnChange() {

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 = {
@@ -40,6 +42,7 @@ export class State extends Tool {
         this.selectedItem = undefined;
         this.selectedItems = new Set();
         this.itemsContext = CONTEXT.nothing;
+        this.labelVisible = true;
 
         this.keyStates = {};
     }
@@ -154,20 +157,22 @@ export class State extends Tool {
         }
 
         // Draw label
-        const label = node[Graph.NODE_LABEL];
-        const fontSize = 11/globalScale;
-        ctx.font = `${fontSize}px Sans-Serif`;
-        const textWidth = ctx.measureText(label).width;
-        const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
-
-        const nodeHeightOffset = Graph.IMAGE_SIZE / 3 + bckgDimensions[1];
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + nodeHeightOffset, ...bckgDimensions);
-
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillStyle = 'white';
-        ctx.fillText(label, node.x, node.y + nodeHeightOffset);
+        if (this.labelVisible) {
+            const label = node[Graph.NODE_LABEL];
+            const fontSize = 11/globalScale;
+            ctx.font = `${fontSize}px Sans-Serif`;
+            const textWidth = ctx.measureText(label).width;
+            const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+    
+            const nodeHeightOffset = Graph.IMAGE_SIZE / 3 + bckgDimensions[1];
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+            ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + nodeHeightOffset, ...bckgDimensions);
+    
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = 'white';
+            ctx.fillText(label, node.x, node.y + nodeHeightOffset);
+        }
 
         // TODO: Render label as always visible
     }
@@ -262,4 +267,8 @@ export class State extends Tool {
             graph.isLinkOnNode(link, this.selectedItem)
         );
     }
+
+    setLabelVisibility(visibility) {
+        this.labelVisible = visibility;
+    }
 }

editor/js/tools/menus/settingsmenu.js

+import ToolMenu from "./toolmenu";
+
+const LABEL_TOGGLE_ID = "#label-toggle";
+const RESIMULATE_BUTTON_ID = "#reanimate-button";
+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 { graph, state } from "../editor";
+import {
+    SettingsMenu,
+    LABELS_KEY,
+    RESIMULATE_KEY,
+    PHYSICS_DELAY_KEY,
+} from "./menus/settingsmenu";
+import Tool from "./tool";
+
+export default class SettingsTool extends Tool {
+    constructor(key) {
+        super("Settings", "settings", key, new SettingsMenu());
+    }
+
+    onMenuChange(key, value) {
+        if (key === LABELS_KEY) {
+            state.setLabelVisibility(value);
+        } else if (key === RESIMULATE_KEY) {
+            graph.restartSimulation();
+        } else if (key === PHYSICS_DELAY_KEY) {
+            graph.physicsDelay = Number(value) * 1000;  // Convert seconds to ms
+        }
+    }
+}