From 4d1146e213ba27ed44c762621fc549ef58adcea6 Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Wed, 12 Jun 2024 14:38:09 -0700 Subject: [PATCH 1/9] WIP: add actionbar --- src/editor/components/Main.js | 15 ++++---- .../ActionBar/ActionBar.component.jsx | 34 +++++++++++++++++++ .../ActionBar/ActionBar.module.scss | 22 ++++++++++++ .../components/components/ActionBar/icons.jsx | 33 ++++++++++++++++++ .../components/components/ActionBar/index.js | 1 + src/editor/index.js | 7 ++++ 6 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 src/editor/components/components/ActionBar/ActionBar.component.jsx create mode 100644 src/editor/components/components/ActionBar/ActionBar.module.scss create mode 100644 src/editor/components/components/ActionBar/icons.jsx create mode 100644 src/editor/components/components/ActionBar/index.js diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js index b8f1a00fb..56a3ab660 100644 --- a/src/editor/components/Main.js +++ b/src/editor/components/Main.js @@ -16,9 +16,9 @@ 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. @@ -282,6 +282,14 @@ export default class Main extends Component { )} + {this.state.inspectorEnabled && ( +
+ +
+ )} {this.state.inspectorEnabled && (
@@ -297,11 +305,6 @@ export default class Main extends Component { )} - {this.state.inspectorEnabled && ( -
- -
- )} {this.state.inspectorEnabled && this.state.isAddLayerPanelOpen && ( { + const handleHandClick = () => { + Events.emit('hidecursor'); + }; + + const handleSelectClick = () => { + Events.emit('showcursor'); + }; + + 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..160c1c14f --- /dev/null +++ b/src/editor/components/components/ActionBar/ActionBar.module.scss @@ -0,0 +1,22 @@ +@use '../../../style/variables.scss'; + +.wrapper { + position: absolute; + background: rgba(55, 55, 55, 0.4); + 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; + &:hover { + background: rgba(55, 55, 55, 0.6); + } + + ; +} diff --git a/src/editor/components/components/ActionBar/icons.jsx b/src/editor/components/components/ActionBar/icons.jsx new file mode 100644 index 000000000..8dc450384 --- /dev/null +++ b/src/editor/components/components/ActionBar/icons.jsx @@ -0,0 +1,33 @@ +const Edit = ( + + + + +); + +const View = ( + + + + +); + +export { View, Edit }; 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/index.js b/src/editor/index.js index abe99e3a3..c510a4111 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -190,6 +190,13 @@ Inspector.prototype = { this.selectEntity(entity, false); }); + Events.on('hidecursor', () => { + this.cursor.pause(); + }); + Events.on('showcursor', () => { + this.cursor.play(); + }); + Events.on('inspectortoggle', (active) => { this.inspectorActive = active; this.sceneHelpers.visible = this.inspectorActive; From d6cf2da93b8436aea2745559cb673d5d79a00f4b Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Wed, 12 Jun 2024 14:40:29 -0700 Subject: [PATCH 2/9] remove extra icons file --- .../components/components/ActionBar/icons.jsx | 33 ------------------- 1 file changed, 33 deletions(-) delete mode 100644 src/editor/components/components/ActionBar/icons.jsx diff --git a/src/editor/components/components/ActionBar/icons.jsx b/src/editor/components/components/ActionBar/icons.jsx deleted file mode 100644 index 8dc450384..000000000 --- a/src/editor/components/components/ActionBar/icons.jsx +++ /dev/null @@ -1,33 +0,0 @@ -const Edit = ( - - - - -); - -const View = ( - - - - -); - -export { View, Edit }; From dd4221f65f7c62770569aaa83096e1f523e3c9df Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Thu, 13 Jun 2024 09:12:48 -0700 Subject: [PATCH 3/9] respond to comments --- src/editor/components/Main.js | 2 +- .../ActionBar/ActionBar.component.jsx | 8 ++--- .../ActionBar/ActionBar.module.scss | 34 +++++++++---------- src/editor/index.js | 1 + 4 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js index 56a3ab660..47b2c3580 100644 --- a/src/editor/components/Main.js +++ b/src/editor/components/Main.js @@ -283,7 +283,7 @@ export default class Main extends Component {
)} {this.state.inspectorEnabled && ( -
+
{ return (
{!isAddLayerPanelOpen && ( -
- - -
diff --git a/src/editor/components/components/ActionBar/ActionBar.module.scss b/src/editor/components/components/ActionBar/ActionBar.module.scss index 160c1c14f..31c488310 100644 --- a/src/editor/components/components/ActionBar/ActionBar.module.scss +++ b/src/editor/components/components/ActionBar/ActionBar.module.scss @@ -1,22 +1,20 @@ @use '../../../style/variables.scss'; .wrapper { - position: absolute; - background: rgba(55, 55, 55, 0.4); - 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; - &:hover { - background: rgba(55, 55, 55, 0.6); - } - - ; + position: absolute; + background: rgba(55, 55, 55, 0.4); + 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; + &:hover { + background: rgba(55, 55, 55, 0.6); + } } diff --git a/src/editor/index.js b/src/editor/index.js index c510a4111..bf5a90db4 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -192,6 +192,7 @@ Inspector.prototype = { Events.on('hidecursor', () => { this.cursor.pause(); + this.selectEntity(null); }); Events.on('showcursor', () => { this.cursor.play(); From 60c9ebe5b1540cc0517dfdfca8128895b2b4e250 Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Thu, 13 Jun 2024 13:46:28 -0700 Subject: [PATCH 4/9] remove addlayerbutton files --- .../AddLayerButton.component.jsx | 19 ------------------- .../AddLayerButton/AddLayerButton.module.scss | 15 --------------- .../components/AddLayerButton/index.js | 1 - 3 files changed, 35 deletions(-) delete mode 100644 src/editor/components/components/AddLayerButton/AddLayerButton.component.jsx delete mode 100644 src/editor/components/components/AddLayerButton/AddLayerButton.module.scss delete mode 100644 src/editor/components/components/AddLayerButton/index.js 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'; From aabc42dd20899622b9b661111f0681712746d7ad Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Fri, 14 Jun 2024 13:29:35 +0200 Subject: [PATCH 5/9] remove loading font-awesome.min.css script that is not used --- src/editor/components/Main.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js index 47b2c3580..6cc910b00 100644 --- a/src/editor/components/Main.js +++ b/src/editor/components/Main.js @@ -10,7 +10,6 @@ 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'; @@ -21,10 +20,6 @@ import { ScenesModal } from './modals/ScenesModal'; import { SceneEditTitle } from './components/SceneEditTitle'; 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; From a111967a4c220a81194fe7c5033ce19f276f3e05 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Fri, 14 Jun 2024 13:30:20 +0200 Subject: [PATCH 6/9] add @fortawesome/free-regular-svg-icons dependency --- package-lock.json | 24 ++++++++++++++++++++++++ package.json | 1 + 2 files changed, 25 insertions(+) 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", From 3cb97c6749ac46cc0b348f8f7778934bc4679407 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Fri, 14 Jun 2024 14:49:06 +0200 Subject: [PATCH 7/9] add AwesomeIcon component, default size is 20px --- .../AwesomeIcon/AwesomeIcon.component.js | 57 +++++++++++++++++++ .../components/AwesomeIcon/AwesomeIcon.scss | 12 ++++ .../components/AwesomeIcon/index.js | 1 + 3 files changed, 70 insertions(+) create mode 100644 src/editor/components/components/AwesomeIcon/AwesomeIcon.component.js create mode 100644 src/editor/components/components/AwesomeIcon/AwesomeIcon.scss create mode 100644 src/editor/components/components/AwesomeIcon/index.js 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'; From e8e70234a6329e7d55d1c45ed7d5fcc01059d3ae Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Fri, 14 Jun 2024 14:50:22 +0200 Subject: [PATCH 8/9] use Button component and fontawesome icons inr ActionBar --- .../ActionBar/ActionBar.component.jsx | 43 ++++++++++++++----- .../ActionBar/ActionBar.module.scss | 12 ++++-- 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/editor/components/components/ActionBar/ActionBar.component.jsx b/src/editor/components/components/ActionBar/ActionBar.component.jsx index 519741763..2e1871f75 100644 --- a/src/editor/components/components/ActionBar/ActionBar.component.jsx +++ b/src/editor/components/components/ActionBar/ActionBar.component.jsx @@ -1,30 +1,51 @@ -import { Circle20Icon, ArrowDown24Icon } from '../../../icons'; +import { + faHand, + faHandPointer, + faPlusSquare +} from '@fortawesome/free-regular-svg-icons'; +import { AwesomeIcon } from '../AwesomeIcon'; +import classNames from 'classnames'; import Events from '../../../lib/Events'; - import styles from './ActionBar.module.scss'; +import { Button } from '../Button'; +import { useState } from 'react'; const ActionBar = ({ handleAddClick, 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 && (
- - - + + +
)}
diff --git a/src/editor/components/components/ActionBar/ActionBar.module.scss b/src/editor/components/components/ActionBar/ActionBar.module.scss index 31c488310..616cfec62 100644 --- a/src/editor/components/components/ActionBar/ActionBar.module.scss +++ b/src/editor/components/components/ActionBar/ActionBar.module.scss @@ -2,7 +2,6 @@ .wrapper { position: absolute; - background: rgba(55, 55, 55, 0.4); transform: translateX(-50%); bottom: 15%; left: 50%; @@ -14,7 +13,14 @@ column-gap: 8px; padding: 8px 12px; transition: 0.2s ease-in-out; - &:hover { - background: rgba(55, 55, 55, 0.6); + + button { + border-radius: 50%; + width: 43px; + height: 43px; + + &.active { + border: 1px solid variables.$white; + } } } From f2dd0d62a34e147c82c7b78e7ab5e04615658218 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Fri, 14 Jun 2024 14:59:44 +0200 Subject: [PATCH 9/9] remove unused Circle20Icon --- src/editor/icons/icons.jsx | 25 ------------------------- src/editor/icons/index.js | 1 - 2 files changed, 26 deletions(-) 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 }) => (