@antv/l7plot-component
Version:
Components for L7Plot
226 lines • 6.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContinueLegend = void 0;
const tslib_1 = require("tslib");
const util_1 = require("@antv/util");
const dom_util_1 = require("@antv/dom-util");
const theme_1 = tslib_1.__importDefault(require("./theme"));
const constants_1 = require("./constants");
const component_1 = require("../../core/component");
const dom_1 = require("../../utils/dom");
class ContinueLegend extends component_1.Component {
/**
* 获取默认配置
*/
getDefaultOptions() {
return (0, util_1.deepMix)({}, super.getDefaultOptions(), {
id: 'l7plot-continue-legend',
name: 'l7plot-continue-legend',
title: '',
containerTpl: constants_1.CONTAINER_TPL,
ribbonTpl: constants_1.RIBBON_TPL,
domStyles: theme_1.default,
className: constants_1.CONTAINER_CLASS,
});
}
/**
* 初始化 container
*/
initContainer() {
const { customContent } = this.options;
if (customContent) {
const container = this.getHtmlContentNode(customContent);
const parentContainer = this.getParentContainer();
if (parentContainer) {
parentContainer.appendChild(container);
}
return container;
}
else {
return super.initContainer();
}
}
/**
* 初始化 DOM
*/
initDom() {
this.cacheDoms();
}
/**
* 初始化事件
*/
initEvent() {
//
}
/**
* 清理事件
*/
removeEvent() {
//
}
/**
* 缓存 DOM
*/
cacheDoms() {
const container = this.container;
const titleDom = container.getElementsByClassName(constants_1.TITLE_CLASS)[0];
const ribbonContainerDom = container.getElementsByClassName(constants_1.RIBBON_CONTAINER_CLASS)[0];
this.titleDom = titleDom;
this.ribbonContainerDom = ribbonContainerDom;
}
/**
* 绘制组件
*/
render() {
if (this.options.customContent) {
this.renderCustomContent(this.options.customContent);
}
else {
this.resetTitle();
this.renderRibbon();
}
}
/**
* 显示
*/
show() {
const container = this.container;
if (!container || this.destroyed)
return;
(0, dom_util_1.modifyCSS)(container, {
visibility: 'visible',
});
}
/**
* 隐藏
*/
hide() {
const container = this.container;
if (!container || this.destroyed)
return;
(0, dom_util_1.modifyCSS)(container, {
visibility: 'hidden',
});
}
/**
* 更新
*/
updateInner(options) {
if (this.options.customContent) {
this.renderCustomContent(this.options.customContent);
}
else {
if (options.title) {
this.resetTitle();
}
if (options.colors) {
this.renderRibbon();
}
}
super.updateInner(options);
}
/**
* 根据 customContent 渲染 DOM
*/
renderCustomContent(customContent) {
const parentContainer = this.container.parentNode;
const node = this.getHtmlContentNode(customContent);
const curContainer = this.container;
if (parentContainer) {
parentContainer.replaceChild(node, curContainer);
}
this.container = node;
this.applyStyles();
}
/**
* 生成自定义内容 DOM
*/
getHtmlContentNode(customContent) {
let node;
const element = customContent(this.options.title || '', this.options.min, this.options.max, this.options.colors);
if ((0, util_1.isString)(element)) {
node = this.createDom(element);
}
else {
node = element;
}
return node;
}
/**
* 重置 title
*/
resetTitle() {
const title = this.options.title;
if (title) {
this.showTitle();
this.setTitle(title);
}
else {
this.hideTitle();
}
}
/**
* 显示 title
*/
showTitle() {
const titleDom = this.titleDom;
if (titleDom) {
(0, dom_util_1.modifyCSS)(titleDom, {
display: 'block',
});
}
}
/**
* 隐藏 title
*/
hideTitle() {
const titleDom = this.titleDom;
if (titleDom) {
(0, dom_util_1.modifyCSS)(titleDom, {
display: 'none',
});
}
}
/**
* 设置 title 内容
*/
setTitle(content) {
const titleDom = this.titleDom;
if (titleDom) {
titleDom.innerHTML = content;
}
}
/**
* 渲染色带
*/
renderRibbon() {
this.clearRibbonContainerDoms();
const { min, max, colors, ribbonTpl = constants_1.RIBBON_TPL } = this.options;
const ribbonContainerDom = this.ribbonContainerDom;
if (ribbonContainerDom) {
const backgroundImage = `linear-gradient(to right, ${colors.join(', ')})`;
const substituteObj = { min, max, backgroundImage };
const domStr = (0, util_1.substitute)(ribbonTpl, substituteObj);
const dom = this.createDom(domStr);
ribbonContainerDom.appendChild(dom);
this.applyChildrenStyles(ribbonContainerDom, this.options.domStyles);
}
}
/**
* 清空色带 DOM 下的 DOM 元素
*/
clearRibbonContainerDoms() {
if (this.ribbonContainerDom) {
(0, dom_1.clearDom)(this.ribbonContainerDom);
}
}
/**
* 清空所有
*/
clear() {
this.setTitle('');
this.clearRibbonContainerDoms();
}
}
exports.ContinueLegend = ContinueLegend;
//# sourceMappingURL=index.js.map