Refactoring

src/AppShell.js

@@ -1,5 +1,8 @@
-import React, {useCallback, useLayoutEffect, useMemo, useRef, useReducer} from "react";
-
+import React, {
+	useCallback,
+	useMemo,
+	useReducer,
+} from "react";
 
 import styles from "./AppShell.module.scss";
 
@@ -9,18 +12,17 @@ import AppToolBox from "./components/AppToolBox";
 import DiagramCanvas from "./components/DiagramCanvas";
 
 import reducer from './reducers';
-
 import tools from './data/tools.json';
+
 import {
 	ACTION_UNDO,
 	ACTION_REDO,
 	ACTION_MOVE_CANVAS,
-	ACTION_RECORD_STATE,
 	ACTION_CREATE_MODULE,
 	ACTION_SELECT_MODULE,
 	ACTION_MOVE_MODULE,
 	ACTION_SELECT_PATH,
-	ACTION_SELECT_CONTROL_POINT,
+	ACTION_SELECT_POINT,
 	ACTION_DESELECT_ALL,
 } from "./constraints";
 
@@ -108,8 +110,6 @@ const AppShell = () => {
 
 	const heading = 'Workflow Diagrams - Demo App';
 
-	const canvasRef = useRef(null);
-
 	const [state, dispatch] = useReducer(reducer, initialState);
 
 	const onUndo = useCallback(() => {
@@ -149,21 +149,6 @@ const AppShell = () => {
 		}));
 	}, []);
 
-	const onMoveCanvas = useCallback(({hasMoved, movementX, movementY}) => {
-		if (!hasMoved) {
-			dispatch({
-				type: ACTION_RECORD_STATE,
-			});
-		}
-		dispatch({
-			type: ACTION_MOVE_CANVAS,
-			payload: {
-				movementX,
-				movementY,
-			},
-		});
-	}, []);
-
 	const onCanvasDrop = useCallback((event) => {
 		const data = JSON.parse(event.dataTransfer.getData("data"));
 
@@ -183,14 +168,13 @@ const AppShell = () => {
 			offsetY,
 		} = state;
 
-		// noinspection JSUnresolvedFunction
 		const [{
 			x: canvasX,
 			y: canvasY,
-		}] = canvasRef.current.getClientRects();
+		}] = event.currentTarget.getClientRects();
 
 		dispatch({
-			type: ACTION_RECORD_STATE,
+			type: ACTION_DESELECT_ALL,
 		});
 
 		dispatch({
@@ -203,31 +187,47 @@ const AppShell = () => {
 		});
 	}, [state]);
 
