@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
219 lines • 7.2 kB
JavaScript
import { __extends } from "tslib";
import EventEmitter from '@antv/event-emitter';
import * as _ from '@antv/util';
import CanvasController from './controller/canvas';
import EventController from './controller/event';
import { getPlotType } from './global';
import Layer from './layer';
import ViewLayer from './view-layer';
import { CANVAS_EVENT_MAP } from '../util/event';
var BasePlot = /** @class */ (function (_super) {
__extends(BasePlot, _super);
function BasePlot(container, props) {
var _this = _super.call(this) || this;
_this.containerDOM = typeof container === 'string' ? document.getElementById(container) : container;
_this.forceFit = !_.isNil(props.forceFit) ? props.forceFit : _.isNil(props.width) && _.isNil(props.height);
_this.renderer = props.renderer || 'canvas';
_this.pixelRatio = props.pixelRatio || null;
_this.width = props.width;
_this.height = props.height;
_this.theme = props.theme;
_this.canvasController = new CanvasController({
containerDOM: _this.containerDOM,
plot: _this,
});
/** update layer properties */
_this.width = _this.canvasController.width;
_this.height = _this.canvasController.height;
_this.canvas = _this.canvasController.canvas;
_this.layers = [];
_this.destroyed = false;
_this.createLayers(props);
/** bind events */
_this.eventController = new EventController({
plot: _this,
canvas: _this.canvasController.canvas,
});
_this.eventController.bindEvents();
_this.parseEvents(props);
return _this;
}
/** 生命周期 */
BasePlot.prototype.destroy = function () {
this.eachLayer(function (layer) {
layer.destroy();
});
this.canvasController.destroy();
this.eventController.clearEvents();
this.layers = [];
this.destroyed = true;
};
/**
* 重新绘制图形
*/
BasePlot.prototype.repaint = function () {
this.canvasController.canvas.draw();
};
BasePlot.prototype.updateConfig = function (config, all) {
if (all === void 0) { all = false; }
if (all) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.updateConfig(config);
}
});
}
else {
var layer = this.layers[0];
if (layer instanceof Layer) {
layer.updateConfig(config);
}
}
if (config.width) {
this.width = config.width;
}
if (config.height) {
this.height = config.height;
}
if (config.theme) {
this.theme = config.theme;
}
this.canvasController.updateCanvasSize();
this.canvasController.updateCanvasTheme();
};
BasePlot.prototype.changeData = function (data, all) {
if (all === void 0) { all = false; }
if (all) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.changeData(data);
}
});
}
else {
var layer = this.layers[0];
if (layer instanceof ViewLayer) {
layer.changeData(data);
}
}
};
BasePlot.prototype.getPlotTheme = function () {
var layer = this.layers[0];
return layer.getPlotTheme();
};
BasePlot.prototype.getData = function () {
var layer = this.layers[0];
return layer.getData();
};
/**
* 绑定一个外部的stateManager
* 先直接传递给各个子 Layer
*
* @param stateManager
* @param cfg
*/
BasePlot.prototype.bindStateManager = function (stateManager, cfg) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.bindStateManager(stateManager, cfg);
}
});
};
/**
* 响应状态量更新的快捷方法
*
* @param condition
* @param style
*/
BasePlot.prototype.setActive = function (condition, style) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.setActive(condition, style);
}
});
};
BasePlot.prototype.setSelected = function (condition, style) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.setSelected(condition, style);
}
});
};
BasePlot.prototype.setDisable = function (condition, style) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.setDisable(condition, style);
}
});
};
BasePlot.prototype.setNormal = function (condition) {
this.eachLayer(function (layer) {
if (layer instanceof ViewLayer) {
layer.setNormal(condition);
}
});
};
/**
* 获取图形下的图层 Layer，默认第一个 Layer
* @param idx
*/
BasePlot.prototype.getLayer = function (idx) {
if (idx === void 0) { idx = 0; }
return this.layers[idx];
};
BasePlot.prototype.getCanvas = function () {
return this.canvasController.canvas;
};
BasePlot.prototype.getLayers = function () {
return this.layers;
};
BasePlot.prototype.render = function () {
this.eachLayer(function (layer) { return layer.render(); });
};
BasePlot.prototype.eachLayer = function (cb) {
_.each(this.layers, cb);
};
/**
* add children layer
* @param layer
*/
BasePlot.prototype.addLayer = function (layer) {
var idx = _.findIndex(this.layers, function (item) { return item === layer; });
if (idx < 0) {
this.layers.push(layer);
}
};
BasePlot.prototype.createLayers = function (props) {
if (props.layers) {
// TODO: combo plot
}
else if (props.type) {
var viewLayerCtr = getPlotType(props.type);
var viewLayerProps = _.deepMix({}, props, {
canvas: this.canvasController.canvas,
x: 0,
y: 0,
width: this.width,
height: this.height,
});
var viewLayer = new viewLayerCtr(viewLayerProps);
this.addLayer(viewLayer);
}
};
BasePlot.prototype.parseEvents = function (props) {
var _this = this;
var eventsName = _.keys(CANVAS_EVENT_MAP);
if (props.events) {
_.each(props.events, function (e, k) {
if (_.contains(eventsName, k) && _.isFunction(e)) {
var eventName = CANVAS_EVENT_MAP[k] || k;
var handler = e;
_this.on(eventName, handler);
}
});
}
};
return BasePlot;
}(EventEmitter));
export default BasePlot;
//# sourceMappingURL=plot.js.map