@gradio/imageeditor 0.14.4 → 0.15.0

package/shared/brush/brush-cursor.ts

@@ -13,7 +13,6 @@ import { clear_timeout } from "./brush-utils";
  * Class to handle all cursor preview-related functionality for the brush tool.
  */
 export class BrushCursor {
-	// Cursor-related properties
 	private cursor_graphics: Graphics | null = null;
 	private cursor_container: Container | null = null;
 	private brush_preview_container: Container | null = null;
@@ -23,7 +22,6 @@ export class BrushCursor {
 	private cursor_position_check_timeout: number | null = null;
 	private is_brush_or_erase_active = false;
 
-	// Event handlers
 	private _bound_update_cursor:
 		| ((event: FederatedPointerEvent) => void)
 		| null = null;
@@ -51,21 +49,16 @@ export class BrushCursor {
 	 * Sets up cursor-related event listeners.
 	 */
 	setup_event_listeners(): void {
-		// Clean up any existing listeners
 		this.cleanup_event_listeners();
 
-		// Create bound event handlers
 		this._bound_update_cursor = this.update_cursor_position.bind(this);
 		this._bound_check_cursor_over_image =
 			this.check_cursor_over_image.bind(this);
 
-		// Add event listeners using Pixi event system
-		// Use app.stage for global events like pointermove
 		const stage = this.image_editor_context.app.stage;
 		stage.on("pointermove", this._bound_update_cursor);
 		stage.on("pointermove", this._bound_check_cursor_over_image);
 
-		// Add event listeners to the image container for enter/leave events
 		this.image_editor_context.image_container.on(
 			"pointerenter",
 			this.on_image_container_pointer_enter.bind(this)
@@ -80,10 +73,8 @@ export class BrushCursor {
 	 * Removes all cursor-related event listeners.
 	 */
 	cleanup_event_listeners(): void {
-		// Use Pixi event system for removal
 		const stage = this.image_editor_context.app.stage;
 
-		// Remove event listeners if they exist
 		if (this._bound_update_cursor) {
 			stage.off("pointermove", this._bound_update_cursor);
 			this._bound_update_cursor = null;
@@ -94,11 +85,9 @@ export class BrushCursor {
 			this._bound_check_cursor_over_image = null;
 		}
 
-		// Remove image container event listeners
 		this.image_editor_context.image_container.off("pointerenter");
 		this.image_editor_context.image_container.off("pointerleave");
 
-		// Clear timeout
 		this.cursor_position_check_timeout = clear_timeout(
 			this.cursor_position_check_timeout
 		);
@@ -108,7 +97,6 @@ export class BrushCursor {
 	 * initializes the cursor for the brush tool.
 	 */
 	initialize_cursor(): void {
-		// clean up existing cursor if it exists
 		if (this.cursor_container) {
 			if (this.cursor_container.parent) {
 				this.cursor_container.parent.removeChild(this.cursor_container);
@@ -117,15 +105,12 @@ export class BrushCursor {
 			this.cursor_container = null;
 		}
 
-		// create new cursor container and add to ui container
 		this.cursor_container = new Container();
 		this.image_editor_context.ui_container.addChild(this.cursor_container);
 
-		// create cursor graphics
 		this.cursor_graphics = new Graphics();
 		this.cursor_container.addChild(this.cursor_graphics);
 
-		// draw initial cursor
 		this.update_cursor_appearance();
 	}
 
@@ -135,16 +120,13 @@ export class BrushCursor {
 	update_cursor_appearance(): void {
 		if (!this.cursor_graphics) return;
 
-		// clear previous graphics
 		this.cursor_graphics.clear();
 
-		// set color based on mode
 		const cursor_color =
 			this.state.mode === "draw"
 				? tinycolor(this.state.color).toString()
 				: 0xffffff;
 
-		// draw circle with current brush size
 		this.cursor_graphics
 			.circle(0, 0, this.state.brush_size * this.scale)
 			.stroke({
@@ -153,7 +135,6 @@ export class BrushCursor {
 				alpha: 0.8
 			});
 
-		// add a small dot in the center for precision
 		this.cursor_graphics.circle(0, 0, 1).fill({
 			color: cursor_color,
 			alpha: 0.8
@@ -167,17 +148,14 @@ export class BrushCursor {
 	update_cursor_position(event: FederatedPointerEvent): void {
 		if (!this.cursor_container) return;
 
-		// get position in image coordinates
 		const local_pos = this.image_editor_context.image_container.toLocal(
 			event.global
 		);
 
-		// convert to ui coordinates
 		const ui_pos = this.image_editor_context.ui_container.toLocal(
 			this.image_editor_context.image_container.toGlobal(local_pos)
 		);
 
-		// update cursor position
 		this.cursor_container.position.set(ui_pos.x, ui_pos.y);
 	}
 
@@ -186,17 +164,14 @@ export class BrushCursor {
 	 * @param {FederatedPointerEvent} event - The pointer event.
 	 */
 	check_cursor_over_image(event: FederatedPointerEvent): void {
-		// cancel any pending timeout
 		if (this.cursor_position_check_timeout !== null) {
 			window.clearTimeout(this.cursor_position_check_timeout);
 			this.cursor_position_check_timeout = null;
 		}
 
-		// get the image container bounds in global coordinates
 		const image_container = this.image_editor_context.image_container;
 		const bounds = image_container.getBounds();
 
-		// check if cursor is over image
 		const was_over_image = this.is_cursor_over_image;
 		this.is_cursor_over_image =
 			event.global.x >= bounds.x &&
@@ -204,7 +179,6 @@ export class BrushCursor {
 			event.global.y >= bounds.y &&
 			event.global.y <= bounds.y + bounds.height;
 
-		// update visibility if state changed
 		if (was_over_image !== this.is_cursor_over_image) {
 			this.update_cursor_and_preview_visibility();
 		}
@@ -248,7 +222,6 @@ export class BrushCursor {
 		}
 
 		if (show) {
-			// update preview appearance and position
 			this.update_brush_preview();
 			this.update_brush_preview_position();
 		}
@@ -258,7 +231,6 @@ export class BrushCursor {
 	 * initializes the brush preview.
 	 */
 	initialize_brush_preview(): void {
-		// clean up existing preview if it exists
 		if (this.brush_preview_container) {
 			if (this.brush_preview_container.parent) {
 				this.brush_preview_container.parent.removeChild(
@@ -269,17 +241,14 @@ export class BrushCursor {
 			this.brush_preview_container = null;
 		}
 
-		// create new preview container and add to ui container
 		this.brush_preview_container = new Container();
 		this.image_editor_context.ui_container.addChild(
 			this.brush_preview_container
 		);
 
-		// create preview graphics
 		this.brush_preview_graphics = new Graphics();
 		this.brush_preview_container.addChild(this.brush_preview_graphics);
 
-		// set initial visibility
 		this.brush_preview_container.visible = false;
 	}
 
@@ -289,23 +258,19 @@ export class BrushCursor {
 	update_brush_preview(): void {
 		if (!this.brush_preview_graphics) return;
 
-		// clear previous graphics
 		this.brush_preview_graphics.clear();
 
-		// draw brush preview based on current settings
 		const preview_size = this.state.brush_size * this.scale;
 		const preview_color =
 			this.state.mode === "draw"
 				? tinycolor(this.state.color).setAlpha(this.state.opacity).toString()
 				: 0xffffff;
 
-		// draw circle with current brush settings
 		this.brush_preview_graphics.circle(0, 0, preview_size).fill({
 			color: preview_color,
 			alpha: this.state.mode === "draw" ? this.state.opacity : 0.3
 		});
 
-		// add outline
 		this.brush_preview_graphics.circle(0, 0, preview_size + 1).stroke({
 			width: 1,
 			color: 0x000000,
@@ -319,17 +284,14 @@ export class BrushCursor {
 	update_brush_preview_position(): void {
 		if (!this.brush_preview_container) return;
 
-		// get the center of the image in global coordinates
 		const image_container = this.image_editor_context.image_container;
 		const center_x = image_container.width / 2;
 		const center_y = image_container.height / 2;
 
 		const global_pos = image_container.toGlobal({ x: center_x, y: center_y });
 
-		// convert to ui coordinates
 		const ui_pos = this.image_editor_context.ui_container.toLocal(global_pos);
 
-		// update preview position
 		this.brush_preview_container.position.set(ui_pos.x, ui_pos.y);
 	}
 
@@ -364,10 +326,8 @@ export class BrushCursor {
 	 * Cleans up all cursor resources.
 	 */
 	cleanup(): void {
-		// Reset active state
 		this.is_brush_or_erase_active = false;
 
-		// clean up cursor
 		if (this.cursor_container) {
 			if (this.cursor_container.parent) {
 				this.cursor_container.parent.removeChild(this.cursor_container);
@@ -376,7 +336,6 @@ export class BrushCursor {
 			this.cursor_container = null;
 		}
 
-		// clean up preview
 		if (this.brush_preview_container) {
 			if (this.brush_preview_container.parent) {
 				this.brush_preview_container.parent.removeChild(
@@ -387,7 +346,6 @@ export class BrushCursor {
 			this.brush_preview_container = null;
 		}
 
-		// clear timeout
 		if (this.cursor_position_check_timeout !== null) {
 			window.clearTimeout(this.cursor_position_check_timeout);
 			this.cursor_position_check_timeout = null;