From 11962facde596d8702c61bce5ccd06cc89a6f2d2 Mon Sep 17 00:00:00 2001 From: Marc-Andre Ferland Date: Sat, 8 Oct 2022 05:53:44 -0400 Subject: [PATCH 1/4] resize 'inpaintingEditor' on change from 'widthField' and 'heightField' --- ui/media/main.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/ui/media/main.js b/ui/media/main.js index 0f2c7344..1e5bb7a2 100644 --- a/ui/media/main.js +++ b/ui/media/main.js @@ -12,6 +12,7 @@ const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage" const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress" const HEALTH_PING_INTERVAL = 5 // seconds const MAX_INIT_IMAGE_DIMENSION = 768 +const INPAINTING_EDITOR_SIZE = 400 const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64') @@ -262,6 +263,31 @@ async function healthCheck() { setStatus('server', 'offline', 'error') } } +function resizeInpaintingEditor() { + let widthValue = parseInt(widthField.value) + let heightValue = parseInt(heightField.value) + if (widthValue === heightValue) { + widthValue = INPAINTING_EDITOR_SIZE + heightValue = INPAINTING_EDITOR_SIZE + } else if (widthValue > heightValue) { + heightValue = (heightValue / widthValue) * INPAINTING_EDITOR_SIZE + widthValue = INPAINTING_EDITOR_SIZE + } else { + widthValue = (widthValue / heightValue) * INPAINTING_EDITOR_SIZE + heightValue = INPAINTING_EDITOR_SIZE + } + inpaintingEditorContainer.setAttribute("style", `width:${widthValue}px;height:${heightValue}px`) + inpaintingEditorContainer.style.width = widthValue + 'px' + inpaintingEditorContainer.style.height = heightValue + 'px' + inpaintingEditor.opts.enlargeYourContainer = true + + inpaintingEditor.resize() + + inpaintingEditor.ctx.lineCap = "round"; + inpaintingEditor.ctx.lineJoin = "round"; + inpaintingEditor.ctx.lineWidth = inpaintingEditor.opts.size + inpaintingEditor.setColor(inpaintingEditor.opts.color) +} function showImages(req, res, outputContainer, livePreview) { let imageItemElements = outputContainer.querySelectorAll('.imgItem') @@ -843,6 +869,8 @@ streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREA streamImageProgressField.checked = isStreamImageProgressEnabled() diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY)) +widthField.addEventListener('change', resizeInpaintingEditor) +heightField.addEventListener('change', resizeInpaintingEditor) saveToDiskField.addEventListener('click', function(e) { diskPathField.disabled = !this.checked From 80826eb500a4f3be387cc611379c4dab97b7e886 Mon Sep 17 00:00:00 2001 From: Marc-Andre Ferland Date: Sat, 8 Oct 2022 05:54:53 -0400 Subject: [PATCH 2/4] Add min-width to .drawing-board-controls to keep the in-painting controls on one line. --- ui/media/main.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/media/main.css b/ui/media/main.css index 8d7401e9..1fc21e68 100644 --- a/ui/media/main.css +++ b/ui/media/main.css @@ -261,6 +261,9 @@ img { .drawing-board-canvas-wrapper { background-size: 100% 100%; } +.drawing-board-controls { + min-width: 273px; +} .drawing-board-control > button { background-color: #eee; border-radius: 3pt; From 66c7b3fcb20f65332c30661e28849637a3c82ed6 Mon Sep 17 00:00:00 2001 From: cmdr2 Date: Sat, 8 Oct 2022 16:47:15 +0530 Subject: [PATCH 3/4] Don't use setAttribute to overwrite the style --- ui/media/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/media/main.js b/ui/media/main.js index 9a564413..482f0670 100644 --- a/ui/media/main.js +++ b/ui/media/main.js @@ -276,15 +276,15 @@ function resizeInpaintingEditor() { widthValue = (widthValue / heightValue) * INPAINTING_EDITOR_SIZE heightValue = INPAINTING_EDITOR_SIZE } - inpaintingEditorContainer.setAttribute("style", `width:${widthValue}px;height:${heightValue}px`) + inpaintingEditorContainer.style.width = widthValue + 'px' inpaintingEditorContainer.style.height = heightValue + 'px' inpaintingEditor.opts.enlargeYourContainer = true inpaintingEditor.resize() - inpaintingEditor.ctx.lineCap = "round"; - inpaintingEditor.ctx.lineJoin = "round"; + inpaintingEditor.ctx.lineCap = "round" + inpaintingEditor.ctx.lineJoin = "round" inpaintingEditor.ctx.lineWidth = inpaintingEditor.opts.size inpaintingEditor.setColor(inpaintingEditor.opts.color) } From 5f24e4d705a7c592b867a2685d7a56a1d57d4219 Mon Sep 17 00:00:00 2001 From: cmdr2 Date: Sat, 8 Oct 2022 16:53:47 +0530 Subject: [PATCH 4/4] Increased the inpainting editor size; Fix a bug with the brush size not resetting --- ui/media/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/media/main.js b/ui/media/main.js index 482f0670..7db632c8 100644 --- a/ui/media/main.js +++ b/ui/media/main.js @@ -12,7 +12,7 @@ const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage" const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress" const HEALTH_PING_INTERVAL = 5 // seconds const MAX_INIT_IMAGE_DIMENSION = 768 -const INPAINTING_EDITOR_SIZE = 400 +const INPAINTING_EDITOR_SIZE = 450 const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64') @@ -281,6 +281,7 @@ function resizeInpaintingEditor() { inpaintingEditorContainer.style.height = heightValue + 'px' inpaintingEditor.opts.enlargeYourContainer = true + inpaintingEditor.opts.size = inpaintingEditor.ctx.lineWidth inpaintingEditor.resize() inpaintingEditor.ctx.lineCap = "round"