Merge branch 'beta' of github.com:cmdr2/stable-diffusion-ui into beta

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;

ui/media/main.js

@@ -13,6 +13,7 @@ const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
 const OUTPUT_FORMAT_KEY = "outputFormat"
 const HEALTH_PING_INTERVAL = 5 // seconds
 const MAX_INIT_IMAGE_DIMENSION = 768
+const INPAINTING_EDITOR_SIZE = 450
 
 const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
 
@@ -267,6 +268,32 @@ 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.style.width = widthValue + 'px'
+    inpaintingEditorContainer.style.height = heightValue + 'px'
+    inpaintingEditor.opts.enlargeYourContainer = true
+
+    inpaintingEditor.opts.size = inpaintingEditor.ctx.lineWidth
+    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')
@@ -915,6 +942,8 @@ outputFormatField.addEventListener('change', handleStringSettingChange(OUTPUT_FO
 outputFormatField.value = getOutputFormat()
 
 diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
+widthField.addEventListener('change', resizeInpaintingEditor)
+heightField.addEventListener('change', resizeInpaintingEditor)
 
 saveToDiskField.addEventListener('click', function(e) {
     diskPathField.disabled = !this.checked