Merge branch 'master' of https://github.com/3DStreet/3dstreet-editor …

…into issue#60
3DStreet · Nov 18, 2022 · 4280e81 · 4280e81
2 parents a3070c5 + 80d4a46
commit 4280e81
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 43 deletions.
diff --git a/src/components/components/Sidebar.js b/src/components/components/Sidebar.js
@@ -1,7 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import ComponentsContainer from './ComponentsContainer';
 import Events from '../../lib/Events';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { capitalize } from 'lodash';
 import classnames from 'classnames';
 
 export default class Sidebar extends React.Component {
@@ -12,8 +13,8 @@ export default class Sidebar extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { 
-      open: false ,
+    this.state = {
+      open: false,
       rightBarHide: false
     };
   }
@@ -30,8 +31,8 @@ export default class Sidebar extends React.Component {
 
   // additional toggle for hide/show panel by clicking the button
   toggleRightBar = () => {
-    this.setState({ rightBarHide: !this.state.rightBarHide});
-  }
+    this.setState({ rightBarHide: !this.state.rightBarHide });
+  };
 
   handleToggle = () => {
     this.setState({ open: !this.state.open });
@@ -49,17 +50,17 @@ export default class Sidebar extends React.Component {
 
     if (entity && visible) {
       const entityName = entity.getDOMAttribute('data-layer-name');
+      const entityMixin = entity.getDOMAttribute('mixin');
+      const formattedMixin = entityMixin
+        ? capitalize(entityMixin.replaceAll('-', ' ').replaceAll('_', ' '))
+        : null;
+
       return (
         <div id="sidebar" className={className}>
-            <div id="entity-name" 
-              onClick={this.toggleRightBar}
-              >
-              <span>{entityName}</span>
-              <div 
-                id="toggle-rightbar"                
-              >
-              </div>
-            </div>
+          <div id="entity-name" onClick={this.toggleRightBar}>
+            <span>{entityName || formattedMixin}</span>
+            <div id="toggle-rightbar" />
+          </div>
           <ComponentsContainer entity={entity} />
         </div>
       );

diff --git a/src/components/scenegraph/Entity.js b/src/components/scenegraph/Entity.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import { cloneEntity, printEntity, removeEntity } from '../../lib/entity';
+
 import PropTypes from 'prop-types';
+import React from 'react';
 import classnames from 'classnames';
-import { printEntity, removeEntity, cloneEntity } from '../../lib/entity';
 
 const Events = require('../../lib/Events.js');
 
@@ -13,23 +14,29 @@ export default class Entity extends React.Component {
     isFiltering: PropTypes.bool,
     isSelected: PropTypes.bool,
     selectEntity: PropTypes.func,
-    toggleExpandedCollapsed: PropTypes.func
+    toggleExpandedCollapsed: PropTypes.func,
+    isInitiallyExpanded: PropTypes.bool,
+    initiallyExpandEntity: PropTypes.func
   };
 
   constructor(props) {
     super(props);
     this.state = {};
   }
 
-  onClick = (evt) => {
+  componentDidMount() {
+    !this.props.isInitiallyExpanded && this.props.initiallyExpandEntity();
+  }
+
+  onClick = evt => {
     if (!evt.target.classList.contains('fa')) {
       this.props.selectEntity(this.props.entity);
-    }    
-  }
+    }
+  };
 
   onDoubleClick = () => Events.emit('objectfocus', this.props.entity.object3D);
 
-  toggleVisibility = (evt) => {
+  toggleVisibility = evt => {
     const entity = this.props.entity;
     const visible =
       entity.tagName.toLowerCase() === 'a-scene'
@@ -68,13 +75,20 @@ export default class Entity extends React.Component {
       );
 
     // Add spaces depending on depth.
-    const pad = (this.props.depth > 1)? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(this.props.depth):'';
+    const pad =
+      this.props.depth > 1
+        ? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(this.props.depth)
+        : '';
 
     let collapse;
-    if (entity.children.length > 0 && !isFiltering && !!entity.hasAttribute('data-layer-show-children')) {
+    if (
+      entity.children.length > 0 &&
+      !isFiltering &&
+      !!entity.hasAttribute('data-layer-show-children')
+    ) {
       collapse = (
         <span
-          onClick={(evt) => {
+          onClick={evt => {
             evt.stopPropagation();
             this.props.toggleExpandedCollapsed(entity);
           }}

diff --git a/src/components/scenegraph/SceneGraph.js b/src/components/scenegraph/SceneGraph.js
@@ -30,7 +30,8 @@ export default class SceneGraph extends React.Component {
       filter: '',
       filteredEntities: [],
       selectedIndex: -1,
-      leftBarHide: false
+      leftBarHide: false,
+      initiallyExpandedEntities: []
     };
 
     this.rebuildEntityOptions = debounce(
@@ -279,6 +280,21 @@ export default class SceneGraph extends React.Component {
           isSelected={this.props.selectedEntity === entityOption.entity}
           selectEntity={this.selectEntity}
           toggleExpandedCollapsed={this.toggleExpandedCollapsed}
+          isInitiallyExpanded={this.state.initiallyExpandedEntities.some(
+            item => item === entityOption.entity.id
+          )}
+          initiallyExpandEntity={() => {
+            this.toggleExpandedCollapsed(entityOption.entity);
+            this.setState(prevState => ({
+              ...prevState,
+              initiallyExpandedEntities: [
+                ...prevState.initiallyExpandedEntities.filter(
+                  item => item !== entityOption.entity.id
+                ),
+                entityOption.entity.id
+              ]
+            }));
+          }}
         />
       );
       layerEntities.push(entity);

diff --git a/src/lib/raycaster.js b/src/lib/raycaster.js
@@ -20,7 +20,9 @@ function initRaycaster(inspector) {
     const objects = raycaster.objects;
     raycaster.objects = objects.filter(node => {
       while (node) {
-        if (!node.visible) { return false; }
+        if (!node.visible) {
+          return false;
+        }
         node = node.parent;
       }
       return true;
@@ -43,7 +45,7 @@ function initRaycaster(inspector) {
   mouseCursor.addEventListener('mouseleave', onMouseLeave);
   inspector.container.addEventListener('mousedown', onMouseDown);
   inspector.container.addEventListener('mouseup', onMouseUp);
-  inspector.container.addEventListener('dblclick', onDoubleClick);
+  // inspector.container.addEventListener('dblclick', onDoubleClick);
 
   inspector.sceneEl.canvas.addEventListener('mouseleave', () => {
     setTimeout(() => {
@@ -56,7 +58,10 @@ function initRaycaster(inspector) {
   const onDoubleClickPosition = new THREE.Vector2();
 
   function onMouseEnter() {
-    Events.emit('raycastermouseenter', mouseCursor.components.cursor.intersectedEl);
+    Events.emit(
+      'raycastermouseenter',
+      mouseCursor.components.cursor.intersectedEl
+    );
   }
 
   function onMouseLeave() {

diff --git a/src/style/entity.styl b/src/style/entity.styl
@@ -3,15 +3,16 @@
 .entityPrint  
   overflow hidden
   text-overflow ellipsis
+  line-height 14px
 
 .entityName
   width 230px
   position relative
   white-space nowrap
   font-style normal
-  font-weight 400
-  font-size 16px
-  line-height 19px
+  font-weight 500
+  font-size 12px
+  line-height 14px
   color #FFFFFF
 
 [data-entity-name-type="class"]

diff --git a/src/style/index.styl b/src/style/index.styl
@@ -137,9 +137,9 @@ body.aframe-inspector-opened
     background-color #5B37C0
     border-radius 22px
 
-  #scenegraph,
-  #rightPanel
-    z-index 9998
+  // #scenegraph,
+  // #rightPanel
+    // z-index 9998
 
   #sidebar,
   #scenegraph,
@@ -429,14 +429,14 @@ body.aframe-inspector-opened
 
   .aframe-inspector-opened a-scene .a-canvas
     background-color #191919
-    z-index 9998
+    // z-index 9998
 
   .toggle-sidebar
     align-items center
     display flex
     height 100%
     position absolute
-    z-index 9998
+    // z-index 9998
 
     .left
       left 0
@@ -448,7 +448,7 @@ body.aframe-inspector-opened
       background-color #262626
       color #bcbcbc
       padding 5px
-      z-index 9998
+      // z-index 9998
 
     a.hover
       background-color #1faaf2

diff --git a/src/style/scenegraph.styl b/src/style/scenegraph.styl
@@ -6,6 +6,7 @@
   right 40px
   height 43px
   width fit-content
+  z-index: 10
 
   .toolbarActions
     width fit-content
@@ -92,6 +93,7 @@
     margin-top 20px
     background #4b4b4b
     border-radius 12px
+    overflow: hidden
     display flex
     flex-direction column
     align-items center
@@ -106,7 +108,7 @@
     flex none
     order 1
     flex-grow 0
-    padding 16px 24px 16px 16px
+    padding 10.5px 16px 10.5px 14.5px
     box-sizing border-box
 
     > span
@@ -135,13 +137,13 @@
     white-space nowrap
 
     &.active
-      width 324px
+      // width 324px
       margin 0 8px
-      height 52px
+      // height 52px
       background $layerActive
-      border-radius 10px
+      // border-radius 10px
       color #fff
-      padding 16px 16px 16px 8px
+      padding 10.5px 16px 10.5px 14.5px
       .component:hover
         color #1888c1
       .entityActions