From cecb2f6f0831042e62ce080c4eb6fe10a88037a8 Mon Sep 17 00:00:00 2001 From: Ryan Maradiaga Date: Tue, 12 Jul 2022 14:25:51 -0400 Subject: [PATCH 1/4] changes for creating the three buttons (reset sky color, reset floor color, toggle cursor) --- src/actions/sceneActions.js | 32 +++++++++- src/components/structural/View.js | 21 ++++++- .../structural/header/SceneConfigMenu.js | 58 +++++++++++++++++++ src/constants/ActionTypes.js | 3 + src/reducers/scene.js | 30 +++++++++- 5 files changed, 139 insertions(+), 5 deletions(-) diff --git a/src/actions/sceneActions.js b/src/actions/sceneActions.js index 91bf9ae0..7d106e21 100644 --- a/src/actions/sceneActions.js +++ b/src/actions/sceneActions.js @@ -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 }; } /** @@ -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 * @@ -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 * @@ -218,7 +245,9 @@ export default { loadScene, toggleCoordSky, changeSkyColor, + resetSkyColor, changeFloorColor, + resetFloorColor, changeCamMode, setCamera, changePerspective, @@ -234,5 +263,6 @@ export default { toggleDefaultLight, toggleCastShadow, toggleLightIndicator, + toggleCursor, updateMoveSpeed, }; diff --git a/src/components/structural/View.js b/src/components/structural/View.js index 0bb094b2..801270f9 100644 --- a/src/components/structural/View.js +++ b/src/components/structural/View.js @@ -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 @@ -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} /> ); @@ -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} /> ); @@ -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()} /> ); diff --git a/src/components/structural/header/SceneConfigMenu.js b/src/components/structural/header/SceneConfigMenu.js index 391a11eb..356aa827 100644 --- a/src/components/structural/header/SceneConfigMenu.js +++ b/src/components/structural/header/SceneConfigMenu.js @@ -423,6 +423,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 ( + { + this.props.handleRender(); + this.props.sceneActions.toggleCursor(); + }} > + { + this.props.scene.settings.showCursor + ? toggle_on + : toggle_off + } + Show Cursor + + ); + }; + /** * Return button for toggles addCollection menu */ @@ -543,6 +566,22 @@ class ConfigModal extends Component { ); }; + /** + * Button to reset sky color to original state + */ + resetSkyColor = () => { + return ( + { + this.props.handleRender(); + this.props.sceneActions.resetSkyColor(); + }}> + color_lens + Reset Sky Color + + ); + }; /** * Returns button for open color picker for floorColor @@ -561,6 +600,22 @@ class ConfigModal extends Component { ); }; + /** + * Reset button to reset floor color to original state + */3 + resetFloorColor = () => { + return ( + { + this.props.handleRender(); + this.props.sceneActions.resetFloorColor(); + }}> + color_lens + Reset Floor Color + + ); + }; /** * Handles the switch between scene and share tab * @param {*} event @@ -620,10 +675,13 @@ class ConfigModal extends Component { +
+ +
Light Control
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index c16b864a..3ff41bdc 100644 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -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"; @@ -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"; diff --git a/src/reducers/scene.js b/src/reducers/scene.js index 92b313a0..d24c665e 100644 --- a/src/reducers/scene.js +++ b/src/reducers/scene.js @@ -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, @@ -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 { @@ -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 { @@ -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 { From e2e6b2d1570ae5a35feba825d58d0e3b66da5fbf Mon Sep 17 00:00:00 2001 From: Ryan Maradiaga Date: Thu, 28 Jul 2022 12:38:01 -0400 Subject: [PATCH 2/4] Updated unit tests to include reset color functions and toggle cursor state. --- src/tests/App.test.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/tests/App.test.js b/src/tests/App.test.js index 98b60dcf..d55bd5c6 100644 --- a/src/tests/App.test.js +++ b/src/tests/App.test.js @@ -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(), @@ -68,6 +70,7 @@ const generateMockProps = () => { camConfig: 0, showCoordHelper: false, showFloor: true, + showCursor: true, cameraPosition: "0 1.6 3", viewOnly: false, defaultLight: true, @@ -330,6 +333,7 @@ describe("Scene Reducer", () => { camConfig: 0, showCoordHelper: true, showFloor: true, + showCursor: true, cameraPosition: "0 1.6 3", viewOnly: false, defaultLight: true, From aa9e12bb5a432583fcfc01c41921532a92ae868d Mon Sep 17 00:00:00 2001 From: Ryan Maradiaga Date: Thu, 28 Jul 2022 12:40:01 -0400 Subject: [PATCH 3/4] Removed reset color buttons from the settings menu and placed them inside the same window as the color picker. --- .../structural/header/SceneConfigMenu.js | 49 ++++++------------- 1 file changed, 14 insertions(+), 35 deletions(-) diff --git a/src/components/structural/header/SceneConfigMenu.js b/src/components/structural/header/SceneConfigMenu.js index 356aa827..f92ea677 100644 --- a/src/components/structural/header/SceneConfigMenu.js +++ b/src/components/structural/header/SceneConfigMenu.js @@ -10,7 +10,8 @@ import { TextField, Tooltip, Tabs, - Tab + Tab, + } from "@material-ui/core"; import QRCode from "qrcode.react"; @@ -566,22 +567,6 @@ class ConfigModal extends Component { ); }; - /** - * Button to reset sky color to original state - */ - resetSkyColor = () => { - return ( - { - this.props.handleRender(); - this.props.sceneActions.resetSkyColor(); - }}> - color_lens - Reset Sky Color - - ); - }; /** * Returns button for open color picker for floorColor @@ -600,22 +585,6 @@ class ConfigModal extends Component { ); }; - /** - * Reset button to reset floor color to original state - */3 - resetFloorColor = () => { - return ( - { - this.props.handleRender(); - this.props.sceneActions.resetFloorColor(); - }}> - color_lens - Reset Floor Color - - ); - }; /** * Handles the switch between scene and share tab * @param {*} event @@ -680,8 +649,6 @@ class ConfigModal extends Component {
- -
Light Control
@@ -711,6 +678,12 @@ class ConfigModal extends Component { disableAlpha={true} color={this.state.skyColor} onChangeComplete={this.handleSkyChangeComplete} /> +
+ +
: null @@ -728,6 +701,12 @@ class ConfigModal extends Component { disableAlpha={true} color={this.state.floorColor} onChangeComplete={this.handleFloorChangeComplete} /> +
+ +
: null From b4528bd68fb3b6112187b708219025428538ebce Mon Sep 17 00:00:00 2001 From: Ryan Maradiaga Date: Thu, 28 Jul 2022 12:40:41 -0400 Subject: [PATCH 4/4] Created a new class for the reset buttons and aligned the buttons in the center of the color picker. --- src/css/SceneConfig.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/css/SceneConfig.css b/src/css/SceneConfig.css index 3f562c6a..8a3b8222 100644 --- a/src/css/SceneConfig.css +++ b/src/css/SceneConfig.css @@ -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%; +} \ No newline at end of file