@amcharts/amcharts5
Version:
amCharts 5
273 lines • 8.7 kB
JavaScript
import * as $object from "./Object";
import * as $ease from "./Ease";
/**
* An object representing a collection of setting values to apply as required.
*
* @see {@link https://www.amcharts.com/docs/v5/concepts/settings/states/} for more info
*/
export class State {
constructor(entity, settings) {
this._userSettings = {};
// Settings the library worked out for itself. A subset of `_userSettings`, so
// that state application and pruning behave exactly as before and only
// serializing tells them apart.
this._computedSettings = {};
this._entity = entity;
this._settings = settings;
$object.each(settings, (key) => {
this._userSettings[key] = true;
});
}
get(key, fallback) {
const value = this._settings[key];
if (value !== undefined) {
return value;
}
else {
return fallback;
}
}
/**
* @ignore
*/
setRaw(key, value) {
this._settings[key] = value;
}
/**
* Sets a setting `value` for the specified `key` to be set when the state
* is applied.
*
* @param key Setting key
* @param value Setting value
* @return Setting value
*/
set(key, value) {
this._userSettings[key] = true;
delete this._computedSettings[key];
this.setRaw(key, value);
}
/**
* Same as `set()`, but for a value the library works out itself rather than
* one that was asked for.
*
* The state behaves identically - the value is only additionally flagged as
* computed, so that it can be left out when the chart is serialized.
*
* @ignore
* @param key Setting key
* @param value Setting value
*/
/**
* Writes a value the library worked out itself, without announcing it - used
* where a state notes what to return to.
*
* @ignore
*/
_setCRaw(key, value) {
this.setRaw(key, value);
this._computedSettings[key] = true;
}
_setC(key, value) {
const authored = !this._computedSettings[key] && this._settings[key] === value;
this.set(key, value);
if (!authored) {
this._computedSettings[key] = true;
}
}
/**
* Removes a setting value for the specified `key`.
*
* @see {@link https://www.amcharts.com/docs/v5/concepts/settings/} for more info
* @param key Setting key
*/
remove(key) {
delete this._userSettings[key];
delete this._computedSettings[key];
delete this._settings[key];
}
/**
* Sets multiple settings at once.
*
* `settings` must be an object with key: value pairs.
*
* @see {@link https://www.amcharts.com/docs/v5/concepts/settings/} for more info
* @param settings Settings
*/
setAll(settings) {
$object.entries(settings).forEach(([key, value]) => {
this.set(key, value);
});
}
_eachSetting(f) {
$object.each(this._settings, f);
}
/**
* Applies the state to the target element.
*
* All setting values are set immediately.
*/
apply() {
const seen = {};
seen["stateAnimationEasing"] = true;
seen["stateAnimationDuration"] = true;
const defaultState = this._entity.states.lookup("default");
this._eachSetting((key, value) => {
if (!seen[key]) {
seen[key] = true;
// save values to default state - the library's own note of what to
// come back to, not something anyone asked for
if (this !== defaultState) {
if (!(key in defaultState._settings)) {
defaultState._setCRaw(key, this._entity.get(key));
}
}
this._entity._setC(key, value);
}
});
}
/**
* Applies the state to the target element.
*
* Returns an object representing all [[Animation]] objects created for
* each setting key transition.
*
* @return Animations
*/
applyAnimate(duration) {
if (duration == null) {
duration = this._settings.stateAnimationDuration;
}
if (duration == null) {
duration = this.get("stateAnimationDuration", this._entity.get("stateAnimationDuration", 0));
}
let easing = this._settings.stateAnimationEasing;
if (easing == null) {
easing = this.get("stateAnimationEasing", this._entity.get("stateAnimationEasing", $ease.cubic));
}
const defaultState = this._entity.states.lookup("default");
const seen = {};
seen["stateAnimationEasing"] = true;
seen["stateAnimationDuration"] = true;
const animations = {};
this._eachSetting((key, value) => {
if (!seen[key]) {
seen[key] = true;
// save values to default state - see `apply()`
if (this != defaultState) {
if (!(key in defaultState._settings)) {
defaultState._setCRaw(key, this._entity.get(key));
}
}
const animation = this._entity.animate({
key: key,
to: value,
duration: duration,
easing: easing
});
if (animation) {
animations[key] = animation;
}
}
});
return animations;
}
}
/**
* Collection of [[State]] objects for an element.
*
* @see {@link https://www.amcharts.com/docs/v5/concepts/settings/states/} for more info
*/
export class States {
constructor(entity) {
this._states = {};
this._entity = entity;
}
/**
* Checks if a state by `name` exists. Returns it there is one.
*
* @param name State name
* @return State
*/
lookup(name) {
return this._states[name];
}
/**
* Sets supplied `settings` on a state by the `name`.
*
* If such state does not yet exists, it is created.
*
* @param name State name
* @param settings Settings
* @return New State
*/
create(name, settings) {
const state = this._states[name];
if (state) {
state.setAll(settings);
return state;
}
else {
const state = new State(this._entity, settings);
this._states[name] = state;
return state;
}
}
/**
* Same as `create()`, but for a state the library sets up itself rather than
* one that was asked for.
*
* The state behaves identically - its settings are only additionally flagged
* as computed, so that they can be left out when the chart is serialized.
*
* @ignore
* @param name State name
* @param settings Settings
* @return New State
*/
_createC(name, settings) {
const state = this.create(name, settings);
$object.each(settings, (key) => {
state._computedSettings[key] = true;
});
return state;
}
/**
* Removes the state called `name`.
*
* @param name State name
*/
remove(name) {
delete this._states[name];
}
/**
* Applies a named state to the target element.
*
* @param newState State name
*/
apply(newState) {
const state = this._states[newState];
if (state) {
state.apply();
}
this._entity._applyState(newState);
}
/**
* Applies a named state to the element.
*
* Returns an object representing all [[Animation]] objects created for
* each setting key transition.
*
* @param newState State name
* @return Animations
*/
applyAnimate(newState, duration) {
let animations;
const state = this._states[newState];
if (state) {
animations = state.applyAnimate(duration);
}
this._entity._applyStateAnimated(newState, duration);
return animations;
}
}
//# sourceMappingURL=States.js.map