Skip to content

Commit

Permalink
feat(scene): create a scene rotation mode with a tool button
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickocoffeyo
patrickocoffeyo committed Aug 23, 2018
1 parent 354cf94 commit d9836bd
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 4 deletions.
29 changes: 26 additions & 3 deletions src/components/ToolsMenu/ToolsMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,18 @@ import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { withStyles, Button, Tooltip } from '@material-ui/core';
import { OpenWith, TouchApp, PanTool, AddCircle } from '@material-ui/icons';
import {
OpenWith,
TouchApp,
PanTool,
AddCircle,
RotateLeft
} from '@material-ui/icons';

import {
MODE_COMPONENT_SELECTING,
MODE_COMPONENT_PLACING
MODE_COMPONENT_PLACING,
MODE_SCENE_ROTATE
} from '../../constants';
import ToolsMenuStyles from './ToolsMenu.style';
import { ComponentCreateMenu } from '../';
Expand Down Expand Up @@ -53,6 +60,7 @@ class ToolsMenu extends Component {
const previewPath = `${basePath}/${sceneSlug !== 'scene' ? sceneSlug : ''}`;
const selectingPath = `${basePath}/${sceneSlug}/${MODE_COMPONENT_SELECTING}`;
const placingPath = `${basePath}/${sceneSlug}/${MODE_COMPONENT_PLACING}`;
const rotatePath = `${basePath}/${sceneSlug}/${MODE_SCENE_ROTATE}`;

if (!sceneSlug || sceneSlug === 'scene') {
return null;
Expand All @@ -72,7 +80,7 @@ class ToolsMenu extends Component {
<OpenWith />
</Button>
</Tooltip>
<Tooltip title="Select components for editing" placement="right-start">
<Tooltip title="Select components for editing" placement="right">
<Button
className={classNames(classes.button, classes.link)}
variant="fab"
Expand All @@ -99,6 +107,21 @@ class ToolsMenu extends Component {
<PanTool />
</Button>
</Tooltip>
<Tooltip
title="Set the rotation of this scene's sky image."
placement="right"
>
<Button
className={classNames(classes.button, classes.link)}
variant="fab"
component={Link}
disabled={location === rotatePath}
color="primary"
to={rotatePath}
>
<RotateLeft />
</Button>
</Tooltip>
<Tooltip title="Create a new component" placement="right">
<Button
className={classes.button}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ToolsMenu/__snapshots__/ToolsMenu.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ToolsMenu /> Matches its snapshot 1`] = `"<div class=\\"ToolsMenu-wrapper-3\\"><a tabindex=\\"-1\\" class=\\"MuiButtonBase-root-28 MuiButtonBase-disabled-29 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 MuiButton-disabled-22 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\\"></path></g></svg></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test/mode-component-selecting\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test/mode-component-placing\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></a><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1\\" type=\\"button\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></button></div>"`;
exports[`<ToolsMenu /> Matches its snapshot 1`] = `"<div class=\\"ToolsMenu-wrapper-3\\"><a tabindex=\\"-1\\" class=\\"MuiButtonBase-root-28 MuiButtonBase-disabled-29 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 MuiButton-disabled-22 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\\"></path></g></svg></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test/mode-component-selecting\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test/mode-component-placing\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1 ToolsMenu-link-2\\" role=\\"button\\" href=\\"/experience/vreditor/test/test/mode-scene-rotate\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></a><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-28 MuiButton-root-12 MuiButton-raised-18 MuiButton-fab-23 MuiButton-raisedPrimary-19 ToolsMenu-button-1\\" type=\\"button\\"><span class=\\"MuiButton-label-13\\"><svg class=\\"MuiSvgIcon-root-31\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-37\\"></span></button></div>"`;
1 change: 1 addition & 0 deletions src/constants/modes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@

export const MODE_SCENE_CREATE = 'mode-scene-create';
export const MODE_SCENE_EDIT = 'mode-scene-edit';
export const MODE_SCENE_ROTATE = 'mode-scene-rotate';
export const MODE_COMPONENT_SELECTING = 'mode-component-selecting';
export const MODE_COMPONENT_PLACING = 'mode-component-placing';

0 comments on commit d9836bd

Please sign in to comment.