From 93b611825420f8cd87c61e80a6034ff791620863 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Mon, 21 Nov 2022 08:24:35 -0300
Subject: [PATCH] some simple features to inputjs and menu overhaul

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

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 js/index.js       |  4 ++--
 js/input.js       |  6 +++++-
 js/settingsbar.js | 48 ++++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/js/index.js b/js/index.js
index c939f30..bf8ebc1 100644
--- a/js/index.js
+++ b/js/index.js
@@ -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";
 
diff --git a/js/input.js b/js/input.js
index 6a76c2e..432b93b 100644
--- a/js/input.js
+++ b/js/input.js
@@ -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,
diff --git a/js/settingsbar.js b/js/settingsbar.js
index 84120a3..6a4aec6 100644
--- a/js/settingsbar.js
+++ b/js/settingsbar.js
@@ -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 () {