@gradio/imageeditor 0.11.11 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @gradio/imageeditor
 
+## 0.12.1
+
+### Fixes
+
+- [#10306](https://github.com/gradio-app/gradio/pull/10306) [`9fc988e`](https://github.com/gradio-app/gradio/commit/9fc988ebaf4bea24b71308922bb1889f1d3f4f6e) - Fix bug where ImageEditor always sends empty layers list to the backend.  Thanks @freddyaboulton!
+
+## 0.12.0
+
+### Features
+
+- [#10192](https://github.com/gradio-app/gradio/pull/10192) [`4fc7fb7`](https://github.com/gradio-app/gradio/commit/4fc7fb777c42af537e4af612423fa44029657d41) - Ensure components can be remounted with their previous data.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.13.0
+- @gradio/utils@0.10.0
+- @gradio/upload@0.14.4
+- @gradio/client@1.9.0
+- @gradio/icons@0.9.0
+- @gradio/statustracker@0.10.0
+- @gradio/wasm@0.16.0
+- @gradio/image@0.20.0
+
 ## 0.11.11
 
 ### Dependency updates

package/Index.svelte

@@ -57,6 +57,7 @@
 	};
 	export let canvas_size: [number, number] | undefined;
 	export let show_fullscreen_button = true;
+	export let full_history: any = null;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -185,6 +186,7 @@
 		/>
 
 		<InteractiveImageEditor
+			on:history={(e) => (full_history = e.detail)}
 			bind:dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
@@ -221,6 +223,7 @@
 			upload={(...args) => gradio.client.upload(...args)}
 			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
+			{full_history}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/dist/Index.svelte

@@ -42,6 +42,7 @@ export let attached_events = [];
 export let server;
 export let canvas_size;
 export let show_fullscreen_button = true;
+export let full_history = null;
 export let gradio;
 let editor_instance;
 let image_id = null;
@@ -142,6 +143,7 @@ $:
 		/>
 
 		<InteractiveImageEditor
+			on:history={(e) => (full_history = e.detail)}
 			bind:dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
@@ -178,6 +180,7 @@ $:
 			upload={(...args) => gradio.client.upload(...args)}
 			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
+			{full_history}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/dist/Index.svelte.d.ts

@@ -36,6 +36,7 @@ declare const __propDef: {
         };
         canvas_size: [number, number] | undefined;
         show_fullscreen_button?: boolean | undefined;
+        full_history?: any;
         gradio: Gradio<{
             change: never;
             error: string;
@@ -158,6 +159,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_fullscreen_button(): boolean | undefined;
     /**accessor*/
     set show_fullscreen_button(_: boolean | undefined);
+    get full_history(): any;
+    /**accessor*/
+    set full_history(_: any);
     get gradio(): Gradio<{
         change: never;
         error: string;

package/dist/shared/ImageEditor.svelte

@@ -22,6 +22,7 @@ const dispatch = createEventDispatcher();
 export let crop_constraint = false;
 export let canvas_size;
 export let parent_height;
+export let full_history = null;
 $:
   orig_canvas_size = canvas_size;
 const BASE_DIMENSIONS = canvas_size || [800, 600];
@@ -54,8 +55,16 @@ const position_spring = spring(
 const pixi = writable(null);
 const CommandManager = command_manager();
 const { can_redo, can_undo, current_history } = CommandManager;
+function get_start_history(history2) {
+  if (history2.previous) {
+    return get_start_history(history2.previous);
+  }
+  return history2;
+}
 $:
   $current_history.previous, dispatch("change");
+$:
+  dispatch("history", get_start_history($current_history));
 $: {
   history = !!$current_history.previous || $active_tool !== "bg";
 }
@@ -225,6 +234,11 @@ onMount(() => {
     }
   }
   resize(...$dimensions);
+  tick().then(() => {
+    if (full_history) {
+      CommandManager.hydrate(full_history);
+    }
+  });
   return () => {
     $pixi?.destroy();
     resizer.disconnect();

package/dist/shared/ImageEditor.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
 import type { Spring } from "svelte/motion";
 import { type PixiApp } from "./utils/pixi";
-import { type CommandManager } from "./utils/commands";
+import { type CommandManager, type CommandNode } from "./utils/commands";
 export declare const EDITOR_KEY: unique symbol;
 export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
 import { type tool } from "./tools";
@@ -52,6 +52,7 @@ declare const __propDef: {
         crop_constraint?: boolean | undefined;
         canvas_size: [number, number] | undefined;
         parent_height: number;
+        full_history?: (CommandNode | null) | undefined;
         height?: number | undefined;
         get_blobs?: (() => Promise<ImageBlobs>) | undefined;
         handle_remove?: (() => void) | undefined;
@@ -61,6 +62,7 @@ declare const __propDef: {
         clear?: CustomEvent<undefined> | undefined;
         save: CustomEvent<void>;
         change: CustomEvent<void>;
+        history: CustomEvent<Writable<CommandNode>>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/InteractiveImageEditor.svelte

@@ -3,6 +3,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import {} from "@gradio/utils";
 import { prepare_files } from "@gradio/client";
+import {} from "./utils/commands";
 import ImageEditor from "./ImageEditor.svelte";
 import Layers from "./layers/Layers.svelte";
 import {} from "./tools/Brush.svelte";
@@ -36,6 +37,7 @@ export let stream_handler;
 export let dragging;
 export let placeholder = void 0;
 export let height = 450;
+export let full_history = null;
 const dispatch = createEventDispatcher();
 let editor;
 function is_not_null(o) {
@@ -157,6 +159,7 @@ $:
 	label={label || i18n("image.image")}
 />
 <ImageEditor
+	on:history
 	{canvas_size}
 	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
@@ -170,6 +173,7 @@ $:
 	bind:bg
 	{sources}
 	crop_constraint={!!crop_constraint}
+	{full_history}
 >
 	<Tools {i18n}>
 		<Layers layer_files={value?.layers || null} enable_layers={layers} />

package/dist/shared/InteractiveImageEditor.svelte.d.ts

@@ -11,6 +11,7 @@ export interface ImageBlobs {
 }
 import { type I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
+import { type CommandNode } from "./utils/commands";
 import { type Brush as IBrush } from "./tools/Brush.svelte";
 import { type Eraser } from "./tools/Brush.svelte";
 declare const __propDef: {
@@ -36,10 +37,12 @@ declare const __propDef: {
         dragging: boolean;
         placeholder?: string | undefined;
         height?: number | undefined;
+        full_history?: (CommandNode | null) | undefined;
         get_data?: (() => Promise<ImageBlobs>) | undefined;
         image_id?: (null | string) | undefined;
     };
     events: {
+        history: CustomEvent<import("svelte/store").Writable<CommandNode>>;
         save: CustomEvent<void>;
         clear?: CustomEvent<undefined> | undefined;
         upload?: CustomEvent<undefined> | undefined;

package/dist/shared/layers/Layers.svelte

@@ -6,9 +6,20 @@ import { Layers } from "@gradio/icons";
 let show_layers = false;
 export let layer_files = [];
 export let enable_layers = true;
-const { pixi, current_layer, dimensions, register_context } = getContext(EDITOR_KEY);
+const {
+  pixi,
+  current_layer,
+  dimensions,
+  register_context,
+  command_manager,
+  current_history
+} = getContext(EDITOR_KEY);
+const { can_undo } = command_manager;
 const LayerManager = layer_manager();
-let layers = [];
+const manager_current_layer = LayerManager.active_layer;
+const layers = LayerManager.layers;
+$:
+  current_layer.set($manager_current_layer);
 register_context("layers", {
   init_fn: () => {
     new_layer();
@@ -18,7 +29,7 @@ register_context("layers", {
   }
 });
 async function validate_layers() {
-  let invalid = layers.some(
+  let invalid = $layers.some(
     (layer) => layer.composite.texture?.width != $dimensions[0] || layer.composite.texture?.height != $dimensions[1]
   );
   if (invalid) {
@@ -34,13 +45,16 @@ $:
 async function new_layer() {
   if (!$pixi)
     return;
-  const [active_layer, all_layers] = LayerManager.add_layer(
+  const new_layer2 = LayerManager.add_layer(
     $pixi.layer_container,
     $pixi.renderer,
     ...$dimensions
   );
-  $current_layer = active_layer;
-  layers = all_layers;
+  if ($can_undo || $layers.length > 0) {
+    command_manager.execute(new_layer2);
+  } else {
+    new_layer2.execute();
+  }
 }
 $:
   render_layer_files(layer_files);
@@ -71,19 +85,19 @@ async function render_layer_files(_layer_files) {
     })
   );
   LayerManager.reset();
-  let last_layer = null;
   for (const blob of blobs.filter(is_not_null)) {
-    last_layer = await LayerManager.add_layer_from_blob(
+    const new_layer2 = await LayerManager.add_layer_from_blob(
       $pixi.layer_container,
       $pixi.renderer,
       blob,
       $pixi.view
     );
+    if ($can_undo && $layers.length === 0) {
+      command_manager.execute(new_layer2);
+    } else {
+      new_layer2.execute();
+    }
   }
-  if (!last_layer)
-    return;
-  $current_layer = last_layer[0];
-  layers = last_layer[1];
 }
 onMount(async () => {
   await tick();
@@ -102,13 +116,13 @@ onMount(async () => {
 		<button
 			aria-label="Show Layers"
 			on:click={() => (show_layers = !show_layers)}
-			><span class="icon"><Layers /></span> Layer {layers.findIndex(
+			><span class="icon"><Layers /></span> Layer {$layers.findIndex(
 				(l) => l === $current_layer
 			) + 1}
 		</button>
 		{#if show_layers}
 			<ul>
-				{#each layers as layer, i (i)}
+				{#each $layers as layer, i (i)}
 					<li>
 						<button
 							class:selected_layer={$current_layer === layer}

package/dist/shared/layers/utils.d.ts

@@ -1,4 +1,6 @@
 import { Container, type IRenderer, RenderTexture, Sprite, Filter } from "pixi.js";
+import { type Command } from "../utils/commands";
+import { type Writable } from "svelte/store";
 /**
  * GLSL Shader that takes two textures and erases the second texture from the first.
  */
@@ -35,7 +37,7 @@ interface LayerManager {
      * @param width the width of the layer
      * @param height the height of the layer
      */
-    add_layer(container: Container, renderer: IRenderer, width: number, height: number): [LayerScene, LayerScene[]];
+    add_layer(container: Container, renderer: IRenderer, width: number, height: number, sprite?: Sprite): Command;
     /**
      * Swaps the layer with the layer above or below it.
      * @param layer The index layer to swap.
@@ -58,7 +60,9 @@ interface LayerManager {
      * @returns The layers.
      */
     get_layers(): LayerScene[];
-    add_layer_from_blob(container: Container, renderer: IRenderer, blob: Blob, view: HTMLCanvasElement): Promise<[LayerScene, LayerScene[]]>;
+    layers: Writable<LayerScene[]>;
+    active_layer: Writable<LayerScene | null>;
+    add_layer_from_blob(container: Container, renderer: IRenderer, blob: Blob, view: HTMLCanvasElement): Promise<Command>;
 }
 /**
  * Creates a layer manager.

package/dist/shared/layers/utils.js

@@ -1,4 +1,6 @@
 import { Container, RenderTexture, Texture, Sprite, Filter } from "pixi.js";
+import {} from "../utils/commands";
+import { get, writable } from "svelte/store";
 /**
  * GLSL Shader that takes two textures and erases the second texture from the first.
  */
@@ -39,36 +41,58 @@ export function layer_manager() {
     let current_layer = 0;
     let position = 0;
     return {
-        add_layer: function (container, renderer, width, height) {
-            const layer_container = new Container();
-            position++;
-            layer_container.zIndex = position;
-            const composite_texture = RenderTexture.create({
-                width,
-                height
-            });
-            const composite = new Sprite(composite_texture);
-            layer_container.addChild(composite);
-            composite.zIndex = position;
-            const layer_scene = {
-                draw_texture: RenderTexture.create({
-                    width,
-                    height
-                }),
-                erase_texture: RenderTexture.create({
-                    width,
-                    height
-                }),
-                composite
+        add_layer: function (container, renderer, width, height, sprite) {
+            let layer_container;
+            let layer_number;
+            let that = this;
+            return {
+                execute: function () {
+                    layer_container = new Container();
+                    position++;
+                    layer_container.zIndex = position;
+                    const composite_texture = RenderTexture.create({
+                        width,
+                        height
+                    });
+                    const composite = new Sprite(composite_texture);
+                    layer_container.addChild(composite);
+                    composite.zIndex = position;
+                    const layer_scene = {
+                        draw_texture: RenderTexture.create({
+                            width,
+                            height
+                        }),
+                        erase_texture: RenderTexture.create({
+                            width,
+                            height
+                        }),
+                        composite
+                    };
+                    const erase_filter = new Filter(undefined, erase_shader, {
+                        uEraserTexture: layer_scene.erase_texture,
+                        uDrawingTexture: layer_scene.draw_texture
+                    });
+                    composite.filters = [erase_filter];
+                    container.addChild(layer_container);
+                    _layers.push(layer_scene);
+                    that.layers.update((s) => [...s, layer_scene]);
+                    that.active_layer.set(layer_scene);
+                    layer_number = get(that.layers).length - 1;
+                    if (sprite) {
+                        renderer.render(sprite, {
+                            renderTexture: layer_scene.draw_texture
+                        });
+                    }
+                },
+                undo: function () {
+                    container.removeChild(layer_container);
+                    _layers = get(that.layers);
+                    _layers = _layers.filter((_, i) => i !== layer_number);
+                    that.layers.set(_layers);
+                    const new_layer = _layers[layer_number - 1] || _layers[0] || null;
+                    that.active_layer.set(new_layer);
+                }
             };
-            const erase_filter = new Filter(undefined, erase_shader, {
-                uEraserTexture: layer_scene.erase_texture,
-                uDrawingTexture: layer_scene.draw_texture
-            });
-            composite.filters = [erase_filter];
-            container.addChild(layer_container);
-            _layers.push(layer_scene);
-            return [layer_scene, _layers];
         },
         swap_layers: function (layer, direction) {
             if (direction === "up") {
@@ -80,7 +104,8 @@ export function layer_manager() {
             return _layers[layer];
         },
         change_active_layer: function (layer) {
-            current_layer = layer;
+            // current_layer = layer;
+            this.active_layer.set(get(this.layers)[layer]);
             return _layers[layer];
         },
         reset() {
@@ -92,6 +117,8 @@ export function layer_manager() {
             _layers = [];
             current_layer = 0;
             position = 0;
+            this.active_layer.set(null);
+            this.layers.set([]);
         },
         async add_layer_from_blob(container, renderer, blob, view) {
             const img = await createImageBitmap(blob);
@@ -101,15 +128,13 @@ export function layer_manager() {
             sprite.zIndex = 0;
             sprite.width = w;
             sprite.height = h;
-            const [layer, layers] = this.add_layer(container, renderer, view.width, view.height);
-            renderer.render(sprite, {
-                renderTexture: layer.draw_texture
-            });
-            return [layer, layers];
+            return this.add_layer(container, renderer, view.width, view.height, sprite);
         },
         get_layers() {
             return _layers;
-        }
+        },
+        layers: writable([]),
+        active_layer: writable(null)
     };
 }
 function resize_to_fit(inner_width, inner_height, outer_width, outer_height) {

package/dist/shared/tools/Brush.svelte

@@ -13,8 +13,12 @@ export let default_color = void 0;
 export let colors = void 0;
 export let color_mode = void 0;
 export let mode;
-$:
-  processed_colors = colors ? colors.map(process_color).filter((_, i) => i < 4) : [];
+let processed_colors = [];
+let old_colors = [];
+if (colors && JSON.stringify(old_colors) !== JSON.stringify(colors)) {
+  processed_colors = colors.map(process_color).filter((_, i) => i < 4);
+  old_colors = processed_colors;
+}
 let selected_color = process_color(default_color || "#000000");
 $:
   if (mode === "draw") {

package/dist/shared/utils/commands.d.ts

@@ -65,11 +65,16 @@ export interface CommandManager {
      * Observable store that you can subscribe to for updates
      */
     readonly current_history: Writable<CommandNode>;
+    /**
+     * Hydrates the command manager with a full history
+     * @param full_history the full history to hydrate with
+     */
+    hydrate(full_history: CommandNode): void;
 }
 /**
  * Command node interface that is used to create the undo/redo history
  */
-interface CommandNode {
+export interface CommandNode {
     /**
      * Command that the node holds
      */
@@ -93,4 +98,3 @@ interface CommandNode {
  * @returns a command manager
  */
 export declare function command_manager(): CommandManager;
-export {};

package/dist/shared/utils/commands.js

@@ -52,6 +52,14 @@ export function command_manager() {
             can_redo.set(!!history.next);
             current_history.set(history);
         },
+        hydrate: function (full_history) {
+            setTimeout(() => {
+                while (full_history.next) {
+                    this.execute(full_history.next.command);
+                    full_history = full_history.next;
+                }
+            }, 1000);
+        },
         can_undo,
         can_redo,
         current_history,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.11.11",
+  "version": "0.12.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,14 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.12.0",
-    "@gradio/client": "^1.8.0",
-    "@gradio/icons": "^0.8.1",
-    "@gradio/image": "^0.19.0",
-    "@gradio/statustracker": "^0.9.7",
-    "@gradio/utils": "^0.9.0",
-    "@gradio/wasm": "^0.15.0",
-    "@gradio/upload": "^0.14.3"
+    "@gradio/client": "^1.9.0",
+    "@gradio/atoms": "^0.13.0",
+    "@gradio/icons": "^0.9.0",
+    "@gradio/image": "^0.20.0",
+    "@gradio/upload": "^0.14.4",
+    "@gradio/statustracker": "^0.10.0",
+    "@gradio/wasm": "^0.16.0",
+    "@gradio/utils": "^0.10.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/ImageEditor.svelte

@@ -2,7 +2,7 @@
 	import type { Writable, Readable } from "svelte/store";
 	import type { Spring } from "svelte/motion";
 	import { type PixiApp } from "./utils/pixi";
-	import { type CommandManager } from "./utils/commands";
+	import { type CommandManager, type CommandNode } from "./utils/commands";
 
 	export const EDITOR_KEY = Symbol("editor");
 	export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
@@ -71,10 +71,12 @@
 		clear?: never;
 		save: void;
 		change: void;
+		history: CommandManager["current_history"];
 	}>();
 	export let crop_constraint = false;
 	export let canvas_size: [number, number] | undefined;
 	export let parent_height: number;
+	export let full_history: CommandNode | null = null;
 
 	$: orig_canvas_size = canvas_size;
 
@@ -114,7 +116,15 @@
 
 	const { can_redo, can_undo, current_history } = CommandManager;
 
+	function get_start_history(history: any): any {
+		if (history.previous) {
+			return get_start_history(history.previous);
+		}
+		return history;
+	}
+
 	$: $current_history.previous, dispatch("change");
+	$: dispatch("history", get_start_history($current_history));
 
 	$: {
 		history = !!$current_history.previous || $active_tool !== "bg";
@@ -316,6 +326,12 @@
 
 		resize(...$dimensions);
 
+		tick().then(() => {
+			if (full_history) {
+				CommandManager.hydrate(full_history);
+			}
+		});
+
 		return () => {
 			$pixi?.destroy();
 			resizer.disconnect();

package/shared/InteractiveImageEditor.svelte

@@ -16,7 +16,7 @@
 	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
-
+	import { type CommandNode } from "./utils/commands";
 	import ImageEditor from "./ImageEditor.svelte";
 	import Layers from "./layers/Layers.svelte";
 	import { type Brush as IBrush } from "./tools/Brush.svelte";
@@ -57,6 +57,7 @@
 	export let dragging: boolean;
 	export let placeholder: string | undefined = undefined;
 	export let height = 450;
+	export let full_history: CommandNode | null = null;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
@@ -215,6 +216,7 @@
 	label={label || i18n("image.image")}
 />
 <ImageEditor
+	on:history
 	{canvas_size}
 	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
@@ -228,6 +230,7 @@
 	bind:bg
 	{sources}
 	crop_constraint={!!crop_constraint}
+	{full_history}
 >
 	<Tools {i18n}>
 		<Layers layer_files={value?.layers || null} enable_layers={layers} />

package/shared/layers/Layers.svelte

@@ -12,11 +12,22 @@
 	export let layer_files: (FileData | null)[] | null = [];
 	export let enable_layers = true;
 
-	const { pixi, current_layer, dimensions, register_context } =
-		getContext<EditorContext>(EDITOR_KEY);
+	const {
+		pixi,
+		current_layer,
+		dimensions,
+		register_context,
+		command_manager,
+		current_history
+	} = getContext<EditorContext>(EDITOR_KEY);
+
+	const { can_undo } = command_manager;
 
 	const LayerManager = layer_manager();
-	let layers: LayerScene[] = [];
+	const manager_current_layer = LayerManager.active_layer;
+	const layers = LayerManager.layers;
+
+	$: current_layer.set($manager_current_layer);
 
 	register_context("layers", {
 		init_fn: () => {
@@ -28,7 +39,7 @@
 	});
 
 	async function validate_layers(): Promise<void> {
-		let invalid = layers.some(
+		let invalid = $layers.some(
 			(layer) =>
 				layer.composite.texture?.width != $dimensions[0] ||
 				layer.composite.texture?.height != $dimensions[1]
@@ -44,14 +55,17 @@
 	async function new_layer(): Promise<void> {
 		if (!$pixi) return;
 
-		const [active_layer, all_layers] = LayerManager.add_layer(
+		const new_layer = LayerManager.add_layer(
 			$pixi.layer_container,
 			$pixi.renderer,
 			...$dimensions
 		);
 
-		$current_layer = active_layer;
-		layers = all_layers;
+		if ($can_undo || $layers.length > 0) {
+			command_manager.execute(new_layer);
+		} else {
+			new_layer.execute();
+		}
 	}
 
 	$: render_layer_files(layer_files);
@@ -88,20 +102,20 @@
 
 		LayerManager.reset();
 
-		let last_layer: [LayerScene, LayerScene[]] | null = null;
 		for (const blob of blobs.filter(is_not_null)) {
-			last_layer = await LayerManager.add_layer_from_blob(
+			const new_layer = await LayerManager.add_layer_from_blob(
 				$pixi.layer_container,
 				$pixi.renderer,
 				blob,
 				$pixi.view
 			);
-		}
-
-		if (!last_layer) return;
 
-		$current_layer = last_layer[0];
-		layers = last_layer[1];
+			if ($can_undo && $layers.length === 0) {
+				command_manager.execute(new_layer);
+			} else {
+				new_layer.execute();
+			}
+		}
 	}
 
 	onMount(async () => {
@@ -121,13 +135,13 @@
 		<button
 			aria-label="Show Layers"
 			on:click={() => (show_layers = !show_layers)}
-			><span class="icon"><Layers /></span> Layer {layers.findIndex(
+			><span class="icon"><Layers /></span> Layer {$layers.findIndex(
 				(l) => l === $current_layer
 			) + 1}
 		</button>
 		{#if show_layers}
 			<ul>
-				{#each layers as layer, i (i)}
+				{#each $layers as layer, i (i)}
 					<li>
 						<button
 							class:selected_layer={$current_layer === layer}

package/shared/layers/utils.ts

@@ -8,6 +8,9 @@ import {
 	Filter
 } from "pixi.js";
 
+import { type Command } from "../utils/commands";
+import { get, writable, type Writable } from "svelte/store";
+
 /**
  * GLSL Shader that takes two textures and erases the second texture from the first.
  */
@@ -65,8 +68,9 @@ interface LayerManager {
 		container: Container,
 		renderer: IRenderer,
 		width: number,
-		height: number
-	): [LayerScene, LayerScene[]];
+		height: number,
+		sprite?: Sprite
+	): Command;
 	/**
 	 * Swaps the layer with the layer above or below it.
 	 * @param layer The index layer to swap.
@@ -89,13 +93,15 @@ interface LayerManager {
 	 * @returns The layers.
 	 */
 	get_layers(): LayerScene[];
+	layers: Writable<LayerScene[]>;
+	active_layer: Writable<LayerScene | null>;
 
 	add_layer_from_blob(
 		container: Container,
 		renderer: IRenderer,
 		blob: Blob,
 		view: HTMLCanvasElement
-	): Promise<[LayerScene, LayerScene[]]>;
+	): Promise<Command>;
 }
 
 /**
@@ -126,47 +132,72 @@ export function layer_manager(): LayerManager {
 			container: Container,
 			renderer: IRenderer,
 			width: number,
-			height: number
-		): [LayerScene, LayerScene[]] {
-			const layer_container = new Container() as Container & DisplayObject;
-			position++;
-			layer_container.zIndex = position;
-
-			const composite_texture = RenderTexture.create({
-				width,
-				height
-			});
-
-			const composite = new Sprite(composite_texture) as Sprite & DisplayObject;
-
-			layer_container.addChild(composite);
-
-			composite.zIndex = position;
-
-			const layer_scene: LayerScene = {
-				draw_texture: RenderTexture.create({
-					width,
-					height
-				}),
-				erase_texture: RenderTexture.create({
-					width,
-					height
-				}),
-				composite
+			height: number,
+			sprite?: Sprite
+		): Command {
+			let layer_container: Container & DisplayObject;
+			let layer_number: number;
+			let that = this;
+			return {
+				execute: function () {
+					layer_container = new Container() as Container & DisplayObject;
+					position++;
+					layer_container.zIndex = position;
+
+					const composite_texture = RenderTexture.create({
+						width,
+						height
+					});
+
+					const composite = new Sprite(composite_texture) as Sprite &
+						DisplayObject;
+
+					layer_container.addChild(composite);
+
+					composite.zIndex = position;
+
+					const layer_scene: LayerScene = {
+						draw_texture: RenderTexture.create({
+							width,
+							height
+						}),
+						erase_texture: RenderTexture.create({
+							width,
+							height
+						}),
+						composite
+					};
+
+					const erase_filter = new Filter(undefined, erase_shader, {
+						uEraserTexture: layer_scene.erase_texture,
+						uDrawingTexture: layer_scene.draw_texture
+					});
+
+					composite.filters = [erase_filter];
+
+					container.addChild(layer_container);
+					_layers.push(layer_scene);
+					that.layers.update((s) => [...s, layer_scene]);
+					that.active_layer.set(layer_scene);
+
+					layer_number = get(that.layers).length - 1;
+
+					if (sprite) {
+						renderer.render(sprite, {
+							renderTexture: layer_scene.draw_texture
+						});
+					}
+				},
+				undo: function () {
+					container.removeChild(layer_container);
+
+					_layers = get(that.layers);
+					_layers = _layers.filter((_, i) => i !== layer_number);
+					that.layers.set(_layers);
+					const new_layer = _layers[layer_number - 1] || _layers[0] || null;
+					that.active_layer.set(new_layer);
+				}
 			};
-
-			const erase_filter = new Filter(undefined, erase_shader, {
-				uEraserTexture: layer_scene.erase_texture,
-				uDrawingTexture: layer_scene.draw_texture
-			});
-
-			composite.filters = [erase_filter];
-
-			container.addChild(layer_container);
-
-			_layers.push(layer_scene);
-
-			return [layer_scene, _layers];
 		},
 
 		swap_layers: function (
@@ -182,7 +213,8 @@ export function layer_manager(): LayerManager {
 		},
 
 		change_active_layer: function (layer: number): LayerScene {
-			current_layer = layer;
+			// current_layer = layer;
+			this.active_layer.set(get(this.layers)[layer]);
 			return _layers[layer];
 		},
 		reset() {
@@ -194,13 +226,15 @@ export function layer_manager(): LayerManager {
 			_layers = [];
 			current_layer = 0;
 			position = 0;
+			this.active_layer.set(null);
+			this.layers.set([]);
 		},
 		async add_layer_from_blob(
 			container: Container,
 			renderer: IRenderer,
 			blob: Blob,
 			view: HTMLCanvasElement
-		) {
+		): Promise<Command> {
 			const img = await createImageBitmap(blob);
 			const bitmap_texture = Texture.from(img);
 
@@ -217,22 +251,19 @@ export function layer_manager(): LayerManager {
 			sprite.width = w;
 			sprite.height = h;
 
-			const [layer, layers] = this.add_layer(
+			return this.add_layer(
 				container,
 				renderer,
 				view.width,
-				view.height
+				view.height,
+				sprite
 			);
-
-			renderer.render(sprite, {
-				renderTexture: layer.draw_texture
-			});
-
-			return [layer, layers];
 		},
 		get_layers() {
 			return _layers;
-		}
+		},
+		layers: writable([]),
+		active_layer: writable(null)
 	};
 }
 

package/shared/tools/Brush.svelte

@@ -43,9 +43,12 @@
 	export let color_mode: Brush["color_mode"] | undefined = undefined;
 	export let mode: "erase" | "draw";
 
-	$: processed_colors = colors
-		? colors.map(process_color).filter((_, i) => i < 4)
-		: [];
+	let processed_colors: string[] = [];
+	let old_colors: string[] = [];
+	if (colors && JSON.stringify(old_colors) !== JSON.stringify(colors)) {
+		processed_colors = colors.map(process_color).filter((_, i) => i < 4);
+		old_colors = processed_colors;
+	}
 
 	let selected_color = process_color(default_color || "#000000");
 

package/shared/utils/commands.ts

@@ -67,12 +67,17 @@ export interface CommandManager {
 	 * Observable store that you can subscribe to for updates
 	 */
 	readonly current_history: Writable<CommandNode>;
+	/**
+	 * Hydrates the command manager with a full history
+	 * @param full_history the full history to hydrate with
+	 */
+	hydrate(full_history: CommandNode): void;
 }
 
 /**
  * Command node interface that is used to create the undo/redo history
  */
-interface CommandNode {
+export interface CommandNode {
 	/**
 	 * Command that the node holds
 	 */
@@ -147,7 +152,14 @@ export function command_manager(): CommandManager {
 			can_redo.set(!!history.next);
 			current_history.set(history);
 		},
-
+		hydrate: function (full_history: CommandNode) {
+			setTimeout(() => {
+				while (full_history.next) {
+					this.execute(full_history.next.command!);
+					full_history = full_history.next;
+				}
+			}, 1000);
+		},
 		can_undo,
 		can_redo,
 		current_history,