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

prettier!

Browse source
This commit is contained in:
tim h 2022-11-20 15:39:24 -06:00
parent 32206ff6ee
commit 327e90c88c
4 changed files with 920 additions and 776 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
.prettierrc.json Normal file
View file

@ -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
}

217
js/commands.js
View file

@ -2,131 +2,124 @@
* Command pattern to allow for editing history * Command pattern to allow for editing history
*/ */
const commands = { const commands = {
current: -1, current: -1,
history: [], history: [],
undo(n = 1) { undo(n = 1) {
for (var i = 0; i < n && this.current > -1; i++) { for (var i = 0; i < n && this.current > -1; i++) {
this.history[this.current--].undo(); this.history[this.current--].undo();
} }
}, },
redo(n = 1) { redo(n = 1) {
for (var i = 0; i < n && this.current + 1 < this.history.length; i++) { for (var i = 0; i < n && this.current + 1 < this.history.length; i++) {
this.history[++this.current].redo(); this.history[++this.current].redo();
} }
}, },
/** /**
* These are basic commands that can be done/undone * These are basic commands that can be done/undone
* *
* They must contain a 'run' method that performs the action the first time, * 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 * 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 * action again, but without requiring parameters. 'redo' is by default the
* same as 'run'. * same as 'run'.
* *
* The 'run' and 'redo' functions will receive a 'options' parameter which will be * The 'run' and 'redo' functions will receive a 'options' parameter which will be
* forwarded directly to the operation, and a 'state' parameter that * forwarded directly to the operation, and a 'state' parameter that
* can be used to store state for undoing things. * can be used to store state for undoing things.
* *
* The 'state' object will be passed to the 'undo' function as well. * The 'state' object will be passed to the 'undo' function as well.
*/ */
createCommand(name, run, undo, redo = run) { createCommand(name, run, undo, redo = run) {
const command = function runWrapper(options) { const command = function runWrapper(options) {
// Create copy of options and state object // Create copy of options and state object
const copy = {}; const copy = {};
Object.assign(copy, options); Object.assign(copy, options);
const state = {}; const state = {};
// Attempt to run command // Attempt to run command
try { try {
run(copy, state); run(copy, state);
} catch (e) { } catch (e) {
console.warn( console.warn(`Error while running command '${name}' with options:`);
`Error while running command '${name}' with options:` console.warn(copy);
); console.warn(e);
console.warn(copy); return;
console.warn(e); }
return;
}
const undoWrapper = () => { const undoWrapper = () => {
console.debug(`Undoing ${name}, currently ${commands.current}`); console.debug(`Undoing ${name}, currently ${commands.current}`);
undo(state); undo(state);
}; };
const redoWrapper = () => { const redoWrapper = () => {
console.debug(`Redoing ${name}, currently ${commands.current}`); console.debug(`Redoing ${name}, currently ${commands.current}`);
redo(copy, state); redo(copy, state);
}; };
// Add to history // Add to history
if (commands.history.length > commands.current + 1) if (commands.history.length > commands.current + 1)
commands.history.splice(commands.current + 1); commands.history.splice(commands.current + 1);
commands.history.push({ undo: undoWrapper, redo: redoWrapper }); commands.history.push({undo: undoWrapper, redo: redoWrapper});
commands.current++; commands.current++;
}; };
this.types[name] = command; this.types[name] = command;
return command; return command;
}, },
runCommand(name, options) { runCommand(name, options) {
this.types[name](options); this.types[name](options);
}, },
types: {}, types: {},
}; };
/** /**
* Draw Image Command, used to draw a Image to a context * Draw Image Command, used to draw a Image to a context
*/ */
commands.createCommand( commands.createCommand(
"drawImage", "drawImage",
(options, state) => { (options, state) => {
if ( if (
!options || !options ||
options.image === undefined || options.image === undefined ||
options.x === undefined || options.x === undefined ||
options.y === undefined options.y === undefined
) )
throw "Command drawImage requires options in the format: {image, x, y, ctx?}"; throw "Command drawImage requires options in the format: {image, x, y, ctx?}";
// Check if we have state // Check if we have state
if (!state.context) { if (!state.context) {
const context = options.ctx || imgCtx; const context = options.ctx || imgCtx;
state.context = context; state.context = context;
// Saving what was in the canvas before the command // Saving what was in the canvas before the command
const imgData = context.getImageData( const imgData = context.getImageData(
options.x, options.x,
options.y, options.y,
options.image.width, options.image.width,
options.image.height options.image.height
); );
state.box = { state.box = {
x: options.x, x: options.x,
y: options.y, y: options.y,
w: options.image.width, w: options.image.width,
h: options.image.height, h: options.image.height,
}; };
// Create Image // Create Image
const cutout = document.createElement("canvas"); const cutout = document.createElement("canvas");
cutout.width = state.box.w; cutout.width = state.box.w;
cutout.height = state.box.h; cutout.height = state.box.h;
cutout.getContext("2d").putImageData(imgData, 0, 0); cutout.getContext("2d").putImageData(imgData, 0, 0);
state.original = new Image(); state.original = new Image();
state.original.src = cutout.toDataURL(); 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);
} }
// 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);
}
); );

