Implementation:AUTOMATIC1111 Stable diffusion webui Canvas Zoom And Pan

Knowledge Sources	AUTOMATIC1111_Stable_diffusion_webui
Domains	UI, Canvas, Image Editing
Last Updated	2025-05-15 00:00 GMT

Overview

Provides comprehensive zoom, pan, and brush size adjustment functionality for the img2img canvas elements (Inpaint, Inpaint Sketch, and Sketch tabs) with configurable hotkeys and extension integration support.

Description

This JavaScript module initializes on UI load and applies zoom-and-pan behavior to each img2img canvas element. It manages a configurable hotkey system that merges user settings from window.opts with sensible defaults, validates hotkey values, and detects conflicts. The core functionality includes: mouse wheel zoom via CSS transform: scale/translate, keyboard-driven reset/fullscreen/overlap/brush size hotkeys, mouse drag panning, and MutationObservers for auto-expanding oversized images. The module creates tooltip overlays on each canvas showing the active hotkeys. Key internal functions include applyZoomAndPan (applies all behaviors to a target element), updateZoom (calculates and applies transform), fitToElement (fits canvas to parent container), resetZoom (restores default state), adjustBrushSize (wheel-based brush radius adjustment), and changeZoomLevel (delta-based zoom). The module also exposes window.applyZoomAndPan and window.applyZoomAndPanIntegration globally so third-party extensions can reuse the functionality on their own canvas elements.

Usage

This extension is loaded automatically as a built-in extension. Users interact with it through configurable hotkeys in the Settings panel under "Canvas Zoom". Extension developers can call window.applyZoomAndPanIntegration(parentElement, integratedElement) to add zoom-and-pan to custom canvas elements.

Code Reference

Source Location

• Repository: AUTOMATIC1111_Stable_diffusion_webui
• File: extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
• Lines: 1-995

Signature

// Top-level async IIFE invoked via onUiLoaded
onUiLoaded(async() => { ... });

// Key internal functions
function getActiveTab(elements, all = false)
function getTabId(elements)
function waitForOpts()
function isModifierKey(event, key)
function isValidHotkey(value)
function normalizeHotkey(hotkey)
function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts)
function disableFunctions(config, disabledFunctions)
function restoreImgRedMask(elements)
function applyZoomAndPan(elemId, isExtension = true)

// Global API for extensions
window.applyZoomAndPan = applyZoomAndPan;
window.applyZoomAndPanIntegration = function(parentElement, integratedElement) { ... };

Import

// Loaded automatically as a built-in extension JavaScript file.
// No explicit import needed. The module is loaded by the WebUI
// extension system and executes via onUiLoaded callback.

I/O Contract

Inputs

Name	Type	Required	Description
canvas_hotkey_zoom	string	No	Modifier key for zoom (default: "Alt")
canvas_hotkey_adjust	string	No	Modifier key for brush size adjustment (default: "Ctrl")
canvas_hotkey_reset	string	No	Hotkey to reset zoom (default: "KeyR")
canvas_hotkey_fullscreen	string	No	Hotkey for fullscreen mode (default: "KeyS")
canvas_hotkey_move	string	No	Hotkey to enable canvas panning (default: "KeyF")
canvas_hotkey_overlap	string	No	Hotkey to toggle overlap z-index (default: "KeyO")
canvas_hotkey_shrink_brush	string	No	Hotkey to shrink brush (default: "KeyQ")
canvas_hotkey_grow_brush	string	No	Hotkey to grow brush (default: "KeyW")
canvas_disabled_functions	Array	No	List of function names to disable (default: [])
canvas_show_tooltip	boolean	No	Whether to show hotkey tooltips on canvas (default: true)
canvas_auto_expand	boolean	No	Whether to auto-expand oversized images (default: true)

Outputs

Name	Type	Description
window.applyZoomAndPan	function	Global function to apply zoom/pan to a canvas element by ID
window.applyZoomAndPanIntegration	function	Global function for extensions to integrate zoom/pan on custom elements

Usage Examples

// For extension developers: apply zoom and pan to a custom canvas
// parentElement is the container, integratedElement is the canvas target
window.applyZoomAndPanIntegration(parentElement, integratedElement);

// Configure hotkeys via WebUI settings (Settings > Canvas Zoom):
// canvas_hotkey_zoom: "Alt" (hold Alt + mouse wheel to zoom)
// canvas_hotkey_move: "KeyF" (press F to toggle pan mode)
// canvas_hotkey_reset: "KeyR" (press R to reset zoom)

// The module automatically attaches to these canvas elements:
// #img2maskimg (Inpaint)
// #inpaint_sketch (Inpaint Sketch)
// #img2img_sketch (Sketch)

Related Pages

• Principle:AUTOMATIC1111_Stable_diffusion_webui_Canvas_UI_Interaction