-	const onMoveModule = useCallback(({moduleId, hasMoved, movementX, movementY}) => {
-		if (!hasMoved) {
-			dispatch({
-				type: ACTION_RECORD_STATE,
-			});
-		}
+	const onCanvasMoved = useCallback((event, {movementX, movementY}) => {
 		dispatch({
-			type: ACTION_MOVE_MODULE,
+			type: ACTION_MOVE_CANVAS,
 			payload: {
-				moduleId,
 				movementX,
 				movementY,
 			},
 		});
 	}, []);
 
-	const onSelectModule = useCallback((moduleId) => {
+	const onModuleMoved = useCallback((event, {moduleId, movementX, movementY}) => {
 		dispatch({
-			type: ACTION_SELECT_MODULE,
+			type: ACTION_MOVE_MODULE,
 			payload: {
 				moduleId,
+				movementX,
+				movementY,
 			},
 		});
 	}, []);
 
+	const onModuleMouseDown = useCallback((event, {moduleId}) => {
+		const {
+			selectedIds
+		} = state.modules;
+
+		if (selectedIds.indexOf(moduleId) === -1) {
+			dispatch({
+				type: ACTION_DESELECT_ALL,
+			});
+
+			dispatch({
+				type: ACTION_SELECT_MODULE,
+				payload: {
+					moduleId,
+				},
+			});
+		}
+
+	}, [state]);
+
 	const onConnectPathMouseDown = useCallback((event, {pathId}) => {
 		event.stopPropagation();
 		dispatch({
@@ -241,7 +241,7 @@ const AppShell = () => {
 	const onControlPointMouseDown = useCallback((event, {pointId}) => {
 		event.stopPropagation();
 		dispatch({
-			type: ACTION_SELECT_CONTROL_POINT,
+			type: ACTION_SELECT_POINT,
 			payload: {
 				pointId,
 			},
@@ -319,25 +319,13 @@ const AppShell = () => {
 		};
 	}, [state]);
 
-	useLayoutEffect(() => {
-		const {current: canvas} = canvasRef;
-
-		if (canvas) {
-			const handleClick = (event) => {
-				if (!(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
-					dispatch({
-						type: ACTION_DESELECT_ALL,
-					});
-				}
-			};
-
-			canvas.addEventListener('mousedown', handleClick);
-
-			return () => {
-				canvas.removeEventListener('mousedown', handleClick);
-			};
+	const onCanvasMouseDown = useCallback((event) => {
+		if (!(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)) {
+			dispatch({
+				type: ACTION_DESELECT_ALL,
+			});
 		}
-	}, [canvasRef]);
+	}, []);
 
 	return (
 		<div className={styles.hostNode}>
@@ -356,17 +344,17 @@ const AppShell = () => {
 					moduleMapper={moduleMapper}
 					inputPortMapper={inputPortMapper}
 					outputPortMapper={outputPortMapper}
-					canvasRef={canvasRef}
 					width={state.width}
 					height={state.height}
 					offsetX={state.offsetX}
 					offsetY={state.offsetY}
 					scale={1}
 					dispatch={dispatch}
 					onDrop={onCanvasDrop}
-					onMoveCanvas={onMoveCanvas}
-					onMoveModule={onMoveModule}
-					onSelectModule={onSelectModule}
+					onMoved={onCanvasMoved}
+					onMouseDown={onCanvasMouseDown}
+					onModuleMoved={onModuleMoved}
+					onModuleMouseDown={onModuleMouseDown}
 					onConnectPathMouseDown={onConnectPathMouseDown}
 					onControlPointMouseDown={onControlPointMouseDown}
 				/>

src/commons/UniqueCode/index.js

@@ -1,4 +1,6 @@
-import {getRandomCode} from "../RandomCode";
+import {
+	getRandomCode,
+} from "../RandomCode";
 
 export const getUniqueCode = (codes, size = 8) => {
 	let code = null;

src/components/AppHeader/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+
 import styles from "./index.module.scss";
 
 const AppHeader = (props) => {

src/components/AppToolBar/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+
 import styles from "./index.module.scss";
 
 import {

src/components/AppToolBar/index.module.scss

@@ -17,7 +17,6 @@
 
 		&:last-of-type {
 			.itemIcon {
-				//margin-left: -1px;
 				border-left: none;
 				border-radius: 0 5px 5px 0;
 			}
@@ -60,7 +59,6 @@
 	margin-top: 5px;
 }
 
-
 .item:active {
 	opacity: .6;
 

src/components/AppToolBox/index.js

@@ -1,10 +1,12 @@
 import React from "react";
 
 import styles from "./index.module.scss";
+
 import DiagramToolBoxGroup from "../AppToolBoxGroup";
 import DiagramToolBoxItem from "../AppToolBoxItem";
 
 const DiagramToolBox = (props) => {
+
 	const {
 		onItemDragStart,
 	} = props;

src/components/AppToolBox/index.module.scss

@@ -34,7 +34,6 @@
 	font-weight: normal;
 }
 
-
 .bodyNode {
 	padding: 8px;
 	display: block;

src/components/AppToolBoxGroup/index.module.scss

@@ -20,7 +20,6 @@
 	font-weight: normal;
 }
 
-
 .contentNode {
 	margin: 0;
 	padding: 8px;

src/components/AppToolBoxItem/index.js

@@ -1,4 +1,6 @@
-import React, {useCallback} from "react";
+import React, {
+	useCallback,
+} from "react";
 
 import styles from "./index.module.scss";
 

src/components/DiagramCanvas/index.js

@@ -1,12 +1,16 @@
-import React, {useCallback} from "react";
+import React, {
+	useCallback,
+	useState,
+} from "react";
 
 import styles from "./index.module.scss";
 
-import useMoveAble from "../../hooks/useMoveAble";
 import DiagramModule from "../DiagramModule";
 import DiagramConnectPath from "../DiagramConnectPath";
 import DiagramControlPoint from "../DiagramControlPoint";
 
+import useMoveAble from "../../hooks/useMoveAble";
+
 const DiagramCanvas = (props) => {
 
 	const {
@@ -15,39 +19,68 @@ const DiagramCanvas = (props) => {
 		offsetX,
 		offsetY,
 		scale,
-		onDrop,
-		onMoveCanvas,
-		canvasRef,
 		pathMapper,
 		pathPointMapper,
 		pathControlPointMapper,
 		moduleMapper,
 		inputPortMapper,
 		outputPortMapper,
-		onMoveModule,
-		onSelectModule,
+		onDrop,
+		onMoved,
+		onMouseDown,
+		onModuleMoved,
+		onModuleMouseDown,
 		onConnectPathMouseDown,
 		onControlPointMouseDown,
 	} = props;
 
-	const handleDragOver = useCallback((event) => {
+	const [translate, setTranslate] = useState({
+		x: offsetX,
+		y: offsetY,
+	});
+
+	const dragOverCallback = useCallback((event) => {
 		event.preventDefault();
 	}, []);
 
-	const transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+	const mouseDownCallback = useCallback((event) => {
+		onMouseDown(event);
+	}, [onMouseDown]);
+
+	const moveCallback = useCallback((event, movement) => {
+		setTranslate({
+			x: offsetX + movement.x,
+			y: offsetY + movement.y
+		});
+	}, [offsetX, offsetY]);
+
+	const endMoveCallback = useCallback((event, movement) => {
+		if (movement.x || movement.y) {
+			onMoved && onMoved(event, {
+				x: movement.x + offsetX,
+				y: movement.y + offsetY,
+				movementX: movement.x,
+				movementY: movement.y,
+			});
+		}
+	}, [offsetX, offsetY, onMoved]);
+
+	const [canvasRef] = useMoveAble(moveCallback, endMoveCallback);
+
+	const transform = `translate(${translate.x}px, ${translate.y}px) scale(${scale})`;
 	const layerStyle = {
 		width: width,
 		height: height,
 		transform: transform,
 	};
 
-	useMoveAble(canvasRef, (event) => event.altKey, onMoveCanvas);
-
 	return (
-		<div className={styles.hostNode}
-			 ref={canvasRef}
-			 onDrop={onDrop}
-			 onDragOver={handleDragOver}
+		<div
+			ref={canvasRef}
+			className={styles.hostNode}
+			onDrop={onDrop}
+			onDragOver={dragOverCallback}
+			onMouseDown={mouseDownCallback}
 		>
 			<svg className={styles.pathLayer} style={layerStyle}>
 				{
@@ -120,8 +153,8 @@ const DiagramCanvas = (props) => {
 								fillColor={fillColor}
 								inputPortMapper={inputPortMapper}
 								outputPortMapper={outputPortMapper}
-								onMoveModule={onMoveModule}
-								onSelect={onSelectModule}
+								onMoved={onModuleMoved}
+								onMouseDown={onModuleMouseDown}
 							/>
 						);
 					})