CesiumInspectorViewModel.js 25 KB

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