init.

Author: odeadglaz

src/components/AnglePicker/index.js

@@ -36,7 +36,7 @@ const AnglePicker = ({ angle, setAngle, size = 48, snap = 5 }) => {
 	});
 
 	return (
-		<div className="ap" ref={pickerRef} onMouseDown={drag} style={sizeStyle}>
+		<div className="ap" ref={pickerRef} onMouseDown={drag} onTouchStart={drag} style={sizeStyle}>
 			<span className="apc" style={{ transform: `rotate(${angle}deg)`, height: size }}>
 				<i className="aph"/>
 			</span>

src/components/ColorStop/index.js

@@ -22,7 +22,8 @@ const ColorStop = ({ stop, limits, onPosChange, onDeleteColor, onDragStart = noo
 		<div className={isActive ? 'cs active' : 'cs'}
 			ref={colorStopRef}
 			style={{ left: offset }}
-			onMouseDown={drag}>
+			onMouseDown={drag}
+			onTouchStart={drag}>
 			<div style={{ backgroundColor: color }}/>
 		</div>
 	);

src/components/hooks/useDragging/constants.js

@@ -0,0 +1,5 @@
+/**
+ * The touch start event, used to distinguish touch / mouse actions
+ * @type {String}
+ */
+export const TOUCH_START_EVENT = 'touchstart';

src/components/hooks/useDragging/index.js

@@ -1,21 +1,47 @@
 import { useState, useEffect } from 'react';
 import { noop } from '../../../lib';
+import { TOUCH_START_EVENT } from './constants';
+
+const DRAG_HANLDERS = {
+	MOUSE: {
+		stop: (e) => e.preventDefault() && e.stopPropagation(),
+		coordinates: ({ clientX, clientY }) => ({ clientX, clientY }),
+		dragEvent: { name: 'mousemove' },
+		dragEndEvent: { name: 'mouseup' }
+	},
+	TOUCH: {
+		stop: noop,
+		coordinates: (e) => {
+			const [touch] = e.touches;
+			return { clientX: touch.pageX, clientY: touch.pageY };
+		},
+		dragEvent: { name: 'touchmove', options: { cancelable: true, passive: true } },
+		dragEndEvent: { name: 'touchend' }
+	}
+};
+
+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) => {
-		e.preventDefault();
-		e.stopPropagation();
+		const handler = isTouch(e) ? DRAG_HANLDERS.TOUCH : DRAG_HANLDERS.MOUSE;
+		console.log('Drag start', handler);
+		handler.stop(e);
 
-		if (!e.button) activate(e);
+		if (!e.button) activate(e, handler);
 	};
 
-	const activate = (e) => {
+	const activate = (e, handler) => {
 		setDragging(true);
+		handler && setHandler(handler);
+
+		const coordinates = handler ? handler.coordinates(e) : e;
 
-		onDragStart(e);
+		onDragStart(coordinates);
 	};
 
 	const deactivate = () => {
@@ -28,21 +54,25 @@ const useDragging = ({ onDragStart = noop, onDrag, onDragEnd = noop }) => {
 	const handleDrag = (e) => {
 		if (!dragging) return;
 
-		context.change = onDrag(e);
+		context.change = onDrag(handler.coordinates(e));
 	};
 
 	useEffect(() => {
-		if (dragging) {
+		if (!handler) return;
+
+		const { dragEvent, dragEndEvent } = handler;
 
-			document.addEventListener('mousemove', handleDrag);
-			document.addEventListener('mouseup', deactivate);
+		if (dragging) {
+			console.log('Bindiing:', handler)
+			document.addEventListener(dragEvent.name, handleDrag, dragEndEvent.options);
+			document.addEventListener(dragEndEvent.name, deactivate);
 		}
 
 		return () => {
-			document.removeEventListener('mousemove', handleDrag);
-			document.removeEventListener('mouseup', deactivate);
+			document.removeEventListener(dragEvent.name, handleDrag);
+			document.removeEventListener(dragEndEvent.name, deactivate);
 		};
-	}, [dragging]);
+	}, [dragging, handler]);
 
 	return [
 		handleMouseDown,