@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
243 lines • 8.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var event_emitter_1 = tslib_1.__importDefault(require("@antv/event-emitter"));
var G = tslib_1.__importStar(require("@antv/g"));
var _ = tslib_1.__importStar(require("@antv/util"));
var event_1 = require("../util/event");
var Layer = /** @class */ (function (_super) {
tslib_1.__extends(Layer, _super);
/**
* layer base for g2plot
*/
function Layer(props) {
var _this = _super.call(this) || this;
_this.layers = [];
_this.destroyed = false;
_this.visibility = true;
_this.rendered = false;
_this.eventHandlers = [];
_this.options = _this.getOptions(props);
_this.processOptions(_this.options);
_this.container = new G.Group();
return _this;
}
Layer.prototype.processOptions = function (options) {
this.id = options.id;
this.x = options.x;
this.y = options.y;
this.width = options.width;
this.height = options.height;
this.canvas = options.canvas;
this.parent = options.parent;
};
Layer.prototype.updateConfig = function (cfg) {
this.options = _.deepMix({}, this.options, cfg);
this.processOptions(this.options);
};
Layer.prototype.beforeInit = function () { };
/**
* init life cycle
*/
Layer.prototype.init = function () {
this.layerBBox = this.getLayerBBox();
this.layerRegion = this.getLayerRegion();
this.eachLayer(function (layer) {
layer.init();
});
};
Layer.prototype.afterInit = function () { };
/**
* render layer recursively
*/
Layer.prototype.render = function () {
// fixme: 等plot不再继承layer，这个就可以挪到构造函数里去，不需要再加是否render过的判断了
if (!this.rendered) {
if (this.parent) {
this.parent.container.add(this.container);
}
else {
this.canvas.add(this.container);
}
}
this.rendered = true;
this.beforeInit();
this.init();
this.afterInit();
this.container.transform([['t', this.x, this.y]]);
this.eachLayer(function (layer) {
layer.render();
});
this.canvas.draw();
};
/**
* clear layer content
*/
Layer.prototype.clear = function () {
this.eachLayer(function (layer) {
layer.destroy();
});
this.layers = [];
this.container.clear();
};
/**
* destroy layer recursively, remove the container of layer
*/
Layer.prototype.destroy = function () {
var _this = this;
this.eachLayer(function (layer) {
layer.destroy();
});
_.each(this.eventHandlers, function (h) {
_this.off(h.eventName, h.handler);
});
this.container.remove(true);
this.destroyed = true;
};
/**
* display layer
*/
Layer.prototype.show = function () {
this.container.set('visible', true);
this.visibility = true;
};
/**
* hide layer
*/
Layer.prototype.hide = function () {
this.container.set('visible', false);
this.visibility = false;
};
/**
* add children layer
* @param layer
*/
Layer.prototype.addLayer = function (layer) {
var idx = _.findIndex(this.layers, function (item) { return item === layer; });
if (idx < 0) {
if (layer.parent !== this) {
layer.parent = this;
layer.init();
}
this.layers.push(layer);
}
};
/**
* remove children layer
* @param layer
*/
Layer.prototype.removeLayer = function (layer) {
var idx = _.findIndex(this.layers, function (item) { return item === layer; });
if (idx >= 0) {
this.layers.splice(idx, 1);
}
};
/**
* update layer's display range
* @param props
* @param recursive whether update children layers or not
*/
Layer.prototype.updateBBox = function (props, recursive) {
if (recursive === void 0) { recursive = false; }
var originRange = {
x: this.x,
y: this.y,
width: this.width,
height: this.height,
};
var newRange = _.deepMix({}, originRange, props);
this.x = newRange.x;
this.y = newRange.y;
this.width = newRange.width;
this.height = newRange.height;
this.layerBBox = this.getLayerBBox();
this.layerRegion = this.getLayerRegion();
this.render();
if (recursive) {
this.eachLayer(function (layer) {
layer.updateBBoxByParent();
layer.render();
});
}
this.canvas.draw();
};
/**
* update display range according to parent layer's range
*/
Layer.prototype.updateBBoxByParent = function () {
var region = this.layerRegion;
this.x = this.parent.x + this.parent.width * region.start.x;
this.y = this.parent.y + this.parent.height * region.start.y;
this.width = this.parent.width * (region.end.x - region.start.x);
this.height = this.parent.height * (region.end.y - region.start.y);
this.layerBBox = this.getLayerBBox();
};
/**
* get global position of layer
*/
Layer.prototype.getGlobalPosition = function () {
var globalX = this.x;
var globalY = this.y;
var parent = this.parent;
while (parent) {
globalX += parent.x;
globalY += parent.y;
parent = parent.parent;
}
return { x: globalX, y: globalY };
};
Layer.prototype.getGlobalBBox = function () {
var globalPosition = this.getGlobalPosition();
return new G.BBox(globalPosition.x, globalPosition.y, this.width, this.height);
};
Layer.prototype.getOptions = function (props) {
var parentWidth = 0;
var parentHeight = 0;
if (props.parent) {
parentWidth = props.parent.width;
parentHeight = props.parent.height;
}
var defaultOptions = {
x: 0,
y: 0,
width: parentWidth,
height: parentHeight,
};
return _.deepMix({}, defaultOptions, props);
};
Layer.prototype.eachLayer = function (cb) {
_.each(this.layers, cb);
};
Layer.prototype.parseEvents = function (eventParser) {
var _this = this;
var eventsName = _.keys(event_1.LAYER_EVENT_MAP);
_.each(eventParser, function (e, k) {
if (_.contains(eventsName, k) && _.isFunction(e)) {
var eventName = event_1.LAYER_EVENT_MAP[k] || k;
var handler = e;
_this.on(eventName, handler);
_this.eventHandlers.push({ name: eventName, handler: handler });
}
});
};
Layer.prototype.getLayerBBox = function () {
return new G.BBox(this.x, this.y, this.width, this.height);
};
Layer.prototype.getLayerRegion = function () {
if (this.parent) {
var parentWidth = this.parent.width;
var parentHeight = this.parent.height;
var parentX = this.parent.x;
var parentY = this.parent.y;
var startX = (this.x - parentX) / parentWidth;
var startY = (this.y - parentY) / parentHeight;
var endX = (this.x + this.width - parentX) / parentWidth;
var endY = (this.y + this.height - parentY) / parentHeight;
return { start: { x: startX, y: startY }, end: { x: endX, y: endY } };
}
return { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } };
};
return Layer;
}(event_emitter_1.default));
exports.default = Layer;
//# sourceMappingURL=layer.js.map