diff --git a/editor/js/editor.js b/editor/js/editor.js index 8473bf1e54744105bda4bd90c035242a024c16b5..cdd8d53d46ecac85feedd0d19d4327c9f681f062 100644 --- a/editor/js/editor.js +++ b/editor/js/editor.js @@ -30,7 +30,7 @@ window.onload = function () { setTimeout(() => { graph.stopPhysics(); graph.storeCurrentData("Physics stopped"); - }, Graph.STOP_PHYSICS_DELAY); + }, graph.physicsDelay); }); }; diff --git a/editor/js/graph.js b/editor/js/graph.js index 22ba7035c81bfed979cc43edeb8b2ee4d62385ee..d3a6c276b411d3b5a6b39b70a2dc9868eafada37 100644 --- a/editor/js/graph.js +++ b/editor/js/graph.js @@ -45,6 +45,11 @@ export class Graph extends ManagedData { this.calculateLinkTypes(); this.onChangeCallbacks = []; + this.physicsDelay = STOP_PHYSICS_DELAY; + } + + restartSimulation() { + } triggerOnChange() { diff --git a/editor/js/state.js b/editor/js/state.js index 5135b658108cd3aa02566c53379201b1a0e1db3d..a8fae503f5820a78e28afdb63a1577323da16989 100644 --- a/editor/js/state.js +++ b/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; + } } diff --git a/editor/js/tools/menus/settingsmenu.js b/editor/js/tools/menus/settingsmenu.js index 008efb0a105e160c4716e71546b981db66019e8d..bb785076940fb0b9834ce31534b112a4012f8159 100644 --- a/editor/js/tools/menus/settingsmenu.js +++ b/editor/js/tools/menus/settingsmenu.js @@ -1,8 +1,8 @@ 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"; diff --git a/editor/js/tools/settingstool.js b/editor/js/tools/settingstool.js index a717a5bdb9f20b84298fe781a85912f17616833f..cd0cf597100c984db4c7c0c7cabf85e6f86db821 100644 --- a/editor/js/tools/settingstool.js +++ b/editor/js/tools/settingstool.js @@ -1,8 +1,24 @@ -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; + } + } }