Skip to content

Commit

Permalink
Merge pull request #595 from RJMaradiaga/sceneSettingsUpdates
Browse files Browse the repository at this point in the history 
Created new buttons in the settings to reset color and toggle cursor
  • Loading branch information
@jf-kelly
jf-kelly authored Aug 31, 2022
2 parents 6184bd5 + b4528bd commit 018d047
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 6 deletions.
32 changes: 31 additions & 1 deletion src/actions/sceneActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,16 @@ export function toggleCastShadow() {
* @returns {object} reducer action obj with type: TOGGLE_LIGHT_INDICATOR
*/
export function toggleLightIndicator(){
return {type: types.TOGGLE_LIGHT_INDICATOR};
return { type: types.TOGGLE_LIGHT_INDICATOR};
}

/**
* Sends a signal to the reducer to toggle for cursor to display cusor on screen
*
* @returns {object} reducer action obj with type: TOGGLE_CURSOR
*/
export function toggleCursor() {
return { type: types.TOGGLE_CURSOR };
}

/**
Expand All @@ -78,6 +87,15 @@ export function changeSkyColor(color) {
return { type: types.CHANGE_SKY_COLOR, color };
}

/**
* Sends a signal to the reducer to reset the sky color
*
* @returns {object} reducer action obj with type: RESET_SKY_COLOR
*/
export function resetSkyColor() {
return { type: types.RESET_SKY_COLOR };
}

/**
* Sends a signal to the reducer to change the sky color
*
Expand All @@ -89,6 +107,15 @@ export function changeFloorColor(color) {
return { type: types.CHANGE_FLOOR_COLOR, color };
}

/**
* Sends a signal to the reducer to reset the floor color
*
* @returns {object} reducer action obj with type: RESET_FLOOR_COLOR
*/
export function resetFloorColor() {
return { type: types.RESET_FLOOR_COLOR };
}

/**
* Sends a signal to the reducer to change the position of the camera
*
Expand Down Expand Up @@ -218,7 +245,9 @@ export default {
loadScene,
toggleCoordSky,
changeSkyColor,
resetSkyColor,
changeFloorColor,
resetFloorColor,
changeCamMode,
setCamera,
changePerspective,
Expand All @@ -234,5 +263,6 @@ export default {
toggleDefaultLight,
toggleCastShadow,
toggleLightIndicator,
toggleCursor,
updateMoveSpeed,
};
21 changes: 18 additions & 3 deletions src/components/structural/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,21 @@ class View extends Component {
);
}

/**
*
* toggles cursor depending on the settings by changing opacity
*
* @returns {string} String of aframe configuration of cursor attributes
*/
displayCursor = () => {
if (this.props.sceneConfig.settings.showCursor) {
return "color: #CCC; shader: flat; opacity: 1;";
}
else
{
return "color: #CCC; shader: flat; opacity: 0;";
}
}

/**
* It returns camera basic with different movement control depends on the browser type
Expand All @@ -305,7 +320,7 @@ class View extends Component {
raycaster="objects:.raycastable"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
material="color: #CCC; shader: flat;" />
material={this.displayCursor} />
</a-camera>
</a-entity>
);
Expand All @@ -320,7 +335,7 @@ class View extends Component {
raycaster="objects:.raycastable"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
material="color: #CCC; shader: flat;" />
material={this.displayCursor} />
</a-camera>
</a-entity>
);
Expand All @@ -336,7 +351,7 @@ class View extends Component {
raycaster="objects:.raycastable"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
material="color: #CCC; shader: flat;" />
material={this.displayCursor()} />
</a-camera>
</a-entity>
);
Expand Down
39 changes: 38 additions & 1 deletion src/components/structural/header/SceneConfigMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
TextField,
Tooltip,
Tabs,
Tab
Tab,

} from "@material-ui/core";

import QRCode from "qrcode.react";
Expand Down Expand Up @@ -423,6 +424,29 @@ class ConfigModal extends Component {
);
};

/**
* Returns button for toggle cursor
*/
cursorToggle = () => {
let style = this.props.scene.settings.showCursor ? btnStyle.on : btnStyle.off;
style = { ...btnStyle.base, ...style };
return (
<ButtonBase
style={style}
onClick={() => {
this.props.handleRender();
this.props.sceneActions.toggleCursor();
}} >
{
this.props.scene.settings.showCursor
? <Icon className="material-icons">toggle_on</Icon>
: <Icon className="material-icons">toggle_off</Icon>
}
Show Cursor
</ButtonBase >
);
};

/**
* Return button for toggles addCollection menu
*/
Expand Down Expand Up @@ -620,6 +644,7 @@ class ConfigModal extends Component {
<this.viewToggle />
<this.floorToggle />
<this.gridToggle />
<this.cursorToggle />
</div>
<div className="col-6">
<this.changeSkyColor />
Expand Down Expand Up @@ -653,6 +678,12 @@ class ConfigModal extends Component {
disableAlpha={true}
color={this.state.skyColor}
onChangeComplete={this.handleSkyChangeComplete} />
<div className="reset-button-group">
<Button
onClick={this.props.sceneActions.resetSkyColor}>
Reset Sky Color
</Button>
</div>
</div>
:
null
Expand All @@ -670,6 +701,12 @@ class ConfigModal extends Component {
disableAlpha={true}
color={this.state.floorColor}
onChangeComplete={this.handleFloorChangeComplete} />
<div className="reset-button-group">
<Button
onClick={this.props.sceneActions.resetFloorColor}>
Reset Floor Color
</Button>
</div>
</div>
:
null
Expand Down
3 changes: 3 additions & 0 deletions src/constants/ActionTypes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ export const NEW_SCENE = "NEW_SCENE";
export const LOAD_SCENE = "LOAD_SCENE";
export const TOGGLE_COORD_SKY = "TOGGLE_COORD_SKY";
export const CHANGE_SKY_COLOR = "CHANGE_SKY_COLOR";
export const RESET_SKY_COLOR = "RESET_SKY_COLOR";
export const CHANGE_FLOOR_COLOR = "CHANGE_FLOOR_COLOR";
export const RESET_FLOOR_COLOR = "RESET_FLOOR_COLOR";
export const CHANGE_CAM_MODE = "CHANGE_CAM_MODE";
export const SET_CAMERA = "SET_CAMERA";
export const CHANGE_PERSPECTIVE = "CHANGE_PERSPECTIVE";
Expand All @@ -39,6 +41,7 @@ export const SET_NAME_DESC = "SET_NAME_DESC";
export const TOGGLE_DEFAULT_LIGHT = "TOGGLE_DEFAULT_LIGHT";
export const TOGGLE_CAST_SHADOW = "TOGGLE_CAST_SHADOW";
export const TOGGLE_LIGHT_INDICATOR = "TOGGLE_LIGHT_INDICATOR";
export const TOGGLE_CURSOR = "TOGGLE_CURSOR";
export const UPDATE_MOVE_SPEED = "UPDATE_MOVE_SPEED";

export const SYNC_COLLECTIONS = "SYNC_COLLECTIONS";
Expand Down
19 changes: 19 additions & 0 deletions src/css/SceneConfig.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,22 @@
left: 0px;
background: #fff;
}

.reset-button-group {
display: flex;
align-items: center;
justify-content: center;
background-color: #c2aa4b;

}

.reset-button {
background-color: transparent;
border: 0;
color: #c2aa4b;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
line-height: 1;
margin-top: 1.5rem;
width: 100%;
}
30 changes: 29 additions & 1 deletion src/reducers/scene.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const DEF_SETTINGS = {
camConfig: 0,
showCoordHelper: true,
showFloor: true,
showCursor: true,
cameraPosition: "0 1.6 3",
viewOnly: false,
defaultLight: true,
Expand Down Expand Up @@ -84,6 +85,15 @@ export default function scene(state = initial_state, action) {
skyColor: action.color
}
};
//Reset the color of the sky to default
case types.RESET_SKY_COLOR:
return {
...state,
settings: {
...state.settings,
skyColor: "white"
}
};
//Update the color of floor
case types.CHANGE_FLOOR_COLOR:
return {
Expand All @@ -93,6 +103,15 @@ export default function scene(state = initial_state, action) {
floorColor: action.color
}
};
//Reset the color of the floor to default
case types.RESET_FLOOR_COLOR:
return {
...state,
settings: {
...state.settings,
floorColor: "#222"
}
};
//Toggle the floor
case types.TOGGLE_FLOOR:
return {
Expand Down Expand Up @@ -122,13 +141,22 @@ export default function scene(state = initial_state, action) {
};
//Toggle the light indicator
case types.TOGGLE_LIGHT_INDICATOR:
return{
return {
...state,
settings:{
...state.settings,
lightIndicator: !state.settings.lightIndicator
}
};
//Toggle the cursor
case types.TOGGLE_CURSOR:
return {
...state,
settings:{
...state.settings,
showCursor: !state.settings.showCursor
}
};
//Add the scene to the collection
case types.ADD_COLLECTION:
return {
Expand Down
4 changes: 4 additions & 0 deletions src/tests/App.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const generateMockProps = () => {
loadScene: jest.fn(),
toggleCoordSky: jest.fn(),
changeSkyColor: jest.fn(),
resetSkyColor: jest.fn(),
changeFloorColor: jest.fn(),
resetFloorColor: jest.fn(),
changeCamMode: jest.fn(),
setCamera: jest.fn(),
changePerspective: jest.fn(),
Expand Down Expand Up @@ -68,6 +70,7 @@ const generateMockProps = () => {
camConfig: 0,
showCoordHelper: false,
showFloor: true,
showCursor: true,
cameraPosition: "0 1.6 3",
viewOnly: false,
defaultLight: true,
Expand Down Expand Up @@ -330,6 +333,7 @@ describe("Scene Reducer", () => {
camConfig: 0,
showCoordHelper: true,
showFloor: true,
showCursor: true,
cameraPosition: "0 1.6 3",
viewOnly: false,
defaultLight: true,
Expand Down

0 comments on commit 018d047

Please sign in to comment.