Image Editor (#574)

* started implementing hamunii's image editor, and added a hamunii theme

* fixed so active tab is main tab

* added some testing stuff for image ediotr

* re-implemented canvas drawing myself. just need to add layer stuff now

* moved everything to an image editor class and implement it so it actually works nicely now

* fixed a couple weird bugs and cleaned up the background image and sharpness stuff

* cleaned up a lot of stuff about the editor, added tools, buttons, made it mostly work in the current ui

* added inpainting support

* updated with more nice changes/updates to the inpainting and drawing editor

* made some more fixes and touchups to the image editor

* removed a bunch of semicolons

* remove old image inpainting system

* updated to work properly on mobile

* made a minor bugfix

* fixed img_size_box alignment

* Update index.html

Co-authored-by: cmdr2 <secondary.cmdr2@gmail.com>
Co-authored-by: cmdr2 <shashank.shekhar.global@gmail.com>

ui/media/js/image-editor.js

@@ -0,0 +1,492 @@
+var editorControlsLeft = document.getElementById("image-editor-controls-left")
+
+const IMAGE_EDITOR_MAX_SIZE = 800
+
+const IMAGE_EDITOR_BUTTONS = [
+	{
+		name: "Clear",
+		icon: "fa-solid fa-xmark",
+		handler: editor => {
+			editor.clear()
+		}
+	},
+	{
+		name: "Cancel",
+		icon: "fa-regular fa-circle-xmark",
+		handler: editor => {
+			editor.close()
+		}
+	},
+	{
+		name: "Save",
+		icon: "fa-solid fa-floppy-disk",
+		handler: editor => {
+			editor.saveImage()
+		}
+	}
+]
+
+const IMAGE_EDITOR_TOOLS = [
+	{
+		id: "draw",
+		name: "Draw",
+		icon: "fa-solid fa-pencil"
+	},
+	{
+		id: "erase",
+		name: "Erase",
+		icon: "fa-solid fa-eraser"
+	}
+]
+
+var IMAGE_EDITOR_SECTIONS = [
+	{
+		name: "tool",
+		title: "Tool",
+		default: "draw",
+		options: Array.from(IMAGE_EDITOR_TOOLS.map(t => t.id)),
+		initElement: (element, option) => {
+			var tool_info = IMAGE_EDITOR_TOOLS.find(t => t.id == option)
+			element.className = "image-editor-button button"
+			var sub_element = document.createElement("div")
+			var icon = document.createElement("i")
+			tool_info.icon.split(" ").forEach(c => icon.classList.add(c))
+			sub_element.appendChild(icon)
+			sub_element.append(tool_info.name)
+			element.appendChild(sub_element)
+		}
+	},
+	{
+		name: "color",
+		title: "Color",
+		default: "#f1c232",
+		options: [
+			"custom",
+			"#ea9999", "#e06666", "#cc0000", "#990000", "#660000",
+			"#f9cb9c", "#f6b26b", "#e69138", "#b45f06", "#783f04",
+			"#ffe599", "#ffd966", "#f1c232", "#bf9000", "#7f6000",
+			"#b6d7a8", "#93c47d", "#6aa84f", "#38761d", "#274e13",
+			"#a4c2f4", "#6d9eeb", "#3c78d8", "#1155cc", "#1c4587",
+			"#b4a7d6", "#8e7cc3", "#674ea7", "#351c75", "#20124d",
+			"#d5a6bd", "#c27ba0", "#a64d79", "#741b47", "#4c1130",
+			"#ffffff", "#c0c0c0", "#838383", "#525252", "#000000",
+		],
+		initElement: (element, option) => {
+			if (option == "custom") {
+				var input = document.createElement("input")
+				input.type = "color"
+				element.appendChild(input)
+				var span = document.createElement("span")
+				span.textContent = "Custom"
+				element.appendChild(span)
+			}
+			else {
+				element.style.background = option
+			}
+		},
+		getCustom: editor => {
+			var input = editor.popup.querySelector(".image_editor_color input")
+			return input.value
+		}
+	},
+	{
+		name: "brush_size",
+		title: "Brush Size",
+		default: 48,
+		options: [ 16, 24, 32, 48, 64 ],
+		initElement: (element, option) => {
+			element.parentElement.style.flex = option
+			element.style.width = option + "px"
+			element.style.height = option + "px"
+			element.style["border-radius"] = (option / 2).toFixed() + "px"
+		}
+	},
+	{
+		name: "opacity",
+		title: "Opacity",
+		default: 0,
+		options: [ 0, 0.25, 0.5, 0.75, 1 ],
+		initElement: (element, option) => {
+			element.style.background = `repeating-conic-gradient(rgba(0, 0, 0, ${option}) 0% 25%, rgba(255, 255, 255, ${option}) 0% 50%) 50% / 10px 10px`
+		}
+	},
+	{
+		name: "sharpness",
+		title: "Sharpness",
+		default: 0,
+		options: [ 0, 0.05, 0.1, 0.2, 0.3 ],
+		initElement: (element, option) => {
+			var size = 32
+			var blur_amount = parseInt(option * size)
+			var sub_element = document.createElement("div")
+			sub_element.style.background = `var(--background-color3)`
+			sub_element.style.filter = `blur(${blur_amount}px)`
+			sub_element.style.width = `${size - 4}px`
+			sub_element.style.height = `${size - 4}px`
+			sub_element.style['border-radius'] = `${size}px`
+			element.style.background = "none"
+			element.appendChild(sub_element)
+		}
+	}
+]
+
+class ImageEditor {
+	constructor(popup, inpainter = false) {
+		this.inpainter = inpainter
+		this.popup = popup
+		if (inpainter) {
+			this.popup.classList.add("inpainter")
+		}
+		this.drawing = false
+		this.dropper_active = false
+		this.container = popup.querySelector(".editor-controls-center > div")
+		this.cursor_icon = document.createElement("i")
+		this.layers = {}
+		var layer_names = [
+			"background",
+			"drawing",
+			"overlay"
+		]
+		layer_names.forEach(name => {
+			let canvas = document.createElement("canvas")
+			canvas.className = `editor-canvas-${name}`
+			this.container.appendChild(canvas)
+			this.layers[name] = {
+				name: name,
+				canvas: canvas,
+				ctx: canvas.getContext("2d")
+			}
+		})
+
+		this.setSize(512, 512)
+
+		this.cursor_icon.classList.add("cursor-icon")
+		this.container.appendChild(this.cursor_icon)
+
+		// add mouse handlers
+		this.container.addEventListener("mousedown", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseup", this.mouseHandler.bind(this))
+		this.container.addEventListener("mousemove", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseout", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseenter", this.mouseHandler.bind(this))
+
+		this.container.addEventListener("touchstart", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchmove", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchcancel", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchend", this.mouseHandler.bind(this))
+		// setup forwarding for keypresses so the eyedropper works accordingly
+		var mouseHandlerHelper = this.mouseHandler.bind(this)
+		this.container.addEventListener("mouseenter",function() {
+			document.addEventListener("keyup", mouseHandlerHelper)
+			document.addEventListener("keydown", mouseHandlerHelper)
+		})
+		this.container.addEventListener("mouseout",function() {
+			document.removeEventListener("keyup", mouseHandlerHelper)
+			document.removeEventListener("keydown", mouseHandlerHelper)
+		})
+
+		// initialize editor controls
+		this.options = {}
+		this.optionElements = {}
+		IMAGE_EDITOR_SECTIONS.forEach(section => {
+			section.id = `image_editor_${section.name}`
+			var sectionElement = document.createElement("div")
+			sectionElement.className = section.id
+	
+			var title = document.createElement("h4")
+			title.innerText = section.title
+			sectionElement.appendChild(title)
+	
+			var optionsContainer = document.createElement("div")
+			optionsContainer.classList.add("editor-options-container")
+	
+			this.optionElements[section.name] = []
+			section.options.forEach((option, index) => {
+				var optionHolder = document.createElement("div")
+				var optionElement = document.createElement("div")
+				optionHolder.appendChild(optionElement)
+				section.initElement(optionElement, option)
+				optionElement.addEventListener("click", target => this.selectOption(section.name, index))
+				optionsContainer.appendChild(optionHolder)
+				this.optionElements[section.name].push(optionElement)
+			})
+			this.selectOption(section.name, section.options.indexOf(section.default))
+	
+			sectionElement.appendChild(optionsContainer)
+	
+			this.popup.querySelector(".editor-controls-left").appendChild(sectionElement)
+		})
+
+		this.custom_color_input = this.popup.querySelector(`input[type="color"]`)
+		this.custom_color_input.addEventListener("change", () => {
+			this.custom_color_input.parentElement.style.background = this.custom_color_input.value
+			this.selectOption("color", 0)
+		})
+
+		if (this.inpainter) {
+			this.selectOption("color", IMAGE_EDITOR_SECTIONS.find(s => s.name == "color").options.indexOf("#ffffff"))
+		}
+
+		// initialize the right-side controls
+		var buttonContainer = document.createElement("div")
+		IMAGE_EDITOR_BUTTONS.forEach(button => {
+			var element = document.createElement("div")
+			var icon = document.createElement("i")
+			element.className = "image-editor-button button"
+			icon.className = button.icon
+			element.appendChild(icon)
+			element.append(button.name)
+			buttonContainer.appendChild(element)
+			element.addEventListener("click", event => button.handler(this))
+		})
+		this.popup.querySelector(".editor-controls-right").appendChild(buttonContainer)
+	}
+	setSize(width, height) {
+		if (width == this.width && height == this.height) {
+			return
+		}
+
+		var max_size = Math.min(parseInt(window.innerWidth * 0.9), width, 768)
+		if (width > height) {
+			var multiplier = max_size / width
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		else {
+			var multiplier = max_size / height
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		this.width = width
+		this.height = height
+	
+		this.container.style.width = width + "px"
+		this.container.style.height = height + "px"
+		
+		Object.values(this.layers).forEach(layer => {
+			layer.canvas.width = width
+			layer.canvas.height = height
+		})
+
+		if (this.inpainter) {
+			this.saveImage() // We've reset the size of the image so inpainting is different
+		}
+		this.setBrush()
+	}
+	setCursorIcon(icon_class = null) {
+		if (icon_class == null) {
+			var tool = this.getOptionValue("tool")
+			icon_class = IMAGE_EDITOR_TOOLS.find(t => t.id == tool).icon
+		}
+		this.cursor_icon.className = `cursor-icon ${icon_class}`
+	}
+	setImage(url, width, height) {
+		this.setSize(width, height)
+		this.layers.drawing.ctx.clearRect(0, 0, this.width, this.height)
+		this.layers.background.ctx.clearRect(0, 0, this.width, this.height)
+		if (url) {
+			var image = new Image()
+			image.onload = () => { 
+				this.layers.background.ctx.drawImage(image, 0, 0, this.width, this.height)
+			}
+			image.src = url
+		}
+		else {
+			this.layers.background.ctx.fillStyle = "#ffffff"
+			this.layers.background.ctx.beginPath()
+			this.layers.background.ctx.rect(0, 0, this.width, this.height)
+			this.layers.background.ctx.fill()
+		}
+	}
+	saveImage() {
+		if (!this.inpainter) {
+			// This is not an inpainter, so save the image as the new img2img input
+			this.layers.background.ctx.drawImage(this.layers.drawing.canvas, 0, 0, this.width, this.height)
+			var base64 = this.layers.background.canvas.toDataURL()
+			initImagePreview.src = base64 // this will trigger the rest of the app to use it
+		}
+		else {
+			// This is an inpainter, so make sure the toggle is set accordingly
+			var is_blank = !this.layers.drawing.ctx
+				.getImageData(0, 0, this.width, this.height).data
+				.some(channel => channel !== 0)
+			maskSetting.checked = !is_blank
+		}
+		this.close()
+	}
+	getImg() { // a drop-in replacement of the drawingboard version
+		return this.layers.drawing.canvas.toDataURL()
+	}
+	close() {
+		this.popup.classList.remove("active")
+	}
+	clear() {
+		this.ctx_current.clearRect(0, 0, this.width, this.height)
+	}
+	get eraser_active() {
+		return this.getOptionValue("tool") == "erase"
+	}
+	setBrush(layer = null) {
+		if (layer) {
+			layer.ctx.lineCap = "round"
+			layer.ctx.lineJoin = "round"
+			layer.ctx.lineWidth = this.getOptionValue("brush_size")
+			layer.ctx.fillStyle = this.getOptionValue("color")
+			layer.ctx.strokeStyle = this.getOptionValue("color")
+			var sharpness = parseInt(this.getOptionValue("sharpness") * this.getOptionValue("brush_size"))
+			layer.ctx.filter = sharpness == 0 ? `none` : `blur(${sharpness}px)`
+			layer.ctx.globalAlpha = (1 - this.getOptionValue("opacity"))
+			layer.ctx.globalCompositeOperation = this.eraser_active ? "destination-out" : "source-over"
+		}
+		else {
+			Object.values([ "drawing", "overlay" ]).map(name => this.layers[name]).forEach(l => {
+				this.setBrush(l)
+			})
+		}
+	}
+	get ctx_overlay() {
+		return this.layers.overlay.ctx
+	}
+	get ctx_current() { // the idea is this will help support having custom layers and editing each one
+		return this.layers.drawing.ctx
+	}
+	get canvas_current() {
+		return this.layers.drawing.canvas
+	}
+	mouseHandler(event) {
+		var bbox = this.layers.overlay.canvas.getBoundingClientRect()
+		var x = (event.clientX || 0) - bbox.left
+		var y = (event.clientY || 0) - bbox.top
+		var type = event.type;
+		var touchmap = {
+			touchstart: "mousedown",
+			touchmove: "mousemove",
+			touchend: "mouseup",
+			touchcancel: "mouseup"
+		}
+		if (type in touchmap) {
+			type = touchmap[type]
+			if (event.touches && event.touches[0]) {
+				var touch = event.touches[0]				
+				var x = (touch.clientX || 0) - bbox.left
+				var y = (touch.clientY || 0) - bbox.top
+			}
+		}
+	
+		// do drawing-related stuff
+		if (type == "mousedown" || (type == "mouseenter" && event.buttons == 1)) {
+			if (this.dropper_active) {
+				var img_rgb = this.layers.background.ctx.getImageData(x, y, 1, 1).data
+				var drw_rgb = this.ctx_current.getImageData(x, y, 1, 1).data
+				var drw_opacity = drw_rgb[3] / 255
+				var test = rgbToHex({ 
+					r: (drw_rgb[0] * drw_opacity) + (img_rgb[0] * (1 - drw_opacity)),
+					g: (drw_rgb[1] * drw_opacity) + (img_rgb[1] * (1 - drw_opacity)),
+					b: (drw_rgb[2] * drw_opacity) + (img_rgb[2] * (1 - drw_opacity)),
+				})
+				this.custom_color_input.value = test
+				this.custom_color_input.dispatchEvent(new Event("change"))
+			}
+			else {
+				this.drawing = true
+				this.ctx_overlay.beginPath()
+				this.ctx_overlay.moveTo(x, y)
+				this.ctx_current.beginPath()
+				this.ctx_current.moveTo(x, y)
+			}
+		}
+		if (type == "mouseup" || type == "mousemove") {
+			if (this.drawing) {
+				if (x > 0 && y > 0) {
+					this.ctx_current.lineTo(x, y)
+					this.ctx_overlay.lineTo(x, y)
+
+					// This isnt super efficient, but its the only way ive found to have clean updating for the drawing
+					this.ctx_overlay.clearRect(0, 0, this.width, this.height)
+					if (this.eraser_active) {
+						this.ctx_overlay.globalCompositeOperation = "source-over"
+						this.ctx_overlay.globalAlpha = 1
+						this.ctx_overlay.filter = "none"
+						this.ctx_overlay.drawImage(this.canvas_current, 0, 0)
+						this.setBrush(this.layers.overlay)
+						this.canvas_current.style.opacity = 0
+					}
+
+					this.ctx_overlay.stroke()
+				}
+			}
+		}
+		if (type == "mouseup" || type == "mouseout") {
+			if (this.drawing) {
+				this.drawing = false
+				this.ctx_current.stroke()
+				this.ctx_overlay.clearRect(0, 0, this.width, this.height)
+
+				if (this.eraser_active) {
+					this.canvas_current.style.opacity = ""
+				}
+			}
+		}
+
+		// cursor-icon stuff
+		if (type == "mousemove") {
+			this.cursor_icon.style.left = `${x + 10}px`
+			this.cursor_icon.style.top = `${y + 20}px`
+		}
+		if (type == "mouseenter") {
+			this.cursor_icon.style.opacity = 1
+		}
+		if (type == "mouseout") {
+			this.cursor_icon.style.opacity = 0
+		}
+		if ([ "mouseenter", "mousemove", "keydown", "keyup" ].includes(type)) {
+			if (this.dropper_active && !event.ctrlKey) {
+				this.dropper_active = false
+				this.setCursorIcon()
+			}
+			else if (!this.dropper_active && event.ctrlKey) {
+				this.dropper_active = true
+				this.setCursorIcon("fa-solid fa-eye-dropper")
+			}
+		}
+	}
+	getOptionValue(section_name) {
+		var section = IMAGE_EDITOR_SECTIONS.find(s => s.name == section_name)
+		return this.options && section_name in this.options ? this.options[section_name] : section.default
+	}
+	selectOption(section_name, option_index) {
+		var section = IMAGE_EDITOR_SECTIONS.find(s => s.name == section_name)
+		var value = section.options[option_index]
+		this.options[section_name] = value == "custom" ? section.getCustom(this) : value
+		
+		this.optionElements[section_name].forEach(element => element.classList.remove("active"))
+		this.optionElements[section_name][option_index].classList.add("active")
+	
+		// change the editor
+		this.setBrush()
+		if (section.name == "tool") {
+			this.setCursorIcon()
+		}
+	}
+}
+
+function rgbToHex(rgb) {
+	function componentToHex(c) {
+		var hex = parseInt(c).toString(16)
+		return hex.length == 1 ? "0" + hex : hex
+	}
+	return "#" + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b)
+}
+
+const imageEditor = new ImageEditor(document.getElementById("image-editor"))
+const imageInpainter = new ImageEditor(document.getElementById("image-inpainter"), true)
+
+imageEditor.setImage(null, 512, 512)
+imageInpainter.setImage(null, 512, 512)
+
+document.getElementById("init_image_button_draw").addEventListener("click", () => {
+	document.getElementById("image-editor").classList.toggle("active")
+})
+document.getElementById("init_image_button_inpaint").addEventListener("click", () => {
+	document.getElementById("image-inpainter").classList.toggle("active")
+})