Reworked the disabling of functions, refactored part of the code (9b687f01) · Commits · github_fork / Stable Diffusion Webui

extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js

+113 −128

Original line number	Diff line number	Diff line
		@@ -56,23 +56,16 @@ onUiLoaded(async() => {
		}
		}


		// Check if hotkey is valid
		function isValidHotkey(value) {
		const specialKeys = ["Ctrl", "Alt", "Shift", "Disable"];
		return (
		(typeof value === "string" &&
		value.length === 1 &&
		/[a-z]/i.test(value)) \|\|
		(typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)) \|\|
		specialKeys.includes(value)
		);
		}

		// Create hotkeyConfig from opts
		function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
		const result = {};
		const usedSingleKeys = new Set();
		const usedSpecialKeys = new Set();

		// Normalize hotkey
		function normalizeHotkey(hotkey) {
		return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
		@@ -83,89 +76,67 @@ onUiLoaded(async() => {
		return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey;
		}

		// Check if canvas_hotkey_adjust and canvas_hotkey_zoom are the same
		if (
		hotkeysConfigOpts.canvas_hotkey_adjust !== "Disable" &&
		hotkeysConfigOpts.canvas_hotkey_zoom !== "Disable" &&
		normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_adjust) ===
		normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_zoom)
		) {
		console.error(
		`Hotkey: ${formatHotkeyForDisplay(
		hotkeysConfigOpts.canvas_hotkey_zoom
		)} for canvas_hotkey_zoom conflicts with canvas_hotkey_adjust. The default hotkey is used: ${formatHotkeyForDisplay(
		defaultHotkeysConfig.canvas_hotkey_zoom
		)}`
		);
		hotkeysConfigOpts.canvas_hotkey_zoom =
		defaultHotkeysConfig.canvas_hotkey_zoom;
		}
		// Create hotkey configuration with the provided options
		function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
		const result = {}; // Resulting hotkey configuration
		const usedKeys = new Set(); // Set of used hotkeys

		// Iterate through defaultHotkeysConfig keys
		for (const key in defaultHotkeysConfig) {
		if (typeof hotkeysConfigOpts[key] === "boolean") {
		result[key] = hotkeysConfigOpts[key];
		continue;
		}
		if (hotkeysConfigOpts[key] === "Disable") {
		result[key] = hotkeysConfigOpts[key];
		continue;
		}
		if (
		hotkeysConfigOpts[key] &&
		isValidHotkey(hotkeysConfigOpts[key])
		) {
		const hotkey = normalizeHotkey(hotkeysConfigOpts[key]);
		const isSpecialKey = hotkey.length > 1;
		const userValue = hotkeysConfigOpts[key]; // User-provided hotkey value
		const defaultValue = defaultHotkeysConfig[key]; // Default hotkey value

		// Apply appropriate value for undefined, boolean, or object userValue
		if (
		(!isSpecialKey && !usedSingleKeys.has(hotkey)) \|\|
		(isSpecialKey && !usedSpecialKeys.has(hotkey))
		userValue === undefined \|\|
		typeof userValue === "boolean" \|\|
		typeof userValue === "object" \|\|
		userValue === "disable"
		) {
		result[key] = hotkey;

		if (isSpecialKey) {
		usedSpecialKeys.add(hotkey);
		} else {
		usedSingleKeys.add(hotkey);
		}
		result[key] = userValue === undefined ? defaultValue : userValue;
		} else if (isValidHotkey(userValue)) {
		const normalizedUserValue = normalizeHotkey(userValue);

		// Check for conflicting hotkeys
		if (!usedKeys.has(normalizedUserValue)) {
		usedKeys.add(normalizedUserValue);
		result[key] = normalizedUserValue;
		} else {
		console.error(
		`Hotkey: ${formatHotkeyForDisplay(
		hotkeysConfigOpts[key]
		userValue
		)} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
		defaultHotkeysConfig[key]
		defaultValue
		)}`
		);
		result[key] = defaultHotkeysConfig[key];

		if (isSpecialKey) {
		usedSpecialKeys.add(defaultHotkeysConfig[key]);
		} else {
		usedSingleKeys.add(defaultHotkeysConfig[key]);
		}
		result[key] = defaultValue;
		}
		} else {
		console.error(
		`Hotkey: ${formatHotkeyForDisplay(
		hotkeysConfigOpts[key]
		userValue
		)} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
		defaultHotkeysConfig[key]
		defaultValue
		)}`
		);
		result[key] = defaultHotkeysConfig[key];

		const isSpecialKey = defaultHotkeysConfig[key].length > 1;
		if (isSpecialKey) {
		usedSpecialKeys.add(defaultHotkeysConfig[key]);
		} else {
		usedSingleKeys.add(defaultHotkeysConfig[key]);
		}
		result[key] = defaultValue;
		}
		}

		return result;
		}

		function disableFunctions(config, disabledFunctions) {
		disabledFunctions.forEach((funcName) => {
		if (functionMap.hasOwnProperty(funcName)) {
		const key = functionMap[funcName];
		config[key] = "disable";
		}
		});

		return config;
		}

		/**
		* The restoreImgRedMask function displays a red mask around an image to indicate the aspect ratio.
		* If the image display property is set to 'none', the mask breaks. To fix this, the function
		@@ -219,14 +190,31 @@ onUiLoaded(async() => {
		canvas_hotkey_fullscreen: "KeyS",
		canvas_hotkey_move: "KeyF",
		canvas_hotkey_overlap: "KeyO",
		canvas_disabled_functions : [],
		canvas_show_tooltip: true
		};
		// swap the actions for ctr + wheel and shift + wheel
		const hotkeysConfig = createHotkeyConfig(

		const functionMap = {
		"Zoom": "canvas_hotkey_zoom",
		"Adjust brush size": "canvas_hotkey_adjust",
		"Moving canvas": "canvas_hotkey_move",
		"Fullscreen": "canvas_hotkey_fullscreen",
		"Reset Zoom": "canvas_hotkey_reset",
		"Overlap": "canvas_hotkey_overlap",
		};

		// Loading the configuration from opts
		const preHotkeysConfig = createHotkeyConfig(
		defaultHotkeysConfig,
		hotkeysConfigOpts
		);

		// Disable functions that are not needed by the user
		const hotkeysConfig = disableFunctions(
		preHotkeysConfig,
		preHotkeysConfig.canvas_disabled_functions
		);

		let isMoving = false;
		let mouseX, mouseY;
		let activeElement;
		@@ -273,45 +261,42 @@ onUiLoaded(async() => {
		const toolTipElemnt =
		targetElement.querySelector(".image-container");
		const tooltip = document.createElement("div");
		tooltip.className = "tooltip";
		tooltip.className = "canvas-tooltip";

		// Creating an item of information
		const info = document.createElement("i");
		info.className = "tooltip-info";
		info.className = "canvas-tooltip-info";
		info.textContent = "";

		// Create a container for the contents of the tooltip
		const tooltipContent = document.createElement("div");
		tooltipContent.className = "tooltip-content";

		// Add info about hotkeys
		const zoomKey = hotkeysConfig.canvas_hotkey_zoom;
		const adjustKey = hotkeysConfig.canvas_hotkey_adjust;

		const hotkeys = [
		{key: `${zoomKey} + wheel`, action: "Zoom canvas"},
		{key: `${adjustKey} + wheel`, action: "Adjust brush size"},
		{
		key: hotkeysConfig.canvas_hotkey_reset.charAt(
		hotkeysConfig.canvas_hotkey_reset.length - 1
		),
		action: "Reset zoom"
		},
		{
		key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(
		hotkeysConfig.canvas_hotkey_fullscreen.length - 1
		),
		action: "Fullscreen mode"
		},
		{
		key: hotkeysConfig.canvas_hotkey_move.charAt(
		hotkeysConfig.canvas_hotkey_move.length - 1
		),
		action: "Move canvas"
		}
		tooltipContent.className = "canvas-tooltip-content";

		// Define an array with hotkey information and their actions
		const hotkeysInfo = [
		{ configKey: "canvas_hotkey_zoom", action: "Zoom canvas", keySuffix: " + wheel" },
		{ configKey: "canvas_hotkey_adjust", action: "Adjust brush size", keySuffix: " + wheel" },
		{ configKey: "canvas_hotkey_reset", action: "Reset zoom" },
		{ configKey: "canvas_hotkey_fullscreen", action: "Fullscreen mode" },
		{ configKey: "canvas_hotkey_move", action: "Move canvas" },
		{ configKey: "canvas_hotkey_overlap", action: "Overlap" },
		];

		// Create hotkeys array with disabled property based on the config values
		const hotkeys = hotkeysInfo.map((info) => {
		const configValue = hotkeysConfig[info.configKey];
		const key = info.keySuffix
		? `${configValue}${info.keySuffix}`
		: configValue.charAt(configValue.length - 1);
		return {
		key,
		action: info.action,
		disabled: configValue === "disable",
		};
		});

		for (const hotkey of hotkeys) {
		if (hotkey.key === "Disable + wheel") {
		if (hotkey.disabled) {
		continue;
		}

extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py

+3 −2

Original line number	Diff line number	Diff line
		@@ -2,11 +2,12 @@ import gradio as gr
		from modules import shared

		shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas Hotkeys"), {
		"canvas_hotkey_zoom": shared.OptionInfo("Shift", "Zoom canvas", gr.Radio, {"choices": ["Shift","Ctrl", "Alt","Disable"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
		"canvas_hotkey_adjust": shared.OptionInfo("Ctrl", "Adjust brush size", gr.Radio, {"choices": ["Shift","Ctrl", "Alt","Disable"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
		"canvas_hotkey_zoom": shared.OptionInfo("Alt", "Zoom canvas", gr.Radio, {"choices": ["Shift","Ctrl", "Alt"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
		"canvas_hotkey_adjust": shared.OptionInfo("Ctrl", "Adjust brush size", gr.Radio, {"choices": ["Shift","Ctrl", "Alt"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
		"canvas_hotkey_move": shared.OptionInfo("F", "Moving the canvas").info("To work correctly in firefox, turn off 'Automatically search the page text when typing' in the browser settings"),
		"canvas_hotkey_fullscreen": shared.OptionInfo("S", "Fullscreen Mode, maximizes the picture so that it fits into the screen and stretches it to its full width "),
		"canvas_hotkey_reset": shared.OptionInfo("R", "Reset zoom and canvas positon"),
		"canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap").info("Technical button, neededs for testing"),
		"canvas_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"),
		"canvas_disabled_functions": shared.OptionInfo(["Overlap"], "Disable function that you don't use", gr.CheckboxGroup, {"choices": ["Zoom","Adjust brush size", "Moving canvas","Fullscreen","Reset Zoom","Overlap"]}),
		}))

extensions-builtin/canvas-zoom-and-pan/style.css

+5 −5

Original line number	Diff line number	Diff line
		.tooltip-info {
		.canvas-tooltip-info {
		position: absolute;
		top: 10px;
		left: 10px;
		@@ -15,7 +15,7 @@
		z-index: 100;
		}

		.tooltip-info::after {
		.canvas-tooltip-info::after {
		content: '';
		display: block;
		width: 2px;
		@@ -24,7 +24,7 @@
		margin-top: 2px;
		}

		.tooltip-info::before {
		.canvas-tooltip-info::before {
		content: '';
		display: block;
		width: 2px;
		@@ -32,7 +32,7 @@
		background-color: white;
		}

		.tooltip-content {
		.canvas-tooltip-content {
		display: none;
		background-color: #f9f9f9;
		color: #333;
		@@ -50,7 +50,7 @@
		z-index: 100;
		}

		.tooltip:hover .tooltip-content {
		.canvas-tooltip:hover .canvas-tooltip-content {
		display: block;
		animation: fadeIn 0.5s;
		opacity: 1;

Admin message