From 0ed5df3fccc62882a51e29cdfe783b2b1917496e Mon Sep 17 00:00:00 2001 From: Adrien Burgun Date: Tue, 23 Aug 2022 23:46:55 +0200 Subject: [PATCH] :sparkles: Add controls tab to the right pane, use S to step --- editor-solidjs/src/Controls.jsx | 67 +++++++++++++++++ editor-solidjs/src/Editor.jsx | 31 +++++--- .../src/{RightPane.jsx => Properties.jsx} | 4 +- editor-solidjs/src/RightPane.module.css | 5 +- editor-solidjs/src/Tabbed.jsx | 28 ++++++++ editor-solidjs/src/Tabbed.module.css | 71 +++++++++++++++++++ editor-solidjs/src/input/input.module.css | 4 +- 7 files changed, 197 insertions(+), 13 deletions(-) create mode 100644 editor-solidjs/src/Controls.jsx rename editor-solidjs/src/{RightPane.jsx => Properties.jsx} (96%) create mode 100644 editor-solidjs/src/Tabbed.jsx create mode 100644 editor-solidjs/src/Tabbed.module.css diff --git a/editor-solidjs/src/Controls.jsx b/editor-solidjs/src/Controls.jsx new file mode 100644 index 0000000..42f042b --- /dev/null +++ b/editor-solidjs/src/Controls.jsx @@ -0,0 +1,67 @@ +import {onMount, onCleanup} from "solid-js"; + +import styles from "./RightPane.module.css"; +import input_styles from "./input/input.module.css"; + +import {World} from "../stackline-wasm/stackline_wasm.js"; + +export default function Controls(props) { + let {settings, setSettings, world, setWorld} = props; + let save_button, reload_button; + + function save() { + console.log("save"); + window.localStorage.setItem("world", JSON.stringify(world().serialize())); + } + + function reload() { + let new_world = window.localStorage.getItem("world"); + if (!new_world) return; + + new_world = JSON.parse(new_world); + new_world = World.deserialize(new_world); + + setWorld(world => { + if (world.ptr) { + world.free(); + } + + return new_world; + }); + } + + function key_down(evt) { + if (evt.code === "KeyS" && evt.ctrlKey) { + evt.preventDefault(); + + save_button.classList.add(input_styles.active); + save(); + setTimeout(() => { + save_button.classList.remove(input_styles.active); + }, 200); + } + + if (evt.code === "KeyR" && evt.ctrlKey) { + evt.preventDefault(); + + reload_button.classList.add(input_styles.active); + reload(); + setTimeout(() => { + reload_button.classList.remove(input_styles.active); + }, 200); + } + } + + onMount(() => { + window.addEventListener("keydown", key_down, {capture: true}); + }); + + onCleanup(() => { + window.removeEventListener("keydown", key_down); + }); + + return
+ + +
+} diff --git a/editor-solidjs/src/Editor.jsx b/editor-solidjs/src/Editor.jsx index 06bc64f..bf53039 100644 --- a/editor-solidjs/src/Editor.jsx +++ b/editor-solidjs/src/Editor.jsx @@ -1,13 +1,18 @@ import { createSignal, + onMount, + onCleanup, } from "solid-js"; import {createStore} from "solid-js/store"; +import Tabbed from "./Tabbed.jsx"; import styles from "./Editor.module.css"; +import styles_RightPane from "./RightPane.module.css"; import LeftPane from "./LeftPane.jsx"; import MiddlePane from "./MiddlePane.jsx"; -import RightPane from "./RightPane.jsx"; +import Properties from "./Properties.jsx"; +import Controls from "./Controls.jsx"; import {World, Pane} from "../stackline-wasm/stackline_wasm.js"; @@ -76,12 +81,12 @@ export default function Editor() { } function keydown(event) { - if (event.code === "Space") { + if (event.code === "KeyS") { if (running()) { pause(); } else if (event.shiftKey) { play(); - } else { + } else if (!event.ctrlKey) { step(); } } else if (event.code === "KeyG") { @@ -90,18 +95,18 @@ export default function Editor() { } } - function mount() { + onMount(() => { window.addEventListener("keydown", keydown); - } + }); - function cleanup() { + onCleanup(() => { window.removeEventListener("keydown", keydown); if (running()) { clearInterval(running()); setRunning(null); } - } + }); let [left_pane, presets] = LeftPane({settings, setSettings}); @@ -136,10 +141,18 @@ export default function Editor() { } return ( -
+
{left_pane} - +
+ +
+ +
+
Files
+ + +
); } diff --git a/editor-solidjs/src/RightPane.jsx b/editor-solidjs/src/Properties.jsx similarity index 96% rename from editor-solidjs/src/RightPane.jsx rename to editor-solidjs/src/Properties.jsx index 47146ef..b8afdd5 100644 --- a/editor-solidjs/src/RightPane.jsx +++ b/editor-solidjs/src/Properties.jsx @@ -72,8 +72,8 @@ export default function RightPane(props) { } } - return (
- Nothing selected}> + return (
+ Nothing selected} onCleanup={cleanup}>

