From b5a1a0bd6514a6d97bb20d21a08c5bd9adadc9b8 Mon Sep 17 00:00:00 2001 From: U1coo Date: Tue, 16 May 2023 10:21:33 +0800 Subject: [PATCH 1/4] Update toolbar layout --- css/toolbar.css | 8 ++++++++ index.html | 15 +++++++++------ js/toolbar.js | 31 ++++++++++++++++++------------- 3 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 css/toolbar.css diff --git a/css/toolbar.css b/css/toolbar.css new file mode 100644 index 0000000..a438172 --- /dev/null +++ b/css/toolbar.css @@ -0,0 +1,8 @@ +#outer_container { + display: flex; + padding: 0 40px; +} + +#toolbar { + width: 220px; +} diff --git a/index.html b/index.html index 3febf78..a5f8520 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,9 @@ - + + + @@ -23,6 +25,7 @@ position: absolute; top: 0; left: 0; + transform: translate(-50%, -50%); } .control { display: none; @@ -180,7 +183,7 @@ canvas.draw_buffer() canvas.draw_selection_box() base_lst[0]=canvas - + async def export_func(event): base=base_lst[0] arr=base.export() @@ -254,7 +257,7 @@ if state is not None: base.load(state) update_undo_redo(*history.check()) - + async def history_setup_func(event): base=base_lst[0] history.undo_lst.clear() @@ -306,7 +309,7 @@ async def setup_shortcut_func(event): setup_shortcut(event.data[1]) - + document.querySelector("#export").addEventListener("click",create_proxy(export_func)) document.querySelector("#undo").addEventListener("click",create_proxy(undo_func)) @@ -323,7 +326,7 @@ async def reset_func(event): base=base_lst[0] base.reset() - + async def load_func(event): base=base_lst[0] base.load(event.data[1]) @@ -468,7 +471,7 @@ await setup_shortcut_func(event) elif event.data[0]=="resize": await resize_func(event) - + window.addEventListener("message",create_proxy(message_func)) import asyncio diff --git a/js/toolbar.js b/js/toolbar.js index 3be4e13..394cdf2 100644 --- a/js/toolbar.js +++ b/js/toolbar.js @@ -120,18 +120,21 @@ var toolbar=new w2toolbar({ { type: "button", id: "load", tooltip: "Load Canvas", icon: "fa-solid fa-file-import" }, { type: "button", id: "save", tooltip: "Save Canvas", icon: "fa-solid fa-file-export" }, { type: "button", id: "export", tooltip: "Export Image", icon: "fa-solid fa-floppy-disk" }, - { type: "break" }, + { type: "new-line"}, { type: "button", id: "upload", text: "Upload Image", icon: "fa-solid fa-upload" }, { type: "break" }, { type: "radio", id: "selection", group: "1", tooltip: "Selection", icon: "fa-solid fa-arrows-up-down-left-right", checked: true }, + { type: "new-line"}, { type: "radio", id: "canvas", group: "1", tooltip: "Canvas", icon: "fa-solid fa-image" }, { type: "radio", id: "eraser", group: "1", tooltip: "Eraser", icon: "fa-solid fa-eraser" }, { type: "break" }, { type: "button", id: "outpaint", text: "Outpaint", tooltip: "Run Outpainting", icon: "fa-solid fa-brush" }, + { type: "new-line"}, { type: "button", id: "interrogate", text: "Interrogate", tooltip: "Get a prompt with Clip Interrogator ", icon: "fa-solid fa-magnifying-glass" }, { type: "break" }, { type: "button", id: "accept", text: "Accept", tooltip: "Accept current result", icon: "fa-solid fa-check", hidden: true, disabled:true,}, { type: "button", id: "cancel", text: "Cancel", tooltip: "Cancel current outpainting/error", icon: "fa-solid fa-ban", hidden: true}, + { type: "break" }, { type: "button", id: "retry", text: "Retry", tooltip: "Retry", icon: "fa-solid fa-rotate", hidden: true, disabled:true,}, { type: "button", id: "prev", tooltip: "Prev Result", icon: "fa-solid fa-caret-left", hidden: true, disabled:true,}, { type: "html", id: "current", hidden: true, disabled:true, @@ -148,11 +151,11 @@ var toolbar=new w2toolbar({ { type: "button", id: "next", tooltip: "Next Result", icon: "fa-solid fa-caret-right", hidden: true,disabled:true,}, { type: "button", id: "add_image", text: "Add Image", icon: "fa-solid fa-file-circle-plus", hidden: true,disabled:true,}, { type: "button", id: "delete_image", text: "Delete Image", icon: "fa-solid fa-trash-can", hidden: true,disabled:true,}, + // { type: "button", id: "resize_eraser", tooltip: "Resize Eraser", icon: "fa-solid fa-sliders" }, + { type: "new-line"}, + { type: "button", id: "resize_selection", text: "Resize Selection", tooltip: "Resize Selection", icon: "fa-solid fa-expand" }, { type: "button", id: "confirm", text: "Confirm", icon: "fa-solid fa-check", hidden: true,disabled:true,}, { type: "button", id: "cancel_overlay", text: "Cancel", icon: "fa-solid fa-ban", hidden: true,disabled:true,}, - { type: "break" }, - { type: "spacer" }, - { type: "break" }, { type: "button", id: "eraser_size_btn", tooltip: "Eraser Size", text:"Size", icon: "fa-solid fa-eraser", hidden: true, count: 32}, { type: "html", id: "eraser_size", hidden: true, async onRefresh(event) { @@ -173,9 +176,7 @@ var toolbar=new w2toolbar({ query(this.box).find("#tb_toolbar_item_eraser_size").append(fragment) } }, - // { type: "button", id: "resize_eraser", tooltip: "Resize Eraser", icon: "fa-solid fa-sliders" }, - { type: "button", id: "resize_selection", text: "Resize Selection", tooltip: "Resize Selection", icon: "fa-solid fa-expand" }, - { type: "break" }, + { type: "new-line"}, { type: "html", id: "scale", async onRefresh(event) { await event.complete @@ -193,17 +194,20 @@ var toolbar=new w2toolbar({ { type: "button", id: "help", tooltip: "Help", icon: "fa-solid fa-circle-info" }, { type: "new-line"}, { type: "button", id: "setting", text: "Canvas Setting", tooltip: "Resize Canvas Here", icon: "fa-solid fa-sliders" }, - { type: "break" }, + { type: "new-line"}, check_button("enable_history","Enable History:",false, "Enable Canvas History"), { type: "button", id: "undo", tooltip: "Undo last erasing/last outpainting", icon: "fa-solid fa-rotate-left", disabled: true }, { type: "button", id: "redo", tooltip: "Redo", icon: "fa-solid fa-rotate-right", disabled: true }, - { type: "break" }, + { type: "new-line"}, check_button("enable_img2img","Enable Img2Img",false), + { type: "new-line"}, // check_button("use_correction","Photometric Correction",false), check_button("resize_check","Resize Small Input",true), + { type: "new-line"}, check_button("enable_safety","Enable Safety Checker",true), + { type: "new-line"}, check_button("square_selection","Square Selection Only",false), - {type: "break"}, + { type: "new-line"}, check_button("use_seed","Use Seed:",false), { type: "html", id: "seed_val", async onRefresh(event) { @@ -218,6 +222,7 @@ var toolbar=new w2toolbar({ query(this.box).find("#tb_toolbar_item_seed_val").append(fragment) } }, + { type: "new-line"}, { type: "button", id: "random_seed", tooltip: "Set a random seed", icon: "fa-solid fa-dice" }, ], onClick(event) { @@ -503,7 +508,7 @@ function onObjectMoved(e) { let object = e.target; if(object.isType("rect")) - { + { let l=Math.max(Math.min(object.left,window.overlay.width-object.width-object.strokeWidth),0); let t=Math.max(Math.min(object.top,window.overlay.height-object.height-object.strokeWidth),0); object.set({left:l,top:t}); @@ -546,7 +551,7 @@ window.adjust_selection=function(x,y,width,height) left: x, top: y, fill: "rgba(0,0,0,0)", - strokeWidth: 3, + strokeWidth: 3, stroke: "rgba(0,0,0,0.7)", cornerColor: "red", cornerStrokeColor: "red", @@ -656,4 +661,4 @@ window.update_undo_redo=function(s0,s1) } window.undo_redo_state.undo=s0; window.undo_redo_state.redo=s1; -} \ No newline at end of file +} From 247647410692eece17a68199007277a0531f6a4e Mon Sep 17 00:00:00 2001 From: U1coo Date: Tue, 16 May 2023 20:03:13 +0800 Subject: [PATCH 2/4] Update toolbar layout --- css/toolbar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/toolbar.css b/css/toolbar.css index a438172..574c010 100644 --- a/css/toolbar.css +++ b/css/toolbar.css @@ -1,6 +1,6 @@ #outer_container { display: flex; - padding: 0 40px; + padding: 40px; } #toolbar { From b5e3c53691ec6cc872a9ac174b104b4da24b183d Mon Sep 17 00:00:00 2001 From: U1coo Date: Tue, 16 May 2023 20:18:20 +0800 Subject: [PATCH 3/4] Update toolbar layout --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a5f8520..c088309 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + From 28a6454304c42f0958c0225e53bacdaa3daf70c7 Mon Sep 17 00:00:00 2001 From: U1coo Date: Tue, 16 May 2023 20:20:10 +0800 Subject: [PATCH 4/4] Update toolbar layout --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c088309..ec54b99 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - +