html.js 2.7 KB

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