style: gray out undo/redo (#54)

leaphy-robotics · May 7, 2024 · eb8789f · eb8789f
1 parent e5b0c4e
commit eb8789f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/src/lib/components/core/header/Header.svelte b/src/lib/components/core/header/Header.svelte
@@ -9,7 +9,14 @@ import Select from "$components/ui/Select.svelte";
 import { FileHandle } from "$domain/handles";
 import { robots } from "$domain/robots";
 import { Screen, Theme, screen, selected, theme } from "$state/app.svelte";
-import { audio, restore, willRestore, workspace } from "$state/blockly.svelte";
+import {
+	audio,
+	canRedo,
+	canUndo,
+	restore,
+	willRestore,
+	workspace,
+} from "$state/blockly.svelte";
 import { popups } from "$state/popup.svelte";
 import {
 	Mode,
@@ -405,8 +412,8 @@ function runPython() {
 
     <div class="comp">
         {#if $screen === Screen.WORKSPACE && $mode === Mode.BLOCKS}
-            <Button mode={"outlined"} icon={faUndo} onclick={undo} />
-            <Button mode={"outlined"} icon={faRedo} onclick={redo} />
+            <Button mode={"outlined"} icon={faUndo} onclick={undo} disabled={!$canUndo} />
+            <Button mode={"outlined"} icon={faRedo} onclick={redo} disabled={!$canRedo} />
         {/if}
     </div>
 

diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
@@ -10,6 +10,7 @@ interface Props {
 	icon?: IconDefinition | string;
 	onclick?: () => void;
 	context?: Snippet<[Writable<boolean>]>;
+	disabled?: boolean;
 	mode: "primary" | "secondary" | "outlined" | "accent";
 	bold?: boolean;
 }
@@ -20,6 +21,7 @@ const {
 	context,
 	bold,
 	icon,
+	disabled,
 }: Props = $props();
 
 let btn: HTMLButtonElement = $state();
@@ -39,6 +41,7 @@ function onContext() {
 <button
     bind:this={btn}
     {onclick}
+    {disabled}
     type="button"
     class="btn"
     class:primary={mode === "primary"}
@@ -93,4 +96,9 @@ function onContext() {
         font-weight: bolder;
         font-size: 1.1em;
     }
+
+    .btn[disabled] {
+        filter: opacity(.5);
+        cursor: unset;
+    }
 </style>
diff --git a/src/lib/components/workspace/blocks/Blocks.svelte b/src/lib/components/workspace/blocks/Blocks.svelte
@@ -2,7 +2,13 @@
 import { setLocale, setupWorkspace } from "$domain/blockly/blockly";
 import { dark, light } from "$domain/blockly/theme";
 import { Theme, theme } from "$state/app.svelte";
-import { restore, willRestore, workspace } from "$state/blockly.svelte";
+import {
+	canRedo,
+	canUndo,
+	restore,
+	willRestore,
+	workspace,
+} from "$state/blockly.svelte";
 import { code, robot } from "$state/workspace.svelte";
 import { arduino } from "@leaphy-robotics/leaphy-blocks";
 import { Events, WorkspaceSvg, serialization } from "blockly";
@@ -36,6 +42,9 @@ onMount(() => {
 	);
 	updateSizing();
 	$workspace.addChangeListener((event) => {
+		canUndo.set(get(workspace).getUndoStack().length > 0);
+		canRedo.set(get(workspace).getRedoStack().length > 0);
+
 		code.set(arduino.workspaceToCode($workspace));
 		updateSizing();
 

diff --git a/src/lib/state/blockly.svelte.ts b/src/lib/state/blockly.svelte.ts
@@ -11,3 +11,6 @@ export const audio = writable<boolean>(
 audio.subscribe((audio) => {
 	localStorage.setItem("audio", JSON.stringify(audio));
 });
+
+export const canUndo = writable<boolean>(false);
+export const canRedo = writable<boolean>(false);