sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add cancel button to future generations

Browse source 
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-12-12 18:49:53 -03:00
parent 1d089f2213
commit f63bbafe0f
2 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/ui/tool/dream.css
View file

@ -1,3 +1,3 @@
.dream-interrupt-btn { .dream-stop-btn {
width: 100px; width: 100px;
} }

49
js/ui/tool/dream.js
View file

@ -129,10 +129,35 @@ const _generate = async (
if (generationAreas.has(areaid)) return; if (generationAreas.has(areaid)) return;
generationAreas.add(areaid); generationAreas.add(areaid);
// Makes an element in a location
const makeElement = (type, x, y) => {
const el = document.createElement(type);
el.style.position = "absolute";
el.style.left = `${x - imageCollection.inputOffset.x}px`;
el.style.top = `${y - imageCollection.inputOffset.y}px`;
// We can use the input element to add interactible html elements in the world
imageCollection.inputElement.appendChild(el);
return el;
};
// Await for queue // Await for queue
let cancelled = false;
const waitQueue = async () => { const waitQueue = async () => {
const stopQueueMarchingAnts = march(bb, {style: "#AAF"}); const stopQueueMarchingAnts = march(bb, {style: "#AAF"});
// Add cancel Button
const cancelButton = makeElement("button", bb.x + bb.w - 100, bb.y + bb.h);
cancelButton.classList.add("dream-stop-btn");
cancelButton.textContent = "Cancel";
cancelButton.addEventListener("click", () => {
cancelled = true;
imageCollection.inputElement.removeChild(cancelButton);
stopQueueMarchingAnts();
});
imageCollection.inputElement.appendChild(cancelButton);
let qPromise = null; let qPromise = null;
let qResolve = null; let qResolve = null;
await new Promise((finish) => { await new Promise((finish) => {
@ -151,8 +176,10 @@ const _generate = async (
finish(); finish();
} }
}); });
if (!cancelled) {
imageCollection.inputElement.removeChild(cancelButton);
stopQueueMarchingAnts(); stopQueueMarchingAnts();
}
return {promise: qPromise, resolve: qResolve}; return {promise: qPromise, resolve: qResolve};
}; };
@ -167,30 +194,22 @@ const _generate = async (
const initialQ = await waitQueue(); const initialQ = await waitQueue();
if (cancelled) {
nextQueue(initialQ);
return;
}
// Images to select through // Images to select through
let at = 0; let at = 0;
/** @type {Array<string|null>} */ /** @type {Array<string|null>} */
const images = [null]; const images = [null];
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
let imageSelectMenu = null; let imageSelectMenu = null;
// Layer for the images // Layer for the images
const layer = imageCollection.registerLayer(null, { const layer = imageCollection.registerLayer(null, {
after: maskPaintLayer, after: maskPaintLayer,
}); });
const makeElement = (type, x, y) => {
const el = document.createElement(type);
el.style.position = "absolute";
el.style.left = `${x - imageCollection.inputOffset.x}px`;
el.style.top = `${y - imageCollection.inputOffset.y}px`;
// We can use the input element to add interactible html elements in the world
imageCollection.inputElement.appendChild(el);
return el;
};
const redraw = (url = images[at]) => { const redraw = (url = images[at]) => {
if (url === null) if (url === null)
layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height); layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
@ -216,7 +235,7 @@ const _generate = async (
// Add Interrupt Button // Add Interrupt Button
const interruptButton = makeElement("button", bb.x + bb.w - 100, bb.y + bb.h); const interruptButton = makeElement("button", bb.x + bb.w - 100, bb.y + bb.h);
interruptButton.classList.add("dream-interrupt-btn"); interruptButton.classList.add("dream-stop-btn");
interruptButton.textContent = "Interrupt"; interruptButton.textContent = "Interrupt";
interruptButton.addEventListener("click", () => { interruptButton.addEventListener("click", () => {
fetch(`${host}${url}interrupt`, {method: "POST"}); fetch(`${host}${url}interrupt`, {method: "POST"});