html.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var tslib_1 = require("tslib");
  4. var dom_util_1 = require("@antv/dom-util");
  5. var util_1 = require("@antv/util");
  6. var html_component_1 = require("../abstract/html-component");
  7. var util_2 = require("../util/util");
  8. var HtmlAnnotation = /** @class */ (function (_super) {
  9. tslib_1.__extends(HtmlAnnotation, _super);
  10. function HtmlAnnotation() {
  11. return _super !== null && _super.apply(this, arguments) || this;
  12. }
  13. HtmlAnnotation.prototype.getDefaultCfg = function () {
  14. var cfg = _super.prototype.getDefaultCfg.call(this);
  15. return tslib_1.__assign(tslib_1.__assign({}, cfg), { name: 'annotation', type: 'html', locationType: 'point', x: 0, y: 0, containerTpl: "<div class=\"g2-html-annotation\" style=\"position:absolute\"></div>", alignX: 'left', alignY: 'top', html: '', zIndex: 7 });
  16. };
  17. HtmlAnnotation.prototype.render = function () {
  18. var container = this.getContainer();
  19. var html = this.get('html');
  20. util_2.clearDom(container);
  21. var rst = util_1.isFunction(html) ? html(container) : html;
  22. if (util_1.isElement(rst)) {
  23. container.appendChild(rst);
  24. }
  25. else if (util_1.isString(rst) || util_1.isNumber(rst)) {
  26. var dom = dom_util_1.createDom("" + rst);
  27. if (dom) {
  28. container.appendChild(dom);
  29. }
  30. }
  31. this.resetPosition();
  32. };
  33. HtmlAnnotation.prototype.resetPosition = function () {
  34. var container = this.getContainer();
  35. var _a = this.getLocation(), x = _a.x, y = _a.y;
  36. var alignX = this.get('alignX');
  37. var alignY = this.get('alignY');
  38. var offsetX = this.get('offsetX');
  39. var offsetY = this.get('offsetY');
  40. var domWidth = dom_util_1.getOuterWidth(container);
  41. var domHeight = dom_util_1.getOuterHeight(container);
  42. var position = {
  43. x: x,
  44. y: y,
  45. };
  46. if (alignX === 'middle') {
  47. position.x -= Math.round(domWidth / 2);
  48. }
  49. else if (alignX === 'right') {
  50. position.x -= Math.round(domWidth);
  51. }
  52. if (alignY === 'middle') {
  53. position.y -= Math.round(domHeight / 2);
  54. }
  55. else if (alignY === 'bottom') {
  56. position.y -= Math.round(domHeight);
  57. }
  58. if (offsetX) {
  59. position.x += offsetX;
  60. }
  61. if (offsetY) {
  62. position.y += offsetY;
  63. }
  64. dom_util_1.modifyCSS(container, {
  65. position: 'absolute',
  66. left: position.x + "px",
  67. top: position.y + "px",
  68. zIndex: this.get('zIndex'),
  69. });
  70. };
  71. return HtmlAnnotation;
  72. }(html_component_1.default));
  73. exports.default = HtmlAnnotation;
  74. //# sourceMappingURL=html.js.map