SelectionIndicator.js 3.3 KB

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