InfoBoxViewModel.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import { defined, Event } from "@cesium/engine";
  2. import knockout from "../ThirdParty/knockout.js";
  3. const cameraEnabledPath =
  4. "M 13.84375 7.03125 C 11.412798 7.03125 9.46875 8.975298 9.46875 11.40625 L 9.46875 11.59375 L 2.53125 7.21875 L 2.53125 24.0625 L 9.46875 19.6875 C 9.4853444 22.104033 11.423165 24.0625 13.84375 24.0625 L 25.875 24.0625 C 28.305952 24.0625 30.28125 22.087202 30.28125 19.65625 L 30.28125 11.40625 C 30.28125 8.975298 28.305952 7.03125 25.875 7.03125 L 13.84375 7.03125 z";
  5. const cameraDisabledPath =
  6. "M 27.34375 1.65625 L 5.28125 27.9375 L 8.09375 30.3125 L 30.15625 4.03125 L 27.34375 1.65625 z M 13.84375 7.03125 C 11.412798 7.03125 9.46875 8.975298 9.46875 11.40625 L 9.46875 11.59375 L 2.53125 7.21875 L 2.53125 24.0625 L 9.46875 19.6875 C 9.4724893 20.232036 9.5676108 20.7379 9.75 21.21875 L 21.65625 7.03125 L 13.84375 7.03125 z M 28.21875 7.71875 L 14.53125 24.0625 L 25.875 24.0625 C 28.305952 24.0625 30.28125 22.087202 30.28125 19.65625 L 30.28125 11.40625 C 30.28125 9.8371439 29.456025 8.4902779 28.21875 7.71875 z";
  7. /**
  8. * The view model for {@link InfoBox}.
  9. * @alias InfoBoxViewModel
  10. * @constructor
  11. */
  12. function InfoBoxViewModel() {
  13. this._cameraClicked = new Event();
  14. this._closeClicked = new Event();
  15. /**
  16. * Gets or sets the maximum height of the info box in pixels. This property is observable.
  17. * @type {number}
  18. */
  19. this.maxHeight = 500;
  20. /**
  21. * Gets or sets whether the camera tracking icon is enabled.
  22. * @type {boolean}
  23. */
  24. this.enableCamera = false;
  25. /**
  26. * Gets or sets the status of current camera tracking of the selected object.
  27. * @type {boolean}
  28. */
  29. this.isCameraTracking = false;
  30. /**
  31. * Gets or sets the visibility of the info box.
  32. * @type {boolean}
  33. */
  34. this.showInfo = false;
  35. /**
  36. * Gets or sets the title text in the info box.
  37. * @type {string}
  38. */
  39. this.titleText = "";
  40. /**
  41. * Gets or sets the description HTML for the info box.
  42. * @type {string}
  43. */
  44. this.description = "";
  45. knockout.track(this, [
  46. "showInfo",
  47. "titleText",
  48. "description",
  49. "maxHeight",
  50. "enableCamera",
  51. "isCameraTracking",
  52. ]);
  53. this._loadingIndicatorHtml =
  54. '<div class="cesium-infoBox-loadingContainer"><span class="cesium-infoBox-loading"></span></div>';
  55. /**
  56. * Gets the SVG path of the camera icon, which can change to be "crossed out" or not.
  57. * @type {string}
  58. */
  59. this.cameraIconPath = undefined;
  60. knockout.defineProperty(this, "cameraIconPath", {
  61. get: function () {
  62. return !this.enableCamera || this.isCameraTracking
  63. ? cameraDisabledPath
  64. : cameraEnabledPath;
  65. },
  66. });
  67. knockout.defineProperty(this, "_bodyless", {
  68. get: function () {
  69. return !defined(this.description) || this.description.length === 0;
  70. },
  71. });
  72. }
  73. /**
  74. * Gets the maximum height of sections within the info box, minus an offset, in CSS-ready form.
  75. * @param {number} offset The offset in pixels.
  76. * @returns {string}
  77. */
  78. InfoBoxViewModel.prototype.maxHeightOffset = function (offset) {
  79. return `${this.maxHeight - offset}px`;
  80. };
  81. Object.defineProperties(InfoBoxViewModel.prototype, {
  82. /**
  83. * Gets an {@link Event} that is fired when the user clicks the camera icon.
  84. * @memberof InfoBoxViewModel.prototype
  85. * @type {Event}
  86. */
  87. cameraClicked: {
  88. get: function () {
  89. return this._cameraClicked;
  90. },
  91. },
  92. /**
  93. * Gets an {@link Event} that is fired when the user closes the info box.
  94. * @memberof InfoBoxViewModel.prototype
  95. * @type {Event}
  96. */
  97. closeClicked: {
  98. get: function () {
  99. return this._closeClicked;
  100. },
  101. },
  102. });
  103. export default InfoBoxViewModel;