WIP: add actionbar

3DStreet · Jun 12, 2024 · 4d1146e · 4d1146e
1 parent 004c2f4
commit 4d1146e
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 6 deletions.
diff --git 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 {
             <GeoPanel />
           </div>
         )}
+        {this.state.inspectorEnabled && (
+          <div id="scene-title">
+            <ActionBar
+              handleAddClick={this.toggleAddLayerPanel}
+              isAddLayerPanelOpen={this.state.isAddLayerPanelOpen}
+            />
+          </div>
+        )}
         {this.state.inspectorEnabled && (
           <div id="scene-title">
             <SceneEditTitle sceneData={sceneData} />
@@ -297,11 +305,6 @@ export default class Main extends Component {
             <Compass32Icon />
           </Button>
         )}
-        {this.state.inspectorEnabled && (
-          <div id="layerWithCategory">
-            <AddLayerButton onClick={this.toggleAddLayerPanel} />
-          </div>
-        )}
         {this.state.inspectorEnabled && this.state.isAddLayerPanelOpen && (
           <AddLayerPanel
             onClose={this.toggleAddLayerPanel}

diff --git a/src/editor/components/components/ActionBar/ActionBar.component.jsx b/src/editor/components/components/ActionBar/ActionBar.component.jsx
@@ -0,0 +1,34 @@
+import { Circle20Icon, ArrowDown24Icon } from '../../../icons';
+import Events from '../../../lib/Events';
+
+import styles from './ActionBar.module.scss';
+
+const ActionBar = ({ handleAddClick, isAddLayerPanelOpen }) => {
+  const handleHandClick = () => {
+    Events.emit('hidecursor');
+  };
+
+  const handleSelectClick = () => {
+    Events.emit('showcursor');
+  };
+
+  return (
+    <div>
+      {!isAddLayerPanelOpen && (
+        <div className={styles.wrapper} id="findme">
+          <button type="button" onClick={handleSelectClick} key="handButton">
+            <ArrowDown24Icon />
+          </button>
+          <button type="button" onClick={handleHandClick} key="handButton">
+            <ArrowDown24Icon />
+          </button>
+          <button type="button" onClick={handleAddClick} key="addLayerButton">
+            <Circle20Icon />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { ActionBar };
diff --git a/src/editor/components/components/ActionBar/ActionBar.module.scss 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
@@ -0,0 +1,33 @@
+const Edit = (
+  <svg
+    width="70"
+    height="43"
+    viewBox="0 0 70 43"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="70" height="43" rx="18" fill="#774DEE" />
+    <path
+      d="M29.544 26.616L29.536 28H22.416V16.512H29.536V17.896H24.128V21.536H28.48V22.872H24.128V26.616H29.544ZM36.2423 21.84C35.9863 21.504 35.7089 21.2693 35.4103 21.136C35.1169 21.0027 34.7863 20.936 34.4183 20.936C33.7036 20.936 33.1489 21.1947 32.7543 21.712C32.3649 22.224 32.1703 22.9733 32.1703 23.96C32.1703 24.4773 32.2129 24.92 32.2983 25.288C32.3889 25.6507 32.5169 25.9493 32.6823 26.184C32.8529 26.4133 33.0609 26.584 33.3063 26.696C33.5516 26.8027 33.8289 26.856 34.1383 26.856C34.5916 26.856 34.9836 26.7547 35.3143 26.552C35.6449 26.3493 35.9543 26.064 36.2423 25.696V21.84ZM37.8103 16.192V28H36.8663C36.6476 28 36.5116 27.896 36.4583 27.688L36.3223 26.752C35.9756 27.1627 35.5809 27.4933 35.1383 27.744C34.7009 27.9893 34.1943 28.112 33.6183 28.112C33.1543 28.112 32.7329 28.0213 32.3543 27.84C31.9809 27.6587 31.6609 27.3947 31.3943 27.048C31.1276 26.696 30.9223 26.2613 30.7783 25.744C30.6343 25.2267 30.5623 24.632 30.5623 23.96C30.5623 23.3573 30.6423 22.7973 30.8023 22.28C30.9623 21.7627 31.1943 21.3147 31.4983 20.936C31.8023 20.5573 32.1703 20.2613 32.6023 20.048C33.0343 19.8293 33.5223 19.72 34.0663 19.72C34.5569 19.72 34.9729 19.8 35.3143 19.96C35.6609 20.12 35.9703 20.3467 36.2423 20.64V16.192H37.8103ZM41.6186 19.872V28H40.0586V19.872H41.6186ZM41.9146 17.36C41.9146 17.504 41.8853 17.6427 41.8266 17.776C41.768 17.904 41.688 18.0187 41.5866 18.12C41.4906 18.216 41.376 18.2933 41.2426 18.352C41.1093 18.4053 40.9706 18.432 40.8266 18.432C40.6826 18.432 40.5466 18.4053 40.4186 18.352C40.2906 18.2933 40.176 18.216 40.0746 18.12C39.9786 18.0187 39.9013 17.904 39.8426 17.776C39.7893 17.6427 39.7626 17.504 39.7626 17.36C39.7626 17.2107 39.7893 17.072 39.8426 16.944C39.9013 16.8107 39.9786 16.696 40.0746 16.6C40.176 16.4987 40.2906 16.4213 40.4186 16.368C40.5466 16.3093 40.6826 16.28 40.8266 16.28C40.9706 16.28 41.1093 16.3093 41.2426 16.368C41.376 16.4213 41.4906 16.4987 41.5866 16.6C41.688 16.696 41.768 16.8107 41.8266 16.944C41.8853 17.072 41.9146 17.2107 41.9146 17.36ZM46.4213 28.128C45.7653 28.128 45.2586 27.944 44.9013 27.576C44.5493 27.208 44.3733 26.6827 44.3733 26V21.136H43.4293C43.3386 21.136 43.2613 21.1093 43.1973 21.056C43.1386 20.9973 43.1093 20.912 43.1093 20.8V20.168L44.4293 19.984L44.7812 17.56C44.8026 17.4693 44.8426 17.4 44.9013 17.352C44.9653 17.2987 45.0453 17.272 45.1413 17.272H45.9333V20H48.2373V21.136H45.9333V25.896C45.9333 26.216 46.0106 26.456 46.1653 26.616C46.3253 26.7707 46.5279 26.848 46.7733 26.848C46.9173 26.848 47.0399 26.8293 47.1413 26.792C47.2479 26.7547 47.3386 26.7147 47.4133 26.672C47.4879 26.624 47.5519 26.5813 47.6053 26.544C47.6586 26.5067 47.7066 26.488 47.7493 26.488C47.8026 26.488 47.8426 26.5013 47.8693 26.528C47.9013 26.5493 47.9333 26.5867 47.9653 26.64L48.4293 27.392C48.1733 27.6267 47.8693 27.808 47.5173 27.936C47.1653 28.064 46.7999 28.128 46.4213 28.128Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const View = (
+  <svg
+    width="68"
+    height="43"
+    viewBox="0 0 68 43"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="68" height="43" rx="18" fill="#774DEE" />
+    <path
+      d="M26.888 16.512L22.216 28H20.688L16.016 16.512H17.376C17.5253 16.512 17.6453 16.5493 17.736 16.624C17.832 16.6987 17.904 16.7947 17.952 16.912L21.056 24.72C21.1307 24.912 21.2027 25.1227 21.272 25.352C21.3467 25.5813 21.4133 25.8213 21.472 26.072C21.5253 25.8213 21.584 25.5813 21.648 25.352C21.712 25.1227 21.7813 24.912 21.856 24.72L24.952 16.912C24.9893 16.8053 25.056 16.712 25.152 16.632C25.2533 16.552 25.376 16.512 25.52 16.512H26.888ZM29.6343 19.872V28H28.0743V19.872H29.6343ZM29.9303 17.36C29.9303 17.504 29.9009 17.6427 29.8423 17.776C29.7836 17.904 29.7036 18.0187 29.6023 18.12C29.5063 18.216 29.3916 18.2933 29.2582 18.352C29.1249 18.4053 28.9863 18.432 28.8423 18.432C28.6983 18.432 28.5623 18.4053 28.4343 18.352C28.3063 18.2933 28.1916 18.216 28.0903 18.12C27.9943 18.0187 27.9169 17.904 27.8583 17.776C27.8049 17.6427 27.7783 17.504 27.7783 17.36C27.7783 17.2107 27.8049 17.072 27.8583 16.944C27.9169 16.8107 27.9943 16.696 28.0903 16.6C28.1916 16.4987 28.3063 16.4213 28.4343 16.368C28.5623 16.3093 28.6983 16.28 28.8423 16.28C28.9863 16.28 29.1249 16.3093 29.2582 16.368C29.3916 16.4213 29.5063 16.4987 29.6023 16.6C29.7036 16.696 29.7836 16.8107 29.8423 16.944C29.9009 17.072 29.9303 17.2107 29.9303 17.36ZM37.2769 23.032C37.2769 22.7227 37.2315 22.4373 37.1409 22.176C37.0555 21.9147 36.9275 21.688 36.7569 21.496C36.5862 21.304 36.3782 21.1547 36.1329 21.048C35.8875 20.9413 35.6049 20.888 35.2849 20.888C34.6289 20.888 34.1115 21.0773 33.7329 21.456C33.3595 21.8347 33.1222 22.36 33.0209 23.032H37.2769ZM38.5649 26.84C38.3729 27.064 38.1515 27.2587 37.9009 27.424C37.6502 27.584 37.3835 27.7147 37.1009 27.816C36.8182 27.9173 36.5249 27.992 36.2209 28.04C35.9222 28.088 35.6262 28.112 35.3329 28.112C34.7729 28.112 34.2529 28.0187 33.7729 27.832C33.2982 27.64 32.8849 27.3627 32.5329 27C32.1862 26.632 31.9142 26.1787 31.7169 25.64C31.5249 25.096 31.4289 24.472 31.4289 23.768C31.4289 23.2027 31.5169 22.6773 31.6929 22.192C31.8689 21.7013 32.1195 21.2747 32.4449 20.912C32.7755 20.5493 33.1782 20.264 33.6529 20.056C34.1275 19.848 34.6609 19.744 35.2529 19.744C35.7489 19.744 36.2049 19.8267 36.6209 19.992C37.0422 20.152 37.4049 20.3867 37.7089 20.696C38.0129 21.0053 38.2502 21.3867 38.4209 21.84C38.5969 22.2933 38.6849 22.8107 38.6849 23.392C38.6849 23.632 38.6582 23.7947 38.6049 23.88C38.5515 23.96 38.4529 24 38.3089 24H32.9809C32.9969 24.4853 33.0662 24.9093 33.1889 25.272C33.3115 25.6293 33.4795 25.928 33.6929 26.168C33.9115 26.408 34.1702 26.5867 34.4689 26.704C34.7675 26.8213 35.1009 26.88 35.4689 26.88C35.8155 26.88 36.1142 26.84 36.3649 26.76C36.6209 26.68 36.8395 26.5947 37.0209 26.504C37.2075 26.408 37.3622 26.32 37.4849 26.24C37.6129 26.16 37.7249 26.12 37.8209 26.12C37.9489 26.12 38.0475 26.168 38.1169 26.264L38.5649 26.84ZM51.5719 19.872L48.9559 28H47.7079C47.5585 28 47.4572 27.9013 47.4039 27.704L45.6919 22.408C45.6492 22.2747 45.6119 22.144 45.5799 22.016C45.5479 21.8827 45.5185 21.7493 45.4919 21.616C45.4439 21.8933 45.3772 22.1627 45.2919 22.424L43.5559 27.704C43.5025 27.9013 43.3879 28 43.2119 28H42.0279L39.4039 19.872H40.6359C40.7585 19.872 40.8599 19.9013 40.9399 19.96C41.0252 20.0187 41.0812 20.0933 41.1079 20.184L42.5719 25.176C42.6199 25.3787 42.6625 25.576 42.6999 25.768C42.7372 25.96 42.7719 26.152 42.8039 26.344C42.8519 26.152 42.9025 25.96 42.9559 25.768C43.0145 25.576 43.0732 25.3787 43.1319 25.176L44.7559 20.152C44.7825 20.0613 44.8332 19.9893 44.9079 19.936C44.9825 19.8773 45.0732 19.848 45.1799 19.848H45.8599C45.9772 19.848 46.0732 19.8773 46.1479 19.936C46.2279 19.9893 46.2812 20.0613 46.3079 20.152L47.8919 25.176C47.9505 25.3787 48.0065 25.5787 48.0599 25.776C48.1132 25.968 48.1612 26.1627 48.2039 26.36C48.2359 26.168 48.2732 25.976 48.3159 25.784C48.3585 25.5867 48.4065 25.384 48.4599 25.176L49.9479 20.184C49.9745 20.0933 50.0279 20.0187 50.1079 19.96C50.1932 19.9013 50.2892 19.872 50.3959 19.872H51.5719Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export { View, Edit };
diff --git a/src/editor/components/components/ActionBar/index.js 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
@@ -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;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ActionBar } from './ActionBar.component.jsx';