diff --git a/package-lock.json b/package-lock.json index 85ad7bd8f..f4d56187e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.5.0", "license": "AGPLv3", "dependencies": { + "@fortawesome/free-regular-svg-icons": "^6.5.2", "@react-google-maps/api": "^2.19.3", "aframe-atlas-uvs-component": "^3.0.0", "classnames": "^2.3.2", @@ -3278,6 +3279,29 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "hasInstallScript": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz", + "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==", + "hasInstallScript": true, + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", diff --git a/package.json b/package.json index c1b2e2e18..67acf3dcd 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "homepage": "https://github.com/3dstreet/3dstreet/", "license": "AGPLv3", "dependencies": { + "@fortawesome/free-regular-svg-icons": "^6.5.2", "@react-google-maps/api": "^2.19.3", "aframe-atlas-uvs-component": "^3.0.0", "classnames": "^2.3.2", diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js index b8f1a00fb..6cc910b00 100644 --- a/src/editor/components/Main.js +++ b/src/editor/components/Main.js @@ -10,21 +10,16 @@ import SceneGraph from './scenegraph/SceneGraph'; import { ScreenshotModal } from './modals/ScreenshotModal'; import TransformToolbar from './viewport/TransformToolbar'; // import ViewportHUD from "./viewport/ViewportHUD"; -import { injectCSS } from '../lib/utils'; import { SignInModal } from './modals/SignInModal'; import { ProfileModal } from './modals/ProfileModal'; import { firebaseConfig } from '../services/firebase.js'; import { LoadScript } from '@react-google-maps/api'; import { GeoModal } from './modals/GeoModal'; +import { ActionBar } from './components/ActionBar'; import { ScenesModal } from './modals/ScenesModal'; import { SceneEditTitle } from './components/SceneEditTitle'; -import { AddLayerButton } from './components/AddLayerButton'; import { AddLayerPanel } from './components/AddLayerPanel'; THREE.ImageUtils.crossOrigin = ''; -// Megahack to include font-awesome. -injectCSS( - 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' -); const isStreetLoaded = window.location.hash.length; @@ -282,6 +277,14 @@ export default class Main extends Component { )} + {this.state.inspectorEnabled && ( +
+ +
+ )} {this.state.inspectorEnabled && (
@@ -297,11 +300,6 @@ export default class Main extends Component { )} - {this.state.inspectorEnabled && ( -
- -
- )} {this.state.inspectorEnabled && this.state.isAddLayerPanelOpen && ( { + const [cursorEnabled, setCursorEnabled] = useState( + AFRAME.INSPECTOR.cursor.isPlaying + ); + + const handleHandClick = () => { + Events.emit('hidecursor'); + setCursorEnabled(false); + }; + + const handleSelectClick = () => { + Events.emit('showcursor'); + setCursorEnabled(true); + }; + + return ( +
+ {!isAddLayerPanelOpen && ( +
+ + + +
+ )} +
+ ); +}; + +export { ActionBar }; diff --git a/src/editor/components/components/ActionBar/ActionBar.module.scss b/src/editor/components/components/ActionBar/ActionBar.module.scss new file mode 100644 index 000000000..616cfec62 --- /dev/null +++ b/src/editor/components/components/ActionBar/ActionBar.module.scss @@ -0,0 +1,26 @@ +@use '../../../style/variables.scss'; + +.wrapper { + position: absolute; + transform: translateX(-50%); + bottom: 15%; + left: 50%; + border: unset; + height: 40px; + border-radius: 16px; + align-items: center; + display: flex; + column-gap: 8px; + padding: 8px 12px; + transition: 0.2s ease-in-out; + + button { + border-radius: 50%; + width: 43px; + height: 43px; + + &.active { + border: 1px solid variables.$white; + } + } +} diff --git a/src/editor/components/components/ActionBar/index.js b/src/editor/components/components/ActionBar/index.js new file mode 100644 index 000000000..8150e91f6 --- /dev/null +++ b/src/editor/components/components/ActionBar/index.js @@ -0,0 +1 @@ +export { ActionBar } from './ActionBar.component.jsx'; diff --git a/src/editor/components/components/AddLayerButton/AddLayerButton.component.jsx b/src/editor/components/components/AddLayerButton/AddLayerButton.component.jsx deleted file mode 100644 index 2940054c3..000000000 --- a/src/editor/components/components/AddLayerButton/AddLayerButton.component.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import styles from './AddLayerButton.module.scss'; -import { Button } from '../Button'; -import { Circle20Icon } from '../../../icons'; - -const AddLayerButton = ({ onClick }) => ( -
- -
-); - -export { AddLayerButton }; diff --git a/src/editor/components/components/AddLayerButton/AddLayerButton.module.scss b/src/editor/components/components/AddLayerButton/AddLayerButton.module.scss deleted file mode 100644 index 3505cb543..000000000 --- a/src/editor/components/components/AddLayerButton/AddLayerButton.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '../../../style/variables.scss'; - -.wrapper { - .button { - position: absolute; - transform: translateX(-50%); - left: 50%; - border: unset; - bottom: 0px; - width: 64px; - height: 40px; - padding: 4px 20px 4px 20px; - border-radius: 8px 8px 0px 0px; - } -} diff --git a/src/editor/components/components/AddLayerButton/index.js b/src/editor/components/components/AddLayerButton/index.js deleted file mode 100644 index 8009bfd4a..000000000 --- a/src/editor/components/components/AddLayerButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { AddLayerButton } from './AddLayerButton.component.jsx'; diff --git a/src/editor/components/components/AwesomeIcon/AwesomeIcon.component.js b/src/editor/components/components/AwesomeIcon/AwesomeIcon.component.js new file mode 100644 index 000000000..6b7ca425e --- /dev/null +++ b/src/editor/components/components/AwesomeIcon/AwesomeIcon.component.js @@ -0,0 +1,57 @@ +/* + Use instead of from @fortawesome/react-fontawesome + Using FontAwesomeIcon component adds 66 kB minified to the bundle. + Our AwesomeIcon does the same but less than 2 kB minified. + svg-inline--fa class has been added to AwesomeIcon.scss +*/ +import React from 'react'; +import PropTypes from 'prop-types'; +import './AwesomeIcon.scss'; + +function asIcon(icon) { + const width = icon[0]; + const height = icon[1]; + const vectorData = icon[4]; + let element; + + if (Array.isArray(vectorData)) { + element = ( + + {vectorData.map((pathData, index) => ( + + ))} + + ); + } else { + element = ; + } + + return { + width: width, + height: height, + icon: element + }; +} + +export class AwesomeIcon extends React.Component { + static propTypes = { + icon: PropTypes.object.isRequired, + size: PropTypes.number + }; + + render() { + const { width, height, icon } = asIcon(this.props.icon.icon); + return ( + + {icon} + + ); + } +} diff --git a/src/editor/components/components/AwesomeIcon/AwesomeIcon.scss b/src/editor/components/components/AwesomeIcon/AwesomeIcon.scss new file mode 100644 index 000000000..b237f02e5 --- /dev/null +++ b/src/editor/components/components/AwesomeIcon/AwesomeIcon.scss @@ -0,0 +1,12 @@ +/* CSS rules from the original FontAwesomeIcon component */ +svg:not(:root).svg-inline--fa, +svg:not(:host).svg-inline--fa { + overflow: visible; + box-sizing: content-box; +} + +.svg-inline--fa { + display: inline-block; + overflow: visible; + vertical-align: -0.125em; +} diff --git a/src/editor/components/components/AwesomeIcon/index.js b/src/editor/components/components/AwesomeIcon/index.js new file mode 100644 index 000000000..8494e6112 --- /dev/null +++ b/src/editor/components/components/AwesomeIcon/index.js @@ -0,0 +1 @@ +export { AwesomeIcon } from './AwesomeIcon.component.js'; diff --git a/src/editor/icons/icons.jsx b/src/editor/icons/icons.jsx index 4021a9e97..54699d727 100644 --- a/src/editor/icons/icons.jsx +++ b/src/editor/icons/icons.jsx @@ -447,30 +447,6 @@ const GoogleSignInButtonSVG = ({ className }) => ( ); -const Circle20Icon = ({ className }) => ( - - - - -); - const Chevron24Down = ({ className }) => ( { + this.cursor.pause(); + this.selectEntity(null); + }); + Events.on('showcursor', () => { + this.cursor.play(); + }); + Events.on('inspectortoggle', (active) => { this.inspectorActive = active; this.sceneHelpers.visible = this.inspectorActive;