stable.

Author: odeadglaz

src/components/ColorStop/hooks/useStopDragging.js

@@ -36,7 +36,7 @@ const useStopDragging = ({ limits, stop, initialPos, colorStopRef, onPosChange,
 		onPosChange({ id, offset: limitedPos });
 	};
 
-	const [handleMouseDown, activate] = useDragging({
+	const [drag] = useDragging({
 		onDragStart: ({ clientX }) => {
 			setPosStart(clientX);
 
@@ -46,13 +46,8 @@ const useStopDragging = ({ limits, stop, initialPos, colorStopRef, onPosChange,
 		onDragEnd: () => onDragEnd(stop.id)
 	});
 
-	useEffect(() => {
-		const { pointX } = stop;
-		pointX && activate({ clientX: pointX });
-	}, []);
-
 	return [
-		handleMouseDown,
+		drag,
 	];
 };
 

src/components/hooks/useDragging/index.js

@@ -2,9 +2,12 @@ import { useState, useEffect } from 'react';
 import { noop } from '../../../lib';
 import { TOUCH_START_EVENT } from './constants';
 
-const DRAG_HANLDERS = {
+const DRAG_HANDLERS = {
 	MOUSE: {
-		stop: (e) => e.preventDefault() && e.stopPropagation(),
+		stop: (e) => {
+			e.preventDefault();
+		    e.stopPropagation();
+		},
 		coordinates: ({ clientX, clientY }) => ({ clientX, clientY }),
 		dragEvent: { name: 'mousemove' },
 		dragEndEvent: { name: 'mouseup' }
@@ -13,7 +16,7 @@ const DRAG_HANLDERS = {
 		stop: noop,
 		coordinates: (e) => {
 			const [touch] = e.touches;
-			return { clientX: touch.pageX, clientY: touch.pageY };
+			return { clientX: touch.clientX, clientY: touch.clientY };
 		},
 		dragEvent: { name: 'touchmove', options: { cancelable: true, passive: true } },
 		dragEndEvent: { name: 'touchend' }
@@ -24,24 +27,21 @@ const isTouch = (e) => e.type === TOUCH_START_EVENT;
 
 const useDragging = ({ onDragStart = noop, onDrag, onDragEnd = noop }) => {
 	const [context, setContext] = useState({});
-	const [handler, setHandler] = useState();
 	const [dragging, setDragging] = useState(false);
 
 	const handleMouseDown = (e) => {
-		const handler = isTouch(e) ? DRAG_HANLDERS.TOUCH : DRAG_HANLDERS.MOUSE;
-		console.log('Drag start', handler);
+		const handler = isTouch(e) ? DRAG_HANDLERS.TOUCH : DRAG_HANDLERS.MOUSE;
+
 		handler.stop(e);
 
 		if (!e.button) activate(e, handler);
 	};
 
 	const activate = (e, handler) => {
 		setDragging(true);
-		handler && setHandler(handler);
-
-		const coordinates = handler ? handler.coordinates(e) : e;
+		context.handler = handler;
 
-		onDragStart(coordinates);
+		onDragStart(handler.coordinates(e));
 	};
 
 	const deactivate = () => {
@@ -52,18 +52,19 @@ const useDragging = ({ onDragStart = noop, onDrag, onDragEnd = noop }) => {
 	};
 
 	const handleDrag = (e) => {
+		const { handler } = context;
 		if (!dragging) return;
 
 		context.change = onDrag(handler.coordinates(e));
 	};
 
 	useEffect(() => {
+		const { handler } = context;
 		if (!handler) return;
 
 		const { dragEvent, dragEndEvent } = handler;
 
 		if (dragging) {
-			console.log('Bindiing:', handler)
 			document.addEventListener(dragEvent.name, handleDrag, dragEndEvent.options);
 			document.addEventListener(dragEndEvent.name, deactivate);
 		}
@@ -72,7 +73,7 @@ const useDragging = ({ onDragStart = noop, onDrag, onDragEnd = noop }) => {
 			document.removeEventListener(dragEvent.name, handleDrag);
 			document.removeEventListener(dragEndEvent.name, deactivate);
 		};
-	}, [dragging, handler]);
+	}, [dragging]);
 
 	return [
 		handleMouseDown,