@antv/l7plot-component
Version:
Components for L7Plot
174 lines • 4.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Component = void 0;
const util_1 = require("@antv/util");
const dom_util_1 = require("@antv/dom-util");
const dom_1 = require("../utils/dom");
class Component {
constructor(options) {
this.destroyed = false;
this.options = (0, util_1.deepMix)({}, this.getDefaultOptions(), options);
this.container = this.initContainer();
this.initDom();
this.applyStyles();
this.initEvent();
this.initCapture();
this.initVisible();
this.render();
}
/**
* 获取默认配置
*/
getDefaultOptions() {
return {
name: '',
containerTpl: '<div></div>',
visible: true,
capture: true,
domStyles: {},
};
}
/**
* 获取 container
*/
getContainer() {
return this.container;
}
/**
* 获取组件的父容器
*/
getParentContainer() {
const parent = this.options.parent;
let parentContainer;
if (!parent) {
return parentContainer;
}
if ((0, util_1.isString)(parent)) {
const parentElement = document.getElementById(parent);
if (parentElement) {
parentContainer = parentElement;
}
else {
throw new Error(`No parent id ${parent}`);
}
}
else {
parentContainer = parent;
}
return parentContainer;
}
/**
* 初始化 container
*/
initContainer() {
const container = this.createDom(this.options.containerTpl);
const parentContainer = this.getParentContainer();
if (parentContainer) {
parentContainer.appendChild(container);
}
return container;
}
/**
* 初始化 visible
*/
initVisible() {
if (this.options.visible) {
this.show();
}
else {
this.hide();
}
}
/**
* 初始 capture
*/
initCapture() {
this.setCapture(this.options.capture);
}
/**
* 更新组件
*/
update(options) {
this.options = (0, util_1.deepMix)({}, this.options, options);
this.updateInner(options);
this.afterUpdate(options);
}
// 更新组件样式
updateInner(options) {
if (options.domStyles) {
this.applyStyles();
}
}
/**
* 更新组件后
*/
afterUpdate(options) {
// 更新时考虑capture
if (options.capture) {
this.setCapture(options.capture);
}
}
/**
* 是否允许捕捉事件
*/
setCapture(capture) {
const container = this.container;
const value = capture ? 'auto' : 'none';
container.style.pointerEvents = value;
}
/**
* 应用所有的样式
*/
applyStyles() {
const domStyles = this.options.domStyles;
if (!domStyles) {
return;
}
const container = this.container;
this.applyChildrenStyles(container, domStyles);
const className = this.options.className;
if (className && (0, dom_1.hasClass)(container, className)) {
const containerCss = domStyles[className];
(0, dom_util_1.modifyCSS)(container, containerCss);
}
}
/**
* 应用样式到 DOM
*/
applyChildrenStyles(element, styles) {
(0, util_1.each)(styles, (style, name) => {
const elements = element.getElementsByClassName(name);
(0, util_1.each)(elements, (el) => {
(0, dom_util_1.modifyCSS)(el, style);
});
});
}
/**
* 应用到单个 DOM
*/
applyStyle(cssName, dom) {
const domStyles = this.options.domStyles;
domStyles && (0, dom_util_1.modifyCSS)(dom, domStyles[cssName]);
}
/**
* 创建 DOM
*/
createDom(str = '<div></div>') {
return (0, dom_util_1.createDom)(str);
}
/**
* 清理 DOM
*/
removeDom() {
const container = this.container;
// 节点不一定有 parentNode
container && container.parentNode && container.parentNode.removeChild(container);
}
destroy() {
this.removeEvent();
this.removeDom();
this.destroyed = true;
}
}
exports.Component = Component;
//# sourceMappingURL=component.js.map