chartx/dist/components/popover/index.js

Data Visualization Chart Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _component = _interopRequireDefault(require("../component"));
var _canvax = _interopRequireDefault(require("canvax"));
var _tools = require("../../utils/tools");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var _ = _canvax.default._;
var Popover = /*#__PURE__*/function (_Component) {
  function Popover(opt, app) {
    var _this;
    (0, _classCallCheck2.default)(this, Popover);
    _this = _callSuper(this, Popover, [opt, app]);
    _this.uuid = (0, _tools.generateUUID)() + "_" + Math.ceil(Math.random() * 100000000) + "_" + new Date().getTime();
    _this.inited = false;
    _this.name = "popover";
    _this._tipDom = null;

    //所有调用tip的 event 上面 要附带有符合下面结构的eventInfo属性
    //会deepExtend到this.indo上面来
    _this.popoverInfo = null;
    _this.sprite = null;
    _this.sprite = new _canvax.default.Display.Sprite({
      id: "PopoverSprite"
    });
    _this.app.stage.addChild(_this.sprite);
    var me = _this;
    _this.sprite.on("destroy", function () {
      me._removeContent();
    });
    _.extend(true, _this, (0, _tools.getDefaultProps)(Popover.defaultProps()), opt);
    _this.tipDomContainer = null;
    if (document) {
      if (_this.containerIsBody) {
        _this.tipDomContainer = document.body;
      } else {
        _this.tipDomContainer = _this.app.canvax.domView;
      }
    }
    ;
    return _this;
  }
  (0, _inherits2.default)(Popover, _Component);
  return (0, _createClass2.default)(Popover, [{
    key: "draw",
    value: function draw() {
      this.inited = true;
    }
  }, {
    key: "show",
    value: function show(e) {
      var _this2 = this;
      if (!this.enabled) return;
      if (e.popoverInfo) {
        this.popoverInfo = e.popoverInfo;
        var content = this._setContent(e);
        content.then(function (content) {
          if (content) {
            _this2._setPosition(e);
            _this2.sprite.toFront();
            if (_this2.triggerEventType == 'click') {
              if (!_this2._popoverGlobalClickHandler) {
                _this2._popoverGlobalClickHandler = function (evt) {
                  if (_this2._tipDom && !_this2._tipDom.contains(evt.target)) {
                    // 优化：只有点击popover外部时才hide，且只执行一次
                    if (_this2._tipDom && !_this2._tipDom.contains(evt.target)) {
                      _this2.hide(evt);
                      document.removeEventListener('click', _this2._popoverGlobalClickHandler);
                    }
                  }
                };
              }
              // 取消事件监听
              document.removeEventListener('click', _this2._popoverGlobalClickHandler);
              setTimeout(function () {
                //如果triggerEventType是click，则需要监听全局的click事件，只要点击的元素不属于popover的dom，则需要隐藏popover   
                document.addEventListener('click', _this2._popoverGlobalClickHandler);
              }, 100);
            }
          } else {
            _this2.hide(e);
          }
        });
      } else {
        this.hide(e);
      }
      this.onshow.apply(this, [e]);
    }
  }, {
    key: "hide",
    value: function hide(e) {
      // if( this._tipDom && ( e.toElement == this.tipDomContainer || e.toElement == this._tipDom || this._tipDom.contains( e.toElement ) ) ){
      //     return
      // }
      this._hide(e);
      if (this.viewPath) {
        this.innerHTMLClear && this.innerHTMLClear(e, this);
      }
      this.onhide.apply(this, [e]);
    }
  }, {
    key: "_hide",
    value: function _hide(e) {
      if (!this.enabled) return;
      this._hideDialog(e);
    }
  }, {
    key: "_hideDialog",
    value: function _hideDialog() {
      if (this.popoverInfo) {
        this.popoverInfo = null;
        this.sprite.removeAllChildren();
        this._removeContent();
      }
      ;
    }

    /**
     *@pos {x:0,y:0}
     */
  }, {
    key: "_setPosition",
    value: function _setPosition(e) {
      if (!this.enabled) return;
      if (!this._tipDom) return;
      var domBounding = this.app.canvax.el.getBoundingClientRect();
      var domBX = domBounding.x || domBounding.left;
      var domBY = domBounding.y || domBounding.top;
      var globalPoint = e.target.localToGlobal();
      var x = globalPoint.x + this.offsetX;
      var y = globalPoint.y + this.offsetY;
      var rootWidth = this.app.width;
      var rootHeight = this.app.height;

      // let viewPortX = x + domBX
      // let viewPortY = y + domBY
      var viewPortWidth = document.documentElement.clientWidth;
      var viewPortHeight = document.documentElement.clientHeight;
      if (this.containerIsBody) {
        rootWidth = viewPortWidth;
        rootHeight = viewPortHeight;
        x += domBX;
        y += domBY;
      }
      var _placement = this.placement;
      var _align = this.align;
      var target = {
        x: x,
        y: y,
        width: e.target.context.width,
        height: e.target.context.height
      };
      if (e.popoverInfo) {
        var _e$popoverInfo, _e$popoverInfo3;
        if ((_e$popoverInfo = e.popoverInfo) !== null && _e$popoverInfo !== void 0 && _e$popoverInfo.placement) {
          var _e$popoverInfo2;
          _placement = (_e$popoverInfo2 = e.popoverInfo) === null || _e$popoverInfo2 === void 0 ? void 0 : _e$popoverInfo2.placement;
        }
        if ((_e$popoverInfo3 = e.popoverInfo) !== null && _e$popoverInfo3 !== void 0 && _e$popoverInfo3.align) {
          var _e$popoverInfo4;
          _align = (_e$popoverInfo4 = e.popoverInfo) === null || _e$popoverInfo4 === void 0 ? void 0 : _e$popoverInfo4.align;
        }
      }
      var _placementCss = "";
      if (_placement == 'left,right') {
        //要先计算出来target在viewPort中的位置，然后根据位置来确定placement
        if (target.x > viewPortWidth - target.x - target.width) {
          _placement = 'left';
        } else {
          _placement = 'right';
        }
      }
      if (_placement == 'top,bottom') {
        //要先计算出来target在viewPort中的位置，然后根据位置来确定align
        if (target.y > viewPortHeight - target.y - target.height) {
          _placement = 'top';
        } else {
          _placement = 'bottom';
        }
      }
      if (_placement == 'top') {
        _placementCss = "bottom:" + (rootHeight - target.y) + "px;top:auto";
      }
      if (_placement == 'bottom') {
        _placementCss = "top:" + (target.y + target.height) + "px;bottom:auto";
      }
      if (_placement == 'left') {
        _placementCss = "right:" + (rootWidth - target.x + 10) + "px;left:auto";
      }
      if (_placement == 'right') {
        _placementCss = "left:" + (target.x + target.width + 10) + "px;right:auto";
      }
      var _alignCss = "";
      if (_align == 'left,right') {
        if (target.x > viewPortWidth - target.x - target.width) {
          _align = 'right';
        } else {
          _align = 'left';
        }
      }
      if (_align == 'top,bottom') {
        if (target.y > viewPortHeight - target.y - target.height) {
          _align = 'top';
        } else {
          _align = 'bottom';
        }
      }
      if (_align == 'left') {
        _alignCss = "left:" + target.x + "px;right:auto";
      }
      if (_align == 'right') {
        _alignCss = "right:" + (rootWidth - (target.x + target.width)) + "px;left:auto";
      }
      if (_align == 'bottom') {
        _alignCss = "top:" + target.y + "px;bottom:auto";
      }
      if (_align == 'top') {
        _alignCss = "bottom:" + (rootHeight - (target.y + target.height)) + "px;top:auto";
      }
      this._tipDom.style.cssText += ";display:block;" + _placementCss + ";" + _alignCss;
    }
  }, {
    key: "_creatTipDom",
    value: function _creatTipDom(e) {
      var me = this;
      if (document) {
        this._tipDom = document.createElement("div");
        this._tipDom.className = "chart-popover";
        this._tipDom.style.cssText += "; border-radius:" + this.borderRadius + "px;background:" + this.fillStyle + ";border:1px solid " + this.strokeStyle + ";display:none;position:fixed;z-index:999999;enabled:inline-block;*enabled:inline;*zoom:1;padding:6px;color:" + this.fontColor + ";line-height:1.5";
        this._tipDom.style.cssText += "; box-shadow:1px 1px 3px " + this.strokeStyle;
        this._tipDom.style.cssText += "; border:none;white-space:nowrap;word-wrap:normal";
        this._tipDom.style.cssText += "; text-align:left";
        this._tipDom.style.cssText += "; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;";
        if (this.css) {
          this._tipDom.style.cssText += "; " + this.css;
        }
        this.tipDomContainer && this.tipDomContainer.appendChild(this._tipDom);
        if (this.triggerEventType == 'hover') {
          this._tipDom.onmouseleave = function (e) {
            me.hide(e);
          };
        }

        //_tipDom 的click mousemove禁止冒泡
        // this._tipDom.onclick = function(e){
        //     e.stopPropagation()
        // }
        // this._tipDom.onmousemove = function(e){
        //     e.stopPropagation()
        // }
        // this._tipDom.onmousedown = function(e){
        //     e.stopPropagation()
        // }
        // this._tipDom.onmouseup = function(e){
        //     e.stopPropagation()
        // }
        // this._tipDom.onmouseleave = function(e){
        //     e.stopPropagation()
        // }
        // this._tipDom.onmouseenter = function(e){
        //     e.stopPropagation()
        // }

        return this._tipDom;
      }
    }
  }, {
    key: "_removeContent",
    value: function _removeContent() {
      if (!this._tipDom) return;
      this._tipDom.style.display = 'none';
      if (!this.viewPath) {
        //viewPath的话就不需要清除tipDom
        this.tipDomContainer && this.tipDomContainer.removeChild(this._tipDom);
        this._tipDom = null;
      }
    }
  }, {
    key: "_setContent",
    value: function _setContent(e) {
      var _this3 = this;
      var me = this;
      return new Promise(function (resolve) {
        var content = _this3._getContent(e);
        if (!content && content !== 0) {
          resolve('');
          return;
        }
        ;
        if (!_this3._tipDom) {
          _this3._tipDom = _this3._creatTipDom(e);
        }
        ;

        //小程序等场景就无法创建_tipDom
        if (_this3._tipDom) {
          var insetToTipDom = function insetToTipDom(content) {
            me._tipDom.innerHTML = content;
            if (me.viewPath) {
              me.innerHTMLEnd && me.innerHTMLEnd(e, me);
            }
            resolve(content);
          };
          if (content.then) {
            content.then(function (content) {
              insetToTipDom(content);
            });
          } else {
            insetToTipDom(content);
          }
        }
        ;
      });
    }
  }, {
    key: "_getContent",
    value: function _getContent(e) {
      var content = '';
      if (this.triggers && this.triggers.indexOf(e.popoverInfo.trigger) == -1) {
        //
      } else {
        if (e.popoverInfo.content) {
          content = _.isFunction(e.popoverInfo.content) ? e.popoverInfo.content(e.popoverInfo, e) : e.popoverInfo.content;
        }
        ;
        if (!content) {
          if (this.content) {
            content = _.isFunction(this.content) ? this.content(e.popoverInfo, e) : this.content;
          } else {
            content = this._getDefaultContent(e.popoverInfo);
          }
        }
      }
      return content;
    }
  }, {
    key: "_getDefaultContent",
    value: function _getDefaultContent(info) {
      var str = "";
      if (this.viewPath) {
        str = "<div id='".concat(this.uuid, "' viewpath='").concat(this.viewPath, "' ></div>");
        return str;
      }
      str = info.content;
      return str;
    }
  }], [{
    key: "defaultProps",
    value: function defaultProps() {
      return {
        enabled: {
          detail: '是否开启popover',
          default: true
        },
        content: {
          detail: '自定义的内容（html）',
          default: null
        },
        css: {
          detail: '给设置额外的css text',
          default: ''
        },
        borderRadius: {
          detail: '的边框圆角半径',
          default: 5
        },
        strokeStyle: {
          detail: '边框颜色',
          default: '#ccc'
        },
        fillStyle: {
          detail: '背景色',
          default: 'rgba(255,255,255,1)'
        },
        fontColor: {
          detail: '文本颜色',
          default: '#999999'
        },
        placement: {
          detail: '展示位置，可选 bottom | top | left | right',
          default: 'auto'
        },
        align: {
          detail: '对齐方式，可选 bottom | top | left | right',
          default: 'auto'
        },
        triggerEventType: {
          detail: 'popover的触发方式，默认hover',
          default: 'click'
        },
        offsetX: {
          detail: '浮层到鼠标位置的偏移量x',
          default: 0
        },
        offsetY: {
          detail: '浮层到鼠标位置的偏移量y',
          default: 0
        },
        viewPath: {
          detail: '内容的目标viewPath',
          default: null
        },
        innerHTMLEnd: {
          detail: '和viewPath组合使用，当设置了的viewPath的时候，用户可以通过innerHTMLEnd去初始化viewPath对应的magixView',
          default: null
        },
        innerHTMLClear: {
          detail: '清除后的回调,和innerHTMLEnd成对使用',
          default: null
        },
        onshow: {
          detail: 'show的时候的事件',
          default: function _default() {}
        },
        onhide: {
          detail: 'hide的时候的事件',
          default: function _default() {}
        },
        containerIsBody: {
          detail: 'popover的容器是否是body',
          default: true
        }
      };
    }
  }]);
}(_component.default);
_component.default.registerComponent(Popover, 'popover');
var _default2 = exports.default = Popover;