Merge pull request #7029 from AnalyticalGraphicsInc/tileset-inspector…

…-fix Fix 3D Tiles Inspector Styling
CesiumGS · Sep 12, 2018 · d5f1337 · d5f1337
2 parents 6c0b112 + f46ff27
commit d5f1337
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 193 deletions.
diff --git a/Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspector.css b/Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspector.css
@@ -35,41 +35,6 @@ ul.cesium-cesiumInspector-statistics + ul.cesium-cesiumInspector-statistics {
 .cesium-cesiumInspector-slider input[type=range] {
     margin-left: 5px;
     vertical-align: middle;
-    -webkit-appearance: none;
-    background: #ddd;
-    height: 3px;
-}
-
-input[type=range]:focus {
-    outline: none;
-}
-
-.cesium-cesiumInspector-slider input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: 1px solid #000000;
-    height: 10px;
-    width: 10px;
-    border-radius: 5px;
-    background: #ffffff;
-    cursor: pointer;
-}
-
-.cesium-cesiumInspector-slider input[type=range]::-moz-range-thumb {
-    border: 1px solid #000000;
-    height: 10px;
-    width: 10px;
-    border-radius: 5px;
-    background: #ffffff;
-    cursor: pointer;
-}
-
-.cesium-cesiumInspector-slider input[type=range]::-moz-range-thumb {
-    border: 1px solid #000000;
-    height: 10px;
-    width: 10px;
-    border-radius: 5px;
-    background: #ffffff;
-    cursor: pointer;
 }
 
 .cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor {

diff --git a/Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspector.js b/Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspector.js
@@ -6,6 +6,7 @@ define([
         '../../Core/destroyObject',
         '../../ThirdParty/knockout',
         '../getElement',
+        '../InspectorShared',
         './Cesium3DTilesInspectorViewModel'
     ], function(
         Check,
@@ -15,6 +16,7 @@ define([
         destroyObject,
         knockout,
         getElement,
+        InspectorShared,
         Cesium3DTilesInspectorViewModel) {
     'use strict';
 
@@ -36,7 +38,7 @@ define([
         container = getElement(container);
         var element = document.createElement('div');
         var performanceContainer = document.createElement('div');
-        performanceContainer.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : performance, "cesium-cesiumInspector-hide" : !performance}');
+        performanceContainer.setAttribute('data-bind', 'visible: performance');
         var viewModel = new Cesium3DTilesInspectorViewModel(scene, performanceContainer);
 
         this._viewModel = viewModel;
@@ -52,13 +54,21 @@ define([
         element.setAttribute('data-bind', 'css: { "cesium-cesiumInspector-visible" : inspectorVisible, "cesium-cesiumInspector-hidden" : !inspectorVisible}');
         container.appendChild(element);
 
-        var tilesetPanelContents = document.createElement('div');
-        var displayPanelContents = document.createElement('div');
-        var updatePanelContents = document.createElement('div');
-        var loggingPanelContents = document.createElement('div');
-        var tileDebugLabelsPanelContents = document.createElement('div');
-        var stylePanelContents = document.createElement('div');
-        var optimizationPanelContents = document.createElement('div');
+        var panel = document.createElement('div');
+        this._panel = panel;
+        panel.className = 'cesium-cesiumInspector-dropDown';
+        element.appendChild(panel);
+
+        var createSection = InspectorShared.createSection;
+        var createCheckbox = InspectorShared.createCheckbox;
+
+        var tilesetPanelContents = createSection(panel, 'Tileset', 'tilesetVisible', 'toggleTileset');
+        var displayPanelContents = createSection(panel, 'Display', 'displayVisible', 'toggleDisplay');
+        var updatePanelContents = createSection(panel, 'Update', 'updateVisible', 'toggleUpdate');
+        var loggingPanelContents = createSection(panel, 'Logging', 'loggingVisible', 'toggleLogging');
+        var tileDebugLabelsPanelContents = createSection(panel, 'Tile Debug Labels', 'tileDebugLabelsVisible', 'toggleTileDebugLabels');
+        var stylePanelContents = createSection(panel, 'Style', 'styleVisible', 'toggleStyle');
+        var optimizationPanelContents = createSection(panel, 'Optimization', 'optimizationVisible', 'toggleOptimization');
 
         var properties = document.createElement('div');
         properties.className = 'field-group';
@@ -72,78 +82,80 @@ define([
         tilesetPanelContents.appendChild(properties);
         tilesetPanelContents.appendChild(makeButton('togglePickTileset', 'Pick Tileset', 'pickActive'));
         tilesetPanelContents.appendChild(makeButton('trimTilesCache', 'Trim Tiles Cache'));
-        tilesetPanelContents.appendChild(makeCheckbox('picking', 'Enable Picking'));
+        tilesetPanelContents.appendChild(createCheckbox('Enable Picking', 'picking'));
 
-        displayPanelContents.appendChild(makeCheckbox('colorize', 'Colorize'));
-        displayPanelContents.appendChild(makeCheckbox('wireframe', 'Wireframe'));
-        displayPanelContents.appendChild(makeCheckbox('showBoundingVolumes', 'Bounding Volumes'));
-        displayPanelContents.appendChild(makeCheckbox('showContentBoundingVolumes', 'Content Volumes'));
-        displayPanelContents.appendChild(makeCheckbox('showRequestVolumes', 'Request Volumes'));
+        displayPanelContents.appendChild(createCheckbox('Colorize', 'colorize'));
+        displayPanelContents.appendChild(createCheckbox('Wireframe', 'wireframe'));
+        displayPanelContents.appendChild(createCheckbox('Bounding Volumes', 'showBoundingVolumes'));
+        displayPanelContents.appendChild(createCheckbox('Content Volumes', 'showContentBoundingVolumes'));
+        displayPanelContents.appendChild(createCheckbox('Request Volumes', 'showRequestVolumes'));
 
-        displayPanelContents.appendChild(makeCheckbox('pointCloudShading', 'Point Cloud Shading'));
+        displayPanelContents.appendChild(createCheckbox('Point Cloud Shading', 'pointCloudShading'));
         var pointCloudShadingContainer = document.createElement('div');
-        pointCloudShadingContainer.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : pointCloudShading, "cesium-cesiumInspector-hide" : !pointCloudShading}');
+        pointCloudShadingContainer.setAttribute('data-bind', 'visible: pointCloudShading');
         pointCloudShadingContainer.appendChild(makeRangeInput('geometricErrorScale', 0, 2, 0.01, 'Geometric Error Scale'));
         pointCloudShadingContainer.appendChild(makeRangeInput('maximumAttenuation', 0, 32, 1, 'Maximum Attenuation'));
         pointCloudShadingContainer.appendChild(makeRangeInput('baseResolution', 0, 1, 0.01, 'Base Resolution'));
-        pointCloudShadingContainer.appendChild(makeCheckbox('eyeDomeLighting', 'Eye Dome Lighting (EDL)'));
+        pointCloudShadingContainer.appendChild(createCheckbox('Eye Dome Lighting (EDL)', 'eyeDomeLighting'));
         displayPanelContents.appendChild(pointCloudShadingContainer);
 
         var edlContainer = document.createElement('div');
-        edlContainer.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : eyeDomeLighting, "cesium-cesiumInspector-hide" : !eyeDomeLighting}');
+        edlContainer.setAttribute('data-bind', 'visible: eyeDomeLighting');
         edlContainer.appendChild(makeRangeInput('eyeDomeLightingStrength', 0, 2.0, 0.1, 'EDL Strength'));
         edlContainer.appendChild(makeRangeInput('eyeDomeLightingRadius', 0, 4.0, 0.1, 'EDL Radius'));
         pointCloudShadingContainer.appendChild(edlContainer);
 
-        updatePanelContents.appendChild(makeCheckbox('freezeFrame', 'Freeze Frame'));
-        updatePanelContents.appendChild(makeCheckbox('dynamicScreenSpaceError', 'Dynamic Screen Space Error'));
+        updatePanelContents.appendChild(createCheckbox('Freeze Frame', 'freezeFrame'));
+        updatePanelContents.appendChild(createCheckbox('Dynamic Screen Space Error', 'dynamicScreenSpaceError'));
         var sseContainer = document.createElement('div');
         sseContainer.appendChild(makeRangeInput('maximumScreenSpaceError', 0, 128, 1, 'Maximum Screen Space Error'));
         updatePanelContents.appendChild(sseContainer);
         var dynamicScreenSpaceErrorContainer = document.createElement('div');
-        dynamicScreenSpaceErrorContainer.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : dynamicScreenSpaceError, "cesium-cesiumInspector-hide" : !dynamicScreenSpaceError}');
+        dynamicScreenSpaceErrorContainer.setAttribute('data-bind', 'visible: dynamicScreenSpaceError');
         dynamicScreenSpaceErrorContainer.appendChild(makeRangeInput('dynamicScreenSpaceErrorDensitySliderValue', 0, 1, 0.005, 'Screen Space Error Density', 'dynamicScreenSpaceErrorDensity'));
         dynamicScreenSpaceErrorContainer.appendChild(makeRangeInput('dynamicScreenSpaceErrorFactor', 1, 10, 0.1, 'Screen Space Error Factor'));
         updatePanelContents.appendChild(dynamicScreenSpaceErrorContainer);
 
-        loggingPanelContents.appendChild(makeCheckbox('performance', 'Performance'));
+        loggingPanelContents.appendChild(createCheckbox('Performance', 'performance'));
         loggingPanelContents.appendChild(performanceContainer);
-        loggingPanelContents.appendChild(makeCheckbox('showStatistics', 'Statistics'));
+        loggingPanelContents.appendChild(createCheckbox('Statistics', 'showStatistics'));
         var statistics = document.createElement('div');
         statistics.className = 'cesium-3dTilesInspector-statistics';
         statistics.setAttribute('data-bind', 'html: statisticsText, visible: showStatistics');
         loggingPanelContents.appendChild(statistics);
-        loggingPanelContents.appendChild(makeCheckbox('showPickStatistics', 'Pick Statistics'));
+        loggingPanelContents.appendChild(createCheckbox('Pick Statistics', 'showPickStatistics'));
         var pickStatistics = document.createElement('div');
         pickStatistics.className = 'cesium-3dTilesInspector-statistics';
         pickStatistics.setAttribute('data-bind', 'html: pickStatisticsText, visible: showPickStatistics');
         loggingPanelContents.appendChild(pickStatistics);
 
-        stylePanelContents.appendChild(document.createTextNode('Color Blend Mode: '));
+        var stylePanelEditor = document.createElement('div');
+        stylePanelContents.appendChild(stylePanelEditor);
+        stylePanelEditor.appendChild(document.createTextNode('Color Blend Mode: '));
         var blendDropdown = document.createElement('select');
         blendDropdown.setAttribute('data-bind', 'options: colorBlendModes, ' +
                                                 'optionsText: "text", ' +
                                                 'optionsValue: "value", ' +
                                                 'value: colorBlendMode');
-        stylePanelContents.appendChild(blendDropdown);
+        stylePanelEditor.appendChild(blendDropdown);
         var styleEditor = document.createElement('textarea');
         styleEditor.setAttribute('data-bind', 'textInput: styleString, event: { keydown: styleEditorKeyPress }');
-        stylePanelContents.className = 'cesium-cesiumInspector-styleEditor';
-        stylePanelContents.appendChild(styleEditor);
+        stylePanelEditor.className = 'cesium-cesiumInspector-styleEditor';
+        stylePanelEditor.appendChild(styleEditor);
         var closeStylesBtn = makeButton('compileStyle', 'Compile (Ctrl+Enter)');
-        stylePanelContents.appendChild(closeStylesBtn);
+        stylePanelEditor.appendChild(closeStylesBtn);
         var errorBox = document.createElement('div');
         errorBox.className = 'cesium-cesiumInspector-error';
         errorBox.setAttribute('data-bind', 'text: editorError');
-        stylePanelContents.appendChild(errorBox);
+        stylePanelEditor.appendChild(errorBox);
 
-        tileDebugLabelsPanelContents.appendChild(makeCheckbox('showOnlyPickedTileDebugLabel', 'Show Picked Only'));
-        tileDebugLabelsPanelContents.appendChild(makeCheckbox('showGeometricError', 'Geometric Error'));
-        tileDebugLabelsPanelContents.appendChild(makeCheckbox('showRenderingStatistics', 'Rendering Statistics'));
-        tileDebugLabelsPanelContents.appendChild(makeCheckbox('showMemoryUsage', 'Memory Usage (MB)'));
-        tileDebugLabelsPanelContents.appendChild(makeCheckbox('showUrl', 'Url'));
+        tileDebugLabelsPanelContents.appendChild(createCheckbox('Show Picked Only', 'showOnlyPickedTileDebugLabel'));
+        tileDebugLabelsPanelContents.appendChild(createCheckbox('Geometric Error', 'showGeometricError'));
+        tileDebugLabelsPanelContents.appendChild(createCheckbox('Rendering Statistics', 'showRenderingStatistics'));
+        tileDebugLabelsPanelContents.appendChild(createCheckbox('Memory Usage (MB)', 'showMemoryUsage'));
+        tileDebugLabelsPanelContents.appendChild(createCheckbox('Url', 'showUrl'));
 
-        optimizationPanelContents.appendChild(makeCheckbox('skipLevelOfDetail', 'Skip Tile LODs'));
+        optimizationPanelContents.appendChild(createCheckbox('Skip Tile LODs', 'skipLevelOfDetail'));
         var skipScreenSpaceErrorFactorContainer = document.createElement('div');
         skipScreenSpaceErrorFactorContainer.appendChild(makeRangeInput('skipScreenSpaceErrorFactor', 1, 50, 1, 'Skip SSE Factor'));
         optimizationPanelContents.appendChild(skipScreenSpaceErrorFactorContainer);
@@ -153,25 +165,8 @@ define([
         var skipLevelsContainer = document.createElement('div');
         skipLevelsContainer.appendChild(makeRangeInput('skipLevels', 0, 10, 1, 'Min. levels to skip'));
         optimizationPanelContents.appendChild(skipLevelsContainer);
-        optimizationPanelContents.appendChild(makeCheckbox('immediatelyLoadDesiredLevelOfDetail', 'Load only tiles that meet the max. SSE.'));
-        optimizationPanelContents.appendChild(makeCheckbox('loadSiblings', 'Load siblings of visible tiles.'));
-
-        var tilesetPanel = makeSection('Tileset', 'tilesetVisible', 'toggleTileset', tilesetPanelContents);
-        var displayPanel = makeSection('Display', 'displayVisible', 'toggleDisplay', displayPanelContents);
-        var updatePanel = makeSection('Update', 'updateVisible', 'toggleUpdate', updatePanelContents);
-        var loggingPanel = makeSection('Logging', 'loggingVisible', 'toggleLogging', loggingPanelContents);
-        var tileDebugLabelsPanel = makeSection('Tile Debug Labels', 'tileDebugLabelsVisible', 'toggleTileDebugLabels', tileDebugLabelsPanelContents);
-        var stylePanel = makeSection('Style', 'styleVisible', 'toggleStyle', stylePanelContents);
-        var optimizationPanel = makeSection('Optimization', 'optimizationVisible', 'toggleOptimization', optimizationPanelContents);
-
-        // first add and bind all the toggleable panels
-        element.appendChild(tilesetPanel);
-        element.appendChild(displayPanel);
-        element.appendChild(updatePanel);
-        element.appendChild(loggingPanel);
-        element.appendChild(tileDebugLabelsPanel);
-        element.appendChild(stylePanel);
-        element.appendChild(optimizationPanel);
+        optimizationPanelContents.appendChild(createCheckbox('Load only tiles that meet the max SSE.', 'immediatelyLoadDesiredLevelOfDetail'));
+        optimizationPanelContents.appendChild(createCheckbox('Load siblings of visible tiles', 'loadSiblings'));
 
         knockout.applyBindings(viewModel, element);
     }
@@ -221,41 +216,6 @@ define([
         return destroyObject(this);
     };
 
-    function makeSection(name, visibleProp, toggleProp, contents) {
-        var toggle = document.createElement('span');
-        toggle.className = 'cesium-cesiumInspector-toggleSwitch';
-        toggle.setAttribute('data-bind', 'text: ' + visibleProp + ' ? "-" : "+", click: ' + toggleProp);
-
-        var header = document.createElement('div');
-        header.className = 'cesium-cesiumInspector-sectionHeader';
-        header.appendChild(toggle);
-        header.appendChild(document.createTextNode(name));
-
-        var section = document.createElement('div');
-        section.className = 'cesium-cesiumInspector-section';
-        section.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : ' + visibleProp + ', "cesium-cesiumInspector-hide" : !' + visibleProp + '}');
-        section.appendChild(contents);
-
-        var panel = document.createElement('div');
-        panel.className = 'cesium-cesiumInspector-dropDown';
-        panel.appendChild(header);
-        panel.appendChild(section);
-
-        return panel;
-    }
-
-    function makeCheckbox(property, text) {
-        var checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.setAttribute('data-bind', 'checked: ' + property);
-
-        var container = document.createElement('div');
-        container.appendChild(checkbox);
-        container.appendChild(document.createTextNode(text));
-
-        return container;
-    }
-
     function makeRangeInput(property, min, max, step, text, displayProperty) {
         displayProperty = defaultValue(displayProperty, property);
         var input = document.createElement('input');

diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.css b/Source/Widgets/CesiumInspector/CesiumInspector.css
@@ -38,13 +38,11 @@
     height: 17px;
 }
 
-.cesium-cesiumInspector-sectionContent,
-.cesium-cesiumInspector-show {
+.cesium-cesiumInspector-sectionContent {
     max-height: 500px;
 }
 
-.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent,
-.cesium-cesiumInspector-hide {
+.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent {
     max-height: 0;
     padding: 0 !important;
     overflow: hidden;
@@ -122,11 +120,11 @@
 
 .cesium-cesiumInspector-sectionHeader::before {
     margin-right: 5px;
-    content: '+';
+    content: '-';
     width: 1ch;
     display: inline-block;
 }
 
 .cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before {
-    content: '-';
-}
+    content: '+';
+}