Merge pull request #683 from 3DStreet/cards-img

use catalog.json for additional asset metadata

src/catalog.json

@@ -0,0 +1,12 @@
+[
+    {
+        "id": "Bicycle_1",
+        "name": "Bicycle Model 1",
+        "img": "ui_assets/cards/models/bicycle_1.jpg"
+    },
+    {
+        "id": "bus",
+        "name": "Bus New Flyer XD40",
+        "description": "The New Flyer XD40 is a modern, stylish, and comfortable bus that is perfect for people in urban settings."
+    }
+]

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

@@ -10,6 +10,7 @@ import CardPlaceholder from '../../../../../ui_assets/card-placeholder.svg';
 import LockedCard from '../../../../../ui_assets/locked-card.svg';
 
 import { LayersOptions } from './LayersOptions.js';
+import mixinCatalog from '../../../../catalog.json';
 import posthog from 'posthog-js';
 
 import {
@@ -41,23 +42,43 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
     const groupedArray = [];
     let categoryName, mixinId;
 
+    // convert the mixins array into an object with mixins for faster access by index
+    const mixinCatalogObj = mixinCatalog.reduce((obj, item) => {
+      obj[item.id] = item;
+      return obj;
+    }, {});
+
     const groupedObject = {};
     let index = 0;
     for (const mixinEl of mixinElements) {
       categoryName = mixinEl.getAttribute('category');
       if (!categoryName) continue;
-      mixinId = mixinEl.id;
+
       if (!groupedObject[categoryName]) {
         groupedObject[categoryName] = [];
       }
-      groupedObject[categoryName].push({
+      // get mixin data from mixin catalog and push it to object with grouped mixins
+      mixinId = mixinEl.id;
+      const mixinDataFromCatalog = mixinCatalogObj[mixinId];
+      let mixinImg = '';
+      let mixinName = '';
+      let mixinDescr = '';
+
+      if (mixinDataFromCatalog) {
+        mixinImg = mixinDataFromCatalog.img;
+        mixinName = mixinDataFromCatalog.name;
+        mixinDescr = mixinDataFromCatalog.description;
+      }
+      const mixinData = {
         // here could be data from dataCards JSON file
-        img: '',
+        img: mixinImg,
         icon: '',
         mixinId: mixinId,
-        name: mixinId,
+        name: mixinName || mixinId,
+        description: mixinDescr,
         id: index
-      });
+      };
+      groupedObject[categoryName].push(mixinData);
       index += 1;
     }
 

src/editor/components/components/AddLayerPanel/cardsData.js

@@ -1,8 +1,8 @@
 const mixinsData = {
-  mixinId1: {
-    img: '',
+  bicycle_1: {
+    img: 'ui_assets/cards/models/bicycle_1.jpg',
     icon: '',
-    description: 'Description',
+    description: "Bicycle, it's a bike!",
     id: 1
   },
   mixinId2: {