Merge pull request #906 from 3DStreet/category-cleanup

Category cleanup

src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx

@@ -1,19 +1,18 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useAuthContext } from '../../../contexts/index.js';
+import { Button, Tabs } from '../../components';
 
 import styles from './AddLayerPanel.module.scss';
 import classNames from 'classnames';
-import { Button } from '../Button';
-import { Chevron24Down, Plus20Circle } from '../../../icons';
-import { Dropdown } from '../Dropdown';
+import { Chevron24Down } from '../../../icons';
 import CardPlaceholder from '../../../../../ui_assets/card-placeholder.svg';
 import LockedCard from '../../../../../ui_assets/locked-card.svg';
 import mixinCatalog from '../../../../catalog.json';
 import posthog from 'posthog-js';
 import Events from '../../../lib/Events';
 import pickPointOnGroundPlane from '../../../lib/pick-point-on-ground-plane';
-import { layersData, streetLayersData } from './layersData.js';
+import { customLayersData, streetLayersData } from './layersData.js';
 import { LayersOptions } from './LayersOptions.js';
 
 // Create an empty image
@@ -281,16 +280,20 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   }, []);
 
   const selectedCards = useMemo(() => {
-    if (selectedOption === 'Pro Layers') {
-      return layersData;
-    } else if (selectedOption === 'Street Layers') {
-      return streetLayersData;
-    } else {
-      return getSelectedMixinCards(groupedMixins, selectedOption);
+    switch (selectedOption) {
+      case 'Custom Layers':
+        return customLayersData;
+      case 'Streets and Intersections':
+        return streetLayersData;
+      default:
+        return getSelectedMixinCards(groupedMixins, selectedOption);
     }
   }, [groupedMixins, selectedOption]);
 
   const handleSelect = (value) => {
+    posthog.capture('select_layer_option', {
+      layer_option: value
+    });
     setSelectedOption(value);
   };
 
@@ -417,18 +420,16 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
         <Chevron24Down />
       </Button>
       <div className={styles.header}>
-        <div className={styles.button}>
-          <Plus20Circle />
-          <p className={styles.buttonLabel}>Add New Entity</p>
+        <div className={styles.categories}>
+          <Tabs
+            tabs={LayersOptions.map((option) => ({
+              label: option.label,
+              value: option.value,
+              isSelected: selectedOption === option.value,
+              onClick: () => handleSelect(option.value)
+            }))}
+          />
         </div>
-        <Dropdown
-          placeholder="Layers: Maps & Reference"
-          options={LayersOptions}
-          onSelect={handleSelect}
-          selectedOptionValue={selectedOption}
-          className={styles.dropdown}
-          smallDropdown={true}
-        />
       </div>
       <div className={styles.cards}>
         {selectedCards.map((card) => (

src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss

@@ -47,8 +47,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24px;
-    margin-top: -30px;
+    margin-bottom: 12px;
+    margin-top: 12px;
   }
 
   .cards {

src/editor/components/components/AddLayerPanel/LayersOptions.js

@@ -1,36 +1,26 @@
 const LayersOptions = [
   {
-    value: 'Dividers & Traffic Control',
-    label: '🚧 Dividers & Traffic Control',
-    mixinGroups: ['dividers'],
-    onClick: () => {}
-  },
-  {
-    value: 'Street Layers',
-    label: '🛣️ Street Layers',
+    value: 'Bicycles',
+    label: '🚲 Bicycles',
+    mixinGroups: ['vehicles', 'cyclists'],
     onClick: () => {}
   },
   {
-    value: 'Pro Layers',
-    label: '🌏 Pro Layers',
+    value: 'People',
+    label: '🚶 People',
+    mixinGroups: ['people'],
     onClick: () => {}
   },
   {
-    value: 'Motor Vehicles',
-    label: '🚗 Motor Vehicles',
+    value: 'Vehicles',
+    label: '🚗 Vehicles',
     mixinGroups: ['vehicles-rigged', 'vehicles-transit'],
     onClick: () => {}
   },
   {
-    value: 'People Power Vehicles',
-    label: '🚲 People Power Vehicles',
-    mixinGroups: ['vehicles', 'cyclists'],
-    onClick: () => {}
-  },
-  {
-    value: 'Characters',
-    label: '🚶 Characters',
-    mixinGroups: ['people'],
+    value: 'Dividers & Traffic Control',
+    label: '🚧 Dividers & Traffic Control',
+    mixinGroups: ['dividers'],
     onClick: () => {}
   },
   {
@@ -39,12 +29,21 @@ const LayersOptions = [
     mixinGroups: ['sidewalk-props', 'intersection-props'],
     onClick: () => {}
   },
-
+  {
+    value: 'Streets and Intersections',
+    label: '🚦 Streets and Intersections',
+    onClick: () => {}
+  },
   {
     value: 'Buildings',
     label: '🏠 Buildings',
     mixinGroups: ['buildings'],
     onClick: () => {}
+  },
+  {
+    value: 'Custom Layers',
+    label: '🌐 Custom Layers',
+    onClick: () => {}
   }
 ];
 

src/editor/components/components/AddLayerPanel/layersData.js

@@ -1,8 +1,6 @@
 import {
   createSvgExtrudedEntity,
-  createMapbox,
   createStreetmixStreet,
-  create3DTiles,
   createCustomModel,
   createPrimitiveGeometry,
   createIntersection,
@@ -63,39 +61,28 @@ export const streetLayersData = [
     description: 'Premade Street 150ft Right of Way / 124ft Roadway Width',
     id: 6,
     handlerFunction: create150ftRightOfWay
-  }
-];
-
-// data for PRO layers cards
-export const layersData = [
-  {
-    name: 'Mapbox 2D Aerial',
-    img: 'ui_assets/cards/mapbox2d.jpg',
-    icon: 'ui_assets/cards/icons/mapbox24.png',
-    requiresPro: true,
-    description:
-      'Create entity with mapbox component, that accepts a long / lat and renders a plane with dimensions that (should be) at a correct scale.',
-    id: 1,
-    handlerFunction: createMapbox
   },
   {
-    name: 'Google Maps 3D Tiles',
-    img: 'ui_assets/cards/google3d.jpg',
-    icon: 'ui_assets/cards/icons/google24.png',
+    name: 'Create intersection',
+    img: '',
     requiresPro: true,
+    icon: '',
     description:
-      'Adds an entity to load and display 3d tiles from Google Maps Tiles API 3D Tiles endpoint. This will break your scene and you cannot save it yet, so beware before testing.',
-    id: 2,
-    handlerFunction: create3DTiles
-  },
+      'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
+    id: 7,
+    handlerFunction: createIntersection
+  }
+];
+
+export const customLayersData = [
   {
     name: 'Entity from extruded SVG',
     img: '',
     icon: '',
     requiresPro: true,
     description:
       'Create entity with svg-extruder component, that accepts a svgString and creates a new entity with geometry extruded from the svg and applies the default mixin material grass.',
-    id: 3,
+    id: 1,
     handlerFunction: createSvgExtrudedEntity
   },
   {
@@ -105,7 +92,7 @@ export const layersData = [
     icon: '',
     description:
       'Create entity with model from path for a glTF (or Glb) file hosted on any publicly accessible HTTP server.',
-    id: 4,
+    id: 2,
     handlerFunction: createCustomModel
   },
   {
@@ -115,27 +102,17 @@ export const layersData = [
     icon: '',
     description:
       'Create entity with A-Frame primitive geometry. Geometry type could be changed in properties panel.',
-    id: 5,
+    id: 3,
     handlerFunction: createPrimitiveGeometry
   },
-  {
-    name: 'Create intersection',
-    img: '',
-    requiresPro: true,
-    icon: '',
-    description:
-      'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
-    id: 6,
-    handlerFunction: createIntersection
-  }, // createImageEntity
   {
     name: 'Place New Image Entity',
     img: '',
     requiresPro: true,
     icon: 'ui_assets/cards/icons/gallery24.png',
     description:
       'Place an image such as a sign, reference photo, custom map, etc.',
-    id: 7,
+    id: 4,
     handlerFunction: createImageEntity
   }
 ];

src/editor/components/components/Tabs/Tabs.module.scss

@@ -5,10 +5,7 @@
   align-items: center;
   width: fit-content;
   column-gap: 12px;
-  margin: 14px auto 0;
-  background: rgba(55, 55, 55, 0.4);
   border-radius: 16px;
-  padding: 8px 12px;
 
   .activeTab,
   .inactiveTab {

src/editor/components/scenegraph/Toolbar.js

@@ -112,6 +112,7 @@ export default class Toolbar extends Component {
   };
 
   newHandler = () => {
+    posthog.capture('new_scene_clicked');
     AFRAME.INSPECTOR.selectEntity(null);
     STREET.utils.newScene();
     AFRAME.scenes[0].emit('newScene');