disable pan button when at min zoom

Author: pngwn

js/app/vite.config.ts

@@ -32,7 +32,6 @@ const CDN_BASE = "https://gradio.s3-us-west-2.amazonaws.com";
 export default defineConfig(({ mode }) => {
 	const production = mode === "production";
 	const development = mode === "development";
-	console.log(mode);
 	return {
 		// plugins: [],
 		server: {

js/imageeditor/shared/Controls.svelte

@@ -28,6 +28,7 @@
 	export let current_zoom = 1;
 	export let dimensions: Spring<{ width: number; height: number }>;
 	export let tool: string;
+	export let min_zoom = true;
 	const dispatch = createEventDispatcher<{
 		/**
 		 * Remove the current image.
@@ -87,6 +88,8 @@
 
 	$: formatted_zoom = Math.round(current_zoom * 100);
 	let show_resize_popup = false;
+
+	$: console.log(min_zoom);
 </script>
 
 <IconButtonWrapper>
@@ -101,6 +104,7 @@
 		size="small"
 		padded={false}
 		transparent={true}
+		disabled={min_zoom}
 	/>
 
 	<IconButton

js/imageeditor/shared/ImageEditor.svelte

@@ -179,6 +179,7 @@
 	let zoom_level = 1;
 	let ready = false;
 	let mounted = false;
+	let min_zoom = true;
 
 	onMount(() => {
 		mounted = true;
@@ -221,6 +222,10 @@
 			zoom_level = _scale;
 		});
 
+		editor.min_zoom.subscribe((is_min_zoom) => {
+			min_zoom = is_min_zoom;
+		});
+
 		Promise.all([editor.ready, crop.ready]).then(() => {
 			handle_tool_change({ tool: "image" });
 			ready = true;
@@ -233,9 +238,6 @@
 		});
 	}
 
-	// $: mounted && (canvas_size, init_image_editor());
-	// $: ready && resize_canvas(canvas_size[0], canvas_size[1]);
-
 	function resize_canvas(width: number, height: number): void {
 		if (!editor) return;
 		if (mounted && ready) {
@@ -447,6 +449,7 @@
 				on:set_zoom={(e) => handle_zoom_change(e.detail)}
 				on:zoom_in={() => zoom_in_out("in")}
 				on:zoom_out={() => zoom_in_out("out")}
+				{min_zoom}
 				current_zoom={zoom_level}
 				on:remove_image={() => {
 					editor.reset_canvas();

js/imageeditor/shared/core/editor.ts

@@ -900,6 +900,10 @@ class EditorState {
 }
 
 export class ImageEditor {
+	public ready: Promise<void>;
+	public background_image_present = writable(false);
+	public min_zoom = writable(true);
+
 	private app!: Application;
 	private ui_container!: Container;
 	private image_container!: Container;
@@ -931,14 +935,13 @@ export class ImageEditor {
 	private outline_container!: Container;
 	private outline_graphics!: Graphics;
 	private background_image?: Sprite;
-	public background_image_present = writable(false);
 	private ready_resolve!: (value: void | PromiseLike<void>) => void;
-	public ready: Promise<void>;
 	private event_callbacks: Map<string, (() => void)[]> = new Map();
 	private fixed_canvas: boolean;
 	private dark: boolean;
 	private border_region: number;
 	private layer_options: LayerOptions;
+
 	constructor(options: ImageEditorOptions) {
 		this.dark = options.dark || false;
 		this.target_element = options.target_element;
@@ -978,7 +981,8 @@ export class ImageEditor {
 		this.border_region = options.border_region || 0;
 		this.layer_options = options.layer_options || {
 			allow_additional_layers: true,
-			layers: ["Layer 1"]
+			layers: ["Layer 1"],
+			disabled: false
 		};
 		this.scale.subscribe((scale) => {
 			this.state._set_scale(scale);
@@ -1050,6 +1054,13 @@ export class ImageEditor {
 			await tool.setup(this.context, this.current_tool, this.current_subtool);
 		}
 
+		const zoom = this.tools.get("zoom") as ZoomTool;
+		if (zoom) {
+			zoom.min_zoom.subscribe((is_min_zoom) => {
+				this.min_zoom.set(is_min_zoom);
+			});
+		}
+
 		this.target_element.appendChild(canvas);
 
 		// Ensure parent element is transparent
@@ -1350,6 +1361,15 @@ export class ImageEditor {
 			tool.setup(this.context, this.current_tool, this.current_subtool);
 		}
 
+		const zoom_tool = this.tools.get("zoom") as ZoomTool;
+		if (zoom_tool) {
+			console.log("zoom_tool", zoom_tool);
+			zoom_tool.min_zoom.subscribe((is_min_zoom) => {
+				console.log("is_min_zoom", is_min_zoom);
+				this.min_zoom.set(is_min_zoom);
+			});
+		}
+
 		this.notify("change");
 	}
 

js/imageeditor/shared/image/image.ts

@@ -333,10 +333,11 @@ export class AddImageCommand implements BgImageCommand {
 		// Instead, we'll store the border region on the sprite and let the resize tool
 		// read it when it's set up
 
-		this.context.layer_manager.create_layer(
-			this.fixed_canvas ? this.current_canvas_size.width : width,
-			this.fixed_canvas ? this.current_canvas_size.height : height
-		);
+		this.context.layer_manager.create_layer({
+			width: this.fixed_canvas ? this.current_canvas_size.width : width,
+			height: this.fixed_canvas ? this.current_canvas_size.height : height,
+			user_created: true
+		});
 		this.context.reset();
 	}
 

js/imageeditor/shared/zoom/zoom.ts

@@ -5,14 +5,16 @@ import {
 } from "pixi.js";
 import { type ImageEditorContext, type Tool } from "../core/editor";
 import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
-import { get } from "svelte/store";
+import { get, writable } from "svelte/store";
 
 /**
  * ZoomTool class for handling zoom and pan functionality in the image editor
  * Implements the Tool interface
  */
 export class ZoomTool implements Tool {
 	name = "zoom";
+	min_zoom = writable(true);
+
 	private image_editor_context!: ImageEditorContext;
 
 	// Constants
@@ -596,6 +598,7 @@ export class ZoomTool implements Tool {
 			position: new_position,
 			animate: typeof hard === "boolean" ? !hard : new_zoom === min_zoom
 		});
+		this.min_zoom.set(new_zoom === min_zoom);
 	}
 
 	/**