SelectionIndicatorViewModel.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import {
  2. Cartesian2,
  3. defaultValue,
  4. defined,
  5. DeveloperError,
  6. EasingFunction,
  7. SceneTransforms,
  8. } from "@cesium/engine";
  9. import knockout from "../ThirdParty/knockout.js";
  10. const screenSpacePos = new Cartesian2();
  11. const offScreen = "-1000px";
  12. /**
  13. * The view model for {@link SelectionIndicator}.
  14. * @alias SelectionIndicatorViewModel
  15. * @constructor
  16. *
  17. * @param {Scene} scene The scene instance to use for screen-space coordinate conversion.
  18. * @param {Element} selectionIndicatorElement The element containing all elements that make up the selection indicator.
  19. * @param {Element} container The DOM element that contains the widget.
  20. */
  21. function SelectionIndicatorViewModel(
  22. scene,
  23. selectionIndicatorElement,
  24. container
  25. ) {
  26. //>>includeStart('debug', pragmas.debug);
  27. if (!defined(scene)) {
  28. throw new DeveloperError("scene is required.");
  29. }
  30. if (!defined(selectionIndicatorElement)) {
  31. throw new DeveloperError("selectionIndicatorElement is required.");
  32. }
  33. if (!defined(container)) {
  34. throw new DeveloperError("container is required.");
  35. }
  36. //>>includeEnd('debug')
  37. this._scene = scene;
  38. this._screenPositionX = offScreen;
  39. this._screenPositionY = offScreen;
  40. this._tweens = scene.tweens;
  41. this._container = defaultValue(container, document.body);
  42. this._selectionIndicatorElement = selectionIndicatorElement;
  43. this._scale = 1;
  44. /**
  45. * Gets or sets the world position of the object for which to display the selection indicator.
  46. * @type {Cartesian3}
  47. */
  48. this.position = undefined;
  49. /**
  50. * Gets or sets the visibility of the selection indicator.
  51. * @type {boolean}
  52. */
  53. this.showSelection = false;
  54. knockout.track(this, [
  55. "position",
  56. "_screenPositionX",
  57. "_screenPositionY",
  58. "_scale",
  59. "showSelection",
  60. ]);
  61. /**
  62. * Gets the visibility of the position indicator. This can be false even if an
  63. * object is selected, when the selected object has no position.
  64. * @type {boolean}
  65. */
  66. this.isVisible = undefined;
  67. knockout.defineProperty(this, "isVisible", {
  68. get: function () {
  69. return this.showSelection && defined(this.position);
  70. },
  71. });
  72. knockout.defineProperty(this, "_transform", {
  73. get: function () {
  74. return `scale(${this._scale})`;
  75. },
  76. });
  77. /**
  78. * Gets or sets the function for converting the world position of the object to the screen space position.
  79. *
  80. * @member
  81. * @type {SelectionIndicatorViewModel.ComputeScreenSpacePosition}
  82. * @default SceneTransforms.wgs84ToWindowCoordinates
  83. *
  84. * @example
  85. * selectionIndicatorViewModel.computeScreenSpacePosition = function(position, result) {
  86. * return Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position, result);
  87. * };
  88. */
  89. this.computeScreenSpacePosition = function (position, result) {
  90. return SceneTransforms.wgs84ToWindowCoordinates(scene, position, result);
  91. };
  92. }
  93. /**
  94. * Updates the view of the selection indicator to match the position and content properties of the view model.
  95. * This function should be called as part of the render loop.
  96. */
  97. SelectionIndicatorViewModel.prototype.update = function () {
  98. if (this.showSelection && defined(this.position)) {
  99. const screenPosition = this.computeScreenSpacePosition(
  100. this.position,
  101. screenSpacePos
  102. );
  103. if (!defined(screenPosition)) {
  104. this._screenPositionX = offScreen;
  105. this._screenPositionY = offScreen;
  106. } else {
  107. const container = this._container;
  108. const containerWidth = container.parentNode.clientWidth;
  109. const containerHeight = container.parentNode.clientHeight;
  110. const indicatorSize = this._selectionIndicatorElement.clientWidth;
  111. const halfSize = indicatorSize * 0.5;
  112. screenPosition.x =
  113. Math.min(
  114. Math.max(screenPosition.x, -indicatorSize),
  115. containerWidth + indicatorSize
  116. ) - halfSize;
  117. screenPosition.y =
  118. Math.min(
  119. Math.max(screenPosition.y, -indicatorSize),
  120. containerHeight + indicatorSize
  121. ) - halfSize;
  122. this._screenPositionX = `${Math.floor(screenPosition.x + 0.25)}px`;
  123. this._screenPositionY = `${Math.floor(screenPosition.y + 0.25)}px`;
  124. }
  125. }
  126. };
  127. /**
  128. * Animate the indicator to draw attention to the selection.
  129. */
  130. SelectionIndicatorViewModel.prototype.animateAppear = function () {
  131. this._tweens.addProperty({
  132. object: this,
  133. property: "_scale",
  134. startValue: 2,
  135. stopValue: 1,
  136. duration: 0.8,
  137. easingFunction: EasingFunction.EXPONENTIAL_OUT,
  138. });
  139. };
  140. /**
  141. * Animate the indicator to release the selection.
  142. */
  143. SelectionIndicatorViewModel.prototype.animateDepart = function () {
  144. this._tweens.addProperty({
  145. object: this,
  146. property: "_scale",
  147. startValue: this._scale,
  148. stopValue: 1.5,
  149. duration: 0.8,
  150. easingFunction: EasingFunction.EXPONENTIAL_OUT,
  151. });
  152. };
  153. Object.defineProperties(SelectionIndicatorViewModel.prototype, {
  154. /**
  155. * Gets the HTML element containing the selection indicator.
  156. * @memberof SelectionIndicatorViewModel.prototype
  157. *
  158. * @type {Element}
  159. */
  160. container: {
  161. get: function () {
  162. return this._container;
  163. },
  164. },
  165. /**
  166. * Gets the HTML element that holds the selection indicator.
  167. * @memberof SelectionIndicatorViewModel.prototype
  168. *
  169. * @type {Element}
  170. */
  171. selectionIndicatorElement: {
  172. get: function () {
  173. return this._selectionIndicatorElement;
  174. },
  175. },
  176. /**
  177. * Gets the scene being used.
  178. * @memberof SelectionIndicatorViewModel.prototype
  179. *
  180. * @type {Scene}
  181. */
  182. scene: {
  183. get: function () {
  184. return this._scene;
  185. },
  186. },
  187. });
  188. /**
  189. * A function that converts the world position of an object to a screen space position.
  190. * @callback SelectionIndicatorViewModel.ComputeScreenSpacePosition
  191. * @param {Cartesian3} position The position in WGS84 (world) coordinates.
  192. * @param {Cartesian2} result An object to return the input position transformed to window coordinates.
  193. * @returns {Cartesian2} The modified result parameter.
  194. */
  195. export default SelectionIndicatorViewModel;