179 lines
5.5 KiB
JavaScript
179 lines
5.5 KiB
JavaScript
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
|
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
|
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
|
|
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
|
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
|
|
var Util = require('../util');
|
|
|
|
var DomUtil = Util.DomUtil;
|
|
|
|
var Guide = require('./base');
|
|
|
|
var Html = /*#__PURE__*/function (_Guide) {
|
|
_inheritsLoose(Html, _Guide);
|
|
|
|
var _super = _createSuper(Html);
|
|
|
|
function Html() {
|
|
return _Guide.apply(this, arguments) || this;
|
|
}
|
|
|
|
var _proto = Html.prototype;
|
|
|
|
_proto.getDefaultCfg = function getDefaultCfg() {
|
|
var cfg = _Guide.prototype.getDefaultCfg.call(this);
|
|
|
|
return Util.mix({}, cfg, {
|
|
name: 'html',
|
|
zIndex: 7,
|
|
position: null,
|
|
|
|
/**
|
|
* Horizontal alignment, can be 'left'、'middle'、'right'
|
|
* @type {String}
|
|
*/
|
|
alignX: 'middle',
|
|
|
|
/**
|
|
* vertical alignment, can be 'top'、'middle'、'bottom'
|
|
* @type {String}
|
|
*/
|
|
alignY: 'middle',
|
|
|
|
/**
|
|
* Horizontal offset
|
|
* @type {Number}
|
|
*/
|
|
offsetX: null,
|
|
|
|
/**
|
|
* Vertical offset
|
|
* @type {Number}
|
|
*/
|
|
offsetY: null,
|
|
|
|
/**
|
|
* html content
|
|
*@type {String | Function}
|
|
*/
|
|
html: null
|
|
});
|
|
}
|
|
/**
|
|
* render Html Guide
|
|
* @override
|
|
* @param {Coordinate} coord the instance of Coordinate class
|
|
* @param {Container} container the container which contain the guide component
|
|
*/
|
|
;
|
|
|
|
_proto.render = function render(coord, container) {
|
|
var self = this;
|
|
var position = self.parsePoint(coord, self.get('position'));
|
|
|
|
if (!position) {
|
|
return;
|
|
}
|
|
|
|
var parentNode = container.get('canvas').get('el').parentNode;
|
|
var wrapperNode = DomUtil.createDom('<div class="g-guide"></div>');
|
|
parentNode.appendChild(wrapperNode);
|
|
var html = self.get('htmlContent') || self.get('html');
|
|
|
|
if (Util.isFunction(html)) {
|
|
var xScales = self.get('xScales');
|
|
var yScales = self.get('yScales');
|
|
html = html(xScales, yScales);
|
|
}
|
|
|
|
var htmlNode = DomUtil.createDom(html);
|
|
wrapperNode.appendChild(htmlNode);
|
|
DomUtil.modifyCSS(wrapperNode, {
|
|
position: 'absolute' // to fix dom in the document stream to get the true width
|
|
|
|
});
|
|
|
|
self._setDomPosition(wrapperNode, htmlNode, position);
|
|
|
|
self.set('el', wrapperNode);
|
|
};
|
|
|
|
_proto._setDomPosition = function _setDomPosition(parentDom, childDom, point) {
|
|
var self = this;
|
|
var alignX = self.get('alignX');
|
|
var alignY = self.get('alignY');
|
|
var domWidth = DomUtil.getOuterWidth(childDom);
|
|
var domHeight = DomUtil.getOuterHeight(childDom);
|
|
var position = {
|
|
x: point.x,
|
|
y: point.y
|
|
};
|
|
|
|
if (alignX === 'middle' && alignY === 'top') {
|
|
position.x -= Math.round(domWidth / 2);
|
|
} else if (alignX === 'middle' && alignY === 'bottom') {
|
|
position.x -= Math.round(domWidth / 2);
|
|
position.y -= Math.round(domHeight);
|
|
} else if (alignX === 'left' && alignY === 'bottom') {
|
|
position.y -= Math.round(domHeight);
|
|
} else if (alignX === 'left' && alignY === 'middle') {
|
|
position.y -= Math.round(domHeight / 2);
|
|
} else if (alignX === 'left' && alignY === 'top') {
|
|
position.x = point.x;
|
|
position.y = point.y;
|
|
} else if (alignX === 'right' && alignY === 'bottom') {
|
|
position.x -= Math.round(domWidth);
|
|
position.y -= Math.round(domHeight);
|
|
} else if (alignX === 'right' && alignY === 'middle') {
|
|
position.x -= Math.round(domWidth);
|
|
position.y -= Math.round(domHeight / 2);
|
|
} else if (alignX === 'right' && alignY === 'top') {
|
|
position.x -= Math.round(domWidth);
|
|
} else {
|
|
// 默认位于中心点
|
|
position.x -= Math.round(domWidth / 2);
|
|
position.y -= Math.round(domHeight / 2);
|
|
}
|
|
|
|
var offsetX = self.get('offsetX');
|
|
|
|
if (offsetX) {
|
|
position.x += offsetX;
|
|
}
|
|
|
|
var offsetY = self.get('offsetY');
|
|
|
|
if (offsetY) {
|
|
position.y += offsetY;
|
|
}
|
|
|
|
DomUtil.modifyCSS(parentDom, {
|
|
top: Math.round(position.y) + 'px',
|
|
left: Math.round(position.x) + 'px',
|
|
visibility: 'visible',
|
|
zIndex: self.get('zIndex')
|
|
});
|
|
}
|
|
/**
|
|
* clear html guide
|
|
* @override
|
|
*/
|
|
;
|
|
|
|
_proto.clear = function clear() {
|
|
var self = this;
|
|
var el = self.get('el');
|
|
el && el.parentNode && el.parentNode.removeChild(el);
|
|
};
|
|
|
|
return Html;
|
|
}(Guide);
|
|
|
|
module.exports = Html; |