diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..bd78f47
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,19 @@
+{
+ "arrowParens": "always",
+ "bracketSameLine": true,
+ "bracketSpacing": false,
+ "embeddedLanguageFormatting": "auto",
+ "htmlWhitespaceSensitivity": "css",
+ "insertPragma": false,
+ "jsxSingleQuote": false,
+ "printWidth": 80,
+ "proseWrap": "preserve",
+ "quoteProps": "as-needed",
+ "requirePragma": false,
+ "semi": true,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "useTabs": false,
+ "vueIndentScriptAndStyle": false
+ }
\ No newline at end of file
diff --git a/js/commands.js b/js/commands.js
index 5cf6854..e64a97f 100644
--- a/js/commands.js
+++ b/js/commands.js
@@ -2,131 +2,124 @@
* Command pattern to allow for editing history
*/
const commands = {
- current: -1,
- history: [],
- undo(n = 1) {
- for (var i = 0; i < n && this.current > -1; i++) {
- this.history[this.current--].undo();
- }
- },
- redo(n = 1) {
- for (var i = 0; i < n && this.current + 1 < this.history.length; i++) {
- this.history[++this.current].redo();
- }
- },
+ current: -1,
+ history: [],
+ undo(n = 1) {
+ for (var i = 0; i < n && this.current > -1; i++) {
+ this.history[this.current--].undo();
+ }
+ },
+ redo(n = 1) {
+ for (var i = 0; i < n && this.current + 1 < this.history.length; i++) {
+ this.history[++this.current].redo();
+ }
+ },
- /**
- * These are basic commands that can be done/undone
- *
- * They must contain a 'run' method that performs the action the first time,
- * a 'undo' method that undoes that action and a 'redo' method that does the
- * action again, but without requiring parameters. 'redo' is by default the
- * same as 'run'.
- *
- * The 'run' and 'redo' functions will receive a 'options' parameter which will be
- * forwarded directly to the operation, and a 'state' parameter that
- * can be used to store state for undoing things.
- *
- * The 'state' object will be passed to the 'undo' function as well.
- */
- createCommand(name, run, undo, redo = run) {
- const command = function runWrapper(options) {
- // Create copy of options and state object
- const copy = {};
- Object.assign(copy, options);
- const state = {};
+ /**
+ * These are basic commands that can be done/undone
+ *
+ * They must contain a 'run' method that performs the action the first time,
+ * a 'undo' method that undoes that action and a 'redo' method that does the
+ * action again, but without requiring parameters. 'redo' is by default the
+ * same as 'run'.
+ *
+ * The 'run' and 'redo' functions will receive a 'options' parameter which will be
+ * forwarded directly to the operation, and a 'state' parameter that
+ * can be used to store state for undoing things.
+ *
+ * The 'state' object will be passed to the 'undo' function as well.
+ */
+ createCommand(name, run, undo, redo = run) {
+ const command = function runWrapper(options) {
+ // Create copy of options and state object
+ const copy = {};
+ Object.assign(copy, options);
+ const state = {};
- // Attempt to run command
- try {
- run(copy, state);
- } catch (e) {
- console.warn(
- `Error while running command '${name}' with options:`
- );
- console.warn(copy);
- console.warn(e);
- return;
- }
+ // Attempt to run command
+ try {
+ run(copy, state);
+ } catch (e) {
+ console.warn(`Error while running command '${name}' with options:`);
+ console.warn(copy);
+ console.warn(e);
+ return;
+ }
- const undoWrapper = () => {
- console.debug(`Undoing ${name}, currently ${commands.current}`);
- undo(state);
- };
- const redoWrapper = () => {
- console.debug(`Redoing ${name}, currently ${commands.current}`);
- redo(copy, state);
- };
+ const undoWrapper = () => {
+ console.debug(`Undoing ${name}, currently ${commands.current}`);
+ undo(state);
+ };
+ const redoWrapper = () => {
+ console.debug(`Redoing ${name}, currently ${commands.current}`);
+ redo(copy, state);
+ };
- // Add to history
- if (commands.history.length > commands.current + 1)
- commands.history.splice(commands.current + 1);
- commands.history.push({ undo: undoWrapper, redo: redoWrapper });
- commands.current++;
- };
+ // Add to history
+ if (commands.history.length > commands.current + 1)
+ commands.history.splice(commands.current + 1);
+ commands.history.push({undo: undoWrapper, redo: redoWrapper});
+ commands.current++;
+ };
- this.types[name] = command;
+ this.types[name] = command;
- return command;
- },
- runCommand(name, options) {
- this.types[name](options);
- },
- types: {},
+ return command;
+ },
+ runCommand(name, options) {
+ this.types[name](options);
+ },
+ types: {},
};
/**
* Draw Image Command, used to draw a Image to a context
*/
commands.createCommand(
- "drawImage",
- (options, state) => {
- if (
- !options ||
- options.image === undefined ||
- options.x === undefined ||
- options.y === undefined
- )
- throw "Command drawImage requires options in the format: {image, x, y, ctx?}";
+ "drawImage",
+ (options, state) => {
+ if (
+ !options ||
+ options.image === undefined ||
+ options.x === undefined ||
+ options.y === undefined
+ )
+ throw "Command drawImage requires options in the format: {image, x, y, ctx?}";
- // Check if we have state
- if (!state.context) {
- const context = options.ctx || imgCtx;
- state.context = context;
+ // Check if we have state
+ if (!state.context) {
+ const context = options.ctx || imgCtx;
+ state.context = context;
- // Saving what was in the canvas before the command
- const imgData = context.getImageData(
- options.x,
- options.y,
- options.image.width,
- options.image.height
- );
- state.box = {
- x: options.x,
- y: options.y,
- w: options.image.width,
- h: options.image.height,
- };
- // Create Image
- const cutout = document.createElement("canvas");
- cutout.width = state.box.w;
- cutout.height = state.box.h;
- cutout.getContext("2d").putImageData(imgData, 0, 0);
- state.original = new Image();
- state.original.src = cutout.toDataURL();
- }
-
- // Apply command
- state.context.drawImage(options.image, state.box.x, state.box.y);
- },
- (state) => {
- // Clear destination area
- state.context.clearRect(
- state.box.x,
- state.box.y,
- state.box.w,
- state.box.h
- );
- // Undo
- state.context.drawImage(state.original, state.box.x, state.box.y);
+ // Saving what was in the canvas before the command
+ const imgData = context.getImageData(
+ options.x,
+ options.y,
+ options.image.width,
+ options.image.height
+ );
+ state.box = {
+ x: options.x,
+ y: options.y,
+ w: options.image.width,
+ h: options.image.height,
+ };
+ // Create Image
+ const cutout = document.createElement("canvas");
+ cutout.width = state.box.w;
+ cutout.height = state.box.h;
+ cutout.getContext("2d").putImageData(imgData, 0, 0);
+ state.original = new Image();
+ state.original.src = cutout.toDataURL();
}
+
+ // Apply command
+ state.context.drawImage(options.image, state.box.x, state.box.y);
+ },
+ (state) => {
+ // Clear destination area
+ state.context.clearRect(state.box.x, state.box.y, state.box.w, state.box.h);
+ // Undo
+ state.context.drawImage(state.original, state.box.x, state.box.y);
+ }
);
diff --git a/js/index.js b/js/index.js
index 8cf51ac..fc93b93 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,77 +3,85 @@
window.onload = startup;
-var stableDiffusionData = { //includes img2img data but works for txt2img just fine
- prompt: "",
- negative_prompt: "",
- seed: -1,
- cfg_scale: null,
- sampler_index: "DDIM",
- steps: null,
- denoising_strength: 1,
- mask_blur: 0,
- batch_size: null,
- width: 512,
- height: 512,
- n_iter: null, // batch count
- mask: "",
- init_images: [],
- inpaint_full_res: false,
- inpainting_fill: 2,
- enable_hr: false,
- firstphase_width: 0,
- firstphase_height: 0,
- // here's some more fields that might be useful
+var stableDiffusionData = {
+ //includes img2img data but works for txt2img just fine
+ prompt: "",
+ negative_prompt: "",
+ seed: -1,
+ cfg_scale: null,
+ sampler_index: "DDIM",
+ steps: null,
+ denoising_strength: 1,
+ mask_blur: 0,
+ batch_size: null,
+ width: 512,
+ height: 512,
+ n_iter: null, // batch count
+ mask: "",
+ init_images: [],
+ inpaint_full_res: false,
+ inpainting_fill: 2,
+ enable_hr: false,
+ firstphase_width: 0,
+ firstphase_height: 0,
+ // here's some more fields that might be useful
- // ---txt2img specific:
- // "enable_hr": false, // hires fix
- // "denoising_strength": 0, // ok this is in both txt and img2img but txt2img only applies it if enable_hr == true
- // "firstphase_width": 0, // hires fp w
- // "firstphase_height": 0, // see above s/w/h/
+ // ---txt2img specific:
+ // "enable_hr": false, // hires fix
+ // "denoising_strength": 0, // ok this is in both txt and img2img but txt2img only applies it if enable_hr == true
+ // "firstphase_width": 0, // hires fp w
+ // "firstphase_height": 0, // see above s/w/h/
- // ---img2img specific
- // "init_images": [ // imageS!??!? wtf maybe for batch img2img?? i just dump one base64 in here
- // "string"
- // ],
- // "resize_mode": 0,
- // "denoising_strength": 0.75, // yeah see
- // "mask": "string", // string is just a base64 image
- // "mask_blur": 4,
- // "inpainting_fill": 0, // 0- fill, 1- orig, 2- latent noise, 3- latent nothing
- // "inpaint_full_res": true,
- // "inpaint_full_res_padding": 0, // px
- // "inpainting_mask_invert": 0, // bool??????? wtf
- // "include_init_images": false // ??????
-
-}
+ // ---img2img specific
+ // "init_images": [ // imageS!??!? wtf maybe for batch img2img?? i just dump one base64 in here
+ // "string"
+ // ],
+ // "resize_mode": 0,
+ // "denoising_strength": 0.75, // yeah see
+ // "mask": "string", // string is just a base64 image
+ // "mask_blur": 4,
+ // "inpainting_fill": 0, // 0- fill, 1- orig, 2- latent noise, 3- latent nothing
+ // "inpaint_full_res": true,
+ // "inpaint_full_res_padding": 0, // px
+ // "inpainting_mask_invert": 0, // bool??????? wtf
+ // "include_init_images": false // ??????
+};
/**
* Some Utility Functions
*/
-function sliderChangeHandlerFactory(sliderId, textBoxId, dataKey, defaultV, setter = (k, v) => stableDiffusionData[k] = v, getter = (k) => stableDiffusionData[k]) {
- const sliderEl = document.getElementById(sliderId);
- const textBoxEl = document.getElementById(textBoxId);
- const savedValue = localStorage.getItem(dataKey);
+function sliderChangeHandlerFactory(
+ sliderId,
+ textBoxId,
+ dataKey,
+ defaultV,
+ setter = (k, v) => (stableDiffusionData[k] = v),
+ getter = (k) => stableDiffusionData[k]
+) {
+ const sliderEl = document.getElementById(sliderId);
+ const textBoxEl = document.getElementById(textBoxId);
+ const savedValue = localStorage.getItem(dataKey);
- if (savedValue) setter(dataKey, savedValue || defaultV);
+ if (savedValue) setter(dataKey, savedValue || defaultV);
- function changeHandler(evn) {
- const eventSource = evn && evn.srcElement;
- const value = eventSource && Number(eventSource.value);
+ function changeHandler(evn) {
+ const eventSource = evn && evn.srcElement;
+ const value = eventSource && Number(eventSource.value);
- if (value) setter(dataKey, value);
+ if (value) setter(dataKey, value);
- if (!eventSource || eventSource.id === textBoxId) sliderEl.value = getter(dataKey);
- setter(dataKey, Number(sliderEl.value))
- textBoxEl.value = getter(dataKey);
+ if (!eventSource || eventSource.id === textBoxId)
+ sliderEl.value = getter(dataKey);
+ setter(dataKey, Number(sliderEl.value));
+ textBoxEl.value = getter(dataKey);
- localStorage.setItem(dataKey, getter(dataKey));
- }
+ localStorage.setItem(dataKey, getter(dataKey));
+ }
- textBoxEl.onchange = changeHandler
- sliderEl.oninput = changeHandler
+ textBoxEl.onchange = changeHandler;
+ sliderEl.oninput = changeHandler;
- return changeHandler
+ return changeHandler;
}
// stuff things use
@@ -83,7 +91,7 @@ var imageIndex = 0;
var tmpImgXYWH = {};
var host = "";
var url = "/sdapi/v1/";
-var endpoint = "txt2img"
+var endpoint = "txt2img";
var frameX = 512;
var frameY = 512;
var prevMouseX = 0;
@@ -102,7 +110,7 @@ var scaleFactor = 8; //x64 px
var snapToGrid = true;
var paintMode = false;
var backupMaskPaintCanvas; //???
-var backupMaskPaintCtx; //...? look i am bad at this
+var backupMaskPaintCtx; //...? look i am bad at this
var backupMaskChunk = null;
var backupMaskX = null;
var backupMaskY = null;
@@ -131,7 +139,7 @@ const ovCanvas = document.getElementById("overlayCanvas"); // where mouse cursor
const ovCtx = ovCanvas.getContext("2d");
const tgtCanvas = document.getElementById("targetCanvas"); // where "box" gets drawn before dream happens
const tgtCtx = tgtCanvas.getContext("2d");
-const maskPaintCanvas = document.getElementById("maskPaintCanvas"); // where masking brush gets painted
+const maskPaintCanvas = document.getElementById("maskPaintCanvas"); // where masking brush gets painted
const maskPaintCtx = maskPaintCanvas.getContext("2d");
const tempCanvas = document.getElementById("tempCanvas"); // where select/rejects get superimposed temporarily
const tempCtx = tempCanvas.getContext("2d");
@@ -141,698 +149,822 @@ const bgCanvas = document.getElementById("backgroundCanvas"); // gray bg grid
const bgCtx = bgCanvas.getContext("2d");
function startup() {
- checkIfWebuiIsRunning();
- loadSettings();
- drawBackground();
- changeScaleFactor();
- changePaintMode();
- changeSampler();
- changeSteps();
- changeCfgScale();
- changeBatchCount();
- changeBatchSize();
- changeSnapMode();
- changeMaskBlur();
- changeSeed();
- changeOverMaskPx();
- changeHiResFix();
- changeEnableErasing();
- document.getElementById("overlayCanvas").onmousemove = mouseMove;
- document.getElementById("overlayCanvas").onmousedown = mouseDown;
- document.getElementById("overlayCanvas").onmouseup = mouseUp;
- document.getElementById("scaleFactor").value = scaleFactor;
+ checkIfWebuiIsRunning();
+ loadSettings();
+ drawBackground();
+ changeScaleFactor();
+ changePaintMode();
+ changeSampler();
+ changeSteps();
+ changeCfgScale();
+ changeBatchCount();
+ changeBatchSize();
+ changeSnapMode();
+ changeMaskBlur();
+ changeSeed();
+ changeOverMaskPx();
+ changeHiResFix();
+ changeEnableErasing();
+ document.getElementById("overlayCanvas").onmousemove = mouseMove;
+ document.getElementById("overlayCanvas").onmousedown = mouseDown;
+ document.getElementById("overlayCanvas").onmouseup = mouseUp;
+ document.getElementById("scaleFactor").value = scaleFactor;
}
function drop(imageParams) {
- const img = new Image();
- img.onload = function () {
- writeArbitraryImage(img, imageParams.x, imageParams.y)
- }
- img.src = arbitraryImageBase64;
+ const img = new Image();
+ img.onload = function () {
+ writeArbitraryImage(img, imageParams.x, imageParams.y);
+ };
+ img.src = arbitraryImageBase64;
}
function writeArbitraryImage(img, x, y) {
- commands.runCommand('drawImage', {
- x,
- y,
- image: img,
- });
- blockNewImages = false;
- placingArbitraryImage = false;
- document.getElementById("preloadImage").files = null;
+ commands.runCommand("drawImage", {
+ x,
+ y,
+ image: img,
+ });
+ blockNewImages = false;
+ placingArbitraryImage = false;
+ document.getElementById("preloadImage").files = null;
}
function dream(x, y, prompt) {
- tmpImgXYWH.x = x;
- tmpImgXYWH.y = y;
- tmpImgXYWH.w = prompt.width;
- tmpImgXYWH.h = prompt.height;
- console.log("dreaming to " + host + url + endpoint + ":\r\n" + JSON.stringify(prompt));
- postData(prompt)
- .then((data) => {
- returnedImages = data.images;
- totalImagesReturned = data.images.length;
- blockNewImages = true;
- //console.log(data); // JSON data parsed by `data.json()` call
- imageAcceptReject(x, y, data);
- });
+ tmpImgXYWH.x = x;
+ tmpImgXYWH.y = y;
+ tmpImgXYWH.w = prompt.width;
+ tmpImgXYWH.h = prompt.height;
+ console.log(
+ "dreaming to " + host + url + endpoint + ":\r\n" + JSON.stringify(prompt)
+ );
+ postData(prompt).then((data) => {
+ returnedImages = data.images;
+ totalImagesReturned = data.images.length;
+ blockNewImages = true;
+ //console.log(data); // JSON data parsed by `data.json()` call
+ imageAcceptReject(x, y, data);
+ });
}
async function postData(promptData) {
- this.host = document.getElementById("host").value;
- // Default options are marked with *
- const response = await fetch(this.host + this.url + this.endpoint, {
- method: 'POST', // *GET, POST, PUT, DELETE, etc.
- mode: 'cors', // no-cors, *cors, same-origin
- cache: 'default', // *default, no-cache, reload, force-cache, only-if-cached
- credentials: 'same-origin', // include, *same-origin, omit
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- redirect: 'follow', // manual, *follow, error
- referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
- body: JSON.stringify(promptData) // body data type must match "Content-Type" header
- });
- return response.json(); // parses JSON response into native JavaScript objects
+ this.host = document.getElementById("host").value;
+ // Default options are marked with *
+ const response = await fetch(this.host + this.url + this.endpoint, {
+ method: "POST", // *GET, POST, PUT, DELETE, etc.
+ mode: "cors", // no-cors, *cors, same-origin
+ cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
+ credentials: "same-origin", // include, *same-origin, omit
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ redirect: "follow", // manual, *follow, error
+ referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+ body: JSON.stringify(promptData), // body data type must match "Content-Type" header
+ });
+ return response.json(); // parses JSON response into native JavaScript objects
}
function imageAcceptReject(x, y, data) {
- const img = new Image();
- img.onload = function () {
- tempCtx.drawImage(img, x, y); //imgCtx for actual image, tmp for... holding?
- var div = document.createElement("div");
- div.id = "veryTempDiv";
- div.style.position = "absolute";
- div.style.left = parseInt(x) + "px";
- div.style.top = parseInt(y + data.parameters.height) + "px";
- div.style.width = "150px";
- div.style.height = "50px";
- div.innerHTML = " of "
- document.getElementById("tempDiv").appendChild(div);
- document.getElementById("currentImgIndex").innerText = "1";
- document.getElementById("totalImgIndex").innerText = totalImagesReturned;
- }
- // set the image displayed as the first regardless of batch size/count
- imageIndex = 0;
- // load the image data after defining the closure
- img.src = "data:image/png;base64," + returnedImages[imageIndex];
+ const img = new Image();
+ img.onload = function () {
+ tempCtx.drawImage(img, x, y); //imgCtx for actual image, tmp for... holding?
+ var div = document.createElement("div");
+ div.id = "veryTempDiv";
+ div.style.position = "absolute";
+ div.style.left = parseInt(x) + "px";
+ div.style.top = parseInt(y + data.parameters.height) + "px";
+ div.style.width = "150px";
+ div.style.height = "50px";
+ div.innerHTML =
+ ' of ';
+ document.getElementById("tempDiv").appendChild(div);
+ document.getElementById("currentImgIndex").innerText = "1";
+ document.getElementById("totalImgIndex").innerText = totalImagesReturned;
+ };
+ // set the image displayed as the first regardless of batch size/count
+ imageIndex = 0;
+ // load the image data after defining the closure
+ img.src = "data:image/png;base64," + returnedImages[imageIndex];
}
function accept(evt) {
- // write image to imgcanvas
- clearBackupMask();
- placeImage();
- removeChoiceButtons();
- clearTargetMask();
- blockNewImages = false;
+ // write image to imgcanvas
+ clearBackupMask();
+ placeImage();
+ removeChoiceButtons();
+ clearTargetMask();
+ blockNewImages = false;
}
function reject(evt) {
- // remove image entirely
- restoreBackupMask();
- clearBackupMask();
- clearTargetMask();
- removeChoiceButtons();
- blockNewImages = false;
+ // remove image entirely
+ restoreBackupMask();
+ clearBackupMask();
+ clearTargetMask();
+ removeChoiceButtons();
+ blockNewImages = false;
}
function newImage(evt) {
- clearPaintedMask();
- clearBackupMask();
- clearTargetMask();
- clearImgMask();
+ clearPaintedMask();
+ clearBackupMask();
+ clearTargetMask();
+ clearImgMask();
}
function prevImg(evt) {
- if (imageIndex == 0) {
- imageIndex = totalImagesReturned;
- }
- changeImg(false);
+ if (imageIndex == 0) {
+ imageIndex = totalImagesReturned;
+ }
+ changeImg(false);
}
function nextImg(evt) {
- if (imageIndex == (totalImagesReturned - 1)) {
- imageIndex = -1;
- }
- changeImg(true);
+ 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
+ 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);
+ const element = document.getElementById("veryTempDiv");
+ element.remove();
+ tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
}
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);
- }
+ // 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;
+ // clear backupmask
+ backupMaskChunk = null;
+ backupMaskX = null;
+ backupMaskY = null;
}
function clearTargetMask() {
- tgtCtx.clearRect(0, 0, tgtCanvas.width, tgtCanvas.height);
+ tgtCtx.clearRect(0, 0, tgtCanvas.width, tgtCanvas.height);
}
function clearImgMask() {
- imgCtx.clearRect(0, 0, imgCanvas.width, imgCanvas.height);
+ imgCtx.clearRect(0, 0, imgCanvas.width, imgCanvas.height);
}
function clearPaintedMask() {
- maskPaintCtx.clearRect(0, 0, maskPaintCanvas.width, maskPaintCanvas.height);
+ maskPaintCtx.clearRect(0, 0, maskPaintCanvas.width, maskPaintCanvas.height);
}
function placeImage() {
- const img = new Image();
- img.onload = function () {
- commands.runCommand('drawImage', {
- 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];
-
+ const img = new Image();
+ img.onload = function () {
+ commands.runCommand("drawImage", {
+ 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));
+ // what was this even for, anyway?
+ return new Promise((resolve) => setTimeout(resolve, ms));
}
function snap(i, scaled = true) {
- // very cheap test proof of concept but it works surprisingly well
- var scaleOffset = 0;
- if (scaled) {
- if (scaleFactor % 2 != 0) {
- // odd number, snaps to center of cell, oops
- scaleOffset = (basePixelCount / 2);
- }
+ // very cheap test proof of concept but it works surprisingly well
+ var scaleOffset = 0;
+ if (scaled) {
+ if (scaleFactor % 2 != 0) {
+ // odd number, snaps to center of cell, oops
+ scaleOffset = basePixelCount / 2;
}
- var snapOffset = i % basePixelCount - scaleOffset;
- if (snapOffset == 0) {
- return snapOffset;
- }
- return -snapOffset;
+ }
+ var snapOffset = (i % basePixelCount) - scaleOffset;
+ if (snapOffset == 0) {
+ return snapOffset;
+ }
+ return -snapOffset;
}
-
function mouseMove(evt) {
- const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane
- const canvasOffsetX = rect.left;
- const canvasOffsetY = rect.top;
- heldButton = evt.buttons;
- mouseXInfo.innerText = mouseX = evt.clientX;
- mouseYInfo.innerText = mouseY = evt.clientY;
- canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left);
- canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top);
- snapXInfo.innerText = canvasX + snap(canvasX);
- snapYInfo.innerText = canvasY + snap(canvasY);
- heldButtonInfo.innerText = heldButton;
- ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor
- if (placingArbitraryImage) {
- // ugh refactor so this isn't duplicated between arbitrary image and dream reticle modes
- snapOffsetX = 0;
- snapOffsetY = 0;
- if (snapToGrid) {
- snapOffsetX = snap(canvasX, false);
- snapOffsetY = snap(canvasY, false);
- }
- finalX = snapOffsetX + canvasX;
- finalY = snapOffsetY + canvasY;
- ovCtx.drawImage(arbitraryImage, finalX, finalY);
- } else if (!paintMode) {
- // draw targeting square reticle thingy cursor
- ovCtx.strokeStyle = "#00000077";
- snapOffsetX = 0;
- snapOffsetY = 0;
- if (snapToGrid) {
- snapOffsetX = snap(canvasX);
- snapOffsetY = snap(canvasY);
- }
- finalX = snapOffsetX + canvasX;
- finalY = snapOffsetY + canvasY;
- ovCtx.strokeRect(parseInt(finalX - ((basePixelCount * scaleFactor) / 2)), parseInt(finalY - ((basePixelCount * scaleFactor) / 2)), basePixelCount * scaleFactor, basePixelCount * scaleFactor); //origin is middle of the frame
- } else {
- // draw big translucent red blob cursor
- ovCtx.beginPath();
- ovCtx.arc(canvasX, canvasY, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
- ovCtx.fillStyle = "#FF6A6A50";
- ovCtx.fill();
- // in case i'm trying to draw
- mouseX = parseInt(evt.clientX - canvasOffsetX);
- mouseY = parseInt(evt.clientY - canvasOffsetY);
- if (clicked) {
- // i'm trying to draw, please draw :(
- maskPaintCtx.globalCompositeOperation = 'source-over';
- maskPaintCtx.strokeStyle = "#FF6A6A10";
- maskPaintCtx.lineWidth = 8 * scaleFactor;
- maskPaintCtx.beginPath();
- maskPaintCtx.moveTo(prevMouseX, prevMouseY);
- maskPaintCtx.lineTo(mouseX, mouseY);
- maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
- maskPaintCtx.stroke();
- }
- // Erase mask if right button is held
- // no reason to have to tick a checkbox for this, more intuitive for both erases (mask and actual images) to just work on right click and inform the user about it
- if (evt.buttons == 2) {
- maskPaintCtx.globalCompositeOperation = 'destination-out';
- maskPaintCtx.beginPath();
- maskPaintCtx.strokeStyle = "#FFFFFFFF";
- maskPaintCtx.lineWidth = 8 * scaleFactor;
- maskPaintCtx.moveTo(prevMouseX, prevMouseY);
- maskPaintCtx.lineTo(mouseX, mouseY);
- maskPaintCtx.lineJoin = maskPaintCtx.lineCap = 'round';
- maskPaintCtx.stroke();
-
- }
- prevMouseX = mouseX;
- prevMouseY = mouseY;
+ const rect = ovCanvas.getBoundingClientRect(); // not-quite pixel offset was driving me insane
+ const canvasOffsetX = rect.left;
+ const canvasOffsetY = rect.top;
+ heldButton = evt.buttons;
+ mouseXInfo.innerText = mouseX = evt.clientX;
+ mouseYInfo.innerText = mouseY = evt.clientY;
+ canvasXInfo.innerText = canvasX = parseInt(evt.clientX - rect.left);
+ canvasYInfo.innerText = canvasY = parseInt(evt.clientY - rect.top);
+ snapXInfo.innerText = canvasX + snap(canvasX);
+ snapYInfo.innerText = canvasY + snap(canvasY);
+ heldButtonInfo.innerText = heldButton;
+ ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); // clear out the previous mouse cursor
+ if (placingArbitraryImage) {
+ // ugh refactor so this isn't duplicated between arbitrary image and dream reticle modes
+ snapOffsetX = 0;
+ snapOffsetY = 0;
+ if (snapToGrid) {
+ snapOffsetX = snap(canvasX, false);
+ snapOffsetY = snap(canvasY, false);
}
+ finalX = snapOffsetX + canvasX;
+ finalY = snapOffsetY + canvasY;
+ ovCtx.drawImage(arbitraryImage, finalX, finalY);
+ } else if (!paintMode) {
+ // draw targeting square reticle thingy cursor
+ ovCtx.strokeStyle = "#00000077";
+ snapOffsetX = 0;
+ snapOffsetY = 0;
+ if (snapToGrid) {
+ snapOffsetX = snap(canvasX);
+ snapOffsetY = snap(canvasY);
+ }
+ finalX = snapOffsetX + canvasX;
+ finalY = snapOffsetY + canvasY;
+ ovCtx.strokeRect(
+ parseInt(finalX - (basePixelCount * scaleFactor) / 2),
+ parseInt(finalY - (basePixelCount * scaleFactor) / 2),
+ basePixelCount * scaleFactor,
+ basePixelCount * scaleFactor
+ ); //origin is middle of the frame
+ } else {
+ // draw big translucent red blob cursor
+ ovCtx.beginPath();
+ ovCtx.arc(canvasX, canvasY, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
+ ovCtx.fillStyle = "#FF6A6A50";
+ ovCtx.fill();
+ // in case i'm trying to draw
+ mouseX = parseInt(evt.clientX - canvasOffsetX);
+ mouseY = parseInt(evt.clientY - canvasOffsetY);
+ if (clicked) {
+ // i'm trying to draw, please draw :(
+ maskPaintCtx.globalCompositeOperation = "source-over";
+ maskPaintCtx.strokeStyle = "#FF6A6A10";
+ maskPaintCtx.lineWidth = 8 * scaleFactor;
+ maskPaintCtx.beginPath();
+ maskPaintCtx.moveTo(prevMouseX, prevMouseY);
+ maskPaintCtx.lineTo(mouseX, mouseY);
+ maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
+ maskPaintCtx.stroke();
+ }
+ // Erase mask if right button is held
+ // no reason to have to tick a checkbox for this, more intuitive for both erases (mask and actual images) to just work on right click and inform the user about it
+ if (evt.buttons == 2) {
+ maskPaintCtx.globalCompositeOperation = "destination-out";
+ maskPaintCtx.beginPath();
+ maskPaintCtx.strokeStyle = "#FFFFFFFF";
+ maskPaintCtx.lineWidth = 8 * scaleFactor;
+ maskPaintCtx.moveTo(prevMouseX, prevMouseY);
+ maskPaintCtx.lineTo(mouseX, mouseY);
+ maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
+ maskPaintCtx.stroke();
+ }
+ prevMouseX = mouseX;
+ prevMouseY = mouseY;
+ }
}
function mouseDown(evt) {
- const rect = ovCanvas.getBoundingClientRect()
- var oddOffset = 0;
- if (scaleFactor % 2 != 0) {
- oddOffset = basePixelCount / 2;
+ const rect = ovCanvas.getBoundingClientRect();
+ var oddOffset = 0;
+ if (scaleFactor % 2 != 0) {
+ oddOffset = basePixelCount / 2;
+ }
+ if (evt.button == 0) {
+ // left click
+ if (placingArbitraryImage) {
+ var nextBox = {};
+ nextBox.x = evt.offsetX;
+ nextBox.y = evt.offsetY;
+ nextBox.w = arbitraryImageData.width;
+ nextBox.h = arbitraryImageData.height;
+ dropTargets.push(nextBox);
+ } else if (paintMode) {
+ //const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane
+ const canvasOffsetX = rect.left;
+ const canvasOffsetY = rect.top;
+ prevMouseX = mouseX = evt.clientX - canvasOffsetX;
+ prevMouseY = mouseY = evt.clientY - canvasOffsetY;
+ clicked = true;
+ } else {
+ //const rect = ovCanvas.getBoundingClientRect()
+ var nextBox = {};
+ nextBox.x =
+ evt.clientX -
+ (basePixelCount * scaleFactor) / 2 -
+ rect.left +
+ oddOffset; //origin is middle of the frame
+ nextBox.y =
+ evt.clientY - (basePixelCount * scaleFactor) / 2 - rect.top + oddOffset; //TODO make a way to set the origin to numpad dirs?
+ nextBox.w = basePixelCount * scaleFactor;
+ nextBox.h = basePixelCount * scaleFactor;
+ drawTargets.push(nextBox);
}
- if (evt.button == 0) { // left click
- if (placingArbitraryImage) {
- var nextBox = {};
- nextBox.x = evt.offsetX;
- nextBox.y = evt.offsetY;
- nextBox.w = arbitraryImageData.width;
- nextBox.h = arbitraryImageData.height;
- dropTargets.push(nextBox);
- } else if (paintMode) {
- //const rect = ovCanvas.getBoundingClientRect() // not-quite pixel offset was driving me insane
- const canvasOffsetX = rect.left;
- const canvasOffsetY = rect.top;
- prevMouseX = mouseX = evt.clientX - canvasOffsetX;
- prevMouseY = mouseY = evt.clientY - canvasOffsetY;
- clicked = true;
- } else {
- //const rect = ovCanvas.getBoundingClientRect()
- var nextBox = {};
- nextBox.x = evt.clientX - ((basePixelCount * scaleFactor) / 2) - rect.left + oddOffset; //origin is middle of the frame
- nextBox.y = evt.clientY - ((basePixelCount * scaleFactor) / 2) - rect.top + oddOffset; //TODO make a way to set the origin to numpad dirs?
- nextBox.w = basePixelCount * scaleFactor;
- nextBox.h = basePixelCount * scaleFactor;
- drawTargets.push(nextBox);
- }
- } else if (evt.button == 2) {
- if (enableErasing && !paintMode) { // right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
- ctx = imgCanvas.getContext('2d');
- if (snapToGrid) {
- ctx.clearRect(canvasX + snap(canvasX) - ((basePixelCount * scaleFactor) / 2), canvasY + snap(canvasY) - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
- } else {
- ctx.clearRect(canvasX - ((basePixelCount * scaleFactor) / 2), canvasY - ((basePixelCount * scaleFactor) / 2), basePixelCount * scaleFactor, basePixelCount * scaleFactor);
- }
- }
+ } else if (evt.button == 2) {
+ if (enableErasing && !paintMode) {
+ // right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
+ ctx = imgCanvas.getContext("2d");
+ if (snapToGrid) {
+ ctx.clearRect(
+ canvasX + snap(canvasX) - (basePixelCount * scaleFactor) / 2,
+ canvasY + snap(canvasY) - (basePixelCount * scaleFactor) / 2,
+ basePixelCount * scaleFactor,
+ basePixelCount * scaleFactor
+ );
+ } else {
+ ctx.clearRect(
+ canvasX - (basePixelCount * scaleFactor) / 2,
+ canvasY - (basePixelCount * scaleFactor) / 2,
+ basePixelCount * scaleFactor,
+ basePixelCount * scaleFactor
+ );
+ }
}
+ }
}
function mouseUp(evt) {
- if (evt.button == 0) { // left click
- if (placingArbitraryImage) {
- // jeez i REALLY need to refactor tons of this to not be duplicated all over, that's definitely my next chore after figuring out that razza frazza overmask fade
- var target = dropTargets[dropTargets.length - 1]; //get the last one... why am i storing all of them?
- snapOffsetX = 0;
- snapOffsetY = 0;
- if (snapToGrid) {
- snapOffsetX = snap(target.x, false);
- snapOffsetY = snap(target.y, false);
- }
- finalX = snapOffsetX + target.x;
- finalY = snapOffsetY + target.y;
+ if (evt.button == 0) {
+ // left click
+ if (placingArbitraryImage) {
+ // jeez i REALLY need to refactor tons of this to not be duplicated all over, that's definitely my next chore after figuring out that razza frazza overmask fade
+ var target = dropTargets[dropTargets.length - 1]; //get the last one... why am i storing all of them?
+ snapOffsetX = 0;
+ snapOffsetY = 0;
+ if (snapToGrid) {
+ snapOffsetX = snap(target.x, false);
+ snapOffsetY = snap(target.y, false);
+ }
+ finalX = snapOffsetX + target.x;
+ finalY = snapOffsetY + target.y;
- drawThis.x = finalX;
- drawThis.y = finalY;
- drawThis.w = target.w;
- drawThis.h = target.h;
- drawIt = drawThis; // i still think this is really stupid and redundant and unnecessary and redundant
- drop(drawIt);
- } else if (paintMode) {
- clicked = false;
- return;
- } else {
- if (!blockNewImages) {
- //TODO seriously, refactor this
- blockNewImages = true;
- clearTargetMask();
- tgtCtx.strokeStyle = "#55000077";
- var drawIt = {}; //why am i doing this????
- var target = drawTargets[drawTargets.length - 1]; //get the last one... why am i storing all of them?
- var oddOffset = 0;
- if (scaleFactor % 2 != 0) {
- oddOffset = basePixelCount / 2;
- }
- snapOffsetX = 0;
- snapOffsetY = 0;
- if (snapToGrid) {
- snapOffsetX = snap(target.x);
- snapOffsetY = snap(target.y);
- }
- finalX = snapOffsetX + target.x - oddOffset;
- finalY = snapOffsetY + target.y - oddOffset;
-
- drawThis.x = finalX;
- drawThis.y = finalY;
- drawThis.w = target.w;
- drawThis.h = target.h;
- tgtCtx.strokeRect(finalX, finalY, target.w, target.h);
- drawIt = drawThis; //TODO this is WRONG but also explicitly only draws the last image ... i think
- //check if there's image data already there
- // console.log(downX + ":" + downY + " :: " + this.isCanvasBlank(downX, downY));
- if (!isCanvasBlank(drawIt.x, drawIt.y, drawIt.w, drawIt.h, imgCanvas)) {
- // image exists, set up for img2img
- var mainCanvasCtx = document.getElementById("canvas").getContext("2d");
- const imgChunk = mainCanvasCtx.getImageData(drawIt.x, drawIt.y, drawIt.w, drawIt.h); // imagedata object of the image being outpainted
- const imgChunkData = imgChunk.data; // imagedata.data object, a big inconvenient uint8clampedarray
- // these are the 3 mask monitors on the bottom of the page
- var initImgCanvas = document.getElementById("initImgCanvasMonitor");
- var overMaskCanvas = document.getElementById("overMaskCanvasMonitor");
- overMaskCanvas.width = initImgCanvas.width = target.w; //maskCanvas.width = target.w;
- overMaskCanvas.height = initImgCanvas.height = target.h; //maskCanvas.height = target.h;
- var initImgCanvasCtx = initImgCanvas.getContext("2d");
- var overMaskCanvasCtx = overMaskCanvas.getContext("2d");
- // get blank pixels to use as mask
- const initImgData = mainCanvasCtx.createImageData(drawIt.w, drawIt.h);
- let overMaskImgData = overMaskCanvasCtx.createImageData(drawIt.w, drawIt.h);
- // cover entire masks in black before adding masked areas
-
- for (let i = 0; i < imgChunkData.length; i += 4) {
- // l->r, top->bottom, R G B A pixel values in a big ol array
- // make a simple mask
- if (imgChunkData[i + 3] == 0) { // rgba pixel values, 4th one is alpha, if it's 0 there's "nothing there" in the image display canvas and its time to outpaint
- overMaskImgData.data[i] = 255; // white mask gets painted over
- overMaskImgData.data[i + 1] = 255;
- overMaskImgData.data[i + 2] = 255;
- overMaskImgData.data[i + 3] = 255;
-
- initImgData.data[i] = 0; // null area on initial image becomes opaque black pixels
- initImgData.data[i + 1] = 0;
- initImgData.data[i + 2] = 0;
- initImgData.data[i + 3] = 255;
- } else { // leave these pixels alone
- overMaskImgData.data[i] = 0; // black mask gets ignored for in/outpainting
- overMaskImgData.data[i + 1] = 0;
- overMaskImgData.data[i + 2] = 0;
- overMaskImgData.data[i + 3] = 255; // but it still needs an opaque alpha channel
-
- initImgData.data[i] = imgChunkData[i]; // put the original picture back in the painted area
- initImgData.data[i + 1] = imgChunkData[i + 1];
- initImgData.data[i + 2] = imgChunkData[i + 2];
- initImgData.data[i + 3] = imgChunkData[i + 3]; //it's still RGBA so we can handily do this in nice chunks'o'4
- }
- }
- // make a list of all the white pixels to expand so we don't waste time on non-mask pixels
- let pix = { x: [], y: [], index: [] };
- var x, y, index;
- for (y = 0; y < drawIt.h; y++) {
- for (x = 0; x < drawIt.w; x++) {
- index = ((y * drawIt.w + x) * 4);
- if (overMaskImgData.data[index] > 0) {
- pix.x.push(x);
- pix.y.push(y);
- pix.index.push(index);
- }
- }
- }
-
- // https://stackoverflow.com/a/30204783 ????
- overMaskCanvasCtx.fillStyle = "black";
- overMaskCanvasCtx.fillRect(0, 0, drawIt.w, drawIt.h); // fill with black instead of null to start
- for (i = 0; i < overMaskImgData.data.length; i += 4) {
- if (overMaskImgData.data[i] == 255) { // white pixel?
- // just blotch all over the thing
- var rando = Math.floor(Math.random() * overMaskPx);
- overMaskCanvasCtx.beginPath();
- overMaskCanvasCtx.arc(((i / 4) % overMaskCanvas.width), (Math.floor((i / 4) / overMaskCanvas.width)), (4 * scaleFactor) + rando, 0, 2 * Math.PI, true);
- overMaskCanvasCtx.fillStyle = "#FFFFFFFF";
- overMaskCanvasCtx.fill();
- }
- }
- overMaskImgData = overMaskCanvasCtx.getImageData(0, 0, overMaskCanvas.width, overMaskCanvas.height);
- overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0);
- // also check for painted masks in region, add them as white pixels to mask canvas
- const maskChunk = maskPaintCtx.getImageData(drawIt.x, drawIt.y, drawIt.w, drawIt.h);
- const maskChunkData = maskChunk.data;
- for (let i = 0; i < maskChunkData.length; i += 4) {
- if (maskChunkData[i + 3] != 0) {
- overMaskImgData.data[i] = 255;
- overMaskImgData.data[i + 1] = 255;
- overMaskImgData.data[i + 2] = 255;
- overMaskImgData.data[i + 3] = 255;
- }
- }
- // backup any painted masks ingested then them, replacable if user doesn't like resultant image
- var clearArea = maskPaintCtx.createImageData(drawIt.w, drawIt.h);
- backupMaskChunk = maskChunk;
- backupMaskX = drawIt.x;
- backupMaskY = drawIt.y;
-
- var clearD = clearArea.data;
- for (let i = 0; i < clearD.length; i++) {
- clearD[i] = 0; // just null it all out
- }
- maskPaintCtx.putImageData(clearArea, drawIt.x, drawIt.y);
- // mask monitors
- overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0); // :pray:
- var overMaskBase64 = overMaskCanvas.toDataURL();
- initImgCanvasCtx.putImageData(initImgData, 0, 0);
- var initImgBase64 = initImgCanvas.toDataURL();
- // anyway all that to say NOW let's run img2img
- endpoint = "img2img";
- stableDiffusionData.mask = overMaskBase64;
- stableDiffusionData.init_images = [initImgBase64];
- // slightly more involved than txt2img
- } else {
- // time to run txt2img
- endpoint = "txt2img";
- // easy enough
- }
- stableDiffusionData.prompt = document.getElementById("prompt").value;
- stableDiffusionData.negative_prompt = document.getElementById("negPrompt").value;
- stableDiffusionData.width = drawIt.w;
- stableDiffusionData.height = drawIt.h;
- stableDiffusionData.firstphase_height = (drawIt.h / 2);
- stableDiffusionData.firstphase_width = (drawIt.w / 2);
- dream(drawIt.x, drawIt.y, stableDiffusionData);
- }
+ drawThis.x = finalX;
+ drawThis.y = finalY;
+ drawThis.w = target.w;
+ drawThis.h = target.h;
+ drawIt = drawThis; // i still think this is really stupid and redundant and unnecessary and redundant
+ drop(drawIt);
+ } else if (paintMode) {
+ clicked = false;
+ return;
+ } else {
+ if (!blockNewImages) {
+ //TODO seriously, refactor this
+ blockNewImages = true;
+ clearTargetMask();
+ tgtCtx.strokeStyle = "#55000077";
+ var drawIt = {}; //why am i doing this????
+ var target = drawTargets[drawTargets.length - 1]; //get the last one... why am i storing all of them?
+ var oddOffset = 0;
+ if (scaleFactor % 2 != 0) {
+ oddOffset = basePixelCount / 2;
}
+ snapOffsetX = 0;
+ snapOffsetY = 0;
+ if (snapToGrid) {
+ snapOffsetX = snap(target.x);
+ snapOffsetY = snap(target.y);
+ }
+ finalX = snapOffsetX + target.x - oddOffset;
+ finalY = snapOffsetY + target.y - oddOffset;
+
+ drawThis.x = finalX;
+ drawThis.y = finalY;
+ drawThis.w = target.w;
+ drawThis.h = target.h;
+ tgtCtx.strokeRect(finalX, finalY, target.w, target.h);
+ drawIt = drawThis; //TODO this is WRONG but also explicitly only draws the last image ... i think
+ //check if there's image data already there
+ // console.log(downX + ":" + downY + " :: " + this.isCanvasBlank(downX, downY));
+ if (!isCanvasBlank(drawIt.x, drawIt.y, drawIt.w, drawIt.h, imgCanvas)) {
+ // image exists, set up for img2img
+ var mainCanvasCtx = document
+ .getElementById("canvas")
+ .getContext("2d");
+ const imgChunk = mainCanvasCtx.getImageData(
+ drawIt.x,
+ drawIt.y,
+ drawIt.w,
+ drawIt.h
+ ); // imagedata object of the image being outpainted
+ const imgChunkData = imgChunk.data; // imagedata.data object, a big inconvenient uint8clampedarray
+ // these are the 3 mask monitors on the bottom of the page
+ var initImgCanvas = document.getElementById("initImgCanvasMonitor");
+ var overMaskCanvas = document.getElementById("overMaskCanvasMonitor");
+ overMaskCanvas.width = initImgCanvas.width = target.w; //maskCanvas.width = target.w;
+ overMaskCanvas.height = initImgCanvas.height = target.h; //maskCanvas.height = target.h;
+ var initImgCanvasCtx = initImgCanvas.getContext("2d");
+ var overMaskCanvasCtx = overMaskCanvas.getContext("2d");
+ // get blank pixels to use as mask
+ const initImgData = mainCanvasCtx.createImageData(drawIt.w, drawIt.h);
+ let overMaskImgData = overMaskCanvasCtx.createImageData(
+ drawIt.w,
+ drawIt.h
+ );
+ // cover entire masks in black before adding masked areas
+
+ for (let i = 0; i < imgChunkData.length; i += 4) {
+ // l->r, top->bottom, R G B A pixel values in a big ol array
+ // make a simple mask
+ if (imgChunkData[i + 3] == 0) {
+ // rgba pixel values, 4th one is alpha, if it's 0 there's "nothing there" in the image display canvas and its time to outpaint
+ overMaskImgData.data[i] = 255; // white mask gets painted over
+ overMaskImgData.data[i + 1] = 255;
+ overMaskImgData.data[i + 2] = 255;
+ overMaskImgData.data[i + 3] = 255;
+
+ initImgData.data[i] = 0; // null area on initial image becomes opaque black pixels
+ initImgData.data[i + 1] = 0;
+ initImgData.data[i + 2] = 0;
+ initImgData.data[i + 3] = 255;
+ } else {
+ // leave these pixels alone
+ overMaskImgData.data[i] = 0; // black mask gets ignored for in/outpainting
+ overMaskImgData.data[i + 1] = 0;
+ overMaskImgData.data[i + 2] = 0;
+ overMaskImgData.data[i + 3] = 255; // but it still needs an opaque alpha channel
+
+ initImgData.data[i] = imgChunkData[i]; // put the original picture back in the painted area
+ initImgData.data[i + 1] = imgChunkData[i + 1];
+ initImgData.data[i + 2] = imgChunkData[i + 2];
+ initImgData.data[i + 3] = imgChunkData[i + 3]; //it's still RGBA so we can handily do this in nice chunks'o'4
+ }
+ }
+ // make a list of all the white pixels to expand so we don't waste time on non-mask pixels
+ let pix = {x: [], y: [], index: []};
+ var x, y, index;
+ for (y = 0; y < drawIt.h; y++) {
+ for (x = 0; x < drawIt.w; x++) {
+ index = (y * drawIt.w + x) * 4;
+ if (overMaskImgData.data[index] > 0) {
+ pix.x.push(x);
+ pix.y.push(y);
+ pix.index.push(index);
+ }
+ }
+ }
+
+ // https://stackoverflow.com/a/30204783 ????
+ overMaskCanvasCtx.fillStyle = "black";
+ overMaskCanvasCtx.fillRect(0, 0, drawIt.w, drawIt.h); // fill with black instead of null to start
+ for (i = 0; i < overMaskImgData.data.length; i += 4) {
+ if (overMaskImgData.data[i] == 255) {
+ // white pixel?
+ // just blotch all over the thing
+ var rando = Math.floor(Math.random() * overMaskPx);
+ overMaskCanvasCtx.beginPath();
+ overMaskCanvasCtx.arc(
+ (i / 4) % overMaskCanvas.width,
+ Math.floor(i / 4 / overMaskCanvas.width),
+ 4 * scaleFactor + rando,
+ 0,
+ 2 * Math.PI,
+ true
+ );
+ overMaskCanvasCtx.fillStyle = "#FFFFFFFF";
+ overMaskCanvasCtx.fill();
+ }
+ }
+ overMaskImgData = overMaskCanvasCtx.getImageData(
+ 0,
+ 0,
+ overMaskCanvas.width,
+ overMaskCanvas.height
+ );
+ overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0);
+ // also check for painted masks in region, add them as white pixels to mask canvas
+ const maskChunk = maskPaintCtx.getImageData(
+ drawIt.x,
+ drawIt.y,
+ drawIt.w,
+ drawIt.h
+ );
+ const maskChunkData = maskChunk.data;
+ for (let i = 0; i < maskChunkData.length; i += 4) {
+ if (maskChunkData[i + 3] != 0) {
+ overMaskImgData.data[i] = 255;
+ overMaskImgData.data[i + 1] = 255;
+ overMaskImgData.data[i + 2] = 255;
+ overMaskImgData.data[i + 3] = 255;
+ }
+ }
+ // backup any painted masks ingested then them, replacable if user doesn't like resultant image
+ var clearArea = maskPaintCtx.createImageData(drawIt.w, drawIt.h);
+ backupMaskChunk = maskChunk;
+ backupMaskX = drawIt.x;
+ backupMaskY = drawIt.y;
+
+ var clearD = clearArea.data;
+ for (let i = 0; i < clearD.length; i++) {
+ clearD[i] = 0; // just null it all out
+ }
+ maskPaintCtx.putImageData(clearArea, drawIt.x, drawIt.y);
+ // mask monitors
+ overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0); // :pray:
+ var overMaskBase64 = overMaskCanvas.toDataURL();
+ initImgCanvasCtx.putImageData(initImgData, 0, 0);
+ var initImgBase64 = initImgCanvas.toDataURL();
+ // anyway all that to say NOW let's run img2img
+ endpoint = "img2img";
+ stableDiffusionData.mask = overMaskBase64;
+ stableDiffusionData.init_images = [initImgBase64];
+ // slightly more involved than txt2img
+ } else {
+ // time to run txt2img
+ endpoint = "txt2img";
+ // easy enough
+ }
+ stableDiffusionData.prompt = document.getElementById("prompt").value;
+ stableDiffusionData.negative_prompt =
+ document.getElementById("negPrompt").value;
+ stableDiffusionData.width = drawIt.w;
+ stableDiffusionData.height = drawIt.h;
+ stableDiffusionData.firstphase_height = drawIt.h / 2;
+ stableDiffusionData.firstphase_width = drawIt.w / 2;
+ dream(drawIt.x, drawIt.y, stableDiffusionData);
+ }
}
+ }
}
-const changeScaleFactor = sliderChangeHandlerFactory("scaleFactor", "scaleFactorTxt", "scaleFactor", 8, (k, v) => scaleFactor = v, (k) => scaleFactor);
-const changeSteps = sliderChangeHandlerFactory("steps", "stepsTxt", "steps", 30);
+const changeScaleFactor = sliderChangeHandlerFactory(
+ "scaleFactor",
+ "scaleFactorTxt",
+ "scaleFactor",
+ 8,
+ (k, v) => (scaleFactor = v),
+ (k) => scaleFactor
+);
+const changeSteps = sliderChangeHandlerFactory(
+ "steps",
+ "stepsTxt",
+ "steps",
+ 30
+);
function changePaintMode() {
- paintMode = document.getElementById("cbxPaint").checked;
- clearTargetMask();
- ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
+ paintMode = document.getElementById("cbxPaint").checked;
+ clearTargetMask();
+ ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
}
function changeEnableErasing() {
- // yeah because this is for the image layer
- enableErasing = document.getElementById("cbxEnableErasing").checked;
- localStorage.setItem("enable_erase", enableErasing);
+ // yeah because this is for the image layer
+ enableErasing = document.getElementById("cbxEnableErasing").checked;
+ localStorage.setItem("enable_erase", enableErasing);
}
function changeSampler() {
- stableDiffusionData.sampler_index = document.getElementById("samplerSelect").value;
- localStorage.setItem("sampler", stableDiffusionData.sampler_index);
+ stableDiffusionData.sampler_index =
+ document.getElementById("samplerSelect").value;
+ localStorage.setItem("sampler", stableDiffusionData.sampler_index);
}
-const changeCfgScale = sliderChangeHandlerFactory("cfgScale", "cfgScaleTxt", "cfg_scale", 7.0);
-const changeBatchSize = sliderChangeHandlerFactory("batchSize", "batchSizeText", "batch_size", 2);
-const changeBatchCount = sliderChangeHandlerFactory("batchCount", "batchCountText", "n_iter", 2);
+const changeCfgScale = sliderChangeHandlerFactory(
+ "cfgScale",
+ "cfgScaleTxt",
+ "cfg_scale",
+ 7.0
+);
+const changeBatchSize = sliderChangeHandlerFactory(
+ "batchSize",
+ "batchSizeText",
+ "batch_size",
+ 2
+);
+const changeBatchCount = sliderChangeHandlerFactory(
+ "batchCount",
+ "batchCountText",
+ "n_iter",
+ 2
+);
function changeSnapMode() {
- snapToGrid = document.getElementById("cbxSnap").checked;
+ snapToGrid = document.getElementById("cbxSnap").checked;
}
function changeMaskBlur() {
- stableDiffusionData.mask_blur = document.getElementById("maskBlur").value;
- localStorage.setItem("mask_blur", stableDiffusionData.mask_blur);
+ stableDiffusionData.mask_blur = document.getElementById("maskBlur").value;
+ localStorage.setItem("mask_blur", stableDiffusionData.mask_blur);
}
function changeSeed() {
- stableDiffusionData.seed = document.getElementById("seed").value;
- localStorage.setItem("seed", stableDiffusionData.seed);
+ stableDiffusionData.seed = document.getElementById("seed").value;
+ localStorage.setItem("seed", stableDiffusionData.seed);
}
function changeOverMaskPx() {
- overMaskPx = document.getElementById("overMaskPx").value;
- localStorage.setItem("overmask_px", overMaskPx);
+ overMaskPx = document.getElementById("overMaskPx").value;
+ localStorage.setItem("overmask_px", overMaskPx);
}
function changeHiResFix() {
- stableDiffusionData.enable_hr = Boolean(document.getElementById("cbxHRFix").checked);
- localStorage.setItem("enable_hr", stableDiffusionData.enable_hr);
+ stableDiffusionData.enable_hr = Boolean(
+ document.getElementById("cbxHRFix").checked
+ );
+ localStorage.setItem("enable_hr", stableDiffusionData.enable_hr);
}
function isCanvasBlank(x, y, w, h, specifiedCanvas) {
- var canvas = document.getElementById(specifiedCanvas.id);
- return !canvas.getContext('2d')
- .getImageData(x, y, w, h).data
- .some(channel => channel !== 0);
+ var canvas = document.getElementById(specifiedCanvas.id);
+ return !canvas
+ .getContext("2d")
+ .getImageData(x, y, w, h)
+ .data.some((channel) => channel !== 0);
}
function drawBackground() {
- bgCtx.lineWidth = 1;
- bgCtx.strokeStyle = '#999';
- var gridbox = bgCanvas.getBoundingClientRect();
- for (var i = 0; i < gridbox.width; i += 64) {
- bgCtx.moveTo(i, 0);
- bgCtx.lineTo(i, bgCanvas.height);
- bgCtx.stroke();
- }
- for (var i = 0; i < gridbox.height; i += 64) {
- bgCtx.moveTo(0, i);
- bgCtx.lineTo(gridbox.width, i);
- bgCtx.stroke();
- }
+ bgCtx.lineWidth = 1;
+ bgCtx.strokeStyle = "#999";
+ var gridbox = bgCanvas.getBoundingClientRect();
+ for (var i = 0; i < gridbox.width; i += 64) {
+ bgCtx.moveTo(i, 0);
+ bgCtx.lineTo(i, bgCanvas.height);
+ bgCtx.stroke();
+ }
+ for (var i = 0; i < gridbox.height; i += 64) {
+ bgCtx.moveTo(0, i);
+ bgCtx.lineTo(gridbox.width, i);
+ bgCtx.stroke();
+ }
}
function preloadImage() {
- // gonna legit scream
- document.getElementById("overlayCanvas").onmousemove = null;
- document.getElementById("overlayCanvas").onmousedown = null;
- document.getElementById("overlayCanvas").onmouseup = null;
+ // gonna legit scream
+ document.getElementById("overlayCanvas").onmousemove = null;
+ document.getElementById("overlayCanvas").onmousedown = null;
+ document.getElementById("overlayCanvas").onmouseup = null;
- var file = document.getElementById("preloadImage").files[0];
- var reader = new FileReader();
- reader.onload = function (evt) {
- var imgCanvas = document.createElement("canvas");
- var imgCtx = imgCanvas.getContext("2d");
- arbitraryImage = new Image();
- arbitraryImage.onload = function () {
- blockNewImages = true;
- // now put it into imagedata for canvas fun
- imgCanvas.width = arbitraryImage.width;
- imgCanvas.height = arbitraryImage.height;
- imgCtx.drawImage(arbitraryImage, 0, 0);
- arbitraryImageData = imgCtx.getImageData(0, 0, arbitraryImage.width, arbitraryImage.height); // can't use that to drawImage on a canvas...
- arbitraryImageBitmap = createImageBitmap(arbitraryImageData); // apparently that either... maybe just the raw image?
- arbitraryImageBase64 = imgCanvas.toDataURL();
- placingArbitraryImage = true;
- document.getElementById("overlayCanvas").onmousemove = mouseMove;
- document.getElementById("overlayCanvas").onmousedown = mouseDown;
- document.getElementById("overlayCanvas").onmouseup = mouseUp;
- }
- arbitraryImage.src = evt.target.result;
- }
- reader.readAsDataURL(file);
+ var file = document.getElementById("preloadImage").files[0];
+ var reader = new FileReader();
+ reader.onload = function (evt) {
+ var imgCanvas = document.createElement("canvas");
+ var imgCtx = imgCanvas.getContext("2d");
+ arbitraryImage = new Image();
+ arbitraryImage.onload = function () {
+ blockNewImages = true;
+ // now put it into imagedata for canvas fun
+ imgCanvas.width = arbitraryImage.width;
+ imgCanvas.height = arbitraryImage.height;
+ imgCtx.drawImage(arbitraryImage, 0, 0);
+ arbitraryImageData = imgCtx.getImageData(
+ 0,
+ 0,
+ arbitraryImage.width,
+ arbitraryImage.height
+ ); // can't use that to drawImage on a canvas...
+ arbitraryImageBitmap = createImageBitmap(arbitraryImageData); // apparently that either... maybe just the raw image?
+ arbitraryImageBase64 = imgCanvas.toDataURL();
+ placingArbitraryImage = true;
+ document.getElementById("overlayCanvas").onmousemove = mouseMove;
+ document.getElementById("overlayCanvas").onmousedown = mouseDown;
+ document.getElementById("overlayCanvas").onmouseup = mouseUp;
+ };
+ arbitraryImage.src = evt.target.result;
+ };
+ reader.readAsDataURL(file);
}
function downloadCanvas() {
- var link = document.createElement('a');
- link.download = new Date().toISOString().slice(0, 19).replace('T', ' ').replace(':', ' ') + ' openOutpaint image.png';
- var croppedCanvas = cropCanvas(imgCanvas);
- if (croppedCanvas != null) {
- link.href = croppedCanvas.toDataURL('image/png');
- link.click();
- }
+ var link = document.createElement("a");
+ link.download =
+ new Date().toISOString().slice(0, 19).replace("T", " ").replace(":", " ") +
+ " openOutpaint image.png";
+ var croppedCanvas = cropCanvas(imgCanvas);
+ if (croppedCanvas != null) {
+ link.href = croppedCanvas.toDataURL("image/png");
+ link.click();
+ }
}
function cropCanvas(sourceCanvas) {
- var w = sourceCanvas.width;
- var h = sourceCanvas.height;
- var pix = { x: [], y: [] };
- var imageData = sourceCanvas.getContext('2d').getImageData(0, 0, w, h);
- var x, y, index;
+ var w = sourceCanvas.width;
+ var h = sourceCanvas.height;
+ var pix = {x: [], y: []};
+ var imageData = sourceCanvas.getContext("2d").getImageData(0, 0, w, h);
+ var x, y, index;
- for (y = 0; y < h; y++) {
- for (x = 0; x < w; x++) {
- // lol i need to learn what this part does
- index = (y * w + x) * 4; // OHHH OK this is setting the imagedata.data uint8clampeddataarray index for the specified x/y coords
- //this part i get, this is checking that 4th RGBA byte for opacity
- if (imageData.data[index + 3] > 0) {
- pix.x.push(x);
- pix.y.push(y);
- }
- }
+ for (y = 0; y < h; y++) {
+ for (x = 0; x < w; x++) {
+ // lol i need to learn what this part does
+ index = (y * w + x) * 4; // OHHH OK this is setting the imagedata.data uint8clampeddataarray index for the specified x/y coords
+ //this part i get, this is checking that 4th RGBA byte for opacity
+ if (imageData.data[index + 3] > 0) {
+ pix.x.push(x);
+ pix.y.push(y);
+ }
}
- // ...need to learn what this part does too :badpokerface:
- // is this just determining the boundaries of non-transparent pixel data?
- pix.x.sort(function (a, b) { return a - b });
- pix.y.sort(function (a, b) { return a - b });
- var n = pix.x.length - 1;
- w = pix.x[n] - pix.x[0];
- h = pix.y[n] - pix.y[0];
- // yup sure looks like it
+ }
+ // ...need to learn what this part does too :badpokerface:
+ // is this just determining the boundaries of non-transparent pixel data?
+ pix.x.sort(function (a, b) {
+ return a - b;
+ });
+ pix.y.sort(function (a, b) {
+ return a - b;
+ });
+ var n = pix.x.length - 1;
+ w = pix.x[n] - pix.x[0];
+ h = pix.y[n] - pix.y[0];
+ // yup sure looks like it
- try {
- var cut = sourceCanvas.getContext('2d').getImageData(pix.x[0], pix.y[0], w, h);
- var cutCanvas = document.createElement('canvas');
- cutCanvas.width = w;
- cutCanvas.height = h;
- cutCanvas.getContext('2d').putImageData(cut, 0, 0);
- } catch (ex) {
- // probably empty image
- //TODO confirm edge cases?
- cutCanvas = null;
- }
- return cutCanvas;
+ try {
+ var cut = sourceCanvas
+ .getContext("2d")
+ .getImageData(pix.x[0], pix.y[0], w, h);
+ var cutCanvas = document.createElement("canvas");
+ cutCanvas.width = w;
+ cutCanvas.height = h;
+ cutCanvas.getContext("2d").putImageData(cut, 0, 0);
+ } catch (ex) {
+ // probably empty image
+ //TODO confirm edge cases?
+ cutCanvas = null;
+ }
+ return cutCanvas;
}
function checkIfWebuiIsRunning() {
- var url = document.getElementById("host").value + "/startup-events"
- fetch(url).then(response => {
- if (response.status == 200) {
- console.log("webui is running");
- }
- }).catch(error => {
- alert("WebUI doesnt seem to be running, please start it and try again\nCheck console for additional info\n" + error);
+ var url = document.getElementById("host").value + "/startup-events";
+ fetch(url)
+ .then((response) => {
+ if (response.status == 200) {
+ console.log("webui is running");
+ }
+ })
+ .catch((error) => {
+ alert(
+ "WebUI doesnt seem to be running, please start it and try again\nCheck console for additional info\n" +
+ error
+ );
});
}
function loadSettings() {
- // set default values if not set
- var _sampler = localStorage.getItem("sampler") == null ? "DDIM" : localStorage.getItem("sampler");
- var _mask_blur = localStorage.getItem("mask_blur") == null ? 0 : localStorage.getItem("mask_blur");
- var _seed = localStorage.getItem("seed") == null ? -1 : localStorage.getItem("seed");
- var _enable_hr = Boolean(localStorage.getItem("enable_hr") == (null || "false") ? 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 default values if not set
+ var _sampler =
+ localStorage.getItem("sampler") == null
+ ? "DDIM"
+ : localStorage.getItem("sampler");
+ var _mask_blur =
+ localStorage.getItem("mask_blur") == null
+ ? 0
+ : localStorage.getItem("mask_blur");
+ var _seed =
+ localStorage.getItem("seed") == null ? -1 : localStorage.getItem("seed");
+ var _enable_hr = Boolean(
+ localStorage.getItem("enable_hr") == (null || "false")
+ ? 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("samplerSelect").value = String(_sampler);
- document.getElementById("maskBlur").value = Number(_mask_blur);
- document.getElementById("seed").value = Number(_seed);
- document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
- document.getElementById("cbxEnableErasing").checked = Boolean(_enable_erase);
- document.getElementById("overMaskPx").value = Number(_overmask_px);
+ // set the values into the UI
+ document.getElementById("samplerSelect").value = String(_sampler);
+ document.getElementById("maskBlur").value = Number(_mask_blur);
+ document.getElementById("seed").value = Number(_seed);
+ document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
+ document.getElementById("cbxEnableErasing").checked = Boolean(_enable_erase);
+ document.getElementById("overMaskPx").value = Number(_overmask_px);
}
diff --git a/js/settingsbar.js b/js/settingsbar.js
index e50228e..7b206cc 100644
--- a/js/settingsbar.js
+++ b/js/settingsbar.js
@@ -1,48 +1,48 @@
dragElement(document.getElementById("infoContainer"));
function dragElement(elmnt) {
- var p1 = 0,
- p2 = 0,
- p3 = 0,
- p4 = 0;
- var draggableElements = document.getElementsByClassName('draggable');
- for (var i = 0; i < draggableElements.length; i++) {
- draggableElements[i].onmousedown = dragMouseDown;
- }
+ var p1 = 0,
+ p2 = 0,
+ p3 = 0,
+ p4 = 0;
+ var draggableElements = document.getElementsByClassName("draggable");
+ for (var i = 0; i < draggableElements.length; i++) {
+ draggableElements[i].onmousedown = dragMouseDown;
+ }
- function dragMouseDown(e) {
- e.preventDefault();
- p3 = e.clientX;
- p4 = e.clientY;
- document.onmouseup = closeDragElement;
- document.onmousemove = elementDrag;
- }
+ function dragMouseDown(e) {
+ e.preventDefault();
+ p3 = e.clientX;
+ p4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ document.onmousemove = elementDrag;
+ }
- function elementDrag(e) {
- e.preventDefault();
- p1 = p3 - e.clientX;
- p2 = p4 - e.clientY;
- elmnt.style.top = (elmnt.offsetTop - (p4-e.clientY)) + "px";
- elmnt.style.left = (elmnt.offsetLeft - (p3-e.clientX)) + "px";
- p3 = e.clientX;
- p4 = e.clientY;
- }
+ function elementDrag(e) {
+ e.preventDefault();
+ p1 = p3 - e.clientX;
+ p2 = p4 - e.clientY;
+ elmnt.style.top = elmnt.offsetTop - (p4 - e.clientY) + "px";
+ elmnt.style.left = elmnt.offsetLeft - (p3 - e.clientX) + "px";
+ p3 = e.clientX;
+ p4 = e.clientY;
+ }
- function closeDragElement() {
- document.onmouseup = null;
- document.onmousemove = null;
- }
+ function closeDragElement() {
+ document.onmouseup = null;
+ document.onmousemove = null;
+ }
}
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
- coll[i].addEventListener("click", function () {
- this.classList.toggle("active");
- var content = this.nextElementSibling;
- if (content.style.maxHeight) {
- content.style.maxHeight = null;
- } else {
- content.style.maxHeight = content.scrollHeight + "px";
- }
- });
-}
\ No newline at end of file
+ coll[i].addEventListener("click", function () {
+ this.classList.toggle("active");
+ var content = this.nextElementSibling;
+ if (content.style.maxHeight) {
+ content.style.maxHeight = null;
+ } else {
+ content.style.maxHeight = content.scrollHeight + "px";
+ }
+ });
+}