Coordinates:

({settings.selected[0]}, {settings.selected[1]})

State:

diff --git a/editor-solidjs/src/RightPane.module.css b/editor-solidjs/src/RightPane.module.css index 3928f99..d489986 100644 --- a/editor-solidjs/src/RightPane.module.css +++ b/editor-solidjs/src/RightPane.module.css @@ -3,12 +3,15 @@ max-width: 25vw; background: #18181b; color: #d0d0d0; - padding: 1.5em 1em; font-family: monospace; font-size: 15px; flex-shrink: 0; } +.Properties { + padding: 1.5em 1em; +} + .gray, .empty { color: #a0a0a0; } diff --git a/editor-solidjs/src/Tabbed.jsx b/editor-solidjs/src/Tabbed.jsx new file mode 100644 index 0000000..c280aa6 --- /dev/null +++ b/editor-solidjs/src/Tabbed.jsx @@ -0,0 +1,28 @@ +import {createEffect, createSignal} from "solid-js"; +import styles from "./Tabbed.module.css"; + +export default function Tabbed(props) { + let [current_tab, set_current_tab] = createSignal(0); + + let children = props.children; + + return
+
    + item.title)}> + {(item, index) => { + return
  1. set_current_tab(index())} + >{item}
    2. ; + }} +     +
+
    + + {(item, index) => { + return
  1. {item}
    2. + }} +     +
+
+} diff --git a/editor-solidjs/src/Tabbed.module.css b/editor-solidjs/src/Tabbed.module.css new file mode 100644 index 0000000..05e2c67 --- /dev/null +++ b/editor-solidjs/src/Tabbed.module.css @@ -0,0 +1,71 @@ +.Tabbed { + height: 25vh; + display: flex; + flex-direction: column; + justify-content: stretch; +} + +.header { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + flex-direction: row; + flex-wrap: wrap; + justify-content: stretch; + align-items: flex-start; + width: 100%; + flex-grow: 0; + flex-shrink: 0; + + background: #242830; +} + +.header > li { + box-sizing: border-box; + height: 2em; + padding: 0.5em; + color: #d0d0d0; + cursor: pointer; + user-select: none; + border-top: 1px solid var(--border-color); + border-left: 1px solid var(--border-color); + border-right: 1px solid var(--border-color); + border-top-left-radius: 2px; + border-top-right-radius: 2px; + --border-color: transparent; +} + +.header > li:hover { + color: white; + --border-color: #d0d0d0; +} + +.header > li.active { + color: #f0f0f0; + background: #18181b; + --border-color: white; +} + +.header > li.active:hover { + color: white; +} + +.container { + list-style-type: none; + margin: 0; + padding: 0; + flex-grow: 1; +} + +.body:not(.active) { + display: none; +} + +.body { + height: 100%; + padding: 1.5em 1em; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; +} diff --git a/editor-solidjs/src/input/input.module.css b/editor-solidjs/src/input/input.module.css index c113f8c..e3c5daf 100644 --- a/editor-solidjs/src/input/input.module.css +++ b/editor-solidjs/src/input/input.module.css @@ -77,6 +77,8 @@ border-radius: 2px; margin-left: 2px; margin-right: 2px; + font-family: inherit; + font-size: inherit; } .button[disabled] { @@ -91,6 +93,6 @@ border: 1px solid white; } -.button:not([disabled]):active { +.button:not([disabled]):active, .button:not([dissabled]).active { background: rgb(64, 68, 96, 1.0); }