Add history logging
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki
parent
006aa608e8
commit
af5b9b9680
10 changed files with 227 additions and 42 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
17
js/index.js
17
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`,
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
7
res/icons/scroll.svg
Normal file
7
res/icons/scroll.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 404 B |
Loading…
Reference in a new issue