react-projectile-motion/build/bundle.js

抛物运动组件 / projectile motion component

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"), require("react-dom"), require("pubsub-js"));
	else if(typeof define === 'function' && define.amd)
		define("projectile-motion-react", ["react", "react-dom", "pubsub-js"], factory);
	else if(typeof exports === 'object')
		exports["projectile-motion-react"] = factory(require("react"), require("react-dom"), require("pubsub-js"));
	else
		root["projectile-motion-react"] = factory(root["react"], root["react-dom"], root["pubsub-js"]);
})(self, (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_pubsub_js__) => {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/components/withProjectileMotionStarter/index.js":
/*!*************************************************************!*\
  !*** ./src/components/withProjectileMotionStarter/index.js ***!
  \*************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var pubsub_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! pubsub-js */ \"pubsub-js\");\n/* harmony import */ var pubsub_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(pubsub_js__WEBPACK_IMPORTED_MODULE_4__);\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n/**\r\n * 高阶组件,通过此组件包裹的组件的props接收到的triggerProjectileMotion函数可用于触发抛掷物运动\r\n * A higher-order component, through which the wrapped component's props receive the triggerProjectileMotion function that can be used to initiate projectile motion\r\n */\nvar withProjectileMotionStarter = function withProjectileMotionStarter(WrappedComponent) {\n  var withProjectileMotionStarter = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_3__.memo)( /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_3__.forwardRef)(function (props, ref) {\n    var _useReducer = (0,react__WEBPACK_IMPORTED_MODULE_3__.useReducer)(function (state, action) {\n        return _objectSpread(_objectSpread({}, state), action);\n      }, {\n        goMove: 0,\n        // 运动计数器 - moving counter\n        startingDom: null,\n        // 起始dom - dom for starting\n        subscriptionName: '' // pubsub订阅名称 - subscriptionName for pubsub\n      }),\n      _useReducer2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useReducer, 2),\n      state = _useReducer2[0],\n      dispatch = _useReducer2[1];\n    var goMove = state.goMove,\n      startingDom = state.startingDom,\n      subscriptionName = state.subscriptionName;\n    (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n      // 获取触发subscribe时 startingDom 的页面坐标\n      // Obtain the page coordinates of the startingDom when triggering the subscribe.\n      if (subscriptionName && startingDom && startingDom.getBoundingClientRect()) {\n        pubsub_js__WEBPACK_IMPORTED_MODULE_4___default().publish(subscriptionName, {\n          startingDomBoundingClientRect: startingDom.getBoundingClientRect()\n        });\n      }\n    }, [goMove]);\n\n    /**\r\n     * 运动开始的触发函数 - Trigger function for the start of motion\r\n     * @param {*} subscriptionName 订阅名称 - subscriptionName for pubsub\r\n     * @param {*} startingDom 运动起始位置所对应的dom - dom for starting\r\n     */\n    var triggerProjectileMotion = function triggerProjectileMotion(subscriptionName, startingDom) {\n      dispatch({\n        goMove: goMove + 1,\n        subscriptionName: subscriptionName,\n        startingDom: startingDom\n      });\n    };\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(WrappedComponent, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({}, props, {\n      ref: ref,\n      triggerProjectileMotion: triggerProjectileMotion\n    }));\n  }));\n  return withProjectileMotionStarter;\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (withProjectileMotionStarter);\n\n//# sourceURL=webpack://projectile-motion-react/./src/components/withProjectileMotionStarter/index.js?");

/***/ }),

