add wheel

src/actions/index.js

@@ -84,6 +84,7 @@ export const TRACE_FLOOD_FILL = 'TRACE_FLOOD_FILL';
 export const MENU_OPEN = 'MENU_OPEN';
 export const MENU_CLOSE = 'MENU_CLOSE';
 export const OPEN_SKETCH = 'OPEN_SKETCH';
+export const SET_PREVENT_SCROLL = 'SET_PREVENT_SCROLL';
 
 // CATEGORIES
 // actions that influence selected objects
@@ -496,3 +497,7 @@ export function menuClose(menuValue) {
 export function openSketch(data) {
   return { type: OPEN_SKETCH, data };
 }
+
+export function setPreventScroll(preventScroll) {
+  return { type: SET_PREVENT_SCROLL, preventScroll };
+}

src/components/App.js

@@ -75,7 +75,8 @@ class App extends React.Component {
     selectAll: PropTypes.func.isRequired,
     d2ChangeTool: PropTypes.func.isRequired,
     moveSelection: PropTypes.func.isRequired,
-    selectedPen: PropTypes.string.isRequired
+    selectedPen: PropTypes.string.isRequired,
+    preventScroll: PropTypes.bool.isRequired
   };
 
   state = {
@@ -87,14 +88,17 @@ class App extends React.Component {
 
     if (!this.state.loaded) load.then(() => this.setState({ loaded: true }));
 
-    container.addEventListener('dragover', event => event.preventDefault());
+    container.addEventListener('dragover', this.dragOver);
     container.addEventListener('drop', this.onDrop);
+    container.addEventListener('wheel', this.onWheel);
     window.addEventListener('keydown', this.onKeyDown);
   }
 
   componentWillUnmount() {
     const { container } = this.refs;
+    container.addEventListener('dragover', this.dragOver);
     container.removeEventListener('drop', this.onDrop);
+    container.addEventListener('wheel', this.onWheel);
     window.removeEventListener('keydown', this.onKeyDown);
   }
 
@@ -209,6 +213,15 @@ class App extends React.Component {
     }
   }
 
+  onWheel = (event) => {
+    const { preventScroll } = this.props;
+    if (preventScroll) event.preventDefault();
+  };
+
+  dragover = (event) => {
+    event.preventDefault();
+  };
+
   render() {
     const { classes, undo, redo } = this.props;
     const { loaded } = this.state;
@@ -233,6 +246,7 @@ class App extends React.Component {
 }
 
 export default injectSheet(styles)(connect(state => ({
+  preventScroll: state.sketcher.present.preventScroll,
   selectedPen: state.sketcher.present.menus['pen-tools'].selected
 }), {
   undo: actions.undo.undo,

src/reducer/index.js

@@ -95,7 +95,8 @@ const initialState = {
     },
     camera: defaultCamera
   },
-  menus: menusReducer(undefined, {})
+  menus: menusReducer(undefined, {}),
+  preventScroll: true
 };
 
 function sketcherReducer(state = initialState, action) {
@@ -246,6 +247,11 @@ function sketcherReducer(state = initialState, action) {
         objectsById: { [action.id]: { transform: { $set: action.transform } } }
       });
 
+    case actions.SET_PREVENT_SCROLL:
+      return update(state, {
+        preventScroll: { $set: action.preventScroll }
+      });
+
     default:
       return state;
   }