Merge pull request #528 from 3DStreet/fix-issues-ui-entity-panel

Fix issues UI entity panel
3DStreet · May 27, 2024 · b9d52f1 · b9d52f1
2 parents 0456ae1 + 32410c2
commit b9d52f1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 62 deletions.
diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js
@@ -278,7 +278,7 @@ export default class Main extends Component {
             <AddLayerButton onClick={this.toggleAddLayerPanel} />
           </div>
         )}
-        {this.state.isAddLayerPanelOpen && (
+        {this.state.inspectorEnabled && this.state.isAddLayerPanelOpen && (
           <AddLayerPanel
             onClose={this.toggleAddLayerPanel}
             isAddLayerPanelOpen={this.state.isAddLayerPanelOpen}

diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
@@ -5,6 +5,8 @@ import { Button } from '../Button';
 import { Chevron24Down, Load24Icon, Plus20Circle } from '../../../icons';
 import { Dropdown } from '../Dropdown';
 import CardPlaceholder from '../../../../../ui_assets/card-placeholder.svg';
+import { LayersOptions } from './LayersOptions.js';
+
 import {
   createSvgExtrudedEntity,
   createMapbox,
@@ -16,7 +18,8 @@ import {
 import Events from '../../../lib/Events';
 
 const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
-  const [selectedOption, setSelectedOption] = useState(null);
+  // set the first Layers option when opening the panel
+  const [selectedOption, setSelectedOption] = useState(LayersOptions[0].value);
   const [groupedMixins, setGroupedMixins] = useState([]);
 
   useEffect(() => {
@@ -60,62 +63,6 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
     return groupedArray;
   };
 
-  const options = [
-    {
-      value: 'Layers: Streets & Intersections',
-      label: 'Layers: Streets & Intersections',
-      onClick: () => console.log('Layers: Streets & Intersections')
-    },
-    {
-      value: 'Models: Personal Vehicles',
-      label: 'Models: Personal Vehicles',
-      mixinGroups: ['vehicles', 'vehicles-rigged'],
-      onClick: () => console.log('Models: Personal Vehicles')
-    },
-    {
-      value: 'Models: Transit Vehicles',
-      label: 'Models: Transit Vehicles',
-      mixinGroups: ['vehicles-transit'],
-      onClick: () => console.log('Models: Transit Vehicles')
-    },
-    {
-      value: 'Models: Utility Vehicles',
-      label: 'Models: Utility Vehicles',
-      mixinGroups: ['vehicles-rigged'],
-      onClick: () => console.log('Models: Utility Vehicles')
-    },
-    {
-      value: 'Models: Characters',
-      label: 'Models: Characters',
-      mixinGroups: ['people', 'people-rigged'],
-      onClick: () => console.log('Models: Characters')
-    },
-    {
-      value: 'Models: Street Props',
-      label: 'Models: Street Props',
-      mixinGroups: ['sidewalk-props', 'intersection-props'],
-      onClick: () => console.log('Models: Street Props')
-    },
-    {
-      value: 'Models: dividers',
-      label: 'Models: dividers',
-      mixinGroups: ['dividers'],
-      onClick: () => console.log('Models: dividers')
-    },
-    {
-      value: 'Models: Buildings',
-      label: 'Models: Buildings',
-      mixinGroups: ['buildings'],
-      onClick: () => console.log('Models: Buildings')
-    },
-    {
-      value: 'Models: stencils',
-      label: 'Models: stencils',
-      mixinGroups: ['stencils'],
-      onClick: () => console.log('Models: stencils')
-    }
-  ];
-
   // data for layers cards
   const layersData = [
     {
@@ -177,7 +124,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   // get array with objects data (cardsData) from mixinGroups of selectedOption
   const getSelectedMixinCards = (selectedOption) => {
     if (!selectedOption) return [];
-    const selectedOptionData = options.find(
+    const selectedOptionData = LayersOptions.find(
       (option) => option.value === selectedOption
     );
     const selectedMixinGroupNames = selectedOptionData.mixinGroups;
@@ -344,7 +291,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
         </div>
         <Dropdown
           placeholder="Layers: Maps & Reference"
-          options={options}
+          options={LayersOptions}
           onSelect={handleSelect}
           selectedOptionValue={selectedOption}
           className={styles.dropdown}

diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss b/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss
@@ -11,7 +11,7 @@
   width: calc(100% - 82px);
   transition: transform 0.3s ease-in-out;
   z-index: 100;
-  padding: 20px 40px 20px 42px;
+  padding: 0px 40px 20px 42px;
   margin: 0 auto;
   overflow-y: scroll;
 
@@ -42,6 +42,7 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
+    margin-top: -30px;
   }
 
   .cards {
@@ -72,7 +73,7 @@
   }
 
   .closeButton {
-    position: absolute;
+    position: sticky;
     width: 64px;
     height: 40px;
     transform: translateX(-50%);

diff --git a/src/editor/components/components/AddLayerPanel/LayersOptions.js b/src/editor/components/components/AddLayerPanel/LayersOptions.js
@@ -0,0 +1,51 @@
+const LayersOptions = [
+  {
+    value: 'Layers: Streets & Intersections',
+    label: 'Layers: Streets & Intersections',
+    onClick: () => console.log('Layers: Streets & Intersections')
+  },
+  {
+    value: 'Models: Personal Vehicles',
+    label: 'Models: Personal Vehicles',
+    mixinGroups: ['vehicles', 'vehicles-rigged'],
+    onClick: () => console.log('Models: Personal Vehicles')
+  },
+  {
+    value: 'Models: Transit Vehicles',
+    label: 'Models: Transit Vehicles',
+    mixinGroups: ['vehicles-transit'],
+    onClick: () => console.log('Models: Transit Vehicles')
+  },
+  {
+    value: 'Models: Utility Vehicles',
+    label: 'Models: Utility Vehicles',
+    mixinGroups: ['vehicles-rigged'],
+    onClick: () => console.log('Models: Utility Vehicles')
+  },
+  {
+    value: 'Models: Characters',
+    label: 'Models: Characters',
+    mixinGroups: ['people', 'people-rigged'],
+    onClick: () => console.log('Models: Characters')
+  },
+  {
+    value: 'Models: Street Props',
+    label: 'Models: Street Props',
+    mixinGroups: ['sidewalk-props', 'intersection-props'],
+    onClick: () => console.log('Models: Street Props')
+  },
+  {
+    value: 'Models: dividers',
+    label: 'Models: dividers',
+    mixinGroups: ['dividers'],
+    onClick: () => console.log('Models: dividers')
+  },
+  {
+    value: 'Models: Buildings',
+    label: 'Models: Buildings',
+    mixinGroups: ['buildings'],
+    onClick: () => console.log('Models: Buildings')
+  }
+];
+
+export { LayersOptions };