/***/ "./src/components/withProjectileMotion/components/ProjectileMovment/index.js":
/*!***********************************************************************************!*\
  !*** ./src/components/withProjectileMotion/components/ProjectileMovment/index.js ***!
  \***********************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/**\r\n * 获取窗体可视区域到顶部的距离 - Distance from the top of the window's visible area\r\n * @returns {number} 窗体可视区域到顶部的距离 - Distance from the top of the window's visible area\r\n */\nvar visibleAreaToTop = function visibleAreaToTop() {\n  return window.pageYOffset - document.documentElement.clientTop;\n};\n\n/**\r\n * 获取窗体可视区域到左侧的距离 - Distance from the left of the window's visible area\r\n * @returns {number} 窗体可视区域到左侧的距离 - Distance from the left of the window's visible area\r\n */\nvar visibleAreaToLeft = function visibleAreaToLeft() {\n  return window.pageXOffset - document.documentElement.clientLeft;\n};\nvar ProjectileMovment = function ProjectileMovment(props) {\n  var startingDomBoundingClientRect = props.startingDomBoundingClientRect,\n    endingDom = props.endingDom,\n    projectileMovmentEnd = props.projectileMovmentEnd,\n    endingDomAnimationEnd = props.endingDomAnimationEnd,\n    projectile = props.projectile,\n    needEndingDomAnimation = props.needEndingDomAnimation,\n    _props$duration = props.duration,\n    duration = _props$duration === void 0 ? 1 : _props$duration,\n    _props$endingDomAnima = props.endingDomAnimationDuration,\n    endingDomAnimationDuration = _props$endingDomAnima === void 0 ? 1 : _props$endingDomAnima,\n    deleteProjectile = props.deleteProjectile,\n    collectEndingDomAnimationEndList = props.collectEndingDomAnimationEndList,\n    _props$isInitialYAxis = props.isInitialYAxisReverse,\n    isInitialYAxisReverse = _props$isInitialYAxis === void 0 ? true : _props$isInitialYAxis,\n    newAnimationName = props.newAnimationName,\n    projectileTransition = props.projectileTransition,\n    windowResize = props.windowResize,\n    zIndex = props.zIndex,\n    restoreStyle = props.restoreStyle,\n    wrapClassName = props.wrapClassName;\n  var projectileRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // 抛物体的dom节点 - dom node of the projectile\n\n  var trasitionEndHasCalled = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false); // projectileTransitionEnd函数是否执行过 - Has the projectileTransitionEnd function been executed\n\n  var windowResizeRecorder = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // windowResize记录器 - windowResize recorder\n\n  var motionStartTime = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); // 抛物动画开始时间 - Projectile animation start time\n\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    move(startingDomBoundingClientRect, 'init');\n  }, []);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    // 重置抛物体位置起始位置\n    // Reset the starting position of the projectile\n    if (windowResizeRecorder.current && windowResize && windowResizeRecorder.current !== windowResize) {\n      move(projectileRef.current.getBoundingClientRect(), 'resize');\n    }\n    // 记录上一次的windowResize\n    // Record the last windowResize\n    if (windowResizeRecorder.current !== windowResize) {\n      windowResizeRecorder.current = windowResize;\n    }\n  }, [windowResize]);\n\n  // 平抛动画的transition\n  // Transition of flat animation\n  var flatProjectile = function flatProjectile(duration) {\n    return \"left \".concat(duration, \"s cubic-bezier(.35,.8,1,1), top \").concat(duration, \"s ease-in\");\n  };\n\n  // 获取startingPointRect的中心点距离顶部的距离\n  // Get the distance from the center of the startingPointRect to the top\n  var getstartingPointCenterPointTop = function getstartingPointCenterPointTop(startingPointRect) {\n    return startingPointRect.top + visibleAreaToTop() + startingPointRect.height / 2 - projectileRef.current.getBoundingClientRect().height / 2;\n  };\n\n  // 获取startingPointRect的中心点距离顶部的距离\n  // Get the distance from the center of the startingPointRect to the top\n  var getstartingPointCenterPointLeft = function getstartingPointCenterPointLeft(startingPointRect) {\n    return startingPointRect.left + visibleAreaToLeft() + startingPointRect.width / 2 - projectileRef.current.getBoundingClientRect().left / 2;\n  };\n\n  // 获取endingDom的中心点距离顶部的距离\n  // Get the distance from the center of the endingDom to the top\n  var getEndingDomCenterPointTop = function getEndingDomCenterPointTop() {\n    return endingDom.getBoundingClientRect().top + visibleAreaToTop() + endingDom.getBoundingClientRect().height / 2 - projectileRef.current.getBoundingClientRect().height / 2;\n  };\n\n  // 获取endingDom的中心点距离左边的距离\n  // Get the distance from the center of the endingDom to the left\n  var getEndingDomCenterPointLeft = function getEndingDomCenterPointLeft() {\n    return endingDom.getBoundingClientRect().left + visibleAreaToLeft() + endingDom.getBoundingClientRect().width / 2 - projectileRef.current.getBoundingClientRect().width / 2;\n  };\n\n  /**\r\n   * 抛掷动画开始 - Projectile animation starts\r\n   * @param {*} startingPointRect 开始点的dom的getBoundingClientRect()返回值 - getBoundingClientRect() return value of the starting point dom\r\n   * @param {*} type 抛掷动画开始的类型  1.init初始抛掷  2.resize 屏幕缩放导致的抛掷  3.readjust 因抛掷动画endingDom移动导致终点错位而重新发起的抛掷 - Type of projectile animation start 1.init initial throw 2.resize screen scaling caused by the throw 3.readjust due to the displacement of the end point caused by the movement of the projectile animation endingDom Re-initiated projectile\r\n  */\n  var move = function move(startingPointRect, type) {\n    // 当前时间的时间戳\n    // Timestamp of current time\n    var time = new Date().getTime();\n    // 抛掷动画剩余时间\n    // Projectile animation remaining time\n    var restTime;\n    // 计算从动画开始到动画中段所用的时间\n    // Calculate the time from the start of the animation to the middle of the animation\n    var passedTime = (time - motionStartTime.current) / 1000;\n    // 屏幕缩放导致的抛掷\n    if (type === 'resize') {\n      // 计算剩余时间 若剩余时间小于0则为0\n      // Calculate the remaining time, if the remaining time is less than 0, it is 0\n      var rest = duration - passedTime;\n      restTime = rest > 0 ? rest : 0;\n      // 初始抛掷 + 因抛掷动画endingDom移动导致终点错位而重新发起的抛掷\n      // Initial throw + re-initiated throw due to displacement of the end point caused by the movement of the projectile animation endingDom\n    } else {\n      motionStartTime.current = time;\n      restTime = duration;\n    }\n\n    // 是否可进行抛物运动的判断\n    // Judgment of whether projectile motion is possible\n    if (startingPointRect && endingDom\n    // 如果起始位置和终点位置在同一位置则不触发抛掷动画\n    // If the starting position and the end point are in the same position, the projectile animation is not triggered\n    && !(getstartingPointCenterPointTop(startingPointRect) === getEndingDomCenterPointTop() && getstartingPointCenterPointLeft(startingPointRect) === getEndingDomCenterPointLeft()) && (\n    // 若为屏幕reszie事件所触发的抛掷动画，则需判断所剩的时间是否大于0，若小于等于0因其运动后不能触发onTransitionEnd事件，所以不可通过\n    // If it is a projectile animation triggered by a screen reszie event, it is necessary to judge whether the remaining time is greater than 0. If it is less than or equal to 0, it cannot be passed because the onTransitionEnd event cannot be triggered after its movement\n    type === 'resize' && motionStartTime.current && restTime > 0\n    // 若为其他，则可通过\n    // If it is other, it can be passed\n    || type !== 'resize')) {\n      // 还原样式\n      // Restore style\n      projectileRef.current.style = {};\n      // 起始位置\n      // Starting position\n      // 计算起始位置在起始的dom的中心距离\n      // Calculate the starting position in the center of the starting dom\n      projectileRef.current.style.top = \"\".concat(getstartingPointCenterPointTop(startingPointRect), \"px\");\n      projectileRef.current.style.left = \"\".concat(getstartingPointCenterPointLeft(startingPointRect), \"px\");\n      projectileRef.current.style.display = 'block';\n      projectileRef.current.style.position = 'absolute';\n      projectileRef.current.style.zIndex = zIndex;\n      projectileRef.current.style.transform = 'translate(-50%, -50%)';\n\n      // 终点位置\n      // End position\n      setTimeout(function () {\n        projectileRef.current.style.transition = type !== 'init'\n        // 抛掷动画执行到一半,因屏幕大小改变抛物动画仍未结束,需要重置以平抛为其轨迹使其终点不发生偏移 或者是 因抛掷动画endingDom移动导致终点错位而重新发起的平抛\n        // The projectile animation is executed halfway, because the screen size changes and the projectile animation is not over yet, it needs to be reset to a flat throw as its trajectory so that its end point does not shift or it is a flat throw that is re-initiated due to the displacement of the end point caused by the movement of the projectile animation endingDom\n        ? flatProjectile(restTime)\n        // 抛物动画新的开始\n        // Projectile animation starts\n        : projectileTransition\n        // 是否自定义抛掷物体的transition\n        // Whether to customize the transition of the projectile\n        ? projectileTransition : isInitialYAxisReverse\n        // 初始Y轴为反方向抛\n        // Initial Y axis is up/down\n        ? \"left \".concat(restTime, \"s linear, top \").concat(restTime, \"s cubic-bezier(.39,-1,1,0)\") // 平抛\n        // Flat\n        : flatProjectile(restTime);\n        projectileRef.current.style.top = \"\".concat(getEndingDomCenterPointTop(), \"px\");\n        projectileRef.current.style.left = \"\".concat(getEndingDomCenterPointLeft(), \"px\");\n      }, 0);\n    }\n  };\n\n  /**\r\n   * endingDom被抛物体击中动画 - endingDom is hit by the projectile animation\r\n   */\n  var endingDomAnimate = function endingDomAnimate() {\n    restoreStyle();\n    // 设置endingDom被抛物体击中动画\n    // Set endingDom to be hit by the projectile animation\n    setTimeout(function () {\n      endingDom.style.animation = newAnimationName;\n      endingDom.style['animation-duration'] = \"\".concat(endingDomAnimationDuration, \"s\");\n      endingDom.style['animation-fill-mode'] = 'both';\n    }, 0);\n  };\n\n  /**\r\n   * 抛物动画结束 - Projectile animation ends\r\n   * @param {object} event transitionend事件对象 - transitionend event object\r\n   */\n  var projectileTransitionEnd = function projectileTransitionEnd() {\n    // 因transition设置的left和top时间是一样但其他不一样，这会导致transitionend事件会触发两次，所以这里做了防止同一事件触发两次的处理\n    // Because the time set by transition is the same but others are different, this will cause the transitionend event to be triggered twice, so here is the processing to prevent the same event from being triggered twice\n    if (!trasitionEndHasCalled.current) {\n      // 判断抛掷物是否达到了目的点（若抛物运动过程中，endingDom位置发生了移动则终点位置不是目的点）- 此处的做法为将其目前位置作为起点，endingDom目前位置作为终点进行一次平抛\n      // Determine whether the projectile has reached the destination point (if the endingDom position has changed during the projectile movement, the end point is not the destination point) - the current position is used as the starting point here, and the current position of endingDom is used as the end point for a flat throw\n      var _projectileRef$curren = projectileRef.current.getBoundingClientRect(),\n        projectileCenterPointTop = _projectileRef$curren.top,\n        projectileCenterPointLeft = _projectileRef$curren.left,\n        width = _projectileRef$curren.width,\n        height = _projectileRef$curren.height;\n      // 因上面的样式使用了transform:translate(-50%, -50%)，所以这里需要加上width/2和height/2\n      // Because the style above uses transform:translate(-50%, -50%), you need to add width/2 and height/2 here\n      var projectileTop = projectileCenterPointTop + height / 2 + visibleAreaToTop();\n      var projectileLeft = projectileCenterPointLeft + width / 2 + visibleAreaToLeft();\n      // 是否在误差范围内，误差为1px\n      // Whether it is within the error range, the error is 1px\n      var errorRange = 1;\n      var topWithinErrorRange = projectileTop <= getEndingDomCenterPointTop() + errorRange && projectileTop >= getEndingDomCenterPointTop() - errorRange;\n      var leftWithinErrorRange = projectileLeft <= getEndingDomCenterPointLeft() + errorRange && projectileLeft >= getEndingDomCenterPointLeft() - errorRange;\n      // 抛掷终点不是endingDom的位置\n      // The end point of the projectile is not the position of endingDom\n      if (!topWithinErrorRange || !leftWithinErrorRange) {\n        move(projectileRef.current.getBoundingClientRect(), 'readjust');\n        // 抛掷终点是endingDom的位置\n        // The end point of the projectile is the position of endingDom\n      } else {\n        trasitionEndHasCalled.current = true;\n        deleteProjectile(props);\n        if (typeof projectileMovmentEnd === 'function') {\n          projectileMovmentEnd();\n        }\n        if (typeof endingDomAnimationEnd === 'function') {\n          collectEndingDomAnimationEndList(props);\n        }\n        // 是否需要endom被抛物体击中动画\n        // Whether to need endom is hit by the projectile animation\n        if (needEndingDomAnimation) {\n          endingDomAnimate();\n        }\n      }\n    }\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: wrapClassName,\n    style: {\n      display: 'none'\n    },\n    ref: projectileRef,\n    onTransitionEnd: projectileTransitionEnd\n  }, projectile);\n};\n\n// 不引起组件更新的props\n// Props that do not cause component updates\nvar filterKeyList = {\n  deleteProjectile: true,\n  collectEndingDomAnimationEndList: true,\n  restoreStyle: true\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (/*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(ProjectileMovment, function (prevProps, nextProps) {\n  return !Object.keys(prevProps).filter(function (item) {\n    return !filterKeyList[item];\n  }).some(function (i) {\n    return prevProps[i] !== nextProps[i];\n  });\n}));\n\n//# sourceURL=webpack://projectile-motion-react/./src/components/withProjectileMotion/components/ProjectileMovment/index.js?");

/***/ }),

