From af5b9b9680059f6586661c76a467c66a9308052d Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Tue, 24 Jan 2023 23:37:38 -0300 Subject: [PATCH] Add history logging Signed-off-by: Victor Seiji Hariki --- css/icons.css | 5 +++ index.html | 8 ++++- js/index.js | 17 ++++++--- js/ui/floating/layers.js | 15 ++++++-- js/ui/tool/colorbrush.js | 34 +++++++++++++----- js/ui/tool/dream.d.js | 23 ++++++++++++ js/ui/tool/dream.js | 52 ++++++++++++++++++++++----- js/ui/tool/select.js | 76 +++++++++++++++++++++++++++++++++------- js/ui/tool/stamp.js | 32 ++++++++++++++--- res/icons/scroll.svg | 7 ++++ 10 files changed, 227 insertions(+), 42 deletions(-) create mode 100644 res/icons/scroll.svg diff --git a/css/icons.css b/css/icons.css index d1c89d7..a1a80ee 100644 --- a/css/icons.css +++ b/css/icons.css @@ -71,6 +71,11 @@ transform: rotate(-90deg); } +.ui.icon > .icon-scroll { + -webkit-mask-image: url("../res/icons/scroll.svg"); + mask-image: url("../res/icons/scroll.svg"); +} + .ui.icon > .icon-settings { -webkit-mask-image: url("../res/icons/settings.svg"); mask-image: url("../res/icons/settings.svg"); diff --git a/index.html b/index.html index 483eb90..94ed8c7 100644 --- a/index.html +++ b/index.html @@ -244,7 +244,13 @@
-
History
+
+ History +
+ +
diff --git a/js/index.js b/js/index.js index 533d1ff..3e8e086 100644 --- a/js/index.js +++ b/js/index.js @@ -500,10 +500,19 @@ async function testHostConnection() { function newImage(evt) { clearPaintedMask(); uil.layers.forEach(({layer}) => { - commands.runCommand("eraseImage", "Clear Canvas", { - ...layer.bb, - layer, - }); + commands.runCommand( + "eraseImage", + "Clear Canvas", + { + ...layer.bb, + ctx: layer.ctx, + }, + { + extra: { + log: `Cleared Canvas`, + }, + } + ); }); } diff --git a/js/ui/floating/layers.js b/js/ui/floating/layers.js index 5ec76cd..c0d7bd8 100644 --- a/js/ui/floating/layers.js +++ b/js/ui/floating/layers.js @@ -114,9 +114,18 @@ const uil = { "click", (evn) => { evn.stopPropagation(); - commands.runCommand("deleteLayer", "Deleted Layer", { - layer: uiLayer, - }); + commands.runCommand( + "deleteLayer", + "Deleted Layer", + { + layer: uiLayer, + }, + { + extra: { + log: `Deleted Layer ${uiLayer.name} [${uiLayer.id}]`, + }, + } + ); }, {passive: false} ); diff --git a/js/ui/tool/colorbrush.js b/js/ui/tool/colorbrush.js index 46e82f4..de0bdf4 100644 --- a/js/ui/tool/colorbrush.js +++ b/js/ui/tool/colorbrush.js @@ -287,10 +287,19 @@ const colorBrushTool = () => const cropped = cropCanvas(canvas, {border: 10}); const bb = cropped.bb; - commands.runCommand("drawImage", "Color Brush Draw", { - image: cropped.canvas, - ...bb, - }); + commands.runCommand( + "drawImage", + "Color Brush Draw", + { + image: cropped.canvas, + ...bb, + }, + { + extra: { + log: `Color brush drawn at x: ${bb.x}, y: ${bb.y}, width: ${bb.w}, height: ${bb.h}`, + }, + } + ); ctx.clearRect(bb.x, bb.y, bb.w, bb.h); }; @@ -336,10 +345,19 @@ const colorBrushTool = () => uil.layer.clear(); uil.ctx.drawImageRoot(bkpcanvas, 0, 0); - commands.runCommand("eraseImage", "Color Brush Erase", { - mask: cropped.canvas, - ...bb, - }); + commands.runCommand( + "eraseImage", + "Color Brush Erase", + { + mask: cropped.canvas, + ...bb, + }, + { + extra: { + log: `Color brush erase at x: ${bb.x}, y: ${bb.y}, width: ${bb.w}, height: ${bb.h}`, + }, + } + ); ctx.clearRect(bb.x, bb.y, bb.w, bb.h); }; diff --git a/js/ui/tool/dream.d.js b/js/ui/tool/dream.d.js index 24da203..557ea8d 100644 --- a/js/ui/tool/dream.d.js +++ b/js/ui/tool/dream.d.js @@ -4,6 +4,29 @@ * @typedef StableDiffusionRequest * @property {string} prompt Stable Diffusion prompt * @property {string} negative_prompt Stable Diffusion negative prompt + * + * @property {number} width Stable Diffusion render width + * @property {number} height Stable Diffusion render height + * + * @property {number} n_iter Stable Diffusion number of iterations + * @property {number} batch_size Stable Diffusion images per batches + * + * @property {number} seed Stable Diffusion seed + * @property {number} steps Stable Diffusion step count + * @property {number} cfg_scale Stable Diffusion CFG scale + * @property {string} sampler_index Stable Diffusion sampler name + * + * @property {boolean} restore_faces WebUI face restoration + * @property {boolean} tiling WebUI tiling + * @property {string[]} styles WebUI styles + * @property {string} script_name WebUI script name + * @property {Array} script_args WebUI script args + * + * @property {string} mask Stable Diffusion mask (img2img) + * @property {number} mask_blur Stable Diffusion mask blur (img2img) + * + * @property {number} inpainting_fill Stable Diffusion inpainting fill (img2img) + * @property {boolean} inpaint_full_res Stable Diffusion full resolution (img2img) */ /** diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index 6f3b880..e063558 100644 --- a/js/ui/tool/dream.js +++ b/js/ui/tool/dream.js @@ -506,13 +506,39 @@ const _generate = async (endpoint, request, bb, options = {}) => { ctx.drawImage(keepUnmaskCanvas, 0, 0); } - commands.runCommand("drawImage", "Image Dream", { - x: bb.x, - y: bb.y, - w: bb.w, - h: bb.h, - image: canvas, - }); + let commandLog = ""; + + const addline = (v, newline = true) => { + commandLog += v; + if (newline) commandLog += "\n"; + }; + + addline( + `Dreamed image at x: ${bb.x}, y: ${bb.y}, w: ${bb.w}, h: ${bb.h}` + ); + addline(` - resolution: (${request.width}, ${request.height})`); + addline(" - generation:"); + addline(` + Seed = ${seeds[at]}`); + addline(` + Steps = ${request.steps}`); + addline(` + CFG = ${request.cfg_scale}`); + addline(` + Sampler = ${request.sampler_index}`, false); + + commands.runCommand( + "drawImage", + "Image Dream", + { + x: bb.x, + y: bb.y, + w: bb.w, + h: bb.h, + image: canvas, + }, + { + extra: { + log: commandLog, + }, + } + ); clean(!toolbar._current_tool.state.preserveMasks); }); }; @@ -1027,8 +1053,18 @@ const dream_generate_callback = async (bb, resolution, state) => { }); } }; + +/** + * Erases an area from the canvas + * + * @param {BoundingBox} bb Bounding box of the area to be erased + */ const dream_erase_callback = (bb) => { - commands.runCommand("eraseImage", "Erase Area", bb); + commands.runCommand("eraseImage", "Erase Area", bb, { + extra: { + log: `Erased area at x: ${bb.x}, y: ${bb.y}, width: ${bb.w}, height: ${bb.h}`, + }, + }); }; function applyOvermask(canvas, ctx, px) { diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index 338b798..b66425d 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -265,22 +265,59 @@ const selectTransformTool = () => ); // Erase Original Selection Area - commands.runCommand("eraseImage", "Transform Tool Erase", { - layer: state.original.layer, - x: state.original.x, - y: state.original.y, - w: state.selected.canvas.width, - h: state.selected.canvas.height, - }); + commands.runCommand( + "eraseImage", + "Transform Tool Erase", + { + layer: state.original.layer, + x: state.original.x, + y: state.original.y, + w: state.selected.canvas.width, + h: state.selected.canvas.height, + }, + { + extra: { + log: `Erased original selection area at x: ${state.original.x}, y: ${state.original.y}, width: ${state.selected.canvas.width}, height: ${state.selected.canvas.height} from layer ${state.original.layer.id}`, + }, + } + ); + + let commandLog = ""; + const addline = (v, newline = true) => { + commandLog += v; + if (newline) commandLog += "\n"; + }; + + addline( + `Draw selected area to x: ${bb.x}, y: ${bb.y}, width: ${bb.w}, height: ${bb.h} to layer ${state.original.layer.id}` + ); + addline( + ` - translation: (x: ${state.selected.position.x}, y: ${state.selected.position.y})` + ); + addline( + ` - rotation : ${ + Math.round(1000 * ((180 * state.selected.rotation) / Math.PI)) / + 1000 + } degrees` + ); // Draw Image const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas, { border: 10, }); - commands.runCommand("drawImage", "Transform Tool Apply", { - image: canvas, - ...bb, - }); + commands.runCommand( + "drawImage", + "Transform Tool Apply", + { + image: canvas, + ...bb, + }, + { + extra: { + log: commandLog, + }, + } + ); state.reset(true); } else { @@ -461,7 +498,16 @@ const selectTransformTool = () => case "Delete": // Deletes selected area state.selected && - commands.runCommand("eraseImage", "Erase Area", state.selected); + commands.runCommand( + "eraseImage", + "Erase Area", + state.selected, + { + extra: { + log: `[Placeholder] Delete selected area. TODO it's also broken`, + }, + } + ); state.selected = null; state.redraw(); } @@ -533,7 +579,11 @@ const selectTransformTool = () => const aux = state.original; state.reset(); - commands.runCommand("eraseImage", "Cut Image", aux); + commands.runCommand("eraseImage", "Cut Image", aux, { + extra: { + log: `Cut to clipboard a selected area at x: ${aux.x}, y: ${aux.y}, width: ${aux.w}, height: ${aux.h} from layer ${state.original.layer.id}`, + }, + }); } // Because firefox needs manual activation of the feature diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js index 2ac60bd..e3fb597 100644 --- a/js/ui/tool/stamp.js +++ b/js/ui/tool/stamp.js @@ -418,13 +418,35 @@ const stampTool = () => const resource = state.selected; + let commandLog = `Stamped image '${resource.name}' to x: ${resource.x} and y: ${resource.y}`; + + const addline = (v, newline = true) => { + commandLog += v; + if (newline) commandLog += "\n"; + }; + addline(` - scaling : ${state.scale}`); + addline( + ` - rotation: ${ + Math.round(1000 * ((180 * rotation) / Math.PI)) / 1000 + } degrees` + ); + if (resource) { const {canvas, bb} = cropCanvas(ovCanvas, {border: 10}); - commands.runCommand("drawImage", "Image Stamp", { - image: canvas, - x: bb.x, - y: bb.y, - }); + commands.runCommand( + "drawImage", + "Image Stamp", + { + image: canvas, + x: bb.x, + y: bb.y, + }, + { + extra: { + log: commandLog, + }, + } + ); if (resource.temporary) { state.deleteResource(resource.id); diff --git a/res/icons/scroll.svg b/res/icons/scroll.svg new file mode 100644 index 0000000..6518100 --- /dev/null +++ b/res/icons/scroll.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file