fix eyedropper interactions and remove unused code
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki
parent
4d414186c0
commit
583f9245b6
4 changed files with 45 additions and 191 deletions
|
|
@ -20,30 +20,6 @@ body {
|
|||
overflow: clip;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backgroundCanvas {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.mainHSplit {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
.uiWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 15fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
background-color: rgb(0, 0, 0);
|
||||
color: rgb(255, 255, 255);
|
||||
|
|
@ -88,28 +64,6 @@ body {
|
|||
cursor: auto;
|
||||
}
|
||||
|
||||
.canvasHolder {
|
||||
position: relative;
|
||||
width: 2560px;
|
||||
height: 1440px;
|
||||
}
|
||||
|
||||
.mainCanvases {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 2560px;
|
||||
height: 1440px;
|
||||
}
|
||||
|
||||
.masks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
|
||||
/* Mask colors for mask inversion */
|
||||
/* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */
|
||||
.mask-canvas {
|
||||
|
|
@ -135,13 +89,6 @@ body {
|
|||
brightness(103%) contrast(108%);
|
||||
}
|
||||
|
||||
.strokeText {
|
||||
-webkit-text-stroke: 1px #000;
|
||||
font-size: 150%;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wideSelect {
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
116
js/index.js
116
js/index.js
|
|
@ -114,7 +114,6 @@ function startup() {
|
|||
changeSampler();
|
||||
changeMaskBlur();
|
||||
changeSeed();
|
||||
changeOverMaskPx();
|
||||
changeHiResFix();
|
||||
}
|
||||
|
||||
|
|
@ -340,106 +339,10 @@ function newImage(evt) {
|
|||
});
|
||||
}
|
||||
|
||||
function prevImg(evt) {
|
||||
if (imageIndex == 0) {
|
||||
imageIndex = totalImagesReturned;
|
||||
}
|
||||
changeImg(false);
|
||||
}
|
||||
|
||||
function nextImg(evt) {
|
||||
if (imageIndex == totalImagesReturned - 1) {
|
||||
imageIndex = -1;
|
||||
}
|
||||
changeImg(true);
|
||||
}
|
||||
|
||||
function changeImg(forward) {
|
||||
const img = new Image();
|
||||
tempCtx.clearRect(0, 0, tempCtx.width, tempCtx.height);
|
||||
img.onload = function () {
|
||||
tempCtx.drawImage(img, tmpImgXYWH.x, tmpImgXYWH.y); //imgCtx for actual image, tmp for... holding?
|
||||
};
|
||||
var tmpIndex = document.getElementById("currentImgIndex");
|
||||
if (forward) {
|
||||
imageIndex++;
|
||||
} else {
|
||||
imageIndex--;
|
||||
}
|
||||
tmpIndex.innerText = imageIndex + 1;
|
||||
// load the image data after defining the closure
|
||||
img.src = "data:image/png;base64," + returnedImages[imageIndex]; //TODO need way to dream batches and select from results
|
||||
}
|
||||
|
||||
function removeChoiceButtons(evt) {
|
||||
const element = document.getElementById("veryTempDiv");
|
||||
element.remove();
|
||||
tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
|
||||
}
|
||||
|
||||
function backupAndClearMask(x, y, w, h) {
|
||||
var clearArea = maskPaintCtx.createImageData(w, h);
|
||||
backupMaskChunk = maskPaintCtx.getImageData(x, y, w, h);
|
||||
backupMaskX = x;
|
||||
backupMaskY = y;
|
||||
var clearD = clearArea.data;
|
||||
for (i = 0; i < clearD.length; i += 4) {
|
||||
clearD[i] = 0;
|
||||
clearD[i + 1] = 0;
|
||||
clearD[i + 2] = 0;
|
||||
clearD[i + 3] = 0;
|
||||
}
|
||||
maskPaintCtx.putImageData(clearArea, x, y);
|
||||
}
|
||||
|
||||
function restoreBackupMask() {
|
||||
// reapply mask if exists
|
||||
if (backupMaskChunk != null && backupMaskX != null && backupMaskY != null) {
|
||||
// backup mask data exists
|
||||
var iData = new ImageData(
|
||||
backupMaskChunk.data,
|
||||
backupMaskChunk.height,
|
||||
backupMaskChunk.width
|
||||
);
|
||||
maskPaintCtx.putImageData(iData, backupMaskX, backupMaskY);
|
||||
}
|
||||
}
|
||||
|
||||
function clearBackupMask() {
|
||||
// clear backupmask
|
||||
backupMaskChunk = null;
|
||||
backupMaskX = null;
|
||||
backupMaskY = null;
|
||||
}
|
||||
|
||||
function clearImgMask() {
|
||||
imgCtx.clearRect(0, 0, imgCanvas.width, imgCanvas.height);
|
||||
}
|
||||
|
||||
function clearPaintedMask() {
|
||||
maskPaintCtx.clearRect(0, 0, maskPaintCanvas.width, maskPaintCanvas.height);
|
||||
}
|
||||
|
||||
function placeImage() {
|
||||
const img = new Image();
|
||||
img.onload = function () {
|
||||
commands.runCommand("drawImage", "Image Dream", {
|
||||
x: tmpImgXYWH.x,
|
||||
y: tmpImgXYWH.y,
|
||||
image: img,
|
||||
});
|
||||
tmpImgXYWH = {};
|
||||
returnedImages = null;
|
||||
};
|
||||
// load the image data after defining the closure
|
||||
img.src = "data:image/png;base64," + returnedImages[imageIndex];
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
// what was this even for, anyway?
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
function march(bb) {
|
||||
const expanded = {...bb};
|
||||
expanded.x--;
|
||||
|
|
@ -563,10 +466,6 @@ makeSlider(
|
|||
|
||||
makeSlider("Steps", document.getElementById("steps"), "steps", 1, 70, 5, 30, 1);
|
||||
|
||||
function changeSnapMode() {
|
||||
snapToGrid = document.getElementById("cbxSnap").checked;
|
||||
}
|
||||
|
||||
function changeMaskBlur() {
|
||||
stableDiffusionData.mask_blur = parseInt(
|
||||
document.getElementById("maskBlur").value
|
||||
|
|
@ -579,11 +478,6 @@ function changeSeed() {
|
|||
localStorage.setItem("seed", stableDiffusionData.seed);
|
||||
}
|
||||
|
||||
function changeOverMaskPx() {
|
||||
// overMaskPx = document.getElementById("overMaskPx").value;
|
||||
// localStorage.setItem("overmask_px", overMaskPx);
|
||||
}
|
||||
|
||||
function changeHiResFix() {
|
||||
stableDiffusionData.enable_hr = Boolean(
|
||||
document.getElementById("cbxHRFix").checked
|
||||
|
|
@ -936,15 +830,6 @@ function loadSettings() {
|
|||
? false
|
||||
: localStorage.getItem("enable_hr")
|
||||
);
|
||||
var _enable_erase = Boolean(
|
||||
localStorage.getItem("enable_erase") == (null || "false")
|
||||
? false
|
||||
: localStorage.getItem("enable_erase")
|
||||
);
|
||||
var _overmask_px =
|
||||
localStorage.getItem("overmask_px") == null
|
||||
? 0
|
||||
: localStorage.getItem("overmask_px");
|
||||
|
||||
// set the values into the UI
|
||||
document.getElementById("prompt").value = String(_prompt);
|
||||
|
|
@ -955,7 +840,6 @@ function loadSettings() {
|
|||
document.getElementById("maskBlur").value = Number(_mask_blur);
|
||||
document.getElementById("seed").value = Number(_seed);
|
||||
document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
|
||||
// document.getElementById("overMaskPx").value = Number(_overmask_px);
|
||||
}
|
||||
|
||||
imageCollection.element.addEventListener(
|
||||
|
|
|
|||
|
|
@ -77,8 +77,6 @@ const layers = {
|
|||
size,
|
||||
resolution: options.resolution,
|
||||
|
||||
active: null,
|
||||
|
||||
/**
|
||||
* Registers a new layer
|
||||
*
|
||||
|
|
@ -87,6 +85,7 @@ const layers = {
|
|||
* @param {string} options.name
|
||||
* @param {?BoundingBox} options.bb
|
||||
* @param {{w: number, h: number}} options.resolution
|
||||
* @param {?string} options.group
|
||||
* @param {object} options.after
|
||||
* @returns
|
||||
*/
|
||||
|
|
@ -101,9 +100,12 @@ const layers = {
|
|||
// Bounding box for layer
|
||||
bb: {x: 0, y: 0, w: collection.size.w, h: collection.size.h},
|
||||
|
||||
// Bounding box for layer
|
||||
// Resolution for layer
|
||||
resolution: null,
|
||||
|
||||
// Group for the layer ("group/subgroup/subsubgroup")
|
||||
group: null,
|
||||
|
||||
// If set, will insert the layer after the given one
|
||||
after: null,
|
||||
});
|
||||
|
|
@ -168,6 +170,24 @@ const layers = {
|
|||
canvas,
|
||||
ctx,
|
||||
|
||||
/**
|
||||
* Moves this layer to another level (after given layer)
|
||||
*
|
||||
* @param {Layer} layer Will move layer to after this one
|
||||
*/
|
||||
moveAfter(layer) {
|
||||
layer.canvas.after(this.canvas);
|
||||
},
|
||||
|
||||
/**
|
||||
* Moves this layer to another level (before given layer)
|
||||
*
|
||||
* @param {Layer} layer Will move layer to before this one
|
||||
*/
|
||||
moveBefore(layer) {
|
||||
layer.canvas.before(this.canvas);
|
||||
},
|
||||
|
||||
/**
|
||||
* Moves this layer to another location
|
||||
*
|
||||
|
|
@ -204,14 +224,8 @@ const layers = {
|
|||
unhide() {
|
||||
this.canvas.style.display = "block";
|
||||
},
|
||||
|
||||
// Activates this layer
|
||||
activate() {
|
||||
collection.active = this;
|
||||
},
|
||||
},
|
||||
_layerlogpath,
|
||||
["active"]
|
||||
_layerlogpath
|
||||
);
|
||||
|
||||
// Add to indexers
|
||||
|
|
@ -260,8 +274,7 @@ const layers = {
|
|||
else console.debug(`[layers] Anonymous layer '${lobj.id}' deleted`);
|
||||
},
|
||||
},
|
||||
_logpath,
|
||||
["active"]
|
||||
_logpath
|
||||
);
|
||||
|
||||
layers._collections.push(collection);
|
||||
|
|
@ -271,11 +284,6 @@ const layers = {
|
|||
`[layers] Collection '${options.name}' at ${_logpath} registered`
|
||||
);
|
||||
|
||||
// We must create a layer to select
|
||||
collection
|
||||
.registerLayer(options.initLayer.key, options.initLayer.options)
|
||||
.activate();
|
||||
|
||||
return collection;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const colorBrushTool = () =>
|
|||
resolution: {w: 7, h: 7},
|
||||
after: maskPaintLayer,
|
||||
});
|
||||
state.glassLayer.canvas.style.display = "none";
|
||||
state.glassLayer.hide();
|
||||
state.glassLayer.canvas.style.imageRendering = "pixelated";
|
||||
state.glassLayer.canvas.style.borderRadius = "50%";
|
||||
|
||||
|
|
@ -55,10 +55,11 @@ const colorBrushTool = () =>
|
|||
after: imgLayer,
|
||||
});
|
||||
state.eraseLayer.canvas.style.display = "none";
|
||||
state.eraseLayer.hide();
|
||||
state.eraseBackup = imageCollection.registerLayer(null, {
|
||||
after: imgLayer,
|
||||
});
|
||||
state.eraseBackup.canvas.style.display = "none";
|
||||
state.eraseBackup.hide();
|
||||
|
||||
// Start Listeners
|
||||
mouse.listen.world.onmousemove.on(state.movecb);
|
||||
|
|
@ -131,13 +132,13 @@ const colorBrushTool = () =>
|
|||
state.enableDropper = () => {
|
||||
state.eyedropper = true;
|
||||
state.movecb(lastMouseMoveEvn);
|
||||
state.glassLayer.canvas.style.display = "block";
|
||||
state.glassLayer.unhide();
|
||||
};
|
||||
|
||||
state.disableDropper = () => {
|
||||
state.eyedropper = false;
|
||||
state.movecb(lastMouseMoveEvn);
|
||||
state.glassLayer.canvas.style.display = "none";
|
||||
state.glassLayer.hide();
|
||||
};
|
||||
|
||||
let lastMouseMoveEvn = {x: 0, y: 0};
|
||||
|
|
@ -218,6 +219,13 @@ const colorBrushTool = () =>
|
|||
state.setColor(
|
||||
"#" + ((dat[0] << 16) | (dat[1] << 8) | dat[2]).toString(16)
|
||||
);
|
||||
state.disableDropper();
|
||||
}
|
||||
};
|
||||
|
||||
state.rightclickcb = (evn) => {
|
||||
if (evn.target === imageCollection.inputElement && state.eyedropper) {
|
||||
state.disableDropper();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -255,6 +263,8 @@ const colorBrushTool = () =>
|
|||
};
|
||||
|
||||
state.erasestartcb = (evn) => {
|
||||
if (state.eyedropper) return;
|
||||
state.erasing = true;
|
||||
if (state.affectMask) _mask_brush_erase_callback(evn, state);
|
||||
|
||||
// Make a backup of the current image to apply erase later
|
||||
|
|
@ -270,6 +280,7 @@ const colorBrushTool = () =>
|
|||
};
|
||||
|
||||
state.erasecb = (evn) => {
|
||||
if (state.eyedropper || !state.erasing) return;
|
||||
if (state.affectMask) _mask_brush_erase_callback(evn, state);
|
||||
imgCtx.globalCompositeOperation = "destination-out";
|
||||
_color_brush_erase_callback(evn, state, imgCtx);
|
||||
|
|
@ -278,6 +289,9 @@ const colorBrushTool = () =>
|
|||
};
|
||||
|
||||
state.eraseendcb = (evn) => {
|
||||
if (!state.erasing) return;
|
||||
state.erasing = false;
|
||||
|
||||
const canvas = state.eraseLayer.canvas;
|
||||
const ctx = state.eraseLayer.ctx;
|
||||
|
||||
|
|
@ -364,7 +378,8 @@ const colorBrushTool = () =>
|
|||
"eyedropper"
|
||||
);
|
||||
brushColorEyeDropper.addEventListener("click", () => {
|
||||
state.enableDropper();
|
||||
if (state.eyedropper) state.disableDropper();
|
||||
else state.enableDropper();
|
||||
});
|
||||
|
||||
brushColorPickerWrapper.appendChild(brushColorPicker);
|
||||
|
|
|
|||
Loading…
Reference in a new issue