bytev-charts
Version:
基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
587 lines (480 loc) • 20.9 kB
JavaScript
import "core-js/modules/es.array.filter.js";
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs2/core-js/object/get-own-property-symbols";
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs2/core-js/object/get-own-property-descriptor";
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs2/core-js/object/get-own-property-descriptors";
import _Object$defineProperties from "@babel/runtime-corejs2/core-js/object/define-properties";
import _Object$defineProperty from "@babel/runtime-corejs2/core-js/object/define-property";
import _defineProperty from "@babel/runtime-corejs2/helpers/defineProperty";
import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import _asyncToGenerator from "@babel/runtime-corejs2/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime-corejs2/regenerator";
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
import "core-js/modules/es.array.includes.js";
import "core-js/modules/es.string.includes.js";
import "core-js/modules/es.array.for-each.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/web.dom-collections.for-each.js";
import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/es.promise.js";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.array.some.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import _Object$freeze from "@babel/runtime-corejs2/core-js/object/freeze";
import _Object$keys from "@babel/runtime-corejs2/core-js/object/keys";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import _Object$values from "@babel/runtime-corejs2/core-js/object/values";
/**
* @webxr-input-profiles/motion-controllers 1.0.0 https://github.com/immersive-web/webxr-input-profiles
*/
var Constants = {
Handedness: _Object$freeze({
NONE: 'none',
LEFT: 'left',
RIGHT: 'right'
}),
ComponentState: _Object$freeze({
DEFAULT: 'default',
TOUCHED: 'touched',
PRESSED: 'pressed'
}),
ComponentProperty: _Object$freeze({
BUTTON: 'button',
X_AXIS: 'xAxis',
Y_AXIS: 'yAxis',
STATE: 'state'
}),
ComponentType: _Object$freeze({
TRIGGER: 'trigger',
SQUEEZE: 'squeeze',
TOUCHPAD: 'touchpad',
THUMBSTICK: 'thumbstick',
BUTTON: 'button'
}),
ButtonTouchThreshold: 0.05,
AxisTouchThreshold: 0.1,
VisualResponseProperty: _Object$freeze({
TRANSFORM: 'transform',
VISIBILITY: 'visibility'
})
};
/**
* @description Static helper function to fetch a JSON file and turn it into a JS object
* @param {string} path - Path to JSON file to be fetched
*/
function fetchJsonFile(_x) {
return _fetchJsonFile.apply(this, arguments);
}
function _fetchJsonFile() {
_fetchJsonFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(path) {
var response;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch(path);
case 2:
response = _context.sent;
if (response.ok) {
_context.next = 7;
break;
}
throw new Error(response.statusText);
case 7:
return _context.abrupt("return", response.json());
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return _fetchJsonFile.apply(this, arguments);
}
function fetchProfilesList(_x2) {
return _fetchProfilesList.apply(this, arguments);
}
function _fetchProfilesList() {
_fetchProfilesList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(basePath) {
var profileListFileName, profilesList;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
if (basePath) {
_context2.next = 2;
break;
}
throw new Error('No basePath supplied');
case 2:
profileListFileName = 'profilesList.json';
_context2.next = 5;
return fetchJsonFile("".concat(basePath, "/").concat(profileListFileName));
case 5:
profilesList = _context2.sent;
return _context2.abrupt("return", profilesList);
case 7:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return _fetchProfilesList.apply(this, arguments);
}
function fetchProfile(_x3, _x4) {
return _fetchProfile.apply(this, arguments);
}
/** @constant {Object} */
function _fetchProfile() {
_fetchProfile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(xrInputSource, basePath) {
var defaultProfile,
getAssetPath,
supportedProfilesList,
match,
supportedProfile,
profile,
assetPath,
layout,
_args3 = arguments;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
defaultProfile = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : null;
getAssetPath = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : true;
if (xrInputSource) {
_context3.next = 4;
break;
}
throw new Error('No xrInputSource supplied');
case 4:
if (basePath) {
_context3.next = 6;
break;
}
throw new Error('No basePath supplied');
case 6:
_context3.next = 8;
return fetchProfilesList(basePath);
case 8:
supportedProfilesList = _context3.sent;
xrInputSource.profiles.some(function (profileId) {
var supportedProfile = supportedProfilesList[profileId];
if (supportedProfile) {
match = {
profileId: profileId,
profilePath: "".concat(basePath, "/").concat(supportedProfile.path),
deprecated: !!supportedProfile.deprecated
};
}
return !!match;
});
if (match) {
_context3.next = 17;
break;
}
if (defaultProfile) {
_context3.next = 13;
break;
}
throw new Error('No matching profile name found');
case 13:
supportedProfile = supportedProfilesList[defaultProfile];
if (supportedProfile) {
_context3.next = 16;
break;
}
throw new Error("No matching profile name found and default profile \"".concat(defaultProfile, "\" missing."));
case 16:
match = {
profileId: defaultProfile,
profilePath: "".concat(basePath, "/").concat(supportedProfile.path),
deprecated: !!supportedProfile.deprecated
};
case 17:
_context3.next = 19;
return fetchJsonFile(match.profilePath);
case 19:
profile = _context3.sent;
if (!getAssetPath) {
_context3.next = 25;
break;
}
if (xrInputSource.handedness === 'any') {
layout = profile.layouts[_Object$keys(profile.layouts)[0]];
} else {
layout = profile.layouts[xrInputSource.handedness];
}
if (layout) {
_context3.next = 24;
break;
}
throw new Error("No matching handedness, ".concat(xrInputSource.handedness, ", in profile ").concat(match.profileId));
case 24:
if (layout.assetPath) {
assetPath = match.profilePath.replace('profile.json', layout.assetPath);
}
case 25:
return _context3.abrupt("return", {
profile: profile,
assetPath: assetPath
});
case 26:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
return _fetchProfile.apply(this, arguments);
}
var defaultComponentValues = {
xAxis: 0,
yAxis: 0,
button: 0,
state: Constants.ComponentState.DEFAULT
};
/**
* @description Converts an X, Y coordinate from the range -1 to 1 (as reported by the Gamepad
* API) to the range 0 to 1 (for interpolation). Also caps the X, Y values to be bounded within
* a circle. This ensures that thumbsticks are not animated outside the bounds of their physical
* range of motion and touchpads do not report touch locations off their physical bounds.
* @param {number} x The original x coordinate in the range -1 to 1
* @param {number} y The original y coordinate in the range -1 to 1
*/
function normalizeAxes() {
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var xAxis = x;
var yAxis = y; // Determine if the point is outside the bounds of the circle
// and, if so, place it on the edge of the circle
var hypotenuse = Math.sqrt(x * x + y * y);
if (hypotenuse > 1) {
var theta = Math.atan2(y, x);
xAxis = Math.cos(theta);
yAxis = Math.sin(theta);
} // Scale and move the circle so values are in the interpolation range. The circle's origin moves
// from (0, 0) to (0.5, 0.5). The circle's radius scales from 1 to be 0.5.
var result = {
normalizedXAxis: xAxis * 0.5 + 0.5,
normalizedYAxis: yAxis * 0.5 + 0.5
};
return result;
}
/**
* Contains the description of how the 3D model should visually respond to a specific user input.
* This is accomplished by initializing the object with the name of a node in the 3D model and
* property that need to be modified in response to user input, the name of the nodes representing
* the allowable range of motion, and the name of the input which triggers the change. In response
* to the named input changing, this object computes the appropriate weighting to use for
* interpolating between the range of motion nodes.
*/
var VisualResponse = /*#__PURE__*/function () {
function VisualResponse(visualResponseDescription) {
_classCallCheck(this, VisualResponse);
this.componentProperty = visualResponseDescription.componentProperty;
this.states = visualResponseDescription.states;
this.valueNodeName = visualResponseDescription.valueNodeName;
this.valueNodeProperty = visualResponseDescription.valueNodeProperty;
if (this.valueNodeProperty === Constants.VisualResponseProperty.TRANSFORM) {
this.minNodeName = visualResponseDescription.minNodeName;
this.maxNodeName = visualResponseDescription.maxNodeName;
} // Initializes the response's current value based on default data
this.value = 0;
this.updateFromComponent(defaultComponentValues);
}
/**
* Computes the visual response's interpolation weight based on component state
* @param {Object} componentValues - The component from which to update
* @param {number} xAxis - The reported X axis value of the component
* @param {number} yAxis - The reported Y axis value of the component
* @param {number} button - The reported value of the component's button
* @param {string} state - The component's active state
*/
_createClass(VisualResponse, [{
key: "updateFromComponent",
value: function updateFromComponent(_ref) {
var xAxis = _ref.xAxis,
yAxis = _ref.yAxis,
button = _ref.button,
state = _ref.state;
var _normalizeAxes = normalizeAxes(xAxis, yAxis),
normalizedXAxis = _normalizeAxes.normalizedXAxis,
normalizedYAxis = _normalizeAxes.normalizedYAxis;
switch (this.componentProperty) {
case Constants.ComponentProperty.X_AXIS:
this.value = this.states.includes(state) ? normalizedXAxis : 0.5;
break;
case Constants.ComponentProperty.Y_AXIS:
this.value = this.states.includes(state) ? normalizedYAxis : 0.5;
break;
case Constants.ComponentProperty.BUTTON:
this.value = this.states.includes(state) ? button : 0;
break;
case Constants.ComponentProperty.STATE:
if (this.valueNodeProperty === Constants.VisualResponseProperty.VISIBILITY) {
this.value = this.states.includes(state);
} else {
this.value = this.states.includes(state) ? 1.0 : 0.0;
}
break;
default:
throw new Error("Unexpected visualResponse componentProperty ".concat(this.componentProperty));
}
}
}]);
return VisualResponse;
}();
var Component = /*#__PURE__*/function () {
/**
* @param {Object} componentId - Id of the component
* @param {Object} componentDescription - Description of the component to be created
*/
function Component(componentId, componentDescription) {
var _this = this;
_classCallCheck(this, Component);
if (!componentId || !componentDescription || !componentDescription.visualResponses || !componentDescription.gamepadIndices || _Object$keys(componentDescription.gamepadIndices).length === 0) {
throw new Error('Invalid arguments supplied');
}
this.id = componentId;
this.type = componentDescription.type;
this.rootNodeName = componentDescription.rootNodeName;
this.touchPointNodeName = componentDescription.touchPointNodeName; // Build all the visual responses for this component
this.visualResponses = {};
_Object$keys(componentDescription.visualResponses).forEach(function (responseName) {
var visualResponse = new VisualResponse(componentDescription.visualResponses[responseName]);
_this.visualResponses[responseName] = visualResponse;
}); // Set default values
this.gamepadIndices = _Object$assign({}, componentDescription.gamepadIndices);
this.values = {
state: Constants.ComponentState.DEFAULT,
button: this.gamepadIndices.button !== undefined ? 0 : undefined,
xAxis: this.gamepadIndices.xAxis !== undefined ? 0 : undefined,
yAxis: this.gamepadIndices.yAxis !== undefined ? 0 : undefined
};
}
_createClass(Component, [{
key: "data",
get: function get() {
var data = _objectSpread({
id: this.id
}, this.values);
return data;
}
/**
* @description Poll for updated data based on current gamepad state
* @param {Object} gamepad - The gamepad object from which the component data should be polled
*/
}, {
key: "updateFromGamepad",
value: function updateFromGamepad(gamepad) {
var _this2 = this;
// Set the state to default before processing other data sources
this.values.state = Constants.ComponentState.DEFAULT; // Get and normalize button
if (this.gamepadIndices.button !== undefined && gamepad.buttons.length > this.gamepadIndices.button) {
var gamepadButton = gamepad.buttons[this.gamepadIndices.button];
this.values.button = gamepadButton.value;
this.values.button = this.values.button < 0 ? 0 : this.values.button;
this.values.button = this.values.button > 1 ? 1 : this.values.button; // Set the state based on the button
if (gamepadButton.pressed || this.values.button === 1) {
this.values.state = Constants.ComponentState.PRESSED;
} else if (gamepadButton.touched || this.values.button > Constants.ButtonTouchThreshold) {
this.values.state = Constants.ComponentState.TOUCHED;
}
} // Get and normalize x axis value
if (this.gamepadIndices.xAxis !== undefined && gamepad.axes.length > this.gamepadIndices.xAxis) {
this.values.xAxis = gamepad.axes[this.gamepadIndices.xAxis];
this.values.xAxis = this.values.xAxis < -1 ? -1 : this.values.xAxis;
this.values.xAxis = this.values.xAxis > 1 ? 1 : this.values.xAxis; // If the state is still default, check if the xAxis makes it touched
if (this.values.state === Constants.ComponentState.DEFAULT && Math.abs(this.values.xAxis) > Constants.AxisTouchThreshold) {
this.values.state = Constants.ComponentState.TOUCHED;
}
} // Get and normalize Y axis value
if (this.gamepadIndices.yAxis !== undefined && gamepad.axes.length > this.gamepadIndices.yAxis) {
this.values.yAxis = gamepad.axes[this.gamepadIndices.yAxis];
this.values.yAxis = this.values.yAxis < -1 ? -1 : this.values.yAxis;
this.values.yAxis = this.values.yAxis > 1 ? 1 : this.values.yAxis; // If the state is still default, check if the yAxis makes it touched
if (this.values.state === Constants.ComponentState.DEFAULT && Math.abs(this.values.yAxis) > Constants.AxisTouchThreshold) {
this.values.state = Constants.ComponentState.TOUCHED;
}
} // Update the visual response weights based on the current component data
_Object$values(this.visualResponses).forEach(function (visualResponse) {
visualResponse.updateFromComponent(_this2.values);
});
}
}]);
return Component;
}();
/**
* @description Builds a motion controller with components and visual responses based on the
* supplied profile description. Data is polled from the xrInputSource's gamepad.
* @author Nell Waliczek / https://github.com/NellWaliczek
*/
var MotionController = /*#__PURE__*/function () {
/**
* @param {Object} xrInputSource - The XRInputSource to build the MotionController around
* @param {Object} profile - The best matched profile description for the supplied xrInputSource
* @param {Object} assetUrl
*/
function MotionController(xrInputSource, profile, assetUrl) {
var _this3 = this;
_classCallCheck(this, MotionController);
if (!xrInputSource) {
throw new Error('No xrInputSource supplied');
}
if (!profile) {
throw new Error('No profile supplied');
}
this.xrInputSource = xrInputSource;
this.assetUrl = assetUrl;
this.id = profile.profileId; // Build child components as described in the profile description
this.layoutDescription = profile.layouts[xrInputSource.handedness];
this.components = {};
_Object$keys(this.layoutDescription.components).forEach(function (componentId) {
var componentDescription = _this3.layoutDescription.components[componentId];
_this3.components[componentId] = new Component(componentId, componentDescription);
}); // Initialize components based on current gamepad state
this.updateFromGamepad();
}
_createClass(MotionController, [{
key: "gripSpace",
get: function get() {
return this.xrInputSource.gripSpace;
}
}, {
key: "targetRaySpace",
get: function get() {
return this.xrInputSource.targetRaySpace;
}
/**
* @description Returns a subset of component data for simplified debugging
*/
}, {
key: "data",
get: function get() {
var data = [];
_Object$values(this.components).forEach(function (component) {
data.push(component.data);
});
return data;
}
/**
* @description Poll for updated data based on current gamepad state
*/
}, {
key: "updateFromGamepad",
value: function updateFromGamepad() {
var _this4 = this;
_Object$values(this.components).forEach(function (component) {
component.updateFromGamepad(_this4.xrInputSource.gamepad);
});
}
}]);
return MotionController;
}();
export { Constants, MotionController, fetchProfile, fetchProfilesList };