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

some simple features to inputjs and menu overhaul

Browse source 
for dragging, add original target to avoid paint intermitence when dragging
windows too fast.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-11-21 08:24:35 -03:00
parent 80c446da3d
commit 93b6118254
3 changed files with 48 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/index.js
View file

@ -461,7 +461,7 @@ mouse.listen.canvas.onmousemove.on((evn) => {
});
mouse.listen.canvas.left.onpaint.on((evn) => {
if (paintMode && evn.target.id === "overlayCanvas") {
if (paintMode && evn.initialTarget.id === "overlayCanvas") {
maskPaintCtx.globalCompositeOperation = "source-over";
maskPaintCtx.strokeStyle = "#FF6A6A";
@ -475,7 +475,7 @@ mouse.listen.canvas.left.onpaint.on((evn) => {
});
mouse.listen.canvas.right.onpaint.on((evn) => {
if (paintMode && evn.target.id === "overlayCanvas") {
if (paintMode && evn.initialTarget.id === "overlayCanvas") {
maskPaintCtx.globalCompositeOperation = "destination-out";
maskPaintCtx.strokeStyle = "#FFFFFFFF";

6
js/input.js
View file

@ -130,7 +130,7 @@ window.onmousedown = (evn) => {
["window", "canvas", "world"].forEach((ctx) => {
mouse.buttons[key] = time;
mouse[ctx].dragging[key] = {};
mouse[ctx].dragging[key] = {target: evn.target};
Object.assign(mouse[ctx].dragging[key], mouse[ctx].pos);
// onpaintstart event
@ -181,6 +181,7 @@ window.onmouseup = (evn) => {
// onpaintend event
mouse.listen[ctx][key].onpaintend.emit({
target: evn.target,
initialTarget: mouse[ctx].dragging[key].target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -191,6 +192,7 @@ window.onmouseup = (evn) => {
if (mouse[ctx].dragging[key].drag)
mouse.listen[ctx][key].ondragend.emit({
target: evn.target,
initialTarget: mouse[ctx].dragging[key].target,
buttonId: evn.button,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
@ -244,6 +246,7 @@ window.onmousemove = (evn) => {
if (mouse[ctx].dragging[key] && mouse[ctx].dragging[key].drag)
mouse.listen[ctx][key].ondrag.emit({
target: evn.target,
initialTarget: mouse[ctx].dragging[key].target,
px: mouse[ctx].prev.x,
py: mouse[ctx].prev.y,
x: mouse[ctx].pos.x,
@ -255,6 +258,7 @@ window.onmousemove = (evn) => {
if (mouse[ctx].dragging[key])
mouse.listen[ctx][key].onpaint.emit({
target: evn.target,
initialTarget: mouse[ctx].dragging[key].target,
px: mouse[ctx].prev.x,
py: mouse[ctx].prev.y,
x: mouse[ctx].pos.x,

48
js/settingsbar.js
View file

@ -1,11 +1,10 @@
dragElement(document.getElementById("infoContainer"));
//dragElement(document.getElementById("infoContainer"));
//dragElement(document.getElementById("historyContainer"));
function dragElement(elmnt) {
var p1 = 0,
p2 = 0,
p3 = 0,
var p3 = 0,
p4 = 0;
var draggableElements = document.getElementsByClassName("draggable");
var draggableElements = elmnt.getElementsByClassName("draggable");
for (var i = 0; i < draggableElements.length; i++) {
draggableElements[i].onmousedown = dragMouseDown;
}
@ -20,8 +19,8 @@ function dragElement(elmnt) {
function elementDrag(e) {
e.preventDefault();
p1 = p3 - e.clientX;
p2 = p4 - e.clientY;
elmnt.style.bottom = null;
elmnt.style.right = null;
elmnt.style.top = elmnt.offsetTop - (p4 - e.clientY) + "px";
elmnt.style.left = elmnt.offsetLeft - (p3 - e.clientX) + "px";
p3 = e.clientX;
@ -34,6 +33,41 @@ function dragElement(elmnt) {
}
}
function makeDraggable(id) {
const element = document.getElementById(id);
const startbb = element.getBoundingClientRect();
let dragging = false;
let offset = {x: 0, y: 0};
element.style.top = startbb.y + "px";
element.style.left = startbb.x + "px";
mouse.listen.window.left.onpaintstart.on((evn) => {
if (
element.contains(evn.target) &&
evn.target.classList.contains("draggable")
) {
const bb = element.getBoundingClientRect();
offset.x = evn.x - bb.x;
offset.y = evn.y - bb.y;
dragging = true;
}
});
mouse.listen.window.left.onpaint.on((evn) => {
if (dragging) {
element.style.top = evn.y - offset.y + "px";
element.style.left = evn.x - offset.x + "px";
}
});
mouse.listen.window.left.onpaintend.on((evn) => {
dragging = false;
});
}
makeDraggable("infoContainer");
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {