diff --git a/editor/css/editor.css b/editor/css/editor.css index 0a0b43ffec384b1419853df4a83af7f19caac78f..722b6ff086c0aa18039f71914619647307f8daa7 100644 --- a/editor/css/editor.css +++ b/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; diff --git a/editor/editor.php b/editor/editor.php index 1a3ca47b2476fa20737d77fc42aa578ae3ff1814..7c11c369a924b16d9f78428371f808905c3adade 100644 --- a/editor/editor.php +++ b/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 diff --git a/editor/images/tools/settings.png b/editor/images/tools/settings.png new file mode 100644 index 0000000000000000000000000000000000000000..eaae7fdec7dc02e78b280b8d66a80490dd08bf30 Binary files /dev/null and b/editor/images/tools/settings.png differ diff --git a/editor/js/state.js b/editor/js/state.js index cbf44c4cf38a0b1822215103f512744f78992e3d..5135b658108cd3aa02566c53379201b1a0e1db3d 100644 --- a/editor/js/state.js +++ b/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 = { diff --git a/editor/js/tools/menus/settingsmenu.js b/editor/js/tools/menus/settingsmenu.js new file mode 100644 index 0000000000000000000000000000000000000000..008efb0a105e160c4716e71546b981db66019e8d --- /dev/null +++ b/editor/js/tools/menus/settingsmenu.js @@ -0,0 +1,32 @@ +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); + }); + } +} diff --git a/editor/js/tools/settingstool.js b/editor/js/tools/settingstool.js new file mode 100644 index 0000000000000000000000000000000000000000..a717a5bdb9f20b84298fe781a85912f17616833f --- /dev/null +++ b/editor/js/tools/settingstool.js @@ -0,0 +1,8 @@ +import { SettingsMenu } from "./menus/settingsmenu"; +import Tool from "./tool"; + +export default class SettingsTool extends Tool { + constructor(key) { + super("Settings", "settings", key, new SettingsMenu()); + } +}