Save commit

editor/js/editor.js

@@ -30,7 +30,7 @@ window.onload = function () {
             setTimeout(() => {
                 graph.stopPhysics();
                 graph.storeCurrentData("Physics stopped");
-            }, Graph.STOP_PHYSICS_DELAY);
+            }, graph.physicsDelay);
         });
 };
 

editor/js/graph.js

@@ -45,6 +45,11 @@ export class Graph extends ManagedData {
 
         this.calculateLinkTypes();
         this.onChangeCallbacks = [];
+        this.physicsDelay = STOP_PHYSICS_DELAY;
+    }
+
+    restartSimulation() {
+
     }
 
     triggerOnChange() {

editor/js/state.js

@@ -42,6 +42,7 @@ export class State extends Tool {
         this.selectedItem = undefined;
         this.selectedItems = new Set();
         this.itemsContext = CONTEXT.nothing;
+        this.labelVisible = true;
 
         this.keyStates = {};
     }
@@ -156,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
     }
@@ -244,4 +247,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";
 
-export const LABEL_TOGGLE_ID = "#label-toggle";
-export const RESIMULATE_BUTTON_ID = "#reanimate-button";
-export const PHYSICS_DELAY_ID = "#stop-physics-delay";
+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";

editor/js/tools/settingstool.js

-import { SettingsMenu } from "./menus/settingsmenu";
+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 = value;
+        }
+    }
 }