1382
js/index.js
View file

File diff suppressed because it is too large Load diff

74
js/settingsbar.js
View file

@ -1,48 +1,48 @@
dragElement(document.getElementById("infoContainer")); dragElement(document.getElementById("infoContainer"));
function dragElement(elmnt) { function dragElement(elmnt) {
var p1 = 0, var p1 = 0,
p2 = 0, p2 = 0,
p3 = 0, p3 = 0,
p4 = 0; p4 = 0;
var draggableElements = document.getElementsByClassName('draggable'); var draggableElements = document.getElementsByClassName("draggable");
for (var i = 0; i < draggableElements.length; i++) { for (var i = 0; i < draggableElements.length; i++) {
draggableElements[i].onmousedown = dragMouseDown; draggableElements[i].onmousedown = dragMouseDown;
} }
function dragMouseDown(e) { function dragMouseDown(e) {
e.preventDefault(); e.preventDefault();
p3 = e.clientX; p3 = e.clientX;
p4 = e.clientY; p4 = e.clientY;
document.onmouseup = closeDragElement; document.onmouseup = closeDragElement;
document.onmousemove = elementDrag; document.onmousemove = elementDrag;
} }
function elementDrag(e) { function elementDrag(e) {
e.preventDefault(); e.preventDefault();
p1 = p3 - e.clientX; p1 = p3 - e.clientX;
p2 = p4 - e.clientY; p2 = p4 - e.clientY;
elmnt.style.top = (elmnt.offsetTop - (p4-e.clientY)) + "px"; elmnt.style.top = elmnt.offsetTop - (p4 - e.clientY) + "px";
elmnt.style.left = (elmnt.offsetLeft - (p3-e.clientX)) + "px"; elmnt.style.left = elmnt.offsetLeft - (p3 - e.clientX) + "px";
p3 = e.clientX; p3 = e.clientX;
p4 = e.clientY; p4 = e.clientY;
} }
function closeDragElement() { function closeDragElement() {
document.onmouseup = null; document.onmouseup = null;
document.onmousemove = null; document.onmousemove = null;
} }
} }
var coll = document.getElementsByClassName("collapsible"); var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) { for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () { coll[i].addEventListener("click", function () {
this.classList.toggle("active"); this.classList.toggle("active");
var content = this.nextElementSibling; var content = this.nextElementSibling;
if (content.style.maxHeight) { if (content.style.maxHeight) {
content.style.maxHeight = null; content.style.maxHeight = null;
} else { } else {
content.style.maxHeight = content.scrollHeight + "px"; content.style.maxHeight = content.scrollHeight + "px";
} }
}); });
} }