3DStreet · kfarr · Mar 13, 2024 · Nov 26, 2023 · Nov 28, 2023 · Mar 13, 2024
diff --git a/dist/3dstreet-editor.js b/dist/3dstreet-editor.js
diff --git a/dist/3dstreet-editor.js.map b/dist/3dstreet-editor.js.map
diff --git a/dist/index.html b/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html><head><script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-street-component.min.js"></script><script src="https://github.3dstreet.org/src/lib/aframe-mapbox-component.min.js"></script><title>3DStreet</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="./assets/favicon.ico"><link rel="stylesheet" href="//github.3dstreet.org/src/viewer-styles.css"><script defer="defer" src="/3dstreet-editor.js"></script></head><body><div class="loader__wrapper"><div class="loader"><div class="entities"><img src="//github.3dstreet.org/ui_assets/loader/entities.svg" alt="entities"/></div><div class="transport"><div class="wrapper__transport"><img src="//github.3dstreet.org/ui_assets/loader/car.svg" class="car" alt="car"/> <img src="//github.3dstreet.org/ui_assets/loader/bus.svg" class="bus" alt="bus"/> <img src="//github.3dstreet.org/ui_assets/loader/bike.svg" class="bike" alt="bike"/></div></div><div class="road">Loading 3DStreet</div></div></div><div class="viewer-header-wrapper"><button class="viewer-logo-start-editor-button" onclick="startEditor()"><img class="viewer-logo-img" alt="3DStreet Viewer" src="./assets/3DStreet-Viewer-Start-Editor.svg"></button></div><div class="right-fixed"><ul class="right-menu"><li onclick="buttonScreenshotTock()"><a class="camera" href="#"><span>Capture image as JPG </span><img src="//github.3dstreet.org/ui_assets/camera-icon.svg"></a></li><li onclick="STREET.utils.inputStreetmix()"><a class="load" href="#"><span>Load Streetmix URL </span><img src="//github.3dstreet.org/ui_assets/streetmix-logo.svg"></a></li><li><a class="load"><label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"><input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span>Load JSON File </span><img src="//github.3dstreet.org/ui_assets/upload-icon.svg"></label></a></li></ul></div><a-scene renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;" inspector="url: ./dist/3dstreet-editor.js" timed-inspector="1" loading-screen="enabled: false" notify metadata scene-title reflection><a-assets></a-assets><a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children><a-entity id="default-street" street streetmix-loader set-loader-from-hash></a-entity></a-entity><a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children></a-entity><a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity><a-entity id="cameraRig" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true"><a-entity id="camera" camera="far: 1000" position="0 1.6 0"></a-entity><a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity><a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity><a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity></a-entity></a-scene></body><script>/* loading animation script */
+<!doctype html><html><head><script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-street-component.min.js"></script><script src="https://github.3dstreet.org/src/lib/aframe-mapbox-component.min.js"></script><title>3DStreet</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="./assets/favicon.ico"><link rel="stylesheet" href="//github.3dstreet.org/src/viewer-styles.css"><script defer="defer" src="/3dstreet-editor.js"></script></head><body><div class="loader__wrapper"><div class="loader"><div class="entities"><img src="//github.3dstreet.org/ui_assets/loader/entities.svg" alt="entities"/></div><div class="transport"><div class="wrapper__transport"><img src="//github.3dstreet.org/ui_assets/loader/car.svg" class="car" alt="car"/> <img src="//github.3dstreet.org/ui_assets/loader/bus.svg" class="bus" alt="bus"/> <img src="//github.3dstreet.org/ui_assets/loader/bike.svg" class="bike" alt="bike"/></div></div><div class="road">Loading 3DStreet</div></div></div><div class="viewer-header-wrapper"><button class="viewer-logo-start-editor-button" onclick="startEditor()"><img class="viewer-logo-img" alt="3DStreet Viewer" src="./assets/3DStreet-Viewer-Start-Editor.svg"></button></div><div class="right-fixed"><ul class="right-menu"><li onclick="buttonScreenshotTock()"><a class="camera" href="#"><span>Capture image as JPG </span><img src="//github.3dstreet.org/ui_assets/camera-icon.svg"></a></li><li onclick="STREET.utils.inputStreetmix()"><a class="load" href="#"><span>Load Streetmix URL </span><img src="//github.3dstreet.org/ui_assets/streetmix-logo.svg"></a></li><li><a class="load"><label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"><input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span>Load JSON File </span><img src="//github.3dstreet.org/ui_assets/upload-icon.svg"></label></a></li></ul></div><a-scene renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16; logarithmicDepthBuffer: true;" inspector="url: ./dist/3dstreet-editor.js" timed-inspector="1" loading-screen="enabled: false" notify metadata scene-title reflection><a-assets></a-assets><a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children><a-entity id="default-street" street streetmix-loader set-loader-from-hash></a-entity></a-entity><a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children></a-entity><a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity><a-entity id="cameraRig" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true"><a-entity id="camera" camera="far: 1000" position="0 1.6 0"></a-entity><a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity><a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff" teleport-controls="cameraRig: #cameraRig; button: trigger"></a-entity><a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity></a-entity></a-scene></body><script>/* loading animation script */
     document.addEventListener('DOMContentLoaded', function () {
       const scene = document.querySelector('a-scene');
       const splash = document.querySelector('.loader__wrapper');

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "3dstreet-editor",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "An open source street editor.",
   "main": "dist/3dstreet-editor.js",
   "scripts": {

diff --git a/src/components/components/Mixins.js b/src/components/components/Mixins.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import Events from '../../lib/Events';
 import { DropdownArrowIcon } from '../../icons';
 
@@ -28,16 +28,29 @@ export default class Mixin extends React.Component {
       .map((v) => ({ label: v, value: v }));
   }
 
-  getMixinOptions = () => {
-    const mixinIds = this.props.entity.mixinEls.map(function (mixin) {
-      return mixin.id;
-    });
-    return Array.prototype.slice
-      .call(document.querySelectorAll('a-mixin'))
-      .sort()
-      .map(function (mixin) {
-        return { value: mixin.id, label: mixin.id };
+  getGroupedMixinOptions = () => {
+    const mixinElements = document.querySelectorAll('a-mixin');
+    const groupedArray = [];
+    let categoryName, mixinId;
+
+    const groupedObject = {};
+    for (let mixinEl of Array.from(mixinElements)) {
+      categoryName = mixinEl.getAttribute('category');
+      if (!categoryName) continue;
+      mixinId = mixinEl.id;
+      if (!groupedObject[categoryName]) {
+        groupedObject[categoryName] = [];
+      }
+      groupedObject[categoryName].push({ label: mixinId, value: mixinId });
+    }
+
+    for (let categoryName of Object.keys(groupedObject)) {
+      groupedArray.push({
+        label: categoryName,
+        options: groupedObject[categoryName]
       });
+    }
+    return groupedArray;
   };
 
   updateMixins = (value) => {
@@ -77,6 +90,40 @@ export default class Mixin extends React.Component {
   };
 
   render() {
+    const groupStyles = {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    };
+
+    const formatGroupLabel = (data) => (
+      <div style={groupStyles}>
+        <span>{data.label}</span>
+      </div>
+    );
+
+    const handleHeaderClick = (id) => {
+      const node = document.querySelector(`#${id}`).parentElement
+        .nextElementSibling;
+      const classes = node.classList;
+      if (classes.contains('collapsed')) {
+        node.classList.remove('collapsed');
+      } else {
+        node.classList.add('collapsed');
+      }
+    };
+
+    const CustomGroupHeading = (props) => {
+      return (
+        <div
+          className="group-heading-wrapper"
+          onClick={() => handleHeaderClick(props.id)}
+        >
+          <components.GroupHeading className="collapsed" {...props} />
+        </div>
+      );
+    };
+
     return (
       <div className="mixinOptions">
         <div className="propertyRow">
@@ -86,11 +133,13 @@ export default class Mixin extends React.Component {
               <Select
                 id="mixinSelect"
                 classNamePrefix="select"
-                options={this.getMixinOptions()}
+                options={this.getGroupedMixinOptions()}
                 components={{
+                  GroupHeading: CustomGroupHeading,
                   DropdownIndicator: DropdownArrowIcon,
                   IndicatorSeparator: () => null
                 }}
+                formatGroupLabel={formatGroupLabel}
                 isMulti={true}
                 placeholder="Search mixins..."
                 noResultsText="No mixins found"
@@ -102,11 +151,13 @@ export default class Mixin extends React.Component {
               <Select
                 id="mixinSelect"
                 classNamePrefix="select-single"
-                options={this.getMixinOptions()}
+                options={this.getGroupedMixinOptions()}
                 components={{
+                  GroupHeading: CustomGroupHeading,
                   DropdownIndicator: DropdownArrowIcon,
                   IndicatorSeparator: () => null
                 }}
+                formatGroupLabel={formatGroupLabel}
                 isMulti={false}
                 isSearchable={true}
                 isClearable={false}