@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
179 lines • 6.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var _ = tslib_1.__importStar(require("@antv/util"));
var factory_1 = require("../../components/factory");
var event_1 = require("../../util/event");
var state_manager_1 = tslib_1.__importDefault(require("../../util/state-manager"));
function compare(origin, condition) {
if (!_.isFunction(condition)) {
var name_1 = condition.name, exp = condition.exp;
if (_.isFunction(exp)) {
return exp(origin[name_1]);
}
return origin[name_1] === exp;
}
return condition(origin);
}
exports.compare = compare;
var StateController = /** @class */ (function () {
function StateController(cfg) {
this.shapeContainers = [];
_.assign(this, cfg);
}
StateController.prototype.createStateManager = function (cfg) {
this.stateManager = new state_manager_1.default(cfg);
};
StateController.prototype.bindStateManager = function (manager, cfg) {
this.stateManager = manager;
if (cfg.setState) {
this._updateStateProcess(cfg.setState);
}
if (cfg.onStateChange) {
this._stateChangeProcess(cfg.onStateChange);
}
};
StateController.prototype.defaultStates = function (states) {
var _this = this;
_.each(states, function (state, type) {
var condition = state.condition, style = state.style, related = state.related;
_this.setState({ type: type, condition: condition, related: related });
});
};
StateController.prototype.setState = function (cfg) {
var _this = this;
var type = cfg.type, condition = cfg.condition, related = cfg.related;
if (!this.shapes) {
this.shapes = this._getShapes();
this.originAttrs = this._getOriginAttrs();
}
// this.resetZIndex();
_.each(this.shapes, function (shape, index) {
var shapeOrigin = shape.get('origin');
var origin = _.isArray(shapeOrigin) ? shapeOrigin[0]._origin : shapeOrigin._origin;
if (compare(origin, condition)) {
var stateStyle = cfg.style ? cfg.style : _this._getDefaultStateStyle(type, shape);
var originAttr = _this.originAttrs[index];
var attrs = void 0;
if (_.isFunction(stateStyle)) {
attrs = stateStyle(originAttr);
}
else {
attrs = _.mix({}, originAttr, stateStyle);
}
shape.attr(attrs);
_this.setZIndex(type, shape);
// const canvas = this.plot.canvas;
// canvas.draw();
}
});
// 组件与图形对状态量的响应不一定同步
if (related) {
this._parserRelated(type, related, condition);
}
this.plot.canvas.draw();
};
StateController.prototype._updateStateProcess = function (setStateCfg) {
var _this = this;
_.each(setStateCfg, function (cfg) {
var state = cfg.state;
var handler;
if (_.isFunction(state)) {
handler = function (e) {
var s = state(e);
_this.stateManager.setState(s.name, s.exp);
};
}
else {
handler = function () {
_this.stateManager.setState(state.name, state.exp);
};
}
if (cfg.event) {
event_1.onEvent(_this.plot, _this._eventParser(cfg.event), handler);
}
else {
handler();
}
});
};
StateController.prototype._stateChangeProcess = function (onChangeCfg) {
var _this = this;
_.each(onChangeCfg, function (cfg) {
_this.stateManager.on(cfg.name + ":change", function (props) {
cfg.callback(props, _this.plot);
});
});
};
StateController.prototype._getShapes = function () {
var _this = this;
var shapes = [];
var geoms = this.plot.view.get('elements');
_.each(geoms, function (geom) {
var shapeContainer = geom.get('shapeContainer');
_this.shapeContainers.push(shapeContainer);
if (!geom.destroyed) {
shapes.push.apply(shapes, geom.getShapes());
}
});
return shapes;
};
StateController.prototype._getOriginAttrs = function () {
var attrs = [];
_.each(this.shapes, function (shape) {
attrs.push(_.clone(shape.attr()));
});
return attrs;
};
// 将g2 geomtry转为plot层geometry
StateController.prototype._eventParser = function (event) {
var eventCfg = event.split(':');
var eventTarget = this.plot.geometryParser('g2', eventCfg[0]);
var eventName = eventCfg[1];
return eventTarget + ":" + eventName;
};
StateController.prototype._getDefaultStateStyle = function (type, shape) {
var theme = this.plot.theme;
var plotGeomType = this.plot.geometryParser('plot', shape.name);
var styleField = plotGeomType + "Style";
if (theme[styleField]) {
var style = theme[styleField][type];
if (_.isFunction(style)) {
style = style(shape.attr());
}
return style;
}
return {};
};
StateController.prototype._parserRelated = function (type, related, condition) {
var _this = this;
_.each(related, function (r) {
if (_this.plot[r]) {
// fixme: 自定义组件
// this.plot[r].setState(type, condition);
var method = factory_1.getComponentStateMethod(r, type);
method(_this.plot, condition);
}
});
};
// private set
StateController.prototype.setZIndex = function (stateType, shape) {
if (stateType === 'active' || stateType === 'selected') {
// shape.setZIndex(1);
var children = shape.get('parent').get('children');
children[children.length - 1].setZIndex(0);
shape.setZIndex(1);
}
};
StateController.prototype.resetZIndex = function () {
_.each(this.shapeContainers, function (container) {
var children = container.get('children');
children.sort(function (obj1, obj2) {
return obj1._INDEX - obj2._INDEX;
});
});
};
return StateController;
}());
exports.default = StateController;
//# sourceMappingURL=state.js.map