From 3c0eed68ce913ed4cc5aa065b73ad1a6a83d4b02 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Wed, 7 Dec 2022 13:31:15 -0300
Subject: [PATCH] fix slider strange behavior when mouse left

also added / to all res references

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 js/lib/ui.js              | 7 +++++--
 js/ui/tool/colorbrush.js  | 2 +-
 js/ui/tool/dream.js       | 6 +++---
 js/ui/tool/interrogate.js | 2 +-
 js/ui/tool/maskbrush.js   | 2 +-
 js/ui/tool/select.js      | 2 +-
 js/ui/tool/stamp.js       | 2 +-
 7 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/js/lib/ui.js b/js/lib/ui.js
index 485f319..0fb0373 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -168,14 +168,17 @@ function createSlider(name, wrapper, options = {}) {
 
 	mouse.listen.window.btn.left.ondrag.on((evn) => {
 		if (evn.initialTarget === overEl) {
-			phantomRange.value = Math.max(
+			const newv = Math.max(
 				options.min,
 				Math.min(
 					options.max,
-					(evn.evn.layerX / wrapper.offsetWidth) * (options.max - options.min) +
+					((evn.evn.clientX - evn.initialTarget.getBoundingClientRect().left) /
+						wrapper.offsetWidth) *
+						(options.max - options.min) +
 						options.min
 				)
 			);
+			phantomRange.value = newv;
 			setValue(parseFloat(phantomRange.value));
 		}
 	});
diff --git a/js/ui/tool/colorbrush.js b/js/ui/tool/colorbrush.js
index 2cbdfd7..dfaa640 100644
--- a/js/ui/tool/colorbrush.js
+++ b/js/ui/tool/colorbrush.js
@@ -37,7 +37,7 @@ const _color_brush_erase_callback = (evn, state, ctx) => {
 
 const colorBrushTool = () =>
 	toolbar.registerTool(
-		"res/icons/brush.svg",
+		"/res/icons/brush.svg",
 		"Color Brush",
 		(state, opt) => {
 			// Draw new cursor immediately
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index e19fecd..5bdb277 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -819,7 +819,7 @@ const _dream_onwheel = (evn, state) => {
  */
 const dreamTool = () =>
 	toolbar.registerTool(
-		"res/icons/image-plus.svg",
+		"/res/icons/image-plus.svg",
 		"Dream",
 		(state, opt) => {
 			// Draw new cursor immediately
@@ -940,7 +940,7 @@ const dreamTool = () =>
 						{
 							min: 0,
 							max: 64,
-							step: 5,
+							step: 4,
 							textStep: 1,
 						}
 					).slider;
@@ -959,7 +959,7 @@ const dreamTool = () =>
 
 const img2imgTool = () =>
 	toolbar.registerTool(
-		"res/icons/image.svg",
+		"/res/icons/image.svg",
 		"Img2Img",
 		(state, opt) => {
 			// Draw new cursor immediately
diff --git a/js/ui/tool/interrogate.js b/js/ui/tool/interrogate.js
index 10c8e98..8425ac9 100644
--- a/js/ui/tool/interrogate.js
+++ b/js/ui/tool/interrogate.js
@@ -1,6 +1,6 @@
 const interrogateTool = () =>
 	toolbar.registerTool(
-		"res/icons/microscope.svg",
+		"/res/icons/microscope.svg",
 		"Interrogate",
 		(state, opt) => {
 			// Draw new cursor immediately
diff --git a/js/ui/tool/maskbrush.js b/js/ui/tool/maskbrush.js
index 90dad73..bf71cfa 100644
--- a/js/ui/tool/maskbrush.js
+++ b/js/ui/tool/maskbrush.js
@@ -61,7 +61,7 @@ const _mask_brush_erase_callback = (evn, state, opacity = 100) => {
 
 const maskBrushTool = () =>
 	toolbar.registerTool(
-		"res/icons/paintbrush.svg",
+		"/res/icons/paintbrush.svg",
 		"Mask Brush",
 		(state, opt) => {
 			// Draw new cursor immediately
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 1ad41fd..e25cdf3 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -1,6 +1,6 @@
 const selectTransformTool = () =>
 	toolbar.registerTool(
-		"res/icons/box-select.svg",
+		"/res/icons/box-select.svg",
 		"Select Image",
 		(state, opt) => {
 			// Draw new cursor immediately
diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js
index faf0611..8cf3bc7 100644
--- a/js/ui/tool/stamp.js
+++ b/js/ui/tool/stamp.js
@@ -1,6 +1,6 @@
 const stampTool = () =>
 	toolbar.registerTool(
-		"res/icons/file-up.svg",
+		"/res/icons/file-up.svg",
 		"Stamp Image",
 		(state, opt) => {
 			state.loaded = true;