From b0c00630393d3c20c21a1094736ee0df5f72226e Mon Sep 17 00:00:00 2001 From: Casper Lamboo Date: Wed, 9 May 2018 11:29:00 +0200 Subject: [PATCH] add disable scroll --- src/actions/index.js | 5 ++++ src/reducer/d2/wheelZoomReducer.js | 4 +++- src/reducer/d3/toolReducer.js | 4 +--- src/reducer/d3/tools/cameraReducer.js | 33 +++++++++++++++++++-------- src/reducer/index.js | 8 ++++++- 5 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index c653a87..f06b7e6 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -85,6 +85,7 @@ 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'; +export const SET_DISABLE_SCROLL = 'SET_DISABLE_SCROLL'; // CATEGORIES // actions that influence selected objects @@ -501,3 +502,7 @@ export function openSketch(data) { export function setPreventScroll(preventScroll) { return { type: SET_PREVENT_SCROLL, preventScroll }; } + +export function setDisableScroll(disableScroll) { + return { type: SET_DISABLE_SCROLL, disableScroll }; +} diff --git a/src/reducer/d2/wheelZoomReducer.js b/src/reducer/d2/wheelZoomReducer.js index 79a0c10..99a0d4e 100644 --- a/src/reducer/d2/wheelZoomReducer.js +++ b/src/reducer/d2/wheelZoomReducer.js @@ -5,7 +5,9 @@ import { MAX_ZOOM } from '../../constants/d2Constants.js'; export default function d2WheelZoomReducer(state, action) { const { position, wheelDelta, screenMatrixContainer } = action; - const { canvasMatrix } = state.d2; + const { d2: { canvasMatrix }, disableScroll } = state; + + if (disableScroll) return state; const targetScale = 1 + wheelDelta / -500; diff --git a/src/reducer/d3/toolReducer.js b/src/reducer/d3/toolReducer.js index 0ee8d76..9c8781d 100644 --- a/src/reducer/d3/toolReducer.js +++ b/src/reducer/d3/toolReducer.js @@ -20,9 +20,7 @@ const reducers = { export default function toolReducer(state, action) { // if (action.log !== false) debug(action.type); - state = update(state, { - d3: { camera: { $set: cameraReducer(state.d3.camera, action) } } - }); + state = cameraReducer(state, action); if (action.type === actions.D3_CHANGE_TOOL && action.tool !== state.d3.tool) { state = update(state, { diff --git a/src/reducer/d3/tools/cameraReducer.js b/src/reducer/d3/tools/cameraReducer.js index 0204bea..30e93eb 100644 --- a/src/reducer/d3/tools/cameraReducer.js +++ b/src/reducer/d3/tools/cameraReducer.js @@ -24,19 +24,22 @@ export function cameraReducer(state, action) { switch (action.type) { case actions.D3_MOUSE_WHEEL: { + if (state.disableScroll) return state; const delta = new THREE.Vector3(0, 0, action.wheelDelta); - return zoom(state, delta); + return update(state, { + d3: { camera: { $set: zoom(state.d3.camera, delta) } } + }); } case actions.D3_DRAG_START: { return update(state, { - state: { $set: CAMERA_STATES.ROTATE } + d3: { camera: { state: { $set: CAMERA_STATES.ROTATE } } } }); } case actions.D3_SECOND_DRAG_START: { return update(state, { - state: { $set: CAMERA_STATES.PAN } + d3: { camera: { state: { $set: CAMERA_STATES.PAN } } } }); } @@ -44,18 +47,24 @@ export function cameraReducer(state, action) { case actions.D3_SECOND_DRAG: { const movement = action.position.subtract(action.previousPosition); - switch (state.state) { + switch (state.d3.camera.state) { case CAMERA_STATES.ROTATE: { const delta = new THREE.Vector3(-movement.x * ROTATION_SPEED, -movement.y * ROTATION_SPEED, 0); - return rotate(state, delta); + return update(state, { + d3: { camera: { $set: rotate(state.d3.camera, delta) } } + }); } case CAMERA_STATES.PAN: { const delta = new THREE.Vector3(-movement.x, movement.y, 0); - return pan(state, delta); + return update(state, { + d3: { camera: { $set: pan(state.d3.camera, delta) } } + }); } case CAMERA_STATES.ZOOM: { const delta = new THREE.Vector3(0, 0, movement.y); - return zoom(state, delta); + return update(state, { + d3: { camera: { $set: zoom(state.d3.camera, delta) } } + }); } default: return state; @@ -66,7 +75,7 @@ export function cameraReducer(state, action) { case actions.D3_DRAG_END: case actions.D3_SECOND_DRAG_END: return update(state, { - state: { $set: CAMERA_STATES.NONE } + d3: { camera: { state: { $set: CAMERA_STATES.NONE } } } }); case actions.D3_MULTITOUCH: { @@ -74,7 +83,9 @@ export function cameraReducer(state, action) { const prevDistance = action.previousPositions[0].distanceTo(action.previousPositions[1]); const zoomDelta = new THREE.Vector3(0, 0, prevDistance - distance); - state = zoom(state, zoomDelta); + state = update(state, { + d3: { camera: { $set: zoom(state.d3.camera, zoomDelta) } } + }); const offset0 = new THREE.Vector3( -(action.positions[0].x - action.previousPositions[0].x), @@ -88,7 +99,9 @@ export function cameraReducer(state, action) { ); const panDelta = offset0.add(offset1).multiplyScalar(0.5); - return pan(state, panDelta); + return update(state, { + d3: { camera: { $set: pan(state.d3.camera, panDelta) } } + }); } default: diff --git a/src/reducer/index.js b/src/reducer/index.js index 461f846..bf46998 100644 --- a/src/reducer/index.js +++ b/src/reducer/index.js @@ -96,7 +96,8 @@ const initialState = { camera: defaultCamera }, menus: menusReducer(undefined, {}), - preventScroll: true + preventScroll: true, + disableScroll: false }; function sketcherReducer(state = initialState, action) { @@ -252,6 +253,11 @@ function sketcherReducer(state = initialState, action) { preventScroll: { $set: action.preventScroll } }); + case actions.SET_DISABLE_SCROLL: + return update(state, { + disableScroll: { $set: action.disableScroll } + }); + default: return state; }