SelectionIndicator.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import {
  2. defined,
  3. destroyObject,
  4. DeveloperError,
  5. getElement,
  6. } from "@cesium/engine";
  7. import knockout from "../ThirdParty/knockout.js";
  8. import SelectionIndicatorViewModel from "./SelectionIndicatorViewModel.js";
  9. /**
  10. * A widget for displaying an indicator on a selected object.
  11. *
  12. * @alias SelectionIndicator
  13. * @constructor
  14. *
  15. * @param {Element|string} container The DOM element or ID that will contain the widget.
  16. * @param {Scene} scene The Scene instance to use.
  17. *
  18. * @exception {DeveloperError} Element with id "container" does not exist in the document.
  19. */
  20. function SelectionIndicator(container, scene) {
  21. //>>includeStart('debug', pragmas.debug);
  22. if (!defined(container)) {
  23. throw new DeveloperError("container is required.");
  24. }
  25. //>>includeEnd('debug')
  26. container = getElement(container);
  27. this._container = container;
  28. const el = document.createElement("div");
  29. el.className = "cesium-selection-wrapper";
  30. el.setAttribute(
  31. "data-bind",
  32. '\
  33. style: { "top" : _screenPositionY, "left" : _screenPositionX },\
  34. css: { "cesium-selection-wrapper-visible" : isVisible }'
  35. );
  36. container.appendChild(el);
  37. this._element = el;
  38. const svgNS = "http://www.w3.org/2000/svg";
  39. const path =
  40. "M -34 -34 L -34 -11.25 L -30 -15.25 L -30 -30 L -15.25 -30 L -11.25 -34 L -34 -34 z M 11.25 -34 L 15.25 -30 L 30 -30 L 30 -15.25 L 34 -11.25 L 34 -34 L 11.25 -34 z M -34 11.25 L -34 34 L -11.25 34 L -15.25 30 L -30 30 L -30 15.25 L -34 11.25 z M 34 11.25 L 30 15.25 L 30 30 L 15.25 30 L 11.25 34 L 34 34 L 34 11.25 z";
  41. const svg = document.createElementNS(svgNS, "svg:svg");
  42. svg.setAttribute("width", 160);
  43. svg.setAttribute("height", 160);
  44. svg.setAttribute("viewBox", "0 0 160 160");
  45. const group = document.createElementNS(svgNS, "g");
  46. group.setAttribute("transform", "translate(80,80)");
  47. svg.appendChild(group);
  48. const pathElement = document.createElementNS(svgNS, "path");
  49. pathElement.setAttribute("data-bind", "attr: { transform: _transform }");
  50. pathElement.setAttribute("d", path);
  51. group.appendChild(pathElement);
  52. el.appendChild(svg);
  53. const viewModel = new SelectionIndicatorViewModel(
  54. scene,
  55. this._element,
  56. this._container
  57. );
  58. this._viewModel = viewModel;
  59. knockout.applyBindings(this._viewModel, this._element);
  60. }
  61. Object.defineProperties(SelectionIndicator.prototype, {
  62. /**
  63. * Gets the parent container.
  64. * @memberof SelectionIndicator.prototype
  65. *
  66. * @type {Element}
  67. */
  68. container: {
  69. get: function () {
  70. return this._container;
  71. },
  72. },
  73. /**
  74. * Gets the view model.
  75. * @memberof SelectionIndicator.prototype
  76. *
  77. * @type {SelectionIndicatorViewModel}
  78. */
  79. viewModel: {
  80. get: function () {
  81. return this._viewModel;
  82. },
  83. },
  84. });
  85. /**
  86. * @returns {boolean} true if the object has been destroyed, false otherwise.
  87. */
  88. SelectionIndicator.prototype.isDestroyed = function () {
  89. return false;
  90. };
  91. /**
  92. * Destroys the widget. Should be called if permanently
  93. * removing the widget from layout.
  94. */
  95. SelectionIndicator.prototype.destroy = function () {
  96. const container = this._container;
  97. knockout.cleanNode(this._element);
  98. container.removeChild(this._element);
  99. return destroyObject(this);
  100. };
  101. export default SelectionIndicator;