Merge pull request #6996 from SunBlack/refactor_CesiumInspector_sections

Cleanup section implementation in CesiumInspector
CesiumGS · Sep 6, 2018 · 10588c0 · 10588c0
2 parents c36e4d3 + 966ce16
commit 10588c0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 73 deletions.
diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.css b/Source/Widgets/CesiumInspector/CesiumInspector.css
@@ -38,10 +38,12 @@
     height: 17px;
 }
 
+.cesium-cesiumInspector-sectionContent,
 .cesium-cesiumInspector-show {
     max-height: 500px;
 }
 
+.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent,
 .cesium-cesiumInspector-hide {
     max-height: 0;
     padding: 0 !important;
@@ -92,6 +94,9 @@
 
 .cesium-cesiumInspector-sectionHeader {
     font-weight: bold;
+    font-size: 10pt;
+    margin: 0;
+    cursor: pointer;
 }
 
 .cesium-cesiumInspector-pickSection {
@@ -101,16 +106,11 @@
     margin-bottom: 5px;
 }
 
-.cesium-cesiumInspector-section {
+.cesium-cesiumInspector-sectionContent {
     margin-bottom: 10px;
     transition: max-height 0.25s;
 }
 
-.cesium-cesiumInspector-toggleSwitch {
-    padding: 3px;
-    cursor: pointer;
-}
-
 .cesium-cesiumInspector-tileText {
     padding-bottom: 10px;
     border-bottom: 1px solid #aaa;
@@ -119,3 +119,14 @@
 .cesium-cesiumInspector-relativeText {
     padding-top: 10px;
 }
+
+.cesium-cesiumInspector-sectionHeader::before {
+    margin-right: 5px;
+    content: '+';
+    width: 1ch;
+    display: inline-block;
+}
+
+.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before {
+    content: '-';
+}
diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.js b/Source/Widgets/CesiumInspector/CesiumInspector.js
@@ -52,6 +52,24 @@ define([
             return checkboxContainer;
         }
 
+        function addSection(panel, headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) {
+            var section = document.createElement('div');
+            section.className = 'cesium-cesiumInspector-section';
+            section.setAttribute('data-bind', 'css: { "cesium-cesiumInspector-section-collapsed": !' + sectionVisibleDataBinding + ' }');
+            panel.appendChild(section);
+
+            var sectionHeader = document.createElement('h3');
+            sectionHeader.className = 'cesium-cesiumInspector-sectionHeader';
+            sectionHeader.appendChild(document.createTextNode(headerText));
+            sectionHeader.setAttribute('data-bind', 'click: ' + sectionVisibilityToogleClickEvent);
+            section.appendChild(sectionHeader);
+
+            var sectionContent = document.createElement('div');
+            sectionContent.className = 'cesium-cesiumInspector-sectionContent';
+            section.appendChild(sectionContent);
+            return sectionContent;
+        }
+
         var performanceContainer = document.createElement('div');
 
         var viewModel = new CesiumInspectorViewModel(scene, performanceContainer);
@@ -75,19 +93,7 @@ define([
         element.appendChild(panel);
 
         // General
-        var general = document.createElement('div');
-        general.className = 'cesium-cesiumInspector-sectionHeader';
-        var plus = document.createElement('span');
-        plus.className = 'cesium-cesiumInspector-toggleSwitch';
-        plus.setAttribute('data-bind', 'click: toggleGeneral, text: generalSwitchText');
-        general.appendChild(plus);
-        general.appendChild(document.createTextNode('General'));
-        panel.appendChild(general);
-
-        var generalSection = document.createElement('div');
-        generalSection.className = 'cesium-cesiumInspector-section';
-        generalSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : generalVisible, "cesium-cesiumInspector-hide" : !generalVisible}');
-        panel.appendChild(generalSection);
+        var generalSection = addSection(panel, 'General', 'generalVisible', 'toggleGeneral');
 
         var debugShowFrustums = createCheckBox('checked: frustums', 'Show Frustums');
         var frustumStatistics = document.createElement('div');
@@ -142,22 +148,10 @@ define([
         depthFrustum.appendChild(gPlusButton);
 
         // Primitives
-        var prim = document.createElement('div');
-        prim.className = 'cesium-cesiumInspector-sectionHeader';
-        plus = document.createElement('span');
-        plus.className = 'cesium-cesiumInspector-toggleSwitch';
-        plus.setAttribute('data-bind', 'click: togglePrimitives, text: primitivesSwitchText');
-        prim.appendChild(plus);
-        prim.appendChild(document.createTextNode('Primitives'));
-        panel.appendChild(prim);
-
-        var primitivesSection = document.createElement('div');
-        primitivesSection.className = 'cesium-cesiumInspector-section';
-        primitivesSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : primitivesVisible, "cesium-cesiumInspector-hide" : !primitivesVisible}');
-        panel.appendChild(primitivesSection);
+        var primSection = addSection(panel, 'Primitives', 'primitivesVisible', 'togglePrimitives');
         var pickPrimRequired = document.createElement('div');
         pickPrimRequired.className = 'cesium-cesiumInspector-pickSection';
-        primitivesSection.appendChild(pickPrimRequired);
+        primSection.appendChild(pickPrimRequired);
 
         var pickPrimitiveButton = document.createElement('input');
         pickPrimitiveButton.type = 'button';
@@ -176,19 +170,7 @@ define([
         pickPrimRequired.appendChild(this._primitiveOnly);
 
         // Terrain
-        var terrain = document.createElement('div');
-        terrain.className = 'cesium-cesiumInspector-sectionHeader';
-        plus = document.createElement('span');
-        plus.className = 'cesium-cesiumInspector-toggleSwitch';
-        plus.setAttribute('data-bind', 'click: toggleTerrain, text: terrainSwitchText');
-        terrain.appendChild(plus);
-        terrain.appendChild(document.createTextNode('Terrain'));
-        panel.appendChild(terrain);
-
-        var terrainSection = document.createElement('div');
-        terrainSection.className = 'cesium-cesiumInspector-section';
-        terrainSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : terrainVisible, "cesium-cesiumInspector-hide" :  !terrainVisible}');
-        panel.appendChild(terrainSection);
+        var terrainSection = addSection(panel, 'Terrain', 'terrainVisible', 'toggleTerrain');
         var pickTileRequired = document.createElement('div');
         pickTileRequired.className = 'cesium-cesiumInspector-pickSection';
         terrainSection.appendChild(pickTileRequired);

diff --git a/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js b/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js
@@ -280,33 +280,6 @@ define([
          */
         this.depthFrustumText = '';
 
-        /**
-         * Gets the text on the general section expand button.  This property is computed.
-         * @type {String}
-         * @default '-'
-         */
-        this.generalSwitchText = knockout.pureComputed(function() {
-            return that.generalVisible ? '-' : '+';
-        });
-
-        /**
-         * Gets the text on the primitives section expand button.  This property is computed.
-         * @type {String}
-         * @default '+'
-         */
-        this.primitivesSwitchText = knockout.pureComputed(function() {
-            return that.primitivesVisible ? '-' : '+';
-        });
-
-        /**
-         * Gets the text on the terrain section expand button.  This property is computed.
-         * @type {String}
-         * @default '+'
-         */
-        this.terrainSwitchText = knockout.pureComputed(function() {
-            return that.terrainVisible ? '-' : '+';
-        });
-
         knockout.track(this, [
             'frustums',
             'frustumPlanes',