Add history logging

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

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");

index.html

@@ -244,7 +244,13 @@
 
 		<!-- History -->
 		<div id="ui-history" class="floating-window" style="right: 10px; top: 10px">
-			<div class="draggable floating-window-title">History</div>
+			<div class="draggable floating-window-title">
+				History
+				<div style="flex: 1"></div>
+				<button id="settings-btn" class="ui icon header-button">
+					<div class="icon-scroll"></div>
+				</button>
+			</div>
 			<div class="menu-container" style="min-width: 200px">
 				<div id="history" class="history"></div>
 				<div class="button-array" style="padding: 10px">

js/index.js

@@ -500,10 +500,19 @@ async function testHostConnection() {
 function newImage(evt) {
 	clearPaintedMask();
 	uil.layers.forEach(({layer}) => {
-		commands.runCommand("eraseImage", "Clear Canvas", {
+		commands.runCommand(
-			...layer.bb,
+			"eraseImage",
-			layer,
+			"Clear Canvas",
-		});
+			{
+				...layer.bb,
+				ctx: layer.ctx,
+			},
+			{
+				extra: {
+					log: `Cleared Canvas`,
+				},
+			}
+		);
 	});
 }
 

js/ui/floating/layers.js

@@ -114,9 +114,18 @@ const uil = {
 						"click",
 						(evn) => {
 							evn.stopPropagation();
-							commands.runCommand("deleteLayer", "Deleted Layer", {
+							commands.runCommand(
-								layer: uiLayer,
+								"deleteLayer",
-							});
+								"Deleted Layer",
+								{
+									layer: uiLayer,
+								},
+								{
+									extra: {
+										log: `Deleted Layer ${uiLayer.name} [${uiLayer.id}]`,
+									},
+								}
+							);
 						},
 						{passive: false}
 					);

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", {
+					commands.runCommand(
-						image: cropped.canvas,
+						"drawImage",
-						...bb,
+						"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", {
+					commands.runCommand(
-						mask: cropped.canvas,
+						"eraseImage",
-						...bb,
+						"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);
 				};

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)
  */
 
 /**

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", {
+			let commandLog = "";
-				x: bb.x,
+
-				y: bb.y,
+			const addline = (v, newline = true) => {
-				w: bb.w,
+				commandLog += v;
-				h: bb.h,
+				if (newline) commandLog += "\n";
-				image: canvas,
+			};
-			});
+
+			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) {

js/ui/tool/select.js

@@ -265,22 +265,59 @@ const selectTransformTool = () =>
 						);
 
 						// Erase Original Selection Area
-						commands.runCommand("eraseImage", "Transform Tool Erase", {
+						commands.runCommand(
-							layer: state.original.layer,
+							"eraseImage",
-							x: state.original.x,
+							"Transform Tool Erase",
-							y: state.original.y,
+							{
-							w: state.selected.canvas.width,
+								layer: state.original.layer,
-							h: state.selected.canvas.height,
+								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", {
+						commands.runCommand(
-							image: canvas,
+							"drawImage",
-							...bb,
+							"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

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", {
+						commands.runCommand(
-							image: canvas,
+							"drawImage",
-							x: bb.x,
+							"Image Stamp",
-							y: bb.y,
+							{
-						});
+								image: canvas,
+								x: bb.x,
+								y: bb.y,
+							},
+							{
+								extra: {
+									log: commandLog,
+								},
+							}
+						);
 
 						if (resource.temporary) {
 							state.deleteResource(resource.id);

res/icons/scroll.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 17v2a2 2 0 0 1-2 2v0a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v3h3"></path>
+  <path d="M22 17v2a2 2 0 0 1-2 2H8"></path>
+  <path d="M19 17V5a2 2 0 0 0-2-2H4"></path>
+  <path d="M22 17H10"></path>
+
+</svg>