Browse Source

add disable scroll

pull/6/head
Casper Lamboo 4 years ago
parent
commit
b0c0063039
  1. 5
      src/actions/index.js
  2. 4
      src/reducer/d2/wheelZoomReducer.js
  3. 4
      src/reducer/d3/toolReducer.js
  4. 33
      src/reducer/d3/tools/cameraReducer.js
  5. 8
      src/reducer/index.js

5
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 };
}

4
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;

4
src/reducer/d3/toolReducer.js vendored

@ -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, {

33
src/reducer/d3/tools/cameraReducer.js vendored

@ -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:

8
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;
}

Loading…
Cancel
Save