/***/ "./src/components/withProjectileMotion/index.js":
/*!******************************************************!*\
  !*** ./src/components/withProjectileMotion/index.js ***!
  \******************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var pubsub_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! pubsub-js */ \"pubsub-js\");\n/* harmony import */ var pubsub_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(pubsub_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _components_ProjectileMovment__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/ProjectileMovment */ \"./src/components/withProjectileMotion/components/ProjectileMovment/index.js\");\n/* harmony import */ var _tools_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../tools/utils */ \"./src/tools/utils.js\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\n\n/**\r\n * @param {object} props\r\n * @param {string} props.subscription - 必传 pubsub订阅名称 - required. pubsub subscription name\r\n * @param {object} props.endingDom - 必传 抛掷物结束位置的dom - required. The dom at the end of the projectile\r\n * @param {boolean} props.muiltipleProjectile - 是否允许出现多个抛掷物 默认为true - Whether multiple projectiles are allowed, the default is true\r\n * @param {ReactNode} props.projectile - 抛掷物（如果要添加className需把样式写在全局） - Projectile (if you want to add className, you need to write the style globally)\r\n * @param {number} props.duration - 抛掷动画持续的时间 - The duration of the projectile animation\r\n * @param {number} props.zIndex - 设置抛掷物的zIndex 默认为2147483647 - Set the zIndex of the projectile, the default is 2147483647\r\n * @param {boolean} props.needEndingDomAnimation - endingDom是否需要被抛掷物击中后动画 默认为true - Whether endingDom needs to be animated after being hit by the projectile\r\n * @param {function} props.projectileMovmentEnd - 抛物运动动画结束回调 - Projectile motion animation end callback\r\n * @param {function} props.endingDomAnimationEnd - endingDom被击中产生的动画的结束回调 - endingDom animation end callback\r\n * @param {number} props.endingDomAnimationDuration - endingDom被抛掷物击中后动画持续时间 - The duration of the animation after endingDom is hit by the projectile\r\n * @param {string} props.endingDomAnimationName - endingDom被抛掷物击中后的animation的名称（animation需在全局）- The name of the animation after endingDom is hit by the projectile (animation needs to be global)\r\n * @param {string} props.additionalTransformValueInAnimate - 补充的动画的transform值，传入该值后会生成新的类名，该类会整合endingDomAnimationName对应的keyframe除最后一帧外的其他帧，形成新的类，然后供endingDom应用。可以设置rotate scale translate skew 等值，若设置多个请用空格隔开 - Additional animation transform value, after passing in this value, a new class name will be generated, which will integrate all the frames of the keyframe corresponding to endingDomAnimationName except the last frame, forming a new class, and then apply it to endingDom. You can set rotate scale translate skew and other values, if you set multiple, please use spaces to separate\r\n * @param {string} props.wrapClassName - 抛掷物外层容器的类名 默认为null - The class name of the outer container of the projectile, the default is null\r\n * @param {boolean} props.isInitialYAxisReverse - 抛物运动初速度y轴方向是否为反方向 默认为true - Whether the initial velocity of the projectile motion in the y-axis direction is in the opposite direction, the default is true\r\n * @param {string} props.projectileTransition - 自定义抛掷物的transition属性若传入此属性则duration和isInitialYAxisReverse将失效 默认为null - Custom projectile transition properties. If this property is passed in, duration and isInitialYAxisReverse will be invalid. The default is null\r\n */\nvar MotionEntity = function MotionEntity(props) {\n  var endingDom = props.endingDom,\n    _props$subscription = props.subscription,\n    subscription = _props$subscription === void 0 ? '' : _props$subscription,\n    _props$muiltipleProje = props.muiltipleProjectile,\n    muiltipleProjectile = _props$muiltipleProje === void 0 ? true : _props$muiltipleProje,\n    endingDomAnimationName = props.endingDomAnimationName,\n    resetSetting = props.resetSetting,\n    _props$additionalTran = props.additionalTransformValueInAnimate,\n    additionalTransformValueInAnimate = _props$additionalTran === void 0 ? '' : _props$additionalTran,\n    _props$projectile = props.projectile,\n    projectile = _props$projectile === void 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n      style: {\n        background: 'red',\n        width: '15px',\n        height: '15px',\n        borderRadius: '50%'\n      }\n    }) : _props$projectile,\n    _props$needEndingDomA = props.needEndingDomAnimation,\n    needEndingDomAnimation = _props$needEndingDomA === void 0 ? true : _props$needEndingDomA,\n    _props$zIndex = props.zIndex,\n    zIndex = _props$zIndex === void 0 ? 2147483647 : _props$zIndex,\n    wrapClassName = props.wrapClassName;\n  var _useReducer = (0,react__WEBPACK_IMPORTED_MODULE_4__.useReducer)(function (state, action) {\n      return _objectSpread(_objectSpread({}, state), action);\n    }, {\n      goMove: 0,\n      // 抛掷物是否显示 - whether the projectile is displayed\n      startingDomBoundingClientRect: null,\n      // 触发subscribe时抛掷物起始位置 - starting position of the projectile when triggering subscribe\n      projectileList: [],\n      // 抛掷物数组 - projectile array\n      endingDomDefaultSetting: {},\n      // endingDom默认属性 - endingDom default setting\n      endingDomAnimationEndList: [],\n      // 收集endingDomAnimationEnd函数的数组 - Array of endingDomAnimationEnd functions\n      lastKeyframes: null,\n      // 上一次的keyframes值 - last keyframes value\n      lastOriginalTransform: null,\n      // 上一次的transform值 - last transform value\n      newAnimationName: null,\n      // 动态生成的新的类名 或 直接引用传入的类名 - Dynamically generated new class name or directly referenced incoming class name\n      lastAnimationIndex: null,\n      // 动态生成的新的类名的索引 - index of dynamically generated new class name\n      windowResize: 1 // 浏览器窗口变化 - browser window change\n    }),\n    _useReducer2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(_useReducer, 2),\n    state = _useReducer2[0],\n    dispatch = _useReducer2[1];\n  var projectileRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]); // 抛掷物数组 - projectile array\n\n  var goMove = state.goMove,\n    startingDomBoundingClientRect = state.startingDomBoundingClientRect,\n    projectileList = state.projectileList,\n    endingDomDefaultSetting = state.endingDomDefaultSetting,\n    lastKeyframes = state.lastKeyframes,\n    lastOriginalTransform = state.lastOriginalTransform,\n    newAnimationName = state.newAnimationName,\n    lastAnimationIndex = state.lastAnimationIndex,\n    windowResize = state.windowResize;\n  var endingDomAnimationEndListRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]);\n  (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n    // 保存endingDom的默认属性\n    // Save the default properties of endingDom\n    if (endingDom) {\n      dispatch({\n        endingDomDefaultSetting: {\n          style: JSON.parse(JSON.stringify(endingDom.style)),\n          ontransitionend: JSON.parse(JSON.stringify(endingDom.ontransitionend))\n        }\n      });\n      if (endingDomAnimationName && needEndingDomAnimation) {\n        // 动态生成新的类名\n        // Dynamically generate new class names\n        if (\n        // 是否有additionalTransformValueInAnimate\n        additionalTransformValueInAnimate\n        // endingDom的transform是否已经设置了值，如果设置了值则生成新类名，使其动画携带原有的transform而不是动画中的transform直接覆盖\n        // Whether the transform of endingDom has been set. If the transform has been set, a new class name is generated to make the animation carry the original transform instead of the transform in the animation directly overwriting\n        || window.getComputedStyle(endingDom).getPropertyValue('transform') !== 'matrix(1, 0, 0, 1, 0, 0)') {\n          generateNewClass();\n          // 直接引用传入的类名\n          // Directly reference the incoming class name\n        } else {\n          dispatch({\n            newAnimationName: endingDomAnimationName\n          });\n        }\n      }\n    }\n  }, [resetSetting]);\n\n  // 添加抛掷物\n  // Add projectile\n  (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n    if (goMove === 0) return;\n    var newProjectile = _objectSpread(_objectSpread({}, props), {}, {\n      id: goMove,\n      startingDomBoundingClientRect: startingDomBoundingClientRect\n    });\n    // 是否允许出现多个抛掷物\n    // Whether multiple projectiles are allowed\n    projectileRef.current = muiltipleProjectile\n    // 允许出现多个抛掷物时，把新的抛掷物添加到数组中\n    // When multiple projectiles are allowed, add the new projectile to the array\n    ? [].concat((0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(projectileList), [newProjectile]) // 不允许出现多个抛掷物则对数组进行替换\n    // If multiple projectiles are not allowed, replace the array\n    : [newProjectile];\n    dispatch({\n      projectileList: projectileRef.current\n    });\n  }, [goMove]);\n  (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n    var sub = pubsub_js__WEBPACK_IMPORTED_MODULE_6___default().subscribe(subscription,\n    // startingDomBoundingClientRect 起始用dom.getBoundingClientRect()方法获取的值，而endingDom是通过传入dom，是因为pubsub.publish是异步的，当开始处理pubsub.subscribe里面的函数时可能endingDom的状态可能已经不是最开始调用的状态了，（可能已经消失了，或者移位了，比如点击drawer的取消触发时，drawer整个组件包括取消按钮都要跟着消失）\n    // startingDomBoundingClientRect is the value obtained by dom.getBoundingClientRect() method, and endingDom is passed in dom, because pubsub.publish is asynchronous, when starting to process the function in pubsub.subscribe, the status of endingDom may not be the status of the initial call (may have disappeared, or moved, such as clicking the cancel button of the drawer to trigger, the entire drawer component including the cancel button should disappear)\n    function (msg, _ref) {\n      var startingDomBoundingClientRect = _ref.startingDomBoundingClientRect;\n      dispatch({\n        goMove: goMove + 1,\n        startingDomBoundingClientRect: startingDomBoundingClientRect\n      });\n    });\n    return function () {\n      pubsub_js__WEBPACK_IMPORTED_MODULE_6___default().unsubscribe(sub);\n    };\n  }, [subscription, goMove]);\n\n  /**\r\n   * 窗口变化触发函数 - Window change trigger function\r\n   */\n  var onResize = (0,react__WEBPACK_IMPORTED_MODULE_4__.useCallback)((0,_tools_utils__WEBPACK_IMPORTED_MODULE_8__.debounce)(function () {\n    dispatch({\n      windowResize: windowResize + 1\n    });\n  }, 100, false));\n\n  // 监听窗口变化\n  // Listen for window changes\n  (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n    window.addEventListener('resize', onResize);\n    return function () {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [windowResize]);\n\n  /**\r\n   * endingDom动画结束事件回调 - endingDom animation end event callback\r\n   */\n  var onEndingDomAnimationEnd = function onEndingDomAnimationEnd() {\n    restoreStyle();\n    executeEndingDomAnimationEndList();\n  };\n\n  // 新增对endingDom动画结束事件的监听\n  // Add a listener for the endingDom animation end event\n  (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n    if (endingDom) {\n      endingDom.addEventListener('animationend', onEndingDomAnimationEnd);\n      return function () {\n        endingDom.removeEventListener('animationend', onEndingDomAnimationEnd);\n      };\n    }\n  }, [resetSetting]);\n\n  /**\r\n   * 删除抛掷物 - Delete projectile\r\n   * @param {object} projectileItem - 抛掷物对象 - projectile object\r\n   */\n  var deleteProjectile = function deleteProjectile(projectileItem) {\n    var id = projectileItem.id;\n    if (id) {\n      projectileRef.current = projectileRef.current.filter(function (item) {\n        return item.id !== id;\n      });\n      dispatch({\n        projectileList: projectileRef.current\n      });\n    }\n  };\n\n  /**\r\n   * 收集endingDomAnimationEnd函数到EndingDomAnimationEndList - Collect endingDomAnimationEnd functions to EndingDomAnimationEndList\r\n   * @param {*} projectileItem - 抛掷物对象 - projectile object\r\n   */\n  var collectEndingDomAnimationEndList = function collectEndingDomAnimationEndList(projectileItem) {\n    var endingDomAnimationEnd = projectileItem.endingDomAnimationEnd;\n    endingDomAnimationEndListRef.current = [].concat((0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(endingDomAnimationEndListRef.current), [endingDomAnimationEnd]);\n    dispatch({\n      endingDomAnimationEndList: endingDomAnimationEndListRef.current\n    });\n  };\n\n  /**\r\n   * 执行EndingDomAnimationEndList里面收集endingDomAnimationEnd函数 - Execute the endingDomAnimationEnd function collected in EndingDomAnimationEndList\r\n   */\n  var executeEndingDomAnimationEndList = function executeEndingDomAnimationEndList() {\n    endingDomAnimationEndListRef.current.forEach(function (endingDomAnimationEnd) {\n      if (typeof endingDomAnimationEnd === 'function') {\n        endingDomAnimationEnd();\n      }\n    });\n    endingDomAnimationEndListRef.current = [];\n    dispatch({\n      endingDomAnimationEndList: endingDomAnimationEndListRef.current\n    });\n  };\n\n  /**\r\n   * 动态生成新的类名 - Dynamically generate new class names\r\n   */\n  var generateNewClass = function generateNewClass() {\n    // 目标样式表\n    // Target style sheet\n    var targetStyleSheet;\n    // 新的 CSS 规则\n    // New CSS rules\n    var newRule;\n\n    // 获取样式表中的所有规则\n    // Get all rules in the style sheet\n    var styleSheets = document.styleSheets;\n\n    // 遍历样式表\n    // Traverse the style sheet\n    for (var i = 0; i < styleSheets.length; i++) {\n      var styleSheet = styleSheets[i];\n      // 找到包含projectile-motion-react的样式表\n      // Find the style sheet containing react-projectile-motion\n      if (styleSheet.title && styleSheet.title.includes('react-projectile-motion')) {\n        targetStyleSheet = styleSheet;\n        continue;\n      }\n\n      // 遍历样式表中的规则\n      // Traverse the rules in the style sheet\n      var _loop = function _loop() {\n        var rule = styleSheet.cssRules[j];\n        // 检查是否是 @keyframes 规则并且名称匹配\n        // Check if it is a @keyframes rule and the name matches\n        if (rule.type === CSSRule.KEYFRAMES_RULE && rule.name === endingDomAnimationName) {\n          // 获取关键帧规则\n          // Get keyframe rules\n          var keyframes = rule.cssRules;\n\n          // 获取元素原有的 transform 属性值 若为none则设为空字符串\n          // Get the original transform attribute value of the element\n          var endingDomTransformComputedStyle = window.getComputedStyle(endingDom).getPropertyValue('transform');\n          var originalTransform = endingDomTransformComputedStyle !== 'none' ? endingDomTransformComputedStyle : '';\n\n          // 对比上一次的keyframes值和transform值，若不同则创建新的动画类名\n          // Compare the last keyframes value and transform value, if different, create a new animation class name\n          if (keyframes !== lastKeyframes || originalTransform !== lastOriginalTransform) {\n            var _newAnimationName = \"react-projectile-motion-\".concat((0,_tools_utils__WEBPACK_IMPORTED_MODULE_8__.uuid)());\n            var keyframesList = Array.from(keyframes);\n            // 找出最后一帧的keyText值\n            // Find the keyText value of the last frame\n            var lastKeyText = '';\n            var tempKeyMax = -1;\n            // 从后往前遍历keyframesList\n            // Traverse keyframesList from back to front\n            for (var _i = keyframesList.length - 1; _i > 0; _i--) {\n              var keyText = keyframesList[_i].keyText;\n              // 如果该帧是100%那就终止遍历，100%就是最后一帧\n              // If the frame is 100%, the traversal is terminated, and 100% is the last frame\n              if (keyText === '100%') {\n                lastKeyText = keyText;\n                break;\n              }\n              // 如果该帧不是100%那就继续往前遍历,直至找到最大的keyText\n              // If the frame is not 100%, continue to traverse forward until you find the largest keyText\n              if (parseInt(keyText) > tempKeyMax) {\n                lastKeyText = keyText;\n                tempKeyMax = parseInt(keyText);\n              }\n            }\n\n            // 合并原有的 keyframes  和动画的 keyframes\n            // Merge the original keyframes and the keyframes of the animation\n            var newkeyframes = keyframesList.map(function (keyframe) {\n              var cssTextObj = {};\n              var hasTransform = false;\n              // 除了最后一个keyframe，其他的keyframe都要添加scale属性\n              // Except for the last keyframe, all other keyframes must add the scale attribute\n              var additionalTransformValue = keyframe.keyText === lastKeyText ? '' : additionalTransformValueInAnimate;\n              var transformBaseValue = \"\".concat(originalTransform, \" \").concat(additionalTransformValue);\n              for (var _i2 = 0; _i2 < keyframe.style.length; _i2++) {\n                var propName = keyframe.style[_i2];\n                // 将动画的transform属性与原有的transform属性合并, 其他属性不变\n                // Merge the transform attribute of the animation with the original transform attribute, and other attributes remain unchanged\n                if (propName === 'transform') {\n                  hasTransform = true;\n                  cssTextObj[propName] = \"\".concat(transformBaseValue, \" \").concat(keyframe.style[propName], \" \");\n                } else {\n                  cssTextObj[propName] = keyframe.style[propName];\n                }\n              }\n              // 动画的 keyframes没有transform属性时，添加原有的transform属性\n              // When the animation's keyframes do not have the transform attribute, add the original transform attribute\n              if (!hasTransform) {\n                cssTextObj.transform = transformBaseValue;\n              }\n              return \"\\n                                \".concat(keyframe.keyText, \" {\\n                                    \").concat(Object.keys(cssTextObj).map(function (key) {\n                return \"\".concat(key, \": \").concat(cssTextObj[key], \";\");\n              }).join(''), \"\\n                                }\\n                            \");\n            });\n\n            // 创建新的 CSS 规则，将动画应用于新的类名\n            // Create a new CSS rule and apply the animation to the new class name\n            newRule = \"@keyframes \".concat(_newAnimationName, \" {\\n                            \").concat(newkeyframes.join(' '), \"\\n                        }\");\n            dispatch({\n              lastKeyframes: keyframes,\n              lastOriginalTransform: originalTransform,\n              newAnimationName: _newAnimationName\n            });\n          }\n        }\n      };\n      for (var j = 0; j < styleSheet.cssRules.length; j++) {\n        _loop();\n      }\n    }\n\n    // 插入新规则到样式表\n    // Insert new rules into the style sheet\n    if (newRule) {\n      // 若样式表中存在projectile-motion-react的样式表，则添加 / 插入 新的 CSS 规则到样式表\n      // If the style sheet contains the style sheet of react-projectile-motion, add / insert new CSS rules to the style sheet\n      if (targetStyleSheet) {\n        // 添加 / 插入 新的 CSS 规则到样式表\n        // Add / insert new CSS rules to the style sheet\n        if (targetStyleSheet.insertRule) {\n          var animationIndex = lastAnimationIndex ? lastAnimationIndex : targetStyleSheet.cssRules.length;\n          targetStyleSheet.insertRule(newRule, animationIndex);\n          dispatch({\n            lastAnimationIndex: animationIndex\n          });\n        } else if (targetStyleSheet.addRule) {\n          var _animationIndex = lastAnimationIndex ? lastAnimationIndex : targetStyleSheet.rules.length;\n          targetStyleSheet.addRule(newRule, _animationIndex);\n          dispatch({\n            lastAnimationIndex: _animationIndex\n          });\n        }\n        // 若样式表中不存在projectile-motion-react的样式表，则创建新的 style 标签\n        // If the style sheet does not contain the style sheet of react-projectile-motion, create a new style tag\n      } else {\n        // 创建新的 style 标签\n        // Create a new style tag\n        var styleElement = document.createElement('style');\n        styleElement.type = 'text/css';\n        styleElement.title = 'react-projectile-motion';\n        styleElement.innerHTML = newRule;\n        document.head.appendChild(styleElement);\n        dispatch({\n          lastAnimationIndex: 0\n        });\n      }\n    }\n  };\n\n  /**\r\n   * 复原endingDom样式及相关属性 - Restore endingDom style and related properties\r\n   */\n  var restoreStyle = function restoreStyle() {\n    var _endingDomDefaultSett = endingDomDefaultSetting.style,\n      style = _endingDomDefaultSett === void 0 ? {} : _endingDomDefaultSett;\n    var animation = style.animation,\n      animationDuration = style['animation-duration'],\n      animationFillMode = style['animation-fill-mode'];\n    endingDom.style.animation = animation;\n    endingDom.style['animation-duration'] = animationDuration;\n    endingDom.style['animation-fill-mode'] = animationFillMode;\n  };\n\n  // 渲染到body标签下\n  // Rendered under the body label\n  return /*#__PURE__*/react_dom__WEBPACK_IMPORTED_MODULE_5___default().createPortal(projectileList.map(function (item) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_components_ProjectileMovment__WEBPACK_IMPORTED_MODULE_7__[\"default\"], (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n      key: item.id,\n      newAnimationName: newAnimationName,\n      deleteProjectile: deleteProjectile,\n      needEndingDomAnimation: needEndingDomAnimation,\n      collectEndingDomAnimationEndList: collectEndingDomAnimationEndList,\n      projectile: projectile,\n      windowResize: windowResize,\n      zIndex: zIndex,\n      resetSetting: resetSetting,\n      restoreStyle: restoreStyle,\n      wrapClassName: wrapClassName\n    }, item));\n  }), document.body);\n};\n\n/**\r\n * 高阶组件,通过此组件包裹的组件的props接收到的setProjectileMotionPorps函数可用于设置抛物运动属性\r\n * A higher-order component, through which the wrapped component's props receive the setProjectileMotionPorps function that can be used to set the projectile motion properties\r\n */\nvar withProjectileMotion = function withProjectileMotion(component) {\n  // 不引起组件更新的props\n  // Props that do not cause component updates\n  var filterKeyList = {\n    setProjectileMotionPorps: true\n  };\n  var WrappedComponent = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.memo)(component, function (prevProps, nextProps) {\n    return !Object.keys(prevProps).filter(function (item) {\n      return !filterKeyList[item];\n    }).some(function (i) {\n      return prevProps[i] !== nextProps[i];\n    });\n  });\n  var withProjectileMotion = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.memo)( /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)(function (props, ref) {\n    var _useReducer3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useReducer)(function (state, action) {\n        return _objectSpread(_objectSpread({}, state), action);\n      }, {\n        projectileMotionPorps: {},\n        // ProjectileMotion的props - ProjectileMotion props\n        resetSetting: 0 // 重置设置计数器 - reset setting counter\n      }),\n      _useReducer4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(_useReducer3, 2),\n      state = _useReducer4[0],\n      dispatch = _useReducer4[1];\n    var projectileMotionPorps = state.projectileMotionPorps,\n      resetSetting = state.resetSetting;\n    var setProjectileMotionPorps = function setProjectileMotionPorps(projectileMotionPorps) {\n      dispatch({\n        projectileMotionPorps: projectileMotionPorps,\n        resetSetting: resetSetting + 1\n      });\n    };\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(MotionEntity, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({}, projectileMotionPorps, {\n      resetSetting: resetSetting\n    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(WrappedComponent, (0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({}, props, {\n      ref: ref,\n      setProjectileMotionPorps: setProjectileMotionPorps\n    })));\n  }));\n  return withProjectileMotion;\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (withProjectileMotion);\n\n//# sourceURL=webpack://projectile-motion-react/./src/components/withProjectileMotion/index.js?");

/***/ }),

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   withProjectileMotion: () => (/* reexport safe */ _components_withProjectileMotion__WEBPACK_IMPORTED_MODULE_0__[\"default\"]),\n/* harmony export */   withProjectileMotionStarter: () => (/* reexport safe */ _components_withProjectileMotionStarter__WEBPACK_IMPORTED_MODULE_1__[\"default\"])\n/* harmony export */ });\n/* harmony import */ var _components_withProjectileMotion__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/withProjectileMotion */ \"./src/components/withProjectileMotion/index.js\");\n/* harmony import */ var _components_withProjectileMotionStarter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/withProjectileMotionStarter */ \"./src/components/withProjectileMotionStarter/index.js\");\n\n\n\n//# sourceURL=webpack://projectile-motion-react/./src/index.js?");

/***/ }),

/***/ "./src/tools/utils.js":
/*!****************************!*\
  !*** ./src/tools/utils.js ***!
  \****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/*