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

add target info to events and fix mask impl

Browse source 
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-11-20 23:42:07 -03:00
parent d6435abf2e
commit c27da0f51a
3 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -69,9 +69,6 @@
<input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br />
<label for="cbxPaint">Mask mode?</label>
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br />
<!-- Having to tick a box to erase is a bad user experience, same goes for image erasing( cold be remedied by a temp confirm div) -->
<!-- <label for="cbxErase"><s>Erase mask?</s></label>
<input type="checkbox" id="cbxErase" onchange="changeEraseMode()" disabled="disabled"><br /> -->
<label for="cbxHRFix">Auto txt2img HRfix?</label>
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br />

7
js/index.js
View file

@ -109,7 +109,6 @@ const basePixelCount = 64; //64 px - ALWAYS 64 PX
var scaleFactor = 8; //x64 px
var snapToGrid = true;
var paintMode = false;
var eraseMode = false; //TODO this is broken, functionality still exists in code but UI element is just naively disabled
var backupMaskPaintCanvas; //???
var backupMaskPaintCtx; //...? look i am bad at this
var backupMaskChunk = null;
@ -434,7 +433,7 @@ function mouseMove(evt) {
* Mask implementation
*/
mouse.listen.canvas.onmousemove.on((evn) => {
if (paintMode) {
if (paintMode && evn.target.id === 'overlayCanvas') {
// draw big translucent red blob cursor
ovCtx.beginPath();
ovCtx.arc(evn.x, evn.y, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
@ -444,7 +443,7 @@ mouse.listen.canvas.onmousemove.on((evn) => {
});
mouse.listen.canvas.left.onpaint.on((evn) => {
if (paintMode) {
if (paintMode && evn.target.id === 'overlayCanvas') {
maskPaintCtx.globalCompositeOperation = 'source-over';
maskPaintCtx.strokeStyle = '#FF6A6A';
@ -458,7 +457,7 @@ mouse.listen.canvas.left.onpaint.on((evn) => {
});
mouse.listen.canvas.right.onpaint.on((evn) => {
if (paintMode) {
if (paintMode && evn.target.id === 'overlayCanvas') {
maskPaintCtx.globalCompositeOperation = 'destination-out';
maskPaintCtx.strokeStyle = '#FFFFFFFF';

9
js/input.js
View file

@ -97,6 +97,7 @@ window.onmousedown = (evn) => {
// ondclick event
['window', 'canvas', 'world'].forEach((ctx) =>
mouse.listen[ctx][key].ondclick.emit({
target: evn.target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -115,6 +116,7 @@ window.onmousedown = (evn) => {
_drag_start_timeout[key] = setTimeout(() => {
['window', 'canvas', 'world'].forEach((ctx) => {
mouse.listen[ctx][key].ondragstart.emit({
target: evn.target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -134,6 +136,7 @@ window.onmousedown = (evn) => {
// onpaintstart event
mouse.listen[ctx][key].onpaintstart.emit({
target: evn.target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -170,6 +173,7 @@ window.onmouseup = (evn) => {
inputConfig.clickRadius * inputConfig.clickRadius
)
mouse.listen[ctx][key].onclick.emit({
target: evn.target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -178,6 +182,7 @@ window.onmouseup = (evn) => {
// onpaintend event
mouse.listen[ctx][key].onpaintend.emit({
target: evn.target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -187,6 +192,7 @@ window.onmouseup = (evn) => {
// ondragend event
if (mouse[ctx].dragging[key].drag)
mouse.listen[ctx][key].ondragend.emit({
target: evn.target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -232,6 +238,7 @@ window.onmousemove = (evn) => {
['window', 'canvas', 'world'].forEach((ctx) => {
mouse.listen[ctx].onmousemove.emit({
target: evn.target,
px: mouse[ctx].prev.x,
py: mouse[ctx].prev.y,
x: mouse[ctx].pos.x,
@ -242,6 +249,7 @@ window.onmousemove = (evn) => {
// ondrag event
if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag)
mouse.listen[ctx][key].ondrag.emit({
target: evn.target,
px: mouse[ctx].prev.x,
py: mouse[ctx].prev.y,
x: mouse[ctx].pos.x,
@ -252,6 +260,7 @@ window.onmousemove = (evn) => {
// onpaint event
if (mouse[ctx].dragging[key])
mouse.listen[ctx][key].onpaint.emit({
target: evn.target,
px: mouse[ctx].prev.x,
py: mouse[ctx].prev.y,
x: mouse[ctx].pos.x,