You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
11 KiB
JavaScript
332 lines
11 KiB
JavaScript
import defined from "../../Core/defined.js";
|
|
import destroyObject from "../../Core/destroyObject.js";
|
|
import DeveloperError from "../../Core/DeveloperError.js";
|
|
import knockout from "../../ThirdParty/knockout.js";
|
|
import getElement from "../getElement.js";
|
|
import InspectorShared from "../InspectorShared.js";
|
|
import CesiumInspectorViewModel from "./CesiumInspectorViewModel.js";
|
|
|
|
/**
|
|
* Inspector widget to aid in debugging
|
|
*
|
|
* @alias CesiumInspector
|
|
* @constructor
|
|
*
|
|
* @param {Element|String} container The DOM element or ID that will contain the widget.
|
|
* @param {Scene} scene The Scene instance to use.
|
|
*
|
|
* @demo {@link https://sandcastle.cesium.com/index.html?src=Cesium%20Inspector.html|Cesium Sandcastle Cesium Inspector Demo}
|
|
*/
|
|
function CesiumInspector(container, scene) {
|
|
//>>includeStart('debug', pragmas.debug);
|
|
if (!defined(container)) {
|
|
throw new DeveloperError("container is required.");
|
|
}
|
|
|
|
if (!defined(scene)) {
|
|
throw new DeveloperError("scene is required.");
|
|
}
|
|
//>>includeEnd('debug');
|
|
|
|
container = getElement(container);
|
|
|
|
var performanceContainer = document.createElement("div");
|
|
|
|
var viewModel = new CesiumInspectorViewModel(scene, performanceContainer);
|
|
this._viewModel = viewModel;
|
|
this._container = container;
|
|
|
|
var element = document.createElement("div");
|
|
this._element = element;
|
|
var text = document.createElement("div");
|
|
text.textContent = "Cesium Inspector";
|
|
text.className = "cesium-cesiumInspector-button";
|
|
text.setAttribute("data-bind", "click: toggleDropDown");
|
|
element.appendChild(text);
|
|
element.className = "cesium-cesiumInspector";
|
|
element.setAttribute(
|
|
"data-bind",
|
|
'css: { "cesium-cesiumInspector-visible" : dropDownVisible, "cesium-cesiumInspector-hidden" : !dropDownVisible }'
|
|
);
|
|
container.appendChild(this._element);
|
|
|
|
var panel = document.createElement("div");
|
|
this._panel = panel;
|
|
panel.className = "cesium-cesiumInspector-dropDown";
|
|
element.appendChild(panel);
|
|
|
|
var createSection = InspectorShared.createSection;
|
|
var createCheckbox = InspectorShared.createCheckbox;
|
|
|
|
// General
|
|
var generalSection = createSection(
|
|
panel,
|
|
"General",
|
|
"generalVisible",
|
|
"toggleGeneral"
|
|
);
|
|
|
|
var debugShowFrustums = createCheckbox("Show Frustums", "frustums");
|
|
var frustumStatistics = document.createElement("div");
|
|
frustumStatistics.className = "cesium-cesiumInspector-frustumStatistics";
|
|
frustumStatistics.setAttribute(
|
|
"data-bind",
|
|
"visible: frustums, html: frustumStatisticText"
|
|
);
|
|
debugShowFrustums.appendChild(frustumStatistics);
|
|
generalSection.appendChild(debugShowFrustums);
|
|
|
|
generalSection.appendChild(
|
|
createCheckbox("Show Frustum Planes", "frustumPlanes")
|
|
);
|
|
generalSection.appendChild(
|
|
createCheckbox("Performance Display", "performance")
|
|
);
|
|
|
|
performanceContainer.className = "cesium-cesiumInspector-performanceDisplay";
|
|
generalSection.appendChild(performanceContainer);
|
|
|
|
var shaderCacheDisplay = document.createElement("div");
|
|
shaderCacheDisplay.className = "cesium-cesiumInspector-shaderCache";
|
|
shaderCacheDisplay.setAttribute("data-bind", "html: shaderCacheText");
|
|
generalSection.appendChild(shaderCacheDisplay);
|
|
|
|
// https://github.com/CesiumGS/cesium/issues/6763
|
|
// var globeDepth = createCheckbox('Show globe depth', 'globeDepth');
|
|
// generalSection.appendChild(globeDepth);
|
|
//
|
|
// var globeDepthFrustum = document.createElement('div');
|
|
// globeDepth.appendChild(globeDepthFrustum);
|
|
//
|
|
// generalSection.appendChild(createCheckbox('Show pick depth', 'pickDepth'));
|
|
|
|
var depthFrustum = document.createElement("div");
|
|
generalSection.appendChild(depthFrustum);
|
|
|
|
// Use a span with HTML binding so that we can indent with non-breaking spaces.
|
|
var gLabel = document.createElement("span");
|
|
gLabel.setAttribute(
|
|
"data-bind",
|
|
'html: " Frustum:"'
|
|
);
|
|
depthFrustum.appendChild(gLabel);
|
|
|
|
var gText = document.createElement("span");
|
|
gText.setAttribute("data-bind", "text: depthFrustumText");
|
|
depthFrustum.appendChild(gText);
|
|
|
|
var gMinusButton = document.createElement("input");
|
|
gMinusButton.type = "button";
|
|
gMinusButton.value = "-";
|
|
gMinusButton.className = "cesium-cesiumInspector-pickButton";
|
|
gMinusButton.setAttribute("data-bind", "click: decrementDepthFrustum");
|
|
depthFrustum.appendChild(gMinusButton);
|
|
|
|
var gPlusButton = document.createElement("input");
|
|
gPlusButton.type = "button";
|
|
gPlusButton.value = "+";
|
|
gPlusButton.className = "cesium-cesiumInspector-pickButton";
|
|
gPlusButton.setAttribute("data-bind", "click: incrementDepthFrustum");
|
|
depthFrustum.appendChild(gPlusButton);
|
|
|
|
// Primitives
|
|
var primSection = createSection(
|
|
panel,
|
|
"Primitives",
|
|
"primitivesVisible",
|
|
"togglePrimitives"
|
|
);
|
|
var pickPrimRequired = document.createElement("div");
|
|
pickPrimRequired.className = "cesium-cesiumInspector-pickSection";
|
|
primSection.appendChild(pickPrimRequired);
|
|
|
|
var pickPrimitiveButton = document.createElement("input");
|
|
pickPrimitiveButton.type = "button";
|
|
pickPrimitiveButton.value = "Pick a primitive";
|
|
pickPrimitiveButton.className = "cesium-cesiumInspector-pickButton";
|
|
pickPrimitiveButton.setAttribute(
|
|
"data-bind",
|
|
'css: {"cesium-cesiumInspector-pickButtonHighlight" : pickPrimitiveActive}, click: pickPrimitive'
|
|
);
|
|
var buttonWrap = document.createElement("div");
|
|
buttonWrap.className = "cesium-cesiumInspector-center";
|
|
buttonWrap.appendChild(pickPrimitiveButton);
|
|
pickPrimRequired.appendChild(buttonWrap);
|
|
|
|
pickPrimRequired.appendChild(
|
|
createCheckbox(
|
|
"Show bounding sphere",
|
|
"primitiveBoundingSphere",
|
|
"hasPickedPrimitive"
|
|
)
|
|
);
|
|
pickPrimRequired.appendChild(
|
|
createCheckbox(
|
|
"Show reference frame",
|
|
"primitiveReferenceFrame",
|
|
"hasPickedPrimitive"
|
|
)
|
|
);
|
|
|
|
this._primitiveOnly = createCheckbox(
|
|
"Show only selected",
|
|
"filterPrimitive",
|
|
"hasPickedPrimitive"
|
|
);
|
|
pickPrimRequired.appendChild(this._primitiveOnly);
|
|
|
|
// Terrain
|
|
var terrainSection = createSection(
|
|
panel,
|
|
"Terrain",
|
|
"terrainVisible",
|
|
"toggleTerrain"
|
|
);
|
|
var pickTileRequired = document.createElement("div");
|
|
pickTileRequired.className = "cesium-cesiumInspector-pickSection";
|
|
terrainSection.appendChild(pickTileRequired);
|
|
var pickTileButton = document.createElement("input");
|
|
pickTileButton.type = "button";
|
|
pickTileButton.value = "Pick a tile";
|
|
pickTileButton.className = "cesium-cesiumInspector-pickButton";
|
|
pickTileButton.setAttribute(
|
|
"data-bind",
|
|
'css: {"cesium-cesiumInspector-pickButtonHighlight" : pickTileActive}, click: pickTile'
|
|
);
|
|
buttonWrap = document.createElement("div");
|
|
buttonWrap.appendChild(pickTileButton);
|
|
buttonWrap.className = "cesium-cesiumInspector-center";
|
|
pickTileRequired.appendChild(buttonWrap);
|
|
var tileInfo = document.createElement("div");
|
|
pickTileRequired.appendChild(tileInfo);
|
|
var parentTile = document.createElement("input");
|
|
parentTile.type = "button";
|
|
parentTile.value = "Parent";
|
|
parentTile.className = "cesium-cesiumInspector-pickButton";
|
|
parentTile.setAttribute("data-bind", "click: selectParent");
|
|
var nwTile = document.createElement("input");
|
|
nwTile.type = "button";
|
|
nwTile.value = "NW";
|
|
nwTile.className = "cesium-cesiumInspector-pickButton";
|
|
nwTile.setAttribute("data-bind", "click: selectNW");
|
|
var neTile = document.createElement("input");
|
|
neTile.type = "button";
|
|
neTile.value = "NE";
|
|
neTile.className = "cesium-cesiumInspector-pickButton";
|
|
neTile.setAttribute("data-bind", "click: selectNE");
|
|
var swTile = document.createElement("input");
|
|
swTile.type = "button";
|
|
swTile.value = "SW";
|
|
swTile.className = "cesium-cesiumInspector-pickButton";
|
|
swTile.setAttribute("data-bind", "click: selectSW");
|
|
var seTile = document.createElement("input");
|
|
seTile.type = "button";
|
|
seTile.value = "SE";
|
|
seTile.className = "cesium-cesiumInspector-pickButton";
|
|
seTile.setAttribute("data-bind", "click: selectSE");
|
|
|
|
var tileText = document.createElement("div");
|
|
tileText.className = "cesium-cesiumInspector-tileText";
|
|
tileInfo.className = "cesium-cesiumInspector-frustumStatistics";
|
|
tileInfo.appendChild(tileText);
|
|
tileInfo.setAttribute("data-bind", "visible: hasPickedTile");
|
|
tileText.setAttribute("data-bind", "html: tileText");
|
|
|
|
var relativeText = document.createElement("div");
|
|
relativeText.className = "cesium-cesiumInspector-relativeText";
|
|
relativeText.textContent = "Select relative:";
|
|
tileInfo.appendChild(relativeText);
|
|
|
|
var table = document.createElement("table");
|
|
var tr1 = document.createElement("tr");
|
|
var tr2 = document.createElement("tr");
|
|
var td1 = document.createElement("td");
|
|
td1.appendChild(parentTile);
|
|
var td2 = document.createElement("td");
|
|
td2.appendChild(nwTile);
|
|
var td3 = document.createElement("td");
|
|
td3.appendChild(neTile);
|
|
tr1.appendChild(td1);
|
|
tr1.appendChild(td2);
|
|
tr1.appendChild(td3);
|
|
var td4 = document.createElement("td");
|
|
var td5 = document.createElement("td");
|
|
td5.appendChild(swTile);
|
|
var td6 = document.createElement("td");
|
|
td6.appendChild(seTile);
|
|
tr2.appendChild(td4);
|
|
tr2.appendChild(td5);
|
|
tr2.appendChild(td6);
|
|
table.appendChild(tr1);
|
|
table.appendChild(tr2);
|
|
|
|
tileInfo.appendChild(table);
|
|
|
|
pickTileRequired.appendChild(
|
|
createCheckbox(
|
|
"Show bounding volume",
|
|
"tileBoundingSphere",
|
|
"hasPickedTile"
|
|
)
|
|
);
|
|
pickTileRequired.appendChild(
|
|
createCheckbox("Show only selected", "filterTile", "hasPickedTile")
|
|
);
|
|
|
|
terrainSection.appendChild(createCheckbox("Wireframe", "wireframe"));
|
|
terrainSection.appendChild(
|
|
createCheckbox("Suspend LOD update", "suspendUpdates")
|
|
);
|
|
terrainSection.appendChild(
|
|
createCheckbox("Show tile coordinates", "tileCoordinates")
|
|
);
|
|
|
|
knockout.applyBindings(viewModel, this._element);
|
|
}
|
|
|
|
Object.defineProperties(CesiumInspector.prototype, {
|
|
/**
|
|
* Gets the parent container.
|
|
* @memberof CesiumInspector.prototype
|
|
*
|
|
* @type {Element}
|
|
*/
|
|
container: {
|
|
get: function () {
|
|
return this._container;
|
|
},
|
|
},
|
|
|
|
/**
|
|
* Gets the view model.
|
|
* @memberof CesiumInspector.prototype
|
|
*
|
|
* @type {CesiumInspectorViewModel}
|
|
*/
|
|
viewModel: {
|
|
get: function () {
|
|
return this._viewModel;
|
|
},
|
|
},
|
|
});
|
|
|
|
/**
|
|
* @returns {Boolean} true if the object has been destroyed, false otherwise.
|
|
*/
|
|
CesiumInspector.prototype.isDestroyed = function () {
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Destroys the widget. Should be called if permanently
|
|
* removing the widget from layout.
|
|
*/
|
|
CesiumInspector.prototype.destroy = function () {
|
|
knockout.cleanNode(this._element);
|
|
this._container.removeChild(this._element);
|
|
this.viewModel.destroy();
|
|
|
|
return destroyObject(this);
|
|
};
|
|
export default CesiumInspector;
|