diff --git a/src/actions/index.js b/src/actions/index.js index 64285fe..c653a87 100644 --- a/src/actions/index.js +++ b/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 }; +} diff --git a/src/components/App.js b/src/components/App.js index 121617b..01672c9 100644 --- a/src/components/App.js +++ b/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, diff --git a/src/reducer/index.js b/src/reducer/index.js index 88fa497..461f846 100644 --- a/src/reducer/index.js +++ b/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; }