CesiumInspectorViewModel.js 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024
  1. import Cartesian3 from "../../Core/Cartesian3.js";
  2. import defined from "../../Core/defined.js";
  3. import destroyObject from "../../Core/destroyObject.js";
  4. import DeveloperError from "../../Core/DeveloperError.js";
  5. import Ray from "../../Core/Ray.js";
  6. import Rectangle from "../../Core/Rectangle.js";
  7. import ScreenSpaceEventHandler from "../../Core/ScreenSpaceEventHandler.js";
  8. import ScreenSpaceEventType from "../../Core/ScreenSpaceEventType.js";
  9. import DebugModelMatrixPrimitive from "../../Scene/DebugModelMatrixPrimitive.js";
  10. import PerformanceDisplay from "../../Scene/PerformanceDisplay.js";
  11. import TileCoordinatesImageryProvider from "../../Scene/TileCoordinatesImageryProvider.js";
  12. import knockout from "../../ThirdParty/knockout.js";
  13. import createCommand from "../createCommand.js";
  14. function frustumStatisticsToString(statistics) {
  15. var str;
  16. if (defined(statistics)) {
  17. str = "Command Statistics";
  18. var com = statistics.commandsInFrustums;
  19. for (var n in com) {
  20. if (com.hasOwnProperty(n)) {
  21. var num = parseInt(n, 10);
  22. var s;
  23. if (num === 7) {
  24. s = "1, 2 and 3";
  25. } else {
  26. var f = [];
  27. for (var i = 2; i >= 0; i--) {
  28. var p = Math.pow(2, i);
  29. if (num >= p) {
  30. f.push(i + 1);
  31. num -= p;
  32. }
  33. }
  34. s = f.reverse().join(" and ");
  35. }
  36. str += "<br>&nbsp;&nbsp;&nbsp;&nbsp;" + com[n] + " in frustum " + s;
  37. }
  38. }
  39. str += "<br>Total: " + statistics.totalCommands;
  40. }
  41. return str;
  42. }
  43. function boundDepthFrustum(lower, upper, proposed) {
  44. var bounded = Math.min(proposed, upper);
  45. bounded = Math.max(bounded, lower);
  46. return bounded;
  47. }
  48. var scratchPickRay = new Ray();
  49. var scratchPickCartesian = new Cartesian3();
  50. /**
  51. * The view model for {@link CesiumInspector}.
  52. * @alias CesiumInspectorViewModel
  53. * @constructor
  54. *
  55. * @param {Scene} scene The scene instance to use.
  56. * @param {Element} performanceContainer The instance to use for performance container.
  57. */
  58. function CesiumInspectorViewModel(scene, performanceContainer) {
  59. //>>includeStart('debug', pragmas.debug);
  60. if (!defined(scene)) {
  61. throw new DeveloperError("scene is required");
  62. }
  63. if (!defined(performanceContainer)) {
  64. throw new DeveloperError("performanceContainer is required");
  65. }
  66. //>>includeEnd('debug');
  67. var that = this;
  68. var canvas = scene.canvas;
  69. var eventHandler = new ScreenSpaceEventHandler(canvas);
  70. this._eventHandler = eventHandler;
  71. this._scene = scene;
  72. this._canvas = canvas;
  73. this._primitive = undefined;
  74. this._tile = undefined;
  75. this._modelMatrixPrimitive = undefined;
  76. this._performanceDisplay = undefined;
  77. this._performanceContainer = performanceContainer;
  78. var globe = this._scene.globe;
  79. globe.depthTestAgainstTerrain = true;
  80. /**
  81. * Gets or sets the show frustums state. This property is observable.
  82. * @type {Boolean}
  83. * @default false
  84. */
  85. this.frustums = false;
  86. /**
  87. * Gets or sets the show frustum planes state. This property is observable.
  88. * @type {Boolean}
  89. * @default false
  90. */
  91. this.frustumPlanes = false;
  92. /**
  93. * Gets or sets the show performance display state. This property is observable.
  94. * @type {Boolean}
  95. * @default false
  96. */
  97. this.performance = false;
  98. /**
  99. * Gets or sets the shader cache text. This property is observable.
  100. * @type {String}
  101. * @default ''
  102. */
  103. this.shaderCacheText = "";
  104. /**
  105. * Gets or sets the show primitive bounding sphere state. This property is observable.
  106. * @type {Boolean}
  107. * @default false
  108. */
  109. this.primitiveBoundingSphere = false;
  110. /**
  111. * Gets or sets the show primitive reference frame state. This property is observable.
  112. * @type {Boolean}
  113. * @default false
  114. */
  115. this.primitiveReferenceFrame = false;
  116. /**
  117. * Gets or sets the filter primitive state. This property is observable.
  118. * @type {Boolean}
  119. * @default false
  120. */
  121. this.filterPrimitive = false;
  122. /**
  123. * Gets or sets the show tile bounding sphere state. This property is observable.
  124. * @type {Boolean}
  125. * @default false
  126. */
  127. this.tileBoundingSphere = false;
  128. /**
  129. * Gets or sets the filter tile state. This property is observable.
  130. * @type {Boolean}
  131. * @default false
  132. */
  133. this.filterTile = false;
  134. /**
  135. * Gets or sets the show wireframe state. This property is observable.
  136. * @type {Boolean}
  137. * @default false
  138. */
  139. this.wireframe = false;
  140. /**
  141. * Gets or sets the show globe depth state. This property is observable.
  142. * @type {Boolean}
  143. * @default false
  144. */
  145. this.globeDepth = false;
  146. /**
  147. * Gets or sets the show pick depth state. This property is observable.
  148. * @type {Boolean}
  149. * @default false
  150. */
  151. this.pickDepth = false;
  152. /**
  153. * Gets or sets the index of the depth frustum to display. This property is observable.
  154. * @type {Number}
  155. * @default 1
  156. */
  157. this.depthFrustum = 1;
  158. this._numberOfFrustums = 1;
  159. /**
  160. * Gets or sets the suspend updates state. This property is observable.
  161. * @type {Boolean}
  162. * @default false
  163. */
  164. this.suspendUpdates = false;
  165. /**
  166. * Gets or sets the show tile coordinates state. This property is observable.
  167. * @type {Boolean}
  168. * @default false
  169. */
  170. this.tileCoordinates = false;
  171. /**
  172. * Gets or sets the frustum statistic text. This property is observable.
  173. * @type {String}
  174. * @default ''
  175. */
  176. this.frustumStatisticText = false;
  177. /**
  178. * Gets or sets the selected tile information text. This property is observable.
  179. * @type {String}
  180. * @default ''
  181. */
  182. this.tileText = "";
  183. /**
  184. * Gets if a primitive has been selected. This property is observable.
  185. * @type {Boolean}
  186. * @default false
  187. */
  188. this.hasPickedPrimitive = false;
  189. /**
  190. * Gets if a tile has been selected. This property is observable
  191. * @type {Boolean}
  192. * @default false
  193. */
  194. this.hasPickedTile = false;
  195. /**
  196. * Gets if the picking primitive command is active. This property is observable.
  197. * @type {Boolean}
  198. * @default false
  199. */
  200. this.pickPrimitiveActive = false;
  201. /**
  202. * Gets if the picking tile command is active. This property is observable.
  203. * @type {Boolean}
  204. * @default false
  205. */
  206. this.pickTileActive = false;
  207. /**
  208. * Gets or sets if the cesium inspector drop down is visible. This property is observable.
  209. * @type {Boolean}
  210. * @default true
  211. */
  212. this.dropDownVisible = true;
  213. /**
  214. * Gets or sets if the general section is visible. This property is observable.
  215. * @type {Boolean}
  216. * @default true
  217. */
  218. this.generalVisible = true;
  219. /**
  220. * Gets or sets if the primitive section is visible. This property is observable.
  221. * @type {Boolean}
  222. * @default false
  223. */
  224. this.primitivesVisible = false;
  225. /**
  226. * Gets or sets if the terrain section is visible. This property is observable.
  227. * @type {Boolean}
  228. * @default false
  229. */
  230. this.terrainVisible = false;
  231. /**
  232. * Gets or sets the index of the depth frustum text. This property is observable.
  233. * @type {String}
  234. * @default ''
  235. */
  236. this.depthFrustumText = "";
  237. knockout.track(this, [
  238. "frustums",
  239. "frustumPlanes",
  240. "performance",
  241. "shaderCacheText",
  242. "primitiveBoundingSphere",
  243. "primitiveReferenceFrame",
  244. "filterPrimitive",
  245. "tileBoundingSphere",
  246. "filterTile",
  247. "wireframe",
  248. "globeDepth",
  249. "pickDepth",
  250. "depthFrustum",
  251. "suspendUpdates",
  252. "tileCoordinates",
  253. "frustumStatisticText",
  254. "tileText",
  255. "hasPickedPrimitive",
  256. "hasPickedTile",
  257. "pickPrimitiveActive",
  258. "pickTileActive",
  259. "dropDownVisible",
  260. "generalVisible",
  261. "primitivesVisible",
  262. "terrainVisible",
  263. "depthFrustumText",
  264. ]);
  265. this._toggleDropDown = createCommand(function () {
  266. that.dropDownVisible = !that.dropDownVisible;
  267. });
  268. this._toggleGeneral = createCommand(function () {
  269. that.generalVisible = !that.generalVisible;
  270. });
  271. this._togglePrimitives = createCommand(function () {
  272. that.primitivesVisible = !that.primitivesVisible;
  273. });
  274. this._toggleTerrain = createCommand(function () {
  275. that.terrainVisible = !that.terrainVisible;
  276. });
  277. this._frustumsSubscription = knockout
  278. .getObservable(this, "frustums")
  279. .subscribe(function (val) {
  280. that._scene.debugShowFrustums = val;
  281. that._scene.requestRender();
  282. });
  283. this._frustumPlanesSubscription = knockout
  284. .getObservable(this, "frustumPlanes")
  285. .subscribe(function (val) {
  286. that._scene.debugShowFrustumPlanes = val;
  287. that._scene.requestRender();
  288. });
  289. this._performanceSubscription = knockout
  290. .getObservable(this, "performance")
  291. .subscribe(function (val) {
  292. if (val) {
  293. that._performanceDisplay = new PerformanceDisplay({
  294. container: that._performanceContainer,
  295. });
  296. } else {
  297. that._performanceContainer.innerHTML = "";
  298. }
  299. });
  300. this._showPrimitiveBoundingSphere = createCommand(function () {
  301. that._primitive.debugShowBoundingVolume = that.primitiveBoundingSphere;
  302. that._scene.requestRender();
  303. return true;
  304. });
  305. this._primitiveBoundingSphereSubscription = knockout
  306. .getObservable(this, "primitiveBoundingSphere")
  307. .subscribe(function () {
  308. that._showPrimitiveBoundingSphere();
  309. });
  310. this._showPrimitiveReferenceFrame = createCommand(function () {
  311. if (that.primitiveReferenceFrame) {
  312. var modelMatrix = that._primitive.modelMatrix;
  313. that._modelMatrixPrimitive = new DebugModelMatrixPrimitive({
  314. modelMatrix: modelMatrix,
  315. });
  316. that._scene.primitives.add(that._modelMatrixPrimitive);
  317. } else if (defined(that._modelMatrixPrimitive)) {
  318. that._scene.primitives.remove(that._modelMatrixPrimitive);
  319. that._modelMatrixPrimitive = undefined;
  320. }
  321. that._scene.requestRender();
  322. return true;
  323. });
  324. this._primitiveReferenceFrameSubscription = knockout
  325. .getObservable(this, "primitiveReferenceFrame")
  326. .subscribe(function () {
  327. that._showPrimitiveReferenceFrame();
  328. });
  329. this._doFilterPrimitive = createCommand(function () {
  330. if (that.filterPrimitive) {
  331. that._scene.debugCommandFilter = function (command) {
  332. if (
  333. defined(that._modelMatrixPrimitive) &&
  334. command.owner === that._modelMatrixPrimitive._primitive
  335. ) {
  336. return true;
  337. } else if (defined(that._primitive)) {
  338. return (
  339. command.owner === that._primitive ||
  340. command.owner === that._primitive._billboardCollection ||
  341. command.owner.primitive === that._primitive
  342. );
  343. }
  344. return false;
  345. };
  346. } else {
  347. that._scene.debugCommandFilter = undefined;
  348. }
  349. return true;
  350. });
  351. this._filterPrimitiveSubscription = knockout
  352. .getObservable(this, "filterPrimitive")
  353. .subscribe(function () {
  354. that._doFilterPrimitive();
  355. that._scene.requestRender();
  356. });
  357. this._wireframeSubscription = knockout
  358. .getObservable(this, "wireframe")
  359. .subscribe(function (val) {
  360. globe._surface.tileProvider._debug.wireframe = val;
  361. that._scene.requestRender();
  362. });
  363. this._globeDepthSubscription = knockout
  364. .getObservable(this, "globeDepth")
  365. .subscribe(function (val) {
  366. that._scene.debugShowGlobeDepth = val;
  367. that._scene.requestRender();
  368. });
  369. this._pickDepthSubscription = knockout
  370. .getObservable(this, "pickDepth")
  371. .subscribe(function (val) {
  372. that._scene.debugShowPickDepth = val;
  373. that._scene.requestRender();
  374. });
  375. this._depthFrustumSubscription = knockout
  376. .getObservable(this, "depthFrustum")
  377. .subscribe(function (val) {
  378. that._scene.debugShowDepthFrustum = val;
  379. that._scene.requestRender();
  380. });
  381. this._incrementDepthFrustum = createCommand(function () {
  382. var next = that.depthFrustum + 1;
  383. that.depthFrustum = boundDepthFrustum(1, that._numberOfFrustums, next);
  384. that._scene.requestRender();
  385. return true;
  386. });
  387. this._decrementDepthFrustum = createCommand(function () {
  388. var next = that.depthFrustum - 1;
  389. that.depthFrustum = boundDepthFrustum(1, that._numberOfFrustums, next);
  390. that._scene.requestRender();
  391. return true;
  392. });
  393. this._suspendUpdatesSubscription = knockout
  394. .getObservable(this, "suspendUpdates")
  395. .subscribe(function (val) {
  396. globe._surface._debug.suspendLodUpdate = val;
  397. if (!val) {
  398. that.filterTile = false;
  399. }
  400. });
  401. var tileBoundariesLayer;
  402. this._showTileCoordinates = createCommand(function () {
  403. if (that.tileCoordinates && !defined(tileBoundariesLayer)) {
  404. tileBoundariesLayer = scene.imageryLayers.addImageryProvider(
  405. new TileCoordinatesImageryProvider({
  406. tilingScheme: scene.terrainProvider.tilingScheme,
  407. })
  408. );
  409. } else if (!that.tileCoordinates && defined(tileBoundariesLayer)) {
  410. scene.imageryLayers.remove(tileBoundariesLayer);
  411. tileBoundariesLayer = undefined;
  412. }
  413. return true;
  414. });
  415. this._tileCoordinatesSubscription = knockout
  416. .getObservable(this, "tileCoordinates")
  417. .subscribe(function () {
  418. that._showTileCoordinates();
  419. that._scene.requestRender();
  420. });
  421. this._tileBoundingSphereSubscription = knockout
  422. .getObservable(this, "tileBoundingSphere")
  423. .subscribe(function () {
  424. that._showTileBoundingSphere();
  425. that._scene.requestRender();
  426. });
  427. this._showTileBoundingSphere = createCommand(function () {
  428. if (that.tileBoundingSphere) {
  429. globe._surface.tileProvider._debug.boundingSphereTile = that._tile;
  430. } else {
  431. globe._surface.tileProvider._debug.boundingSphereTile = undefined;
  432. }
  433. that._scene.requestRender();
  434. return true;
  435. });
  436. this._doFilterTile = createCommand(function () {
  437. if (!that.filterTile) {
  438. that.suspendUpdates = false;
  439. } else {
  440. that.suspendUpdates = true;
  441. globe._surface._tilesToRender = [];
  442. if (defined(that._tile) && that._tile.renderable) {
  443. globe._surface._tilesToRender.push(that._tile);
  444. }
  445. }
  446. return true;
  447. });
  448. this._filterTileSubscription = knockout
  449. .getObservable(this, "filterTile")
  450. .subscribe(function () {
  451. that.doFilterTile();
  452. that._scene.requestRender();
  453. });
  454. function pickPrimitive(e) {
  455. var newPick = that._scene.pick({
  456. x: e.position.x,
  457. y: e.position.y,
  458. });
  459. if (defined(newPick)) {
  460. that.primitive = defined(newPick.collection)
  461. ? newPick.collection
  462. : newPick.primitive;
  463. }
  464. that._scene.requestRender();
  465. that.pickPrimitiveActive = false;
  466. }
  467. this._pickPrimitive = createCommand(function () {
  468. that.pickPrimitiveActive = !that.pickPrimitiveActive;
  469. });
  470. this._pickPrimitiveActiveSubscription = knockout
  471. .getObservable(this, "pickPrimitiveActive")
  472. .subscribe(function (val) {
  473. if (val) {
  474. eventHandler.setInputAction(
  475. pickPrimitive,
  476. ScreenSpaceEventType.LEFT_CLICK
  477. );
  478. } else {
  479. eventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
  480. }
  481. });
  482. function selectTile(e) {
  483. var selectedTile;
  484. var ellipsoid = globe.ellipsoid;
  485. var ray = that._scene.camera.getPickRay(e.position, scratchPickRay);
  486. var cartesian = globe.pick(ray, that._scene, scratchPickCartesian);
  487. if (defined(cartesian)) {
  488. var cartographic = ellipsoid.cartesianToCartographic(cartesian);
  489. var tilesRendered =
  490. globe._surface.tileProvider._tilesToRenderByTextureCount;
  491. for (
  492. var textureCount = 0;
  493. !selectedTile && textureCount < tilesRendered.length;
  494. ++textureCount
  495. ) {
  496. var tilesRenderedByTextureCount = tilesRendered[textureCount];
  497. if (!defined(tilesRenderedByTextureCount)) {
  498. continue;
  499. }
  500. for (
  501. var tileIndex = 0;
  502. !selectedTile && tileIndex < tilesRenderedByTextureCount.length;
  503. ++tileIndex
  504. ) {
  505. var tile = tilesRenderedByTextureCount[tileIndex];
  506. if (Rectangle.contains(tile.rectangle, cartographic)) {
  507. selectedTile = tile;
  508. }
  509. }
  510. }
  511. }
  512. that.tile = selectedTile;
  513. that.pickTileActive = false;
  514. }
  515. this._pickTile = createCommand(function () {
  516. that.pickTileActive = !that.pickTileActive;
  517. });
  518. this._pickTileActiveSubscription = knockout
  519. .getObservable(this, "pickTileActive")
  520. .subscribe(function (val) {
  521. if (val) {
  522. eventHandler.setInputAction(
  523. selectTile,
  524. ScreenSpaceEventType.LEFT_CLICK
  525. );
  526. } else {
  527. eventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
  528. }
  529. });
  530. this._removePostRenderEvent = scene.postRender.addEventListener(function () {
  531. that._update();
  532. });
  533. }
  534. Object.defineProperties(CesiumInspectorViewModel.prototype, {
  535. /**
  536. * Gets the scene to control.
  537. * @memberof CesiumInspectorViewModel.prototype
  538. *
  539. * @type {Scene}
  540. */
  541. scene: {
  542. get: function () {
  543. return this._scene;
  544. },
  545. },
  546. /**
  547. * Gets the container of the PerformanceDisplay
  548. * @memberof CesiumInspectorViewModel.prototype
  549. *
  550. * @type {Element}
  551. */
  552. performanceContainer: {
  553. get: function () {
  554. return this._performanceContainer;
  555. },
  556. },
  557. /**
  558. * Gets the command to toggle the visibility of the drop down.
  559. * @memberof CesiumInspectorViewModel.prototype
  560. *
  561. * @type {Command}
  562. */
  563. toggleDropDown: {
  564. get: function () {
  565. return this._toggleDropDown;
  566. },
  567. },
  568. /**
  569. * Gets the command to toggle the visibility of a BoundingSphere for a primitive
  570. * @memberof CesiumInspectorViewModel.prototype
  571. *
  572. * @type {Command}
  573. */
  574. showPrimitiveBoundingSphere: {
  575. get: function () {
  576. return this._showPrimitiveBoundingSphere;
  577. },
  578. },
  579. /**
  580. * Gets the command to toggle the visibility of a {@link DebugModelMatrixPrimitive} for the model matrix of a primitive
  581. * @memberof CesiumInspectorViewModel.prototype
  582. *
  583. * @type {Command}
  584. */
  585. showPrimitiveReferenceFrame: {
  586. get: function () {
  587. return this._showPrimitiveReferenceFrame;
  588. },
  589. },
  590. /**
  591. * Gets the command to toggle a filter that renders only a selected primitive
  592. * @memberof CesiumInspectorViewModel.prototype
  593. *
  594. * @type {Command}
  595. */
  596. doFilterPrimitive: {
  597. get: function () {
  598. return this._doFilterPrimitive;
  599. },
  600. },
  601. /**
  602. * Gets the command to increment the depth frustum index to be shown
  603. * @memberof CesiumInspectorViewModel.prototype
  604. *
  605. * @type {Command}
  606. */
  607. incrementDepthFrustum: {
  608. get: function () {
  609. return this._incrementDepthFrustum;
  610. },
  611. },
  612. /**
  613. * Gets the command to decrement the depth frustum index to be shown
  614. * @memberof CesiumInspectorViewModel.prototype
  615. *
  616. * @type {Command}
  617. */
  618. decrementDepthFrustum: {
  619. get: function () {
  620. return this._decrementDepthFrustum;
  621. },
  622. },
  623. /**
  624. * Gets the command to toggle the visibility of tile coordinates
  625. * @memberof CesiumInspectorViewModel.prototype
  626. *
  627. * @type {Command}
  628. */
  629. showTileCoordinates: {
  630. get: function () {
  631. return this._showTileCoordinates;
  632. },
  633. },
  634. /**
  635. * Gets the command to toggle the visibility of a BoundingSphere for a selected tile
  636. * @memberof CesiumInspectorViewModel.prototype
  637. *
  638. * @type {Command}
  639. */
  640. showTileBoundingSphere: {
  641. get: function () {
  642. return this._showTileBoundingSphere;
  643. },
  644. },
  645. /**
  646. * Gets the command to toggle a filter that renders only a selected tile
  647. * @memberof CesiumInspectorViewModel.prototype
  648. *
  649. * @type {Command}
  650. */
  651. doFilterTile: {
  652. get: function () {
  653. return this._doFilterTile;
  654. },
  655. },
  656. /**
  657. * Gets the command to expand and collapse the general section
  658. * @memberof CesiumInspectorViewModel.prototype
  659. *
  660. * @type {Command}
  661. */
  662. toggleGeneral: {
  663. get: function () {
  664. return this._toggleGeneral;
  665. },
  666. },
  667. /**
  668. * Gets the command to expand and collapse the primitives section
  669. * @memberof CesiumInspectorViewModel.prototype
  670. *
  671. * @type {Command}
  672. */
  673. togglePrimitives: {
  674. get: function () {
  675. return this._togglePrimitives;
  676. },
  677. },
  678. /**
  679. * Gets the command to expand and collapse the terrain section
  680. * @memberof CesiumInspectorViewModel.prototype
  681. *
  682. * @type {Command}
  683. */
  684. toggleTerrain: {
  685. get: function () {
  686. return this._toggleTerrain;
  687. },
  688. },
  689. /**
  690. * Gets the command to pick a primitive
  691. * @memberof CesiumInspectorViewModel.prototype
  692. *
  693. * @type {Command}
  694. */
  695. pickPrimitive: {
  696. get: function () {
  697. return this._pickPrimitive;
  698. },
  699. },
  700. /**
  701. * Gets the command to pick a tile
  702. * @memberof CesiumInspectorViewModel.prototype
  703. *
  704. * @type {Command}
  705. */
  706. pickTile: {
  707. get: function () {
  708. return this._pickTile;
  709. },
  710. },
  711. /**
  712. * Gets the command to pick a tile
  713. * @memberof CesiumInspectorViewModel.prototype
  714. *
  715. * @type {Command}
  716. */
  717. selectParent: {
  718. get: function () {
  719. var that = this;
  720. return createCommand(function () {
  721. that.tile = that.tile.parent;
  722. });
  723. },
  724. },
  725. /**
  726. * Gets the command to pick a tile
  727. * @memberof CesiumInspectorViewModel.prototype
  728. *
  729. * @type {Command}
  730. */
  731. selectNW: {
  732. get: function () {
  733. var that = this;
  734. return createCommand(function () {
  735. that.tile = that.tile.northwestChild;
  736. });
  737. },
  738. },
  739. /**
  740. * Gets the command to pick a tile
  741. * @memberof CesiumInspectorViewModel.prototype
  742. *
  743. * @type {Command}
  744. */
  745. selectNE: {
  746. get: function () {
  747. var that = this;
  748. return createCommand(function () {
  749. that.tile = that.tile.northeastChild;
  750. });
  751. },
  752. },
  753. /**
  754. * Gets the command to pick a tile
  755. * @memberof CesiumInspectorViewModel.prototype
  756. *
  757. * @type {Command}
  758. */
  759. selectSW: {
  760. get: function () {
  761. var that = this;
  762. return createCommand(function () {
  763. that.tile = that.tile.southwestChild;
  764. });
  765. },
  766. },
  767. /**
  768. * Gets the command to pick a tile
  769. * @memberof CesiumInspectorViewModel.prototype
  770. *
  771. * @type {Command}
  772. */
  773. selectSE: {
  774. get: function () {
  775. var that = this;
  776. return createCommand(function () {
  777. that.tile = that.tile.southeastChild;
  778. });
  779. },
  780. },
  781. /**
  782. * Gets or sets the current selected primitive
  783. * @memberof CesiumInspectorViewModel.prototype
  784. *
  785. * @type {Command}
  786. */
  787. primitive: {
  788. get: function () {
  789. return this._primitive;
  790. },
  791. set: function (newPrimitive) {
  792. var oldPrimitive = this._primitive;
  793. if (newPrimitive !== oldPrimitive) {
  794. this.hasPickedPrimitive = true;
  795. if (defined(oldPrimitive)) {
  796. oldPrimitive.debugShowBoundingVolume = false;
  797. }
  798. this._scene.debugCommandFilter = undefined;
  799. if (defined(this._modelMatrixPrimitive)) {
  800. this._scene.primitives.remove(this._modelMatrixPrimitive);
  801. this._modelMatrixPrimitive = undefined;
  802. }
  803. this._primitive = newPrimitive;
  804. newPrimitive.show = false;
  805. setTimeout(function () {
  806. newPrimitive.show = true;
  807. }, 50);
  808. this.showPrimitiveBoundingSphere();
  809. this.showPrimitiveReferenceFrame();
  810. this.doFilterPrimitive();
  811. }
  812. },
  813. },
  814. /**
  815. * Gets or sets the current selected tile
  816. * @memberof CesiumInspectorViewModel.prototype
  817. *
  818. * @type {Command}
  819. */
  820. tile: {
  821. get: function () {
  822. return this._tile;
  823. },
  824. set: function (newTile) {
  825. if (defined(newTile)) {
  826. this.hasPickedTile = true;
  827. var oldTile = this._tile;
  828. if (newTile !== oldTile) {
  829. this.tileText =
  830. "L: " + newTile.level + " X: " + newTile.x + " Y: " + newTile.y;
  831. this.tileText +=
  832. "<br>SW corner: " +
  833. newTile.rectangle.west +
  834. ", " +
  835. newTile.rectangle.south;
  836. this.tileText +=
  837. "<br>NE corner: " +
  838. newTile.rectangle.east +
  839. ", " +
  840. newTile.rectangle.north;
  841. var data = newTile.data;
  842. if (defined(data) && defined(data.tileBoundingRegion)) {
  843. this.tileText +=
  844. "<br>Min: " +
  845. data.tileBoundingRegion.minimumHeight +
  846. " Max: " +
  847. data.tileBoundingRegion.maximumHeight;
  848. } else {
  849. this.tileText += "<br>(Tile is not loaded)";
  850. }
  851. }
  852. this._tile = newTile;
  853. this.showTileBoundingSphere();
  854. this.doFilterTile();
  855. } else {
  856. this.hasPickedTile = false;
  857. this._tile = undefined;
  858. }
  859. },
  860. },
  861. });
  862. /**
  863. * Updates the view model
  864. * @private
  865. */
  866. CesiumInspectorViewModel.prototype._update = function () {
  867. if (this.frustums) {
  868. this.frustumStatisticText = frustumStatisticsToString(
  869. this._scene.debugFrustumStatistics
  870. );
  871. }
  872. // Determine the number of frustums being used.
  873. var numberOfFrustums = this._scene.numberOfFrustums;
  874. this._numberOfFrustums = numberOfFrustums;
  875. // Bound the frustum to be displayed.
  876. this.depthFrustum = boundDepthFrustum(1, numberOfFrustums, this.depthFrustum);
  877. // Update the displayed text.
  878. this.depthFrustumText = this.depthFrustum + " of " + numberOfFrustums;
  879. if (this.performance) {
  880. this._performanceDisplay.update();
  881. }
  882. if (this.primitiveReferenceFrame) {
  883. this._modelMatrixPrimitive.modelMatrix = this._primitive.modelMatrix;
  884. }
  885. this.shaderCacheText =
  886. "Cached shaders: " + this._scene.context.shaderCache.numberOfShaders;
  887. };
  888. /**
  889. * @returns {Boolean} true if the object has been destroyed, false otherwise.
  890. */
  891. CesiumInspectorViewModel.prototype.isDestroyed = function () {
  892. return false;
  893. };
  894. /**
  895. * Destroys the widget. Should be called if permanently
  896. * removing the widget from layout.
  897. */
  898. CesiumInspectorViewModel.prototype.destroy = function () {
  899. this._eventHandler.destroy();
  900. this._removePostRenderEvent();
  901. this._frustumsSubscription.dispose();
  902. this._frustumPlanesSubscription.dispose();
  903. this._performanceSubscription.dispose();
  904. this._primitiveBoundingSphereSubscription.dispose();
  905. this._primitiveReferenceFrameSubscription.dispose();
  906. this._filterPrimitiveSubscription.dispose();
  907. this._wireframeSubscription.dispose();
  908. this._globeDepthSubscription.dispose();
  909. this._pickDepthSubscription.dispose();
  910. this._depthFrustumSubscription.dispose();
  911. this._suspendUpdatesSubscription.dispose();
  912. this._tileCoordinatesSubscription.dispose();
  913. this._tileBoundingSphereSubscription.dispose();
  914. this._filterTileSubscription.dispose();
  915. this._pickPrimitiveActiveSubscription.dispose();
  916. this._pickTileActiveSubscription.dispose();
  917. return destroyObject(this);
  918. };
  919. export default CesiumInspectorViewModel;