From 2a5bac2bb383d956925a78fa985fdf0747f9b407 Mon Sep 17 00:00:00 2001 From: thednp Date: Wed, 8 Dec 2021 23:43:31 +0200 Subject: [PATCH] Changes V2.2.0: * major JSDoc write up * removed ESLint `no-bitwise` exception, it only applies to specific functions and not the entire code * the `SVGCubicMorph` component will remove un-necessary `Z` path commands when is the case for better out of the box animation * fixed a minor disambiguation with `filterEffects` and `drop-shadow` property and its `dropshadow` interpolation function * TypeScript strong: all files are modules, easy to implement in any third party app * updated `CubicBezier` and SVGPathCommander * code cleanup --- .eslintrc | 19 +- .gitignore | 1 + .npmignore | 1 + README.md | 18 +- demo/assets/js/perf-matrix.js | 22 +- demo/assets/js/svgCubicMorph.js | 21 +- demo/performance-matrix.html | 2 + demo/src/kute-base.js | 391 ++- demo/src/kute-base.min.js | 4 +- demo/src/kute-extra.js | 2761 ++++++++++----- demo/src/kute-extra.min.js | 4 +- demo/src/kute.min.js | 4 +- demo/svgCubicMorph.html | 73 +- demo/svgMorph.html | 5 +- dist/kute.esm.js | 2504 ++++++++++---- dist/kute.esm.min.js | 4 +- dist/kute.js | 2475 +++++++++---- dist/kute.min.js | 4 +- package.json | 12 +- rollup.config.js | 2 +- src/animation/animation.js | 54 +- src/animation/animationBase.js | 40 +- src/animation/animationDevelopment.js | 38 +- src/components/backgroundPosition.js | 31 +- src/components/backgroundPositionBase.js | 25 +- src/components/borderRadius.js | 35 +- src/components/borderRadiusBase.js | 24 +- src/components/boxModel.js | 26 +- src/components/boxModelBase.js | 20 +- src/components/boxModelEssential.js | 26 +- src/components/clipProperty.js | 33 +- src/components/clipPropertyBase.js | 23 +- src/components/colorProperties.js | 33 +- src/components/colorPropertiesBase.js | 23 +- src/components/crossBrowserMove.js | 34 +- src/components/filterEffects.js | 48 +- src/components/filterEffectsBase.js | 37 +- src/components/htmlAttributes.js | 37 +- src/components/htmlAttributesBase.js | 28 +- src/components/opacityProperty.js | 30 +- src/components/opacityPropertyBase.js | 18 +- src/components/scrollProperty.js | 23 +- src/components/scrollPropertyBase.js | 59 +- src/components/shadowProperties.js | 43 +- src/components/shadowPropertiesBase.js | 25 +- src/components/svgCubicMorph.js | 98 +- src/components/svgCubicMorphBase.js | 23 +- src/components/svgDraw.js | 90 +- src/components/svgDrawBase.js | 28 +- src/components/svgMorph.js | 263 +- src/components/svgMorphBase.js | 20 +- src/components/svgTransform.js | 55 +- src/components/svgTransformBase.js | 21 +- src/components/textProperties.js | 34 +- src/components/textPropertiesBase.js | 24 +- src/components/textWrite.js | 27 +- src/components/textWriteBase.js | 34 +- src/components/transformFunctions.js | 52 +- src/components/transformFunctionsBase.js | 39 +- src/components/transformLegacy.js | 51 +- src/components/transformLegacyBase.js | 43 +- src/components/transformMatrix.js | 45 +- src/components/transformMatrixBase.js | 34 +- src/core/add.js | 11 +- src/core/getAll.js | 11 +- src/core/internals.js | 16 +- src/core/linkInterpolation.js | 16 +- src/core/queueStart.js | 4 +- src/core/remove.js | 11 +- src/core/removeAll.js | 9 +- src/core/render.js | 35 +- src/easing/easing-base.js | 21 +- src/easing/easing-bezier.js | 10 +- src/easing/easing.js | 41 +- src/index-base.js | 24 +- src/index-extra.js | 36 +- src/index-legacy.js | 50 +- src/index.js | 35 +- src/interface/allFromTo.js | 15 +- src/interface/allTo.js | 17 +- src/interface/fromTo.js | 17 +- src/interface/to.js | 16 +- src/interpolation/arrays.js | 13 +- src/interpolation/colors.js | 17 +- src/interpolation/coords.js | 10 + src/interpolation/numbers.js | 10 +- src/interpolation/perspective.js | 10 + src/interpolation/rotate.js | 10 + src/interpolation/rotate3d.js | 12 + src/interpolation/scale.js | 9 + src/interpolation/skew.js | 11 + src/interpolation/skewX.js | 10 + src/interpolation/skewY.js | 10 + src/interpolation/translate.js | 11 + src/interpolation/translate3d.js | 10 + src/interpolation/units.js | 9 + src/objects/componentsBase.js | 14 +- src/objects/componentsDefault.js | 20 +- src/objects/componentsExtra.js | 32 +- src/objects/connect.js | 7 +- src/objects/crossCheck.js | 3 +- src/objects/defaultOptions.js | 8 + src/objects/defaultValues.js | 3 +- src/objects/globalObject.js | 9 +- src/objects/interpolate.js | 3 +- src/objects/kute.js | 6 +- src/objects/linkProperty.js | 3 +- src/objects/objects.js | 22 +- src/objects/objectsBase.js | 12 +- src/objects/onComplete.js | 3 +- src/objects/onStart.js | 3 +- src/objects/prepareProperty.js | 3 +- src/objects/prepareStart.js | 3 +- src/objects/supportedProperties.js | 4 +- src/objects/tweens.js | 3 +- src/objects/util.js | 3 +- src/process/getInlineStyle.js | 9 +- src/process/getInlineStyleLegacy.js | 11 +- src/process/getStartValues.js | 19 +- src/process/getStyleForProperty.js | 15 +- src/process/prepareObject.js | 15 +- src/process/process.js | 8 +- src/tween/tween.js | 99 +- src/tween/tweenBase.js | 81 +- src/tween/tweenCollection.js | 78 +- src/tween/tweenExtra.js | 36 +- src/util/degToRad.js | 11 +- src/util/fromJSON.js | 13 +- src/util/getPrefix.js | 18 +- src/util/hexToRGB.js | 18 +- src/util/now.js | 12 +- src/util/polyfill-legacy.js | 36 +- src/util/polyfill.js | 14 +- src/util/progressBar.js | 30 +- src/util/radToDeg.js | 11 +- src/util/rgbToHex.js | 16 +- src/util/selector.js | 10 +- src/util/supportLegacyTransform.js | 6 +- src/util/toJSON.js | 13 +- src/util/transformProperty.js | 6 +- src/util/trueColor.js | 20 +- src/util/trueDimension.js | 16 +- src/util/trueProperty.js | 21 +- src/util/version.js | 8 +- tsconfig.json | 21 +- types/animation/animation.d.ts | 4 - types/animation/animationBase.d.ts | 7 - types/animation/animationDevelopment.d.ts | 4 - types/components/backgroundPosition.d.ts | 23 - types/components/backgroundPositionBase.d.ts | 13 - types/components/borderRadius.d.ts | 29 - types/components/borderRadiusBase.d.ts | 14 - types/components/boxModel.d.ts | 22 - types/components/boxModelBase.d.ts | 16 - types/components/boxModelEssential.d.ts | 31 - types/components/clipProperty.d.ts | 23 - types/components/clipPropertyBase.d.ts | 13 - types/components/colorProperties.d.ts | 38 - types/components/colorPropertiesBase.d.ts | 16 - types/components/crossBrowserMove.d.ts | 36 - types/components/filterEffects.d.ts | 63 - types/components/filterEffectsBase.d.ts | 28 - types/components/htmlAttributes.d.ts | 38 - types/components/htmlAttributesBase.d.ts | 22 - types/components/opacityProperty.d.ts | 19 - types/components/opacityPropertyBase.d.ts | 13 - types/components/scrollProperty.d.ts | 38 - types/components/scrollPropertyBase.d.ts | 36 - types/components/shadowProperties.d.ts | 31 - types/components/shadowPropertiesBase.d.ts | 15 - types/components/svgCubicMorph.d.ts | 48 - types/components/svgCubicMorphBase.d.ts | 15 - types/components/svgDraw.d.ts | 39 - types/components/svgDrawBase.d.ts | 13 - types/components/svgMorph.d.ts | 64 - types/components/svgMorphBase.d.ts | 11 - types/components/svgTransform.d.ts | 45 - types/components/svgTransformBase.d.ts | 16 - types/components/textProperties.d.ts | 33 - types/components/textPropertiesBase.d.ts | 14 - types/components/textWrite.d.ts | 32 - types/components/textWriteBase.d.ts | 38 - types/components/transformFunctions.d.ts | 59 - types/components/transformFunctionsBase.d.ts | 25 - types/components/transformLegacy.d.ts | 60 - types/components/transformLegacyBase.d.ts | 29 - types/components/transformMatrix.d.ts | 46 - types/components/transformMatrixBase.d.ts | 24 - types/core/add.d.ts | 2 - types/core/getAll.d.ts | 2 - types/core/internals.d.ts | 15 - types/core/linkInterpolation.d.ts | 1 - types/core/queueStart.d.ts | 1 - types/core/remove.d.ts | 2 - types/core/removeAll.d.ts | 2 - types/core/render.d.ts | 15 - types/easing/easing-base.d.ts | 16 - types/easing/easing-bezier.d.ts | 29 - types/easing/easing.d.ts | 34 - types/index-base.d.ts | 27 - types/index-extra.d.ts | 41 - types/index-legacy.d.ts | 54 - types/index.d.ts | 194 +- types/interface/allFromTo.d.ts | 2 - types/interface/allTo.d.ts | 2 - types/interface/fromTo.d.ts | 1 - types/interface/to.d.ts | 1 - types/interpolation/arrays.d.ts | 1 - types/interpolation/colors.d.ts | 1 - types/interpolation/coords.d.ts | 1 - types/interpolation/numbers.d.ts | 1 - types/interpolation/perspective.d.ts | 1 - types/interpolation/rotate.d.ts | 1 - types/interpolation/rotate3d.d.ts | 1 - types/interpolation/scale.d.ts | 1 - types/interpolation/skew.d.ts | 1 - types/interpolation/skewX.d.ts | 1 - types/interpolation/skewY.d.ts | 1 - types/interpolation/translate.d.ts | 1 - types/interpolation/translate3d.d.ts | 1 - types/interpolation/units.d.ts | 1 - types/kute.d.ts | 3052 +++++++++++++++++ types/more/kute.ts | 127 + types/more/types.d.ts | 208 ++ types/objects/componentsBase.d.ts | 7 - types/objects/componentsDefault.d.ts | 19 - types/objects/componentsExtra.d.ts | 35 - types/objects/connect.d.ts | 2 - types/objects/crossCheck.d.ts | 2 - types/objects/defaultOptions.d.ts | 6 - types/objects/defaultValues.d.ts | 2 - types/objects/globalObject.d.ts | 2 - types/objects/interpolate.d.ts | 2 - types/objects/kute.d.ts | 2 - types/objects/linkProperty.d.ts | 2 - types/objects/objects.d.ts | 21 - types/objects/objectsBase.d.ts | 11 - types/objects/onComplete.d.ts | 2 - types/objects/onStart.d.ts | 2 - types/objects/prepareProperty.d.ts | 2 - types/objects/prepareStart.d.ts | 2 - types/objects/supportedProperties.d.ts | 2 - types/objects/tweens.d.ts | 2 - types/objects/util.d.ts | 2 - types/process/getInlineStyle.d.ts | 1 - types/process/getInlineStyleLegacy.d.ts | 1 - types/process/getStartValues.d.ts | 4 - types/process/getStyleForProperty.d.ts | 1 - types/process/prepareObject.d.ts | 1 - types/process/process.d.ts | 11 - types/src/animation/animation.d.ts | 4 - types/src/animation/animationBase.d.ts | 7 - types/src/animation/animationDevelopment.d.ts | 4 - types/src/components/backgroundPosition.d.ts | 23 - .../components/backgroundPositionBase.d.ts | 13 - types/src/components/borderRadius.d.ts | 29 - types/src/components/borderRadiusBase.d.ts | 14 - types/src/components/boxModel.d.ts | 22 - types/src/components/boxModelBase.d.ts | 16 - types/src/components/boxModelEssential.d.ts | 31 - types/src/components/clipProperty.d.ts | 23 - types/src/components/clipPropertyBase.d.ts | 13 - types/src/components/colorProperties.d.ts | 38 - types/src/components/colorPropertiesBase.d.ts | 16 - types/src/components/crossBrowserMove.d.ts | 36 - types/src/components/filterEffects.d.ts | 63 - types/src/components/filterEffectsBase.d.ts | 28 - types/src/components/htmlAttributes.d.ts | 38 - types/src/components/htmlAttributesBase.d.ts | 22 - types/src/components/opacityProperty.d.ts | 19 - types/src/components/opacityPropertyBase.d.ts | 13 - types/src/components/scrollProperty.d.ts | 38 - types/src/components/scrollPropertyBase.d.ts | 36 - types/src/components/shadowProperties.d.ts | 31 - .../src/components/shadowPropertiesBase.d.ts | 15 - types/src/components/svgCubicMorph.d.ts | 48 - types/src/components/svgCubicMorphBase.d.ts | 15 - types/src/components/svgDraw.d.ts | 39 - types/src/components/svgDrawBase.d.ts | 13 - types/src/components/svgMorph.d.ts | 64 - types/src/components/svgMorphBase.d.ts | 11 - types/src/components/svgTransform.d.ts | 45 - types/src/components/svgTransformBase.d.ts | 16 - types/src/components/textProperties.d.ts | 33 - types/src/components/textPropertiesBase.d.ts | 14 - types/src/components/textWrite.d.ts | 32 - types/src/components/textWriteBase.d.ts | 38 - types/src/components/transformFunctions.d.ts | 59 - .../components/transformFunctionsBase.d.ts | 25 - types/src/components/transformLegacy.d.ts | 60 - types/src/components/transformLegacyBase.d.ts | 29 - types/src/components/transformMatrix.d.ts | 46 - types/src/components/transformMatrixBase.d.ts | 24 - types/src/core/add.d.ts | 2 - types/src/core/getAll.d.ts | 2 - types/src/core/internals.d.ts | 15 - types/src/core/linkInterpolation.d.ts | 1 - types/src/core/queueStart.d.ts | 1 - types/src/core/remove.d.ts | 2 - types/src/core/removeAll.d.ts | 2 - types/src/core/render.d.ts | 15 - types/src/easing/easing-base.d.ts | 16 - types/src/easing/easing-bezier.d.ts | 29 - types/src/easing/easing.d.ts | 34 - types/src/index-base.d.ts | 27 - types/src/index-extra.d.ts | 41 - types/src/index-legacy.d.ts | 54 - types/src/index.d.ts | 39 - types/src/interface/allFromTo.d.ts | 2 - types/src/interface/allTo.d.ts | 2 - types/src/interface/fromTo.d.ts | 1 - types/src/interface/to.d.ts | 1 - types/src/interpolation/arrays.d.ts | 1 - types/src/interpolation/colors.d.ts | 1 - types/src/interpolation/coords.d.ts | 1 - types/src/interpolation/numbers.d.ts | 1 - types/src/interpolation/perspective.d.ts | 1 - types/src/interpolation/rotate.d.ts | 1 - types/src/interpolation/rotate3d.d.ts | 1 - types/src/interpolation/scale.d.ts | 1 - types/src/interpolation/skew.d.ts | 1 - types/src/interpolation/skewX.d.ts | 1 - types/src/interpolation/skewY.d.ts | 1 - types/src/interpolation/translate.d.ts | 1 - types/src/interpolation/translate3d.d.ts | 1 - types/src/interpolation/units.d.ts | 1 - types/src/objects/componentsBase.d.ts | 7 - types/src/objects/componentsDefault.d.ts | 19 - types/src/objects/componentsExtra.d.ts | 35 - types/src/objects/connect.d.ts | 2 - types/src/objects/crossCheck.d.ts | 2 - types/src/objects/defaultOptions.d.ts | 6 - types/src/objects/defaultValues.d.ts | 2 - types/src/objects/globalObject.d.ts | 2 - types/src/objects/interpolate.d.ts | 2 - types/src/objects/kute.d.ts | 2 - types/src/objects/linkProperty.d.ts | 2 - types/src/objects/objects.d.ts | 21 - types/src/objects/objectsBase.d.ts | 11 - types/src/objects/onComplete.d.ts | 2 - types/src/objects/onStart.d.ts | 2 - types/src/objects/prepareProperty.d.ts | 2 - types/src/objects/prepareStart.d.ts | 2 - types/src/objects/supportedProperties.d.ts | 2 - types/src/objects/tweens.d.ts | 2 - types/src/objects/util.d.ts | 2 - types/src/process/getInlineStyle.d.ts | 1 - types/src/process/getInlineStyleLegacy.d.ts | 1 - types/src/process/getStartValues.d.ts | 4 - types/src/process/getStyleForProperty.d.ts | 1 - types/src/process/prepareObject.d.ts | 1 - types/src/process/process.d.ts | 11 - types/src/tween/tween.d.ts | 15 - types/src/tween/tweenBase.d.ts | 20 - types/src/tween/tweenCollection.d.ts | 13 - types/src/tween/tweenExtra.d.ts | 5 - types/src/util/degToRad.d.ts | 1 - types/src/util/fromJSON.d.ts | 5 - types/src/util/getPrefix.d.ts | 1 - types/src/util/hexToRGB.d.ts | 6 - types/src/util/now.d.ts | 2 - types/src/util/polyfill-legacy.d.ts | 1 - types/src/util/polyfill.d.ts | 1 - types/src/util/progressBar.d.ts | 10 - types/src/util/radToDeg.d.ts | 2 - types/src/util/rgbToHex.d.ts | 2 - types/src/util/selector.d.ts | 1 - types/src/util/supportLegacyTransform.d.ts | 2 - types/src/util/toJSON.d.ts | 2 - types/src/util/transformProperty.d.ts | 2 - types/src/util/trueColor.d.ts | 11 - types/src/util/trueDimension.d.ts | 4 - types/src/util/trueProperty.d.ts | 1 - types/src/util/version.d.ts | 2 - types/tween/tween.d.ts | 15 - types/tween/tweenBase.d.ts | 20 - types/tween/tweenCollection.d.ts | 13 - types/tween/tweenExtra.d.ts | 5 - types/util/degToRad.d.ts | 1 - types/util/fromJSON.d.ts | 5 - types/util/getPrefix.d.ts | 1 - types/util/hexToRGB.d.ts | 6 - types/util/now.d.ts | 2 - types/util/polyfill-legacy.d.ts | 1 - types/util/polyfill.d.ts | 1 - types/util/progressBar.d.ts | 10 - types/util/radToDeg.d.ts | 2 - types/util/rgbToHex.d.ts | 2 - types/util/selector.d.ts | 1 - types/util/supportLegacyTransform.d.ts | 2 - types/util/toJSON.d.ts | 2 - types/util/transformProperty.d.ts | 2 - types/util/trueColor.d.ts | 11 - types/util/trueDimension.d.ts | 4 - types/util/trueProperty.d.ts | 1 - types/util/version.d.ts | 1 - 396 files changed, 11485 insertions(+), 7075 deletions(-) delete mode 100644 types/animation/animation.d.ts delete mode 100644 types/animation/animationBase.d.ts delete mode 100644 types/animation/animationDevelopment.d.ts delete mode 100644 types/components/backgroundPosition.d.ts delete mode 100644 types/components/backgroundPositionBase.d.ts delete mode 100644 types/components/borderRadius.d.ts delete mode 100644 types/components/borderRadiusBase.d.ts delete mode 100644 types/components/boxModel.d.ts delete mode 100644 types/components/boxModelBase.d.ts delete mode 100644 types/components/boxModelEssential.d.ts delete mode 100644 types/components/clipProperty.d.ts delete mode 100644 types/components/clipPropertyBase.d.ts delete mode 100644 types/components/colorProperties.d.ts delete mode 100644 types/components/colorPropertiesBase.d.ts delete mode 100644 types/components/crossBrowserMove.d.ts delete mode 100644 types/components/filterEffects.d.ts delete mode 100644 types/components/filterEffectsBase.d.ts delete mode 100644 types/components/htmlAttributes.d.ts delete mode 100644 types/components/htmlAttributesBase.d.ts delete mode 100644 types/components/opacityProperty.d.ts delete mode 100644 types/components/opacityPropertyBase.d.ts delete mode 100644 types/components/scrollProperty.d.ts delete mode 100644 types/components/scrollPropertyBase.d.ts delete mode 100644 types/components/shadowProperties.d.ts delete mode 100644 types/components/shadowPropertiesBase.d.ts delete mode 100644 types/components/svgCubicMorph.d.ts delete mode 100644 types/components/svgCubicMorphBase.d.ts delete mode 100644 types/components/svgDraw.d.ts delete mode 100644 types/components/svgDrawBase.d.ts delete mode 100644 types/components/svgMorph.d.ts delete mode 100644 types/components/svgMorphBase.d.ts delete mode 100644 types/components/svgTransform.d.ts delete mode 100644 types/components/svgTransformBase.d.ts delete mode 100644 types/components/textProperties.d.ts delete mode 100644 types/components/textPropertiesBase.d.ts delete mode 100644 types/components/textWrite.d.ts delete mode 100644 types/components/textWriteBase.d.ts delete mode 100644 types/components/transformFunctions.d.ts delete mode 100644 types/components/transformFunctionsBase.d.ts delete mode 100644 types/components/transformLegacy.d.ts delete mode 100644 types/components/transformLegacyBase.d.ts delete mode 100644 types/components/transformMatrix.d.ts delete mode 100644 types/components/transformMatrixBase.d.ts delete mode 100644 types/core/add.d.ts delete mode 100644 types/core/getAll.d.ts delete mode 100644 types/core/internals.d.ts delete mode 100644 types/core/linkInterpolation.d.ts delete mode 100644 types/core/queueStart.d.ts delete mode 100644 types/core/remove.d.ts delete mode 100644 types/core/removeAll.d.ts delete mode 100644 types/core/render.d.ts delete mode 100644 types/easing/easing-base.d.ts delete mode 100644 types/easing/easing-bezier.d.ts delete mode 100644 types/easing/easing.d.ts delete mode 100644 types/index-base.d.ts delete mode 100644 types/index-extra.d.ts delete mode 100644 types/index-legacy.d.ts delete mode 100644 types/interface/allFromTo.d.ts delete mode 100644 types/interface/allTo.d.ts delete mode 100644 types/interface/fromTo.d.ts delete mode 100644 types/interface/to.d.ts delete mode 100644 types/interpolation/arrays.d.ts delete mode 100644 types/interpolation/colors.d.ts delete mode 100644 types/interpolation/coords.d.ts delete mode 100644 types/interpolation/numbers.d.ts delete mode 100644 types/interpolation/perspective.d.ts delete mode 100644 types/interpolation/rotate.d.ts delete mode 100644 types/interpolation/rotate3d.d.ts delete mode 100644 types/interpolation/scale.d.ts delete mode 100644 types/interpolation/skew.d.ts delete mode 100644 types/interpolation/skewX.d.ts delete mode 100644 types/interpolation/skewY.d.ts delete mode 100644 types/interpolation/translate.d.ts delete mode 100644 types/interpolation/translate3d.d.ts delete mode 100644 types/interpolation/units.d.ts create mode 100644 types/kute.d.ts create mode 100644 types/more/kute.ts create mode 100644 types/more/types.d.ts delete mode 100644 types/objects/componentsBase.d.ts delete mode 100644 types/objects/componentsDefault.d.ts delete mode 100644 types/objects/componentsExtra.d.ts delete mode 100644 types/objects/connect.d.ts delete mode 100644 types/objects/crossCheck.d.ts delete mode 100644 types/objects/defaultOptions.d.ts delete mode 100644 types/objects/defaultValues.d.ts delete mode 100644 types/objects/globalObject.d.ts delete mode 100644 types/objects/interpolate.d.ts delete mode 100644 types/objects/kute.d.ts delete mode 100644 types/objects/linkProperty.d.ts delete mode 100644 types/objects/objects.d.ts delete mode 100644 types/objects/objectsBase.d.ts delete mode 100644 types/objects/onComplete.d.ts delete mode 100644 types/objects/onStart.d.ts delete mode 100644 types/objects/prepareProperty.d.ts delete mode 100644 types/objects/prepareStart.d.ts delete mode 100644 types/objects/supportedProperties.d.ts delete mode 100644 types/objects/tweens.d.ts delete mode 100644 types/objects/util.d.ts delete mode 100644 types/process/getInlineStyle.d.ts delete mode 100644 types/process/getInlineStyleLegacy.d.ts delete mode 100644 types/process/getStartValues.d.ts delete mode 100644 types/process/getStyleForProperty.d.ts delete mode 100644 types/process/prepareObject.d.ts delete mode 100644 types/process/process.d.ts delete mode 100644 types/src/animation/animation.d.ts delete mode 100644 types/src/animation/animationBase.d.ts delete mode 100644 types/src/animation/animationDevelopment.d.ts delete mode 100644 types/src/components/backgroundPosition.d.ts delete mode 100644 types/src/components/backgroundPositionBase.d.ts delete mode 100644 types/src/components/borderRadius.d.ts delete mode 100644 types/src/components/borderRadiusBase.d.ts delete mode 100644 types/src/components/boxModel.d.ts delete mode 100644 types/src/components/boxModelBase.d.ts delete mode 100644 types/src/components/boxModelEssential.d.ts delete mode 100644 types/src/components/clipProperty.d.ts delete mode 100644 types/src/components/clipPropertyBase.d.ts delete mode 100644 types/src/components/colorProperties.d.ts delete mode 100644 types/src/components/colorPropertiesBase.d.ts delete mode 100644 types/src/components/crossBrowserMove.d.ts delete mode 100644 types/src/components/filterEffects.d.ts delete mode 100644 types/src/components/filterEffectsBase.d.ts delete mode 100644 types/src/components/htmlAttributes.d.ts delete mode 100644 types/src/components/htmlAttributesBase.d.ts delete mode 100644 types/src/components/opacityProperty.d.ts delete mode 100644 types/src/components/opacityPropertyBase.d.ts delete mode 100644 types/src/components/scrollProperty.d.ts delete mode 100644 types/src/components/scrollPropertyBase.d.ts delete mode 100644 types/src/components/shadowProperties.d.ts delete mode 100644 types/src/components/shadowPropertiesBase.d.ts delete mode 100644 types/src/components/svgCubicMorph.d.ts delete mode 100644 types/src/components/svgCubicMorphBase.d.ts delete mode 100644 types/src/components/svgDraw.d.ts delete mode 100644 types/src/components/svgDrawBase.d.ts delete mode 100644 types/src/components/svgMorph.d.ts delete mode 100644 types/src/components/svgMorphBase.d.ts delete mode 100644 types/src/components/svgTransform.d.ts delete mode 100644 types/src/components/svgTransformBase.d.ts delete mode 100644 types/src/components/textProperties.d.ts delete mode 100644 types/src/components/textPropertiesBase.d.ts delete mode 100644 types/src/components/textWrite.d.ts delete mode 100644 types/src/components/textWriteBase.d.ts delete mode 100644 types/src/components/transformFunctions.d.ts delete mode 100644 types/src/components/transformFunctionsBase.d.ts delete mode 100644 types/src/components/transformLegacy.d.ts delete mode 100644 types/src/components/transformLegacyBase.d.ts delete mode 100644 types/src/components/transformMatrix.d.ts delete mode 100644 types/src/components/transformMatrixBase.d.ts delete mode 100644 types/src/core/add.d.ts delete mode 100644 types/src/core/getAll.d.ts delete mode 100644 types/src/core/internals.d.ts delete mode 100644 types/src/core/linkInterpolation.d.ts delete mode 100644 types/src/core/queueStart.d.ts delete mode 100644 types/src/core/remove.d.ts delete mode 100644 types/src/core/removeAll.d.ts delete mode 100644 types/src/core/render.d.ts delete mode 100644 types/src/easing/easing-base.d.ts delete mode 100644 types/src/easing/easing-bezier.d.ts delete mode 100644 types/src/easing/easing.d.ts delete mode 100644 types/src/index-base.d.ts delete mode 100644 types/src/index-extra.d.ts delete mode 100644 types/src/index-legacy.d.ts delete mode 100644 types/src/index.d.ts delete mode 100644 types/src/interface/allFromTo.d.ts delete mode 100644 types/src/interface/allTo.d.ts delete mode 100644 types/src/interface/fromTo.d.ts delete mode 100644 types/src/interface/to.d.ts delete mode 100644 types/src/interpolation/arrays.d.ts delete mode 100644 types/src/interpolation/colors.d.ts delete mode 100644 types/src/interpolation/coords.d.ts delete mode 100644 types/src/interpolation/numbers.d.ts delete mode 100644 types/src/interpolation/perspective.d.ts delete mode 100644 types/src/interpolation/rotate.d.ts delete mode 100644 types/src/interpolation/rotate3d.d.ts delete mode 100644 types/src/interpolation/scale.d.ts delete mode 100644 types/src/interpolation/skew.d.ts delete mode 100644 types/src/interpolation/skewX.d.ts delete mode 100644 types/src/interpolation/skewY.d.ts delete mode 100644 types/src/interpolation/translate.d.ts delete mode 100644 types/src/interpolation/translate3d.d.ts delete mode 100644 types/src/interpolation/units.d.ts delete mode 100644 types/src/objects/componentsBase.d.ts delete mode 100644 types/src/objects/componentsDefault.d.ts delete mode 100644 types/src/objects/componentsExtra.d.ts delete mode 100644 types/src/objects/connect.d.ts delete mode 100644 types/src/objects/crossCheck.d.ts delete mode 100644 types/src/objects/defaultOptions.d.ts delete mode 100644 types/src/objects/defaultValues.d.ts delete mode 100644 types/src/objects/globalObject.d.ts delete mode 100644 types/src/objects/interpolate.d.ts delete mode 100644 types/src/objects/kute.d.ts delete mode 100644 types/src/objects/linkProperty.d.ts delete mode 100644 types/src/objects/objects.d.ts delete mode 100644 types/src/objects/objectsBase.d.ts delete mode 100644 types/src/objects/onComplete.d.ts delete mode 100644 types/src/objects/onStart.d.ts delete mode 100644 types/src/objects/prepareProperty.d.ts delete mode 100644 types/src/objects/prepareStart.d.ts delete mode 100644 types/src/objects/supportedProperties.d.ts delete mode 100644 types/src/objects/tweens.d.ts delete mode 100644 types/src/objects/util.d.ts delete mode 100644 types/src/process/getInlineStyle.d.ts delete mode 100644 types/src/process/getInlineStyleLegacy.d.ts delete mode 100644 types/src/process/getStartValues.d.ts delete mode 100644 types/src/process/getStyleForProperty.d.ts delete mode 100644 types/src/process/prepareObject.d.ts delete mode 100644 types/src/process/process.d.ts delete mode 100644 types/src/tween/tween.d.ts delete mode 100644 types/src/tween/tweenBase.d.ts delete mode 100644 types/src/tween/tweenCollection.d.ts delete mode 100644 types/src/tween/tweenExtra.d.ts delete mode 100644 types/src/util/degToRad.d.ts delete mode 100644 types/src/util/fromJSON.d.ts delete mode 100644 types/src/util/getPrefix.d.ts delete mode 100644 types/src/util/hexToRGB.d.ts delete mode 100644 types/src/util/now.d.ts delete mode 100644 types/src/util/polyfill-legacy.d.ts delete mode 100644 types/src/util/polyfill.d.ts delete mode 100644 types/src/util/progressBar.d.ts delete mode 100644 types/src/util/radToDeg.d.ts delete mode 100644 types/src/util/rgbToHex.d.ts delete mode 100644 types/src/util/selector.d.ts delete mode 100644 types/src/util/supportLegacyTransform.d.ts delete mode 100644 types/src/util/toJSON.d.ts delete mode 100644 types/src/util/transformProperty.d.ts delete mode 100644 types/src/util/trueColor.d.ts delete mode 100644 types/src/util/trueDimension.d.ts delete mode 100644 types/src/util/trueProperty.d.ts delete mode 100644 types/src/util/version.d.ts delete mode 100644 types/tween/tween.d.ts delete mode 100644 types/tween/tweenBase.d.ts delete mode 100644 types/tween/tweenCollection.d.ts delete mode 100644 types/tween/tweenExtra.d.ts delete mode 100644 types/util/degToRad.d.ts delete mode 100644 types/util/fromJSON.d.ts delete mode 100644 types/util/getPrefix.d.ts delete mode 100644 types/util/hexToRGB.d.ts delete mode 100644 types/util/now.d.ts delete mode 100644 types/util/polyfill-legacy.d.ts delete mode 100644 types/util/polyfill.d.ts delete mode 100644 types/util/progressBar.d.ts delete mode 100644 types/util/radToDeg.d.ts delete mode 100644 types/util/rgbToHex.d.ts delete mode 100644 types/util/selector.d.ts delete mode 100644 types/util/supportLegacyTransform.d.ts delete mode 100644 types/util/toJSON.d.ts delete mode 100644 types/util/transformProperty.d.ts delete mode 100644 types/util/trueColor.d.ts delete mode 100644 types/util/trueDimension.d.ts delete mode 100644 types/util/trueProperty.d.ts delete mode 100644 types/util/version.d.ts diff --git a/.eslintrc b/.eslintrc index 092689a..31039dd 100644 --- a/.eslintrc +++ b/.eslintrc @@ -23,18 +23,19 @@ // Disable no-restricted-globals for global objects "no-restricted-globals": 0, // Disable no-params-reassign for properties - "no-param-reassign": ["error", { "props": false }], + // "no-param-reassign": ["error", { "props": false }], // Allow strict mode (we are not dealing with modules) - "strict": [0], - // Disable bitwise - "no-bitwise": 0, - // Allow use of "private methods" - "no-underscore-dangle": 0, + // "strict": [0], + // Allow use of "private methods" - impossible to satisfy + "no-underscore-dangle": 0 // Disable alert rule till we have a CE in place - "no-alert": 0, + // "no-alert": 0 // Allow extensions on imports - "import/extensions": 0, + // "import/extensions": 0, // Allow exporting mutable 'let' binding - "import/no-mutable-exports": 0 + // "import/no-mutable-exports": 0, + // Allow no named as default / member + // "import/no-named-as-default": 0, + // "import/no-named-as-default-member": 0 } } diff --git a/.gitignore b/.gitignore index 1681d2b..b6d5063 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ +experiments/ .npmignore package-lock.json \ No newline at end of file diff --git a/.npmignore b/.npmignore index 7eef8b8..de05e63 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,5 @@ node_modules/ demo/ +experiments/ package-lock.json .gitignore \ No newline at end of file diff --git a/README.md b/README.md index 4fc1293..90c2187 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KUTE.js -A modern JavaScript animation engine built on ES6+ standards with most essential features for the web, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size. +A modern JavaScript animation engine built on ES6+ standards with strong TypeScript definitions and most essential features for the web with easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size. [![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/kute.js) [![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js) @@ -42,22 +42,10 @@ All above mentioned components have a BASE version which doesn't include value p For a complete developer guide, usage and stuff like npm, visit [the wiki](https://github.com/thednp/kute.js/wiki). -# ESLint -If you include KUTE.js in your project, we recommend using the following ESLint rule: - -```js -rules: { - // Disable bitwise for isArcCommand & isPathCommand from SVGPathCommander - // as well as the KUTE.js interpolation functions - "no-bitwise": 0, -} -``` -Some **SVGPathCommander** as well as **KUTE.js** interpolation functions make use of `|` (OR) and `>>` operators for fastest number operations. - - # Browser Support KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider polyfills. + # Special Thanks * [Mike Bostock](https://bost.ocks.org/mike/) for his awesome [D3.js](https://github.com/d3/d3), one of the sources for our reworked [SVGMorph](http://thednp.github.io/kute.js/svgMorph.html) component. * [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the SVGMorph component. @@ -65,8 +53,10 @@ KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy b * [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for our SVGCubicMorph component. * [@dalisoft](https://github.com/dalisoft) contributed a great deal to the performance and functionality of previous versions of KUTE.js. + # Contributions * [Contributors & Collaborators](https://github.com/thednp/kute.js/graphs/contributors) + # License [MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE) diff --git a/demo/assets/js/perf-matrix.js b/demo/assets/js/perf-matrix.js index db0d576..b4fcbb5 100644 --- a/demo/assets/js/perf-matrix.js +++ b/demo/assets/js/perf-matrix.js @@ -78,18 +78,18 @@ function complete(){ container.style.display = 'none'; } -var engine = document.getElementById('kute'), - fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 }, - fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }}, - toCSS = { rotate3d: [ 360,0,0 ], perspective:600 }, - toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }}, - ops = { duration: 2000, repeat: 5 } +var engine = document.getElementById('kute'), + fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 }, + fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }}, + toCSS = { rotate3d: [ 360,0,0 ], perspective:600 }, + toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }}, + ops = { duration: 2000, repeat: 5 } // since our engines don't do sync, we make it our own here -if (engine.src.indexOf('kute.min.js')>-1) { +if (!engine.src.includes('extra')) { [].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromCSS,toCSS,ops) ) }) } -if (engine.src.indexOf('kute-extra.min.js')>-1) { +if (engine.src.includes('extra')) { [].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromMX,toMX,ops) ) }) } @@ -98,15 +98,13 @@ function startTest(){ infoContainer.style.display = 'none'; container.style.display = 'block' - !tws[0].playing && startKUTE(); + tws.length && !tws[0].playing && startKUTE(); } function startKUTE() { var now = window.performance.now(), count = tws.length; - for (var t=0; t t.start(now)); } // the start button handle diff --git a/demo/assets/js/svgCubicMorph.js b/demo/assets/js/svgCubicMorph.js index bbc9c05..2cf674e 100644 --- a/demo/assets/js/svgCubicMorph.js +++ b/demo/assets/js/svgCubicMorph.js @@ -5,28 +5,22 @@ var morphOps = { // basic morph var morphTween = KUTE.to('#rectangle', { path: '#star' }, morphOps); -var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, morphOps); var morphTween2 = KUTE.to('#rectangle2', { path: '#star2' }, morphOps); var morphBtn = document.getElementById('morphBtn'); morphBtn.addEventListener('click', function(){ !morphTween.playing && morphTween.start(); - !morphTween1.playing && morphTween1.start(); !morphTween2.playing && morphTween2.start(); }, false); // line to circle var lineMorph = KUTE.to('#line' ,{path:'#circle' }, morphOps); var lineMorph1 = KUTE.to('#line1',{path:'#circle1'}, morphOps); -var lineMorph2 = KUTE.to('#line2',{path:'#circle2'}, morphOps); -var lineMorph3 = KUTE.to('#line3',{path:'#circle3'}, morphOps); -var morphBtnClosed = document.getElementById('morphBtnClosed') +var morphBtnClosed = document.getElementById('morphBtnClosed') morphBtnClosed.addEventListener('click', function(){ !lineMorph.playing && lineMorph.start(); !lineMorph1.playing && lineMorph1.start(); - !lineMorph2.playing && lineMorph2.start(); - !lineMorph3.playing && lineMorph3.start(); }, false); var morphOps1 = { @@ -63,19 +57,14 @@ var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, morphOps1); var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, morphOps1); -var compliMorph11 = KUTE.fromTo('#rectangle-container1', {path: '#rectangle-container1', attr:{ fill: "#9C27B0"} }, { path: '#circle-container1', attr:{ fill: "#FF5722"} }, morphOps1); -var compliMorph21 = KUTE.fromTo('#symbol-left1', {path: '#symbol-left1'}, { path: '#eye-left1' }, morphOps1); -var compliMorph31 = KUTE.fromTo('#symbol-left-clone1', {path: '#symbol-left-clone1'}, { path: '#mouth1' }, morphOps1); -var compliMorph41 = KUTE.fromTo('#symbol-right1', {path: '#symbol-right1'}, { path: '#eye-right1' }, morphOps1); - var compliMorph12 = KUTE.fromTo('#rectangle-container2', {path: '#rectangle-container2', attr:{ fill: "#e91b1f"} }, { path: '#circle-container2', attr:{ fill: "#FF5722"} }, morphOps1); var compliMorph22 = KUTE.fromTo('#symbol-left2', {path: '#symbol-left2'}, { path: '#eye-left2' }, morphOps1); var compliMorph32 = KUTE.fromTo('#sample-shape2', {path: '#sample-shape2'}, { path: '#mouth2' }, morphOps1); var compliMorph42 = KUTE.fromTo('#symbol-right2', {path: '#symbol-right2'}, { path: '#eye-right2' }, morphOps1); compliMorphBtn.addEventListener('click', function(){ - !compliMorph1.playing && compliMorph1.start() && compliMorph11.start() && compliMorph12.start(); - !compliMorph2.playing && compliMorph2.start() && compliMorph21.start() && compliMorph22.start(); - !compliMorph3.playing && compliMorph3.start() && compliMorph31.start() && compliMorph32.start(); - !compliMorph4.playing && compliMorph4.start() && compliMorph41.start() && compliMorph42.start(); + !compliMorph1.playing && compliMorph1.start() && compliMorph12.start(); + !compliMorph2.playing && compliMorph2.start() && compliMorph22.start(); + !compliMorph3.playing && compliMorph3.start() && compliMorph32.start(); + !compliMorph4.playing && compliMorph4.start() && compliMorph42.start(); }, false); \ No newline at end of file diff --git a/demo/performance-matrix.html b/demo/performance-matrix.html index 59271ce..5448109 100644 --- a/demo/performance-matrix.html +++ b/demo/performance-matrix.html @@ -203,7 +203,9 @@ + + diff --git a/demo/src/kute-base.js b/demo/src/kute-base.js index b1fa02d..37f98e8 100644 --- a/demo/src/kute-base.js +++ b/demo/src/kute-base.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Base v2.1.3 (http://thednp.github.io/kute.js) +* KUTE.js Base v2.2.0alpha2 (http://thednp.github.io/kute.js) * Copyright 2015-2021 © thednp * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE) */ @@ -9,21 +9,24 @@ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KUTE = factory()); })(this, (function () { 'use strict'; - var KUTE = {}; + /** + * The KUTE.js Execution Context + */ + var KEC = {}; var Tweens = []; - var globalObject; + var gl0bal; - if (typeof global !== 'undefined') { globalObject = global; } - else if (typeof window !== 'undefined') { globalObject = window.self; } - else { globalObject = {}; } + if (typeof global !== 'undefined') { gl0bal = global; } + else if (typeof window !== 'undefined') { gl0bal = window.self; } + else { gl0bal = {}; } - var globalObject$1 = globalObject; + var globalObject = gl0bal; // KUTE.js INTERPOLATE FUNCTIONS // ============================= - var Interpolate = {}; + var interpolate = {}; // schedule property specific function on animation start // link property update function to KUTE.js execution context @@ -31,13 +34,13 @@ // Include a performance.now polyfill. // source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts - var now; + var performanceNow; // In node.js, use process.hrtime. // eslint-disable-next-line // @ts-ignore if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) { - now = function () { + performanceNow = function () { // eslint-disable-next-line // @ts-ignore var time = process.hrtime(); @@ -49,24 +52,27 @@ // In a browser, use self.performance.now if it is available. // This must be bound, because directly assigning this function // leads to an invocation exception in Chrome. - now = self.performance.now.bind(self.performance); + performanceNow = self.performance.now.bind(self.performance); } else if (typeof Date !== 'undefined' && Date.now) { // Use Date.now if it is available. - now = Date.now; + performanceNow = Date.now; } else { // Otherwise, use 'new Date().getTime()'. - now = function () { return new Date().getTime(); }; + performanceNow = function () { return new Date().getTime(); }; } - var now$1 = now; + var now = performanceNow; var Time = {}; - Time.now = now$1; - // const that = window.self || window || {}; - // Time.now = that.performance.now.bind(that.performance); + Time.now = now; + // eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy var Tick = 0; + /** + * + * @param {number | Date} time + */ var Ticker = function (time) { var i = 0; while (i < Tweens.length) { @@ -87,38 +93,43 @@ Tick = null; Object.keys(onStart).forEach(function (obj) { if (typeof (onStart[obj]) === 'function') { - if (KUTE[obj]) { delete KUTE[obj]; } + if (KEC[obj]) { delete KEC[obj]; } } else { Object.keys(onStart[obj]).forEach(function (prop) { - if (KUTE[prop]) { delete KUTE[prop]; } + if (KEC[prop]) { delete KEC[prop]; } }); } }); - Object.keys(Interpolate).forEach(function (i) { - if (KUTE[i]) { delete KUTE[i]; } + Object.keys(interpolate).forEach(function (i) { + if (KEC[i]) { delete KEC[i]; } }); } }, 64); } - // KUTE.js render update functions - // =============================== + // render update functions + // ======================= var Render = { Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time, }; Object.keys(Render).forEach(function (blob) { - if (!KUTE[blob]) { - KUTE[blob] = blob === 'Time' ? Time.now : Render[blob]; + if (!KEC[blob]) { + KEC[blob] = blob === 'Time' ? Time.now : Render[blob]; } }); - globalObject$1._KUTE = KUTE; + globalObject._KUTE = KEC; var defaultOptions = { duration: 700, delay: 0, easing: 'linear', + repeat: 0, + repeatDelay: 0, + yoyo: false, + resetStart: false, + offset: 0, }; // link properties to interpolate functions @@ -138,30 +149,46 @@ var Util = {}; var connect = {}; + /** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */ + connect.tween = null; + connect.processEasing = null; // Select Robert Penner's Easing Functions // updated for ESLint var Easing = { + /** @type {KUTE.easingFunction} */ linear: function (t) { return t; }, + /** @type {KUTE.easingFunction} */ easingQuadraticIn: function (t) { return t * t; }, + /** @type {KUTE.easingFunction} */ easingQuadraticOut: function (t) { return t * (2 - t); }, + /** @type {KUTE.easingFunction} */ easingQuadraticInOut: function (t) { return (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t); }, + /** @type {KUTE.easingFunction} */ easingCubicIn: function (t) { return t * t * t; }, + /** @type {KUTE.easingFunction} */ easingCubicOut: function (t0) { var t = t0 - 1; return t * t * t + 1; }, + /** @type {KUTE.easingFunction} */ easingCubicInOut: function (t) { return (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1); }, + /** @type {KUTE.easingFunction} */ easingCircularIn: function (t) { return -(Math.sqrt(1 - (t * t)) - 1); }, + /** @type {KUTE.easingFunction} */ easingCircularOut: function (t0) { var t = t0 - 1; return Math.sqrt(1 - t * t); }, + /** @type {KUTE.easingFunction} */ easingCircularInOut: function (t0) { var t = t0 * 2; if (t < 1) { return -0.5 * (Math.sqrt(1 - t * t) - 1); } t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1); }, + /** @type {KUTE.easingFunction} */ easingBackIn: function (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); }, + /** @type {KUTE.easingFunction} */ easingBackOut: function (t0) { var s = 1.70158; var t = t0 - 1; return t * t * ((s + 1) * t + s) + 1; }, + /** @type {KUTE.easingFunction} */ easingBackInOut: function (t0) { var s = 1.70158 * 1.525; var t = t0 * 2; @@ -170,6 +197,12 @@ }, }; + /** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor name + * @returns {KUTE.easingFunction} a valid easing function + */ function processEasing(fn) { if (typeof fn === 'function') { return fn; @@ -181,19 +214,42 @@ connect.processEasing = processEasing; - function add (tw) { return Tweens.push(tw); } + /** + * KUTE.add(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + var add = function (tw) { return Tweens.push(tw); }; - function remove (tw) { + /** + * KUTE.remove(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + var remove = function (tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); } - } + }; - function getAll () { return Tweens; } + /** + * KUTE.add(Tween) + * + * @return {KUTE.Tween[]} tw a new tween to add + */ + var getAll = function () { return Tweens; }; - function removeAll () { Tweens.length = 0; } + /** + * KUTE.removeAll() + */ + var removeAll = function () { Tweens.length = 0; }; + // all supported properties var supportedProperties = {}; + /** + * linkInterpolation + * @this {KUTE.Tween} + */ function linkInterpolation() { var this$1$1 = this; // DON'T change @@ -205,18 +261,18 @@ if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius && Object.keys(this$1$1.valuesEnd).some(function (i) { return (componentProps && componentProps.includes(i)) || (i === 'attr' && Object.keys(this$1$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); })); })) { - if (!KUTE[fnObj]) { KUTE[fnObj] = componentLink[fnObj]; } + if (!KEC[fnObj]) { KEC[fnObj] = componentLink[fnObj]; } } else { Object.keys(this$1$1.valuesEnd).forEach(function (prop) { var propObject = this$1$1.valuesEnd[prop]; if (propObject instanceof Object) { Object.keys(propObject).forEach(function (i) { if (typeof (componentLink[i]) === 'function') { // transformCSS3 - if (!KUTE[i]) { KUTE[i] = componentLink[i]; } + if (!KEC[i]) { KEC[i] = componentLink[i]; } } else { Object.keys(componentLink[fnObj]).forEach(function (j) { if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix - if (!KUTE[j]) { KUTE[j] = componentLink[i][j]; } + if (!KEC[j]) { KEC[j] = componentLink[i][j]; } } }); } @@ -228,7 +284,7 @@ }); } - var Internals = { + var internals = { add: add, remove: remove, getAll: getAll, @@ -237,7 +293,15 @@ linkInterpolation: linkInterpolation, }; - // a public selector utility + /** + * selector + * + * A selector utility for KUTE.js. + * + * @param {KUTE.selectorType} el target(s) or string selector + * @param {boolean | number} multi when true returns an array/collection of elements + * @returns {Element | Element[] | null} + */ function selector(el, multi) { try { var requestedElem; @@ -256,12 +320,17 @@ } } - // Animation class + /** + * Animation Base Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + * + * This class only registers the minimal amount of component information + * required to enable components animation, which means value processing + * as well as `to()` and `allTo()` methods are not supported. + */ var AnimationBase = function AnimationBase(Component) { - return this.setComponent(Component); - }; - - AnimationBase.prototype.setComponent = function setComponent (Component) { var ComponentName = Component.component; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty } var Functions = { onStart: onStart, onComplete: onComplete }; @@ -276,9 +345,10 @@ // set additional options if (Component.defaultOptions) { - Object.keys(Component.defaultOptions).forEach(function (op) { - defaultOptions[op] = Component.defaultOptions[op]; - }); + // Object.keys(Component.defaultOptions).forEach((op) => { + // defaultOptions[op] = Component.defaultOptions[op]; + // }); + Object.assign(defaultOptions, Component.defaultOptions); } // set functions @@ -310,12 +380,12 @@ if (Component.Interpolate) { Object.keys(Component.Interpolate).forEach(function (fni) { var compIntObj = Component.Interpolate[fni]; - if (typeof (compIntObj) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj; + if (typeof (compIntObj) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj; } else { Object.keys(compIntObj).forEach(function (sfn) { - if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj[sfn]; + if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj[sfn]; } }); } @@ -334,62 +404,132 @@ return { name: ComponentName }; }; + /** + * Perspective Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the perspective function in string format + */ function perspective(a, b, u, v) { + // eslint-disable-next-line no-bitwise return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")"); } + /** + * Translate 3D Interpolation Function. + * + * @param {number[]} a start [x,y,z] position + * @param {number[]} b end [x,y,z] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D translation string + */ function translate3d(a, b, u, v) { var translateArray = []; for (var ax = 0; ax < 3; ax += 1) { translateArray[ax] = (a[ax] || b[ax] + // eslint-disable-next-line no-bitwise ? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u; } return ("translate3d(" + (translateArray.join(',')) + ")"); } + /** + * 3D Rotation Interpolation Function. + * + * @param {number} a start [x,y,z] angles + * @param {number} b end [x,y,z] angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D rotation string + */ function rotate3d(a, b, u, v) { var rotateStr = ''; + // eslint-disable-next-line no-bitwise rotateStr += a[0] || b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u + ")") : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[1] || b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u + ")") : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[2] || b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000) + u + ")") : ''; return rotateStr; } + /** + * Translate 2D Interpolation Function. + * + * @param {number[]} a start [x,y] position + * @param {number[]} b end [x,y] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 2D translation string + */ function translate(a, b, u, v) { var translateArray = []; + // eslint-disable-next-line no-bitwise translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return ("translate(" + (translateArray.join(',')) + ")"); } + /** + * 2D Rotation Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated rotation + */ function rotate(a, b, u, v) { + // eslint-disable-next-line no-bitwise return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")"); } + /** + * Scale Interpolation Function. + * + * @param {number} a start scale + * @param {number} b end scale + * @param {number} v progress + * @returns {string} the interpolated scale + */ function scale(a, b, v) { + // eslint-disable-next-line no-bitwise return ("scale(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + ")"); } + /** + * Skew Interpolation Function. + * + * @param {number} a start {x,y} angles + * @param {number} b end {x,y} angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated string value of skew(s) + */ function skew(a, b, u, v) { var skewArray = []; + // eslint-disable-next-line no-bitwise skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return ("skew(" + (skewArray.join(',')) + ")"); } - /* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - - // same to svg transform, attr - // Component Functions + /** + * Sets the property update function. + * * same to svgTransform, htmlAttributes + * @param {string} tweenProp the property name + */ function onStartTransform(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0 + (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z] + (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z] @@ -400,7 +540,7 @@ } // Base Component - var BaseTransform = { + var TransformFunctionsBase = { component: 'baseTransform', property: 'transform', functions: { onStart: onStartTransform }, @@ -415,7 +555,15 @@ }, }; - function numbers(a, b, v) { // number1, number2, progress + /** + * Numbers Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {number} v progress + * @returns {number} the interpolated number + */ + function numbers(a, b, v) { var A = +a; var B = b - a; // a = +a; b -= a; @@ -423,12 +571,20 @@ } // Component Functions + /** + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ function boxModelOnStart(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ + /* eslint-disable no-bitwise -- impossible to satisfy */ elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a, b, v) * 10) >> 0) / 10 : (numbers(a, b, v)) >> 0) + "px"; + /* eslint-enable no-bitwise */ + /* eslint-enable no-param-reassign */ }; } } @@ -439,7 +595,7 @@ baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; }); // Component Base - var baseBoxModel = { + var BoxModelBase = { component: 'baseBoxModel', category: 'boxModel', properties: baseBoxProps, @@ -455,17 +611,23 @@ } */ // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartOpacity(tweenProp/* , value */) { // opacity could be 0 sometimes, we need to check regardless - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable */ elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000; + /* eslint-enable */ }; } } // Base Component - var baseOpacity = { + var OpacityPropertyBase = { component: 'baseOpacity', property: 'opacity', // defaultValue: 1, @@ -473,13 +635,13 @@ functions: { onStart: onStartOpacity }, }; - // import {baseCrossBrowserMove} from '../components/crossBrowserMove.js' - // support for kute-base.js ends here + // import {baseCrossBrowserMove} from '../components/crossBrowserMove' + // support for kute-base ends here var Components = { - Transform: new AnimationBase(BaseTransform), - BoxModel: new AnimationBase(baseBoxModel), - Opacity: new AnimationBase(baseOpacity), + Transform: new AnimationBase(TransformFunctionsBase), + BoxModel: new AnimationBase(BoxModelBase), + Opacity: new AnimationBase(OpacityPropertyBase), }; function queueStart() { @@ -500,21 +662,28 @@ linkInterpolation.call(this); } - // single Tween object construct - // TweenBase is meant to be use for pre-processed values + /** + * The `TweenBase` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * `TweenBase` is meant to be used with pre-processed values. + */ var TweenBase = function TweenBase(targetElement, startObject, endObject, opsObject) { var this$1$1 = this; // element animation is applied to this.element = targetElement; + /** @type {boolean} */ this.playing = false; - + /** @type {number?} */ this._startTime = null; + /** @type {boolean} */ this._startFired = false; - this.valuesEnd = endObject; // valuesEnd - this.valuesStart = startObject; // valuesStart + // type is set via KUTE.tweenProps + this.valuesEnd = endObject; + this.valuesStart = startObject; // OPTIONS var options = opsObject || {}; @@ -522,8 +691,11 @@ // used by to() method and expects object : {} / false this._resetStart = options.resetStart || 0; // you can only set a core easing function as default + /** @type {KUTE.easingOption} */ this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing); + /** @type {number} */ this._duration = options.duration || defaultOptions.duration; // duration option | default + /** @type {number} */ this._delay = options.delay || defaultOptions.delay; // delay option | default // set other options @@ -542,22 +714,24 @@ var easingFnName = this._easing.name; if (!onStart[easingFnName]) { onStart[easingFnName] = function easingFn(prop) { - if (!KUTE[prop] && prop === this._easing.name) { KUTE[prop] = this._easing; } + if (!KEC[prop] && prop === this._easing.name) { KEC[prop] = this._easing; } }; } return this; }; - // tween prototype - // queue tween object to main frame update - // move functions that use the ticker outside the prototype to be in the same scope with it + /** + * Starts tweening + * @param {number?} time the tween start time + * @returns {TweenBase} this instance + */ TweenBase.prototype.start = function start (time) { // now it's a good time to start add(this); this.playing = true; - this._startTime = typeof time !== 'undefined' ? time : KUTE.Time(); + this._startTime = typeof time !== 'undefined' ? time : KEC.Time(); this._startTime += this._delay; if (!this._startFired) { @@ -574,6 +748,10 @@ return this; }; + /** + * Stops tweening + * @returns {TweenBase} this instance + */ TweenBase.prototype.stop = function stop () { if (this.playing) { remove(this); @@ -587,6 +765,9 @@ return this; }; + /** + * Trigger internal completion callbacks. + */ TweenBase.prototype.close = function close () { var this$1$1 = this; @@ -601,20 +782,33 @@ stop.call(this); }; + /** + * Schedule another tween instance to start once this one completes. + * @param {KUTE.chainOption} args the tween animation start time + * @returns {TweenBase} this instance + */ TweenBase.prototype.chain = function chain (args) { this._chain = []; this._chain = args.length ? args : this._chain.concat(args); return this; }; + /** + * Stop tweening the chained tween instances. + */ TweenBase.prototype.stopChainedTweens = function stopChainedTweens () { if (this._chain && this._chain.length) { this._chain.forEach(function (tw) { return tw.stop(); }); } }; + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ TweenBase.prototype.update = function update (time) { var this$1$1 = this; - var T = time !== undefined ? time : KUTE.Time(); + var T = time !== undefined ? time : KEC.Time(); var elapsed; @@ -628,7 +822,7 @@ // render the update Object.keys(this.valuesEnd).forEach(function (tweenProp) { - KUTE[tweenProp](this$1$1.element, + KEC[tweenProp](this$1$1.element, this$1$1.valuesStart[tweenProp], this$1$1.valuesEnd[tweenProp], progress); @@ -665,13 +859,32 @@ // Update Tween Interface connect.tween = TweenBase; + var TweenConstructor = connect.tween; + + /** + * The `KUTE.fromTo()` static method returns a new Tween object + * for a single `HTMLElement` at a given state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function fromTo(element, startObject, endObject, optionsObj) { var options = optionsObj || {}; - var TweenConstructor = connect.tween; return new TweenConstructor(selector(element), startObject, endObject, options); } - var version = "2.1.3"; + var version = "2.2.0alpha2"; + + // @ts-ignore + + /** + * A global namespace for library version. + * @type {string} + */ + var Version = version; var indexBase = { Animation: AnimationBase, @@ -684,10 +897,10 @@ Easing: Easing, Util: Util, Render: Render, - Interpolate: Interpolate, - Internals: Internals, + Interpolate: interpolate, + Internals: internals, Selector: selector, - Version: version, + Version: Version, }; return indexBase; diff --git a/demo/src/kute-base.min.js b/demo/src/kute-base.min.js index c79dff0..72ad901 100644 --- a/demo/src/kute-base.min.js +++ b/demo/src/kute-base.min.js @@ -1,2 +1,2 @@ -// KUTE.js Base v2.1.3 | thednp © 2021 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},i={},o={},r="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},a={};a.now=r;var s=0,c=function(t){for(var n=0;n>0)/1e3+n+")"}function T(t,e,n,i){for(var o=[],r=0;r<3;r+=1)o[r]=(t[r]||e[r]?(1e3*(t[r]+(e[r]-t[r])*i)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function I(t,e,n,i){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*i)>>0)/1e3+n+")":""}function S(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function C(t,e,n,i){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}j.prototype.setComponent=function(t){var e=t.component,n={onStart:o,onComplete:p},r=t.category,a=t.property;return this._=0,b[e]=t.properties||t.subProperties||t.property,t.defaultOptions&&Object.keys(t.defaultOptions).forEach((function(e){l[e]=t.defaultOptions[e]})),t.functions&&Object.keys(n).forEach((function(i){i in t.functions&&("function"==typeof t.functions[i]?(n[i][e]||(n[i][e]={}),n[i][e][r||a]||(n[i][e][r||a]=t.functions[i])):Object.keys(t.functions[i]).forEach((function(o){n[i][e]||(n[i][e]={}),n[i][e][o]||(n[i][e][o]=t.functions[i][o])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||i[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||i[e]||(i[e]=n[t])})):i[e]=n})),h[e]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){y[e]||(y[e]=t.Util[e])})),{name:e}};var x={component:"baseTransform",property:"transform",functions:{onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,i,o){t.style[e]=(n.perspective||i.perspective?w(n.perspective,i.perspective,"px",o):"")+(n.translate3d?T(n.translate3d,i.translate3d,"px",o):"")+(n.rotate3d?I(n.rotate3d,i.rotate3d,"deg",o):"")+(n.skew?C(n.skew,i.skew,"deg",o):"")+(n.scale||i.scale?S(n.scale,i.scale,o):"")})}},Interpolate:{perspective:w,translate3d:T,rotate3d:I,translate:function(t,e,n,i){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3)+n:"0","translate("+o.join(",")+")"},rotate:function(t,e,n,i){return"rotate("+(1e3*(t+(e-t)*i)>>0)/1e3+n+")"},scale:S,skew:C}};function U(t,e,n){return+t+(e-t)*n}function M(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(o>.99||o<.01?(10*U(n,i,o)>>0)/10:U(n,i,o)>>0)+"px"})}var q=["top","left","width","height"],A={};q.forEach((function(t){A[t]=M}));var F={component:"baseBoxModel",category:"boxModel",properties:q,Interpolate:{numbers:U},functions:{onStart:A}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:U},functions:{onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(1e3*U(n,i,o)>>0)/1e3})}}},D={Transform:new j(x),BoxModel:new j(F),Opacity:new j(B)};function K(){var t=this;Object.keys(o).forEach((function(e){"function"==typeof o[e]?o[e].call(t,e):Object.keys(o[e]).forEach((function(n){o[e][n].call(t,n)}))})),O.call(this)}var Q=function(e,n,i,r){var a=this;this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=i,this.valuesStart=n;var s=r||{};this._resetStart=s.resetStart||0,this._easing="function"==typeof s.easing?s.easing:v.processEasing(s.easing),this._duration=s.duration||l.duration,this._delay=s.delay||l.delay,Object.keys(s).forEach((function(t){var e="_"+t;e in a||(a[e]=s[t])}));var c=this._easing.name;return o[c]||(o[c]=function(e){t[e]||e!==this._easing.name||(t[e]=this._easing)}),this};Q.prototype.start=function(e){return g(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),K.call(this),this._startFired=!0),s||c(),this},Q.prototype.stop=function(){return this.playing&&(E(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},Q.prototype.close=function(){var t=this;Object.keys(p).forEach((function(e){Object.keys(p[e]).forEach((function(n){p[e][n].call(t,n)}))})),this._startFired=!1,u.call(this)},Q.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},Q.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.stop()}))},Q.prototype.update=function(e){var n,i=this,o=void 0!==e?e:t.Time();if(o1?1:n;var r=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(e){t[e](i.element,i.valuesStart[e],i.valuesEnd[e],r)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},v.tween=Q;return{Animation:j,Components:D,Tween:Q,fromTo:function(t,e,n,i){var o=i||{};return new(0,v.tween)(k(t),e,n,o)},Objects:d,Easing:m,Util:y,Render:f,Interpolate:i,Internals:_,Selector:k,Version:"2.1.3"}})); +// KUTE.js Base v2.2.0alpha2 | thednp © 2021 | MIT-License +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t={},e=[],n="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},i={},o={},r="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},a={};a.now=r;var s=0,c=function(t){for(var n=0;n>0)/1e3+n+")"}function T(t,e,n,i){for(var o=[],r=0;r<3;r+=1)o[r]=(t[r]||e[r]?(1e3*(t[r]+(e[r]-t[r])*i)>>0)/1e3:0)+n;return"translate3d("+o.join(",")+")"}function I(t,e,n,i){var o="";return o+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3+n+")":"",o+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3+n+")":"",o+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*i)>>0)/1e3+n+")":""}function S(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function C(t,e,n,i){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3)+n:"0","skew("+o.join(",")+")"}var x={component:"baseTransform",property:"transform",functions:{onStart:function(e){!t[e]&&this.valuesEnd[e]&&(t[e]=function(t,n,i,o){t.style[e]=(n.perspective||i.perspective?w(n.perspective,i.perspective,"px",o):"")+(n.translate3d?T(n.translate3d,i.translate3d,"px",o):"")+(n.rotate3d?I(n.rotate3d,i.rotate3d,"deg",o):"")+(n.skew?C(n.skew,i.skew,"deg",o):"")+(n.scale||i.scale?S(n.scale,i.scale,o):"")})}},Interpolate:{perspective:w,translate3d:T,rotate3d:I,translate:function(t,e,n,i){var o=[];return o[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*i)>>0)/1e3)+n,o[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*i)>>0)/1e3)+n:"0","translate("+o.join(",")+")"},rotate:function(t,e,n,i){return"rotate("+(1e3*(t+(e-t)*i)>>0)/1e3+n+")"},scale:S,skew:C}};function U(t,e,n){return+t+(e-t)*n}function M(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(o>.99||o<.01?(10*U(n,i,o)>>0)/10:U(n,i,o)>>0)+"px"})}var q=["top","left","width","height"],A={};q.forEach((function(t){A[t]=M}));var F={component:"baseBoxModel",category:"boxModel",properties:q,Interpolate:{numbers:U},functions:{onStart:A}};var B={component:"baseOpacity",property:"opacity",Interpolate:{numbers:U},functions:{onStart:function(e){e in this.valuesEnd&&!t[e]&&(t[e]=function(t,n,i,o){t.style[e]=(1e3*U(n,i,o)>>0)/1e3})}}},D={Transform:new j(x),BoxModel:new j(F),Opacity:new j(B)};function K(){var t=this;Object.keys(o).forEach((function(e){"function"==typeof o[e]?o[e].call(t,e):Object.keys(o[e]).forEach((function(n){o[e][n].call(t,n)}))})),_.call(this)}var Q=function(e,n,i,r){var a=this;this.element=e,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=i,this.valuesStart=n;var s=r||{};this._resetStart=s.resetStart||0,this._easing="function"==typeof s.easing?s.easing:v.processEasing(s.easing),this._duration=s.duration||l.duration,this._delay=s.delay||l.delay,Object.keys(s).forEach((function(t){var e="_"+t;e in a||(a[e]=s[t])}));var c=this._easing.name;return o[c]||(o[c]=function(e){t[e]||e!==this._easing.name||(t[e]=this._easing)}),this};Q.prototype.start=function(e){return g(this),this.playing=!0,this._startTime=void 0!==e?e:t.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),K.call(this),this._startFired=!0),s||c(),this},Q.prototype.stop=function(){return this.playing&&(E(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this},Q.prototype.close=function(){var t=this;Object.keys(p).forEach((function(e){Object.keys(p[e]).forEach((function(n){p[e][n].call(t,n)}))})),this._startFired=!1,u.call(this)},Q.prototype.chain=function(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this},Q.prototype.stopChainedTweens=function(){this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.stop()}))},Q.prototype.update=function(e){var n,i=this,o=void 0!==e?e:t.Time();if(o1?1:n;var r=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(e){t[e](i.element,i.valuesStart[e],i.valuesEnd[e],r)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},v.tween=Q;var L=v.tween;return{Animation:j,Components:D,Tween:Q,fromTo:function(t,e,n,i){var o=i||{};return new L(k(t),e,n,o)},Objects:d,Easing:m,Util:y,Render:f,Interpolate:i,Internals:O,Selector:k,Version:"2.2.0alpha2"}})); diff --git a/demo/src/kute-extra.js b/demo/src/kute-extra.js index aaa92a5..9e378a1 100644 --- a/demo/src/kute-extra.js +++ b/demo/src/kute-extra.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Extra v2.1.3 (http://thednp.github.io/kute.js) +* KUTE.js Extra v2.2.0alpha2 (http://thednp.github.io/kute.js) * Copyright 2015-2021 © thednp * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE) */ @@ -9,19 +9,36 @@ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KUTE = factory()); })(this, (function () { 'use strict'; + /** + * Creates cubic-bezier easing functions. + * + * @class + */ var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) { var this$1$1 = this; // pre-calculate the polynomial coefficients // First and last control points are implied to be (0,0) and (1.0, 1.0) + + /** @type {number} */ this.cx = 3.0 * p1x; + + /** @type {number} */ this.bx = 3.0 * (p2x - p1x) - this.cx; + + /** @type {number} */ this.ax = 1.0 - this.cx - this.bx; - + + /** @type {number} */ this.cy = 3.0 * p1y; + + /** @type {number} */ this.by = 3.0 * (p2y - p1y) - this.cy; + + /** @type {number} */ this.ay = 1.0 - this.cy - this.by; - + + /** @type {(t: number) => number} */ var BezierEasing = function (t) { return this$1$1.sampleCurveY(this$1$1.solveCurveX(t)); }; // this function needs a name @@ -31,18 +48,34 @@ return BezierEasing; }; + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled X value + */ CubicBezier.prototype.sampleCurveX = function sampleCurveX (t) { return ((this.ax * t + this.bx) * t + this.cx) * t; }; + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled Y value + */ CubicBezier.prototype.sampleCurveY = function sampleCurveY (t) { return ((this.ay * t + this.by) * t + this.cy) * t; }; + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled curve derivative X value + */ CubicBezier.prototype.sampleCurveDerivativeX = function sampleCurveDerivativeX (t) { return (3.0 * this.ax * t + 2.0 * this.bx) * t + this.cx; }; + /** + * @param {number} x - progress [0-1] + * @return {number} - solved curve X value + */ CubicBezier.prototype.solveCurveX = function solveCurveX (x) { var t0; var t1; @@ -82,21 +115,24 @@ return t2; }; - var KUTE = {}; + /** + * The KUTE.js Execution Context + */ + var KEC = {}; var Tweens = []; - var globalObject; + var gl0bal; - if (typeof global !== 'undefined') { globalObject = global; } - else if (typeof window !== 'undefined') { globalObject = window.self; } - else { globalObject = {}; } + if (typeof global !== 'undefined') { gl0bal = global; } + else if (typeof window !== 'undefined') { gl0bal = window.self; } + else { gl0bal = {}; } - var globalObject$1 = globalObject; + var globalObject = gl0bal; // KUTE.js INTERPOLATE FUNCTIONS // ============================= - var Interpolate = {}; + var interpolate = {}; // schedule property specific function on animation start // link property update function to KUTE.js execution context @@ -104,13 +140,13 @@ // Include a performance.now polyfill. // source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts - var now; + var performanceNow; // In node.js, use process.hrtime. // eslint-disable-next-line // @ts-ignore if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) { - now = function () { + performanceNow = function () { // eslint-disable-next-line // @ts-ignore var time = process.hrtime(); @@ -122,24 +158,27 @@ // In a browser, use self.performance.now if it is available. // This must be bound, because directly assigning this function // leads to an invocation exception in Chrome. - now = self.performance.now.bind(self.performance); + performanceNow = self.performance.now.bind(self.performance); } else if (typeof Date !== 'undefined' && Date.now) { // Use Date.now if it is available. - now = Date.now; + performanceNow = Date.now; } else { // Otherwise, use 'new Date().getTime()'. - now = function () { return new Date().getTime(); }; + performanceNow = function () { return new Date().getTime(); }; } - var now$1 = now; + var now = performanceNow; var Time = {}; - Time.now = now$1; - // const that = window.self || window || {}; - // Time.now = that.performance.now.bind(that.performance); + Time.now = now; + // eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy var Tick = 0; + /** + * + * @param {number | Date} time + */ var Ticker = function (time) { var i = 0; while (i < Tweens.length) { @@ -160,42 +199,48 @@ Tick = null; Object.keys(onStart).forEach(function (obj) { if (typeof (onStart[obj]) === 'function') { - if (KUTE[obj]) { delete KUTE[obj]; } + if (KEC[obj]) { delete KEC[obj]; } } else { Object.keys(onStart[obj]).forEach(function (prop) { - if (KUTE[prop]) { delete KUTE[prop]; } + if (KEC[prop]) { delete KEC[prop]; } }); } }); - Object.keys(Interpolate).forEach(function (i) { - if (KUTE[i]) { delete KUTE[i]; } + Object.keys(interpolate).forEach(function (i) { + if (KEC[i]) { delete KEC[i]; } }); } }, 64); } - // KUTE.js render update functions - // =============================== + // render update functions + // ======================= var Render = { Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time, }; Object.keys(Render).forEach(function (blob) { - if (!KUTE[blob]) { - KUTE[blob] = blob === 'Time' ? Time.now : Render[blob]; + if (!KEC[blob]) { + KEC[blob] = blob === 'Time' ? Time.now : Render[blob]; } }); - globalObject$1._KUTE = KUTE; + globalObject._KUTE = KEC; + // all supported properties var supportedProperties = {}; var defaultValues = {}; - var defaultOptions = { + var defaultOptions$1 = { duration: 700, delay: 0, easing: 'linear', + repeat: 0, + repeatDelay: 0, + yoyo: false, + resetStart: false, + offset: 0, }; // used in preparePropertiesObject @@ -219,7 +264,7 @@ var Objects = { supportedProperties: supportedProperties, defaultValues: defaultValues, - defaultOptions: defaultOptions, + defaultOptions: defaultOptions$1, prepareProperty: prepareProperty, prepareStart: prepareStart, crossCheck: crossCheck, @@ -231,17 +276,39 @@ // util - a general object for utils like rgbToHex, processEasing var Util = {}; - function add (tw) { return Tweens.push(tw); } + /** + * KUTE.add(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + var add = function (tw) { return Tweens.push(tw); }; - function remove (tw) { + /** + * KUTE.remove(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + var remove = function (tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); } - } + }; - function getAll () { return Tweens; } + /** + * KUTE.add(Tween) + * + * @return {KUTE.Tween[]} tw a new tween to add + */ + var getAll = function () { return Tweens; }; - function removeAll () { Tweens.length = 0; } + /** + * KUTE.removeAll() + */ + var removeAll = function () { Tweens.length = 0; }; + /** + * linkInterpolation + * @this {KUTE.Tween} + */ function linkInterpolation() { var this$1$1 = this; // DON'T change @@ -253,18 +320,18 @@ if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius && Object.keys(this$1$1.valuesEnd).some(function (i) { return (componentProps && componentProps.includes(i)) || (i === 'attr' && Object.keys(this$1$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); })); })) { - if (!KUTE[fnObj]) { KUTE[fnObj] = componentLink[fnObj]; } + if (!KEC[fnObj]) { KEC[fnObj] = componentLink[fnObj]; } } else { Object.keys(this$1$1.valuesEnd).forEach(function (prop) { var propObject = this$1$1.valuesEnd[prop]; if (propObject instanceof Object) { Object.keys(propObject).forEach(function (i) { if (typeof (componentLink[i]) === 'function') { // transformCSS3 - if (!KUTE[i]) { KUTE[i] = componentLink[i]; } + if (!KEC[i]) { KEC[i] = componentLink[i]; } } else { Object.keys(componentLink[fnObj]).forEach(function (j) { if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix - if (!KUTE[j]) { KUTE[j] = componentLink[i][j]; } + if (!KEC[j]) { KEC[j] = componentLink[i][j]; } } }); } @@ -276,7 +343,7 @@ }); } - var Internals = { + var internals = { add: add, remove: remove, getAll: getAll, @@ -285,7 +352,14 @@ linkInterpolation: linkInterpolation, }; - // getInlineStyle - get transform style for element from cssText for .to() method + /** + * getInlineStyle + * Returns the transform style for element from + * cssText. Used by for the `.to()` static method. + * + * @param {Element} el target element + * @returns {object} + */ function getInlineStyle(el) { // if the scroll applies to `window` it returns as it has no styling if (!el.style) { return false; } @@ -313,14 +387,23 @@ return transformObject; } - // getStyleForProperty - get computed style property for element for .to() method + /** + * getStyleForProperty + * + * Returns the computed style property for element for .to() method. + * Used by for the `.to()` static method. + * + * @param {Element} elem + * @param {string} propertyName + * @returns {string} + */ function getStyleForProperty(elem, propertyName) { + var result = defaultValues[propertyName]; var styleAttribute = elem.style; var computedStyle = getComputedStyle(elem) || elem.currentStyle; var styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName]) ? styleAttribute[propertyName] : computedStyle[propertyName]; - var result = defaultValues[propertyName]; if (propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute)) { result = styleValue; @@ -329,7 +412,14 @@ return result; } - // prepareObject - returns all processed valuesStart / valuesEnd + /** + * prepareObject + * + * Returns all processed valuesStart / valuesEnd. + * + * @param {Element} obj the values start/end object + * @param {string} fn toggles between the two + */ function prepareObject(obj, fn) { var this$1$1 = this; // this, props object, type: start/end @@ -374,7 +464,14 @@ }); } - // getStartValues - returns the startValue for to() method + /** + * getStartValues + * + * Returns the start values for to() method. + * Used by for the `.to()` static method. + * + * @this {KUTE.Tween} the tween instance + */ function getStartValues() { var this$1$1 = this; @@ -420,6 +517,9 @@ }; var connect = {}; + /** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */ + connect.tween = null; + connect.processEasing = null; var Easing = { linear: new CubicBezier(0, 0, 1, 1, 'linear'), @@ -456,6 +556,12 @@ easingBackInOut: new CubicBezier(0.68, -0.55, 0.265, 1.55, 'easingBackInOut'), }; + /** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor name + * @returns {KUTE.easingFunction} a valid easingfunction + */ function processBezierEasing(fn) { if (typeof fn === 'function') { return fn; @@ -466,14 +572,22 @@ return new CubicBezier(bz[0] * 1, bz[1] * 1, bz[2] * 1, bz[3] * 1); // bezier easing } // if (/elastic|bounce/i.test(fn)) { - // throw TypeError(`KUTE.js - CubicBezier doesn't support ${fn} easing.`); + // throw TypeError(`KUTE - CubicBezier doesn't support ${fn} easing.`); // } return Easing.linear; } connect.processEasing = processBezierEasing; - // a public selector utility + /** + * selector + * + * A selector utility for KUTE.js. + * + * @param {KUTE.selectorType} el target(s) or string selector + * @param {boolean | number} multi when true returns an array/collection of elements + * @returns {Element | Element[] | null} + */ function selector(el, multi) { try { var requestedElem; @@ -510,21 +624,28 @@ linkInterpolation.call(this); } - // single Tween object construct - // TweenBase is meant to be use for pre-processed values + /** + * The `TweenBase` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * `TweenBase` is meant to be used with pre-processed values. + */ var TweenBase = function TweenBase(targetElement, startObject, endObject, opsObject) { var this$1$1 = this; // element animation is applied to this.element = targetElement; + /** @type {boolean} */ this.playing = false; - + /** @type {number?} */ this._startTime = null; + /** @type {boolean} */ this._startFired = false; - this.valuesEnd = endObject; // valuesEnd - this.valuesStart = startObject; // valuesStart + // type is set via KUTE.tweenProps + this.valuesEnd = endObject; + this.valuesStart = startObject; // OPTIONS var options = opsObject || {}; @@ -532,9 +653,12 @@ // used by to() method and expects object : {} / false this._resetStart = options.resetStart || 0; // you can only set a core easing function as default + /** @type {KUTE.easingOption} */ this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing); - this._duration = options.duration || defaultOptions.duration; // duration option | default - this._delay = options.delay || defaultOptions.delay; // delay option | default + /** @type {number} */ + this._duration = options.duration || defaultOptions$1.duration; // duration option | default + /** @type {number} */ + this._delay = options.delay || defaultOptions$1.delay; // delay option | default // set other options Object.keys(options).forEach(function (op) { @@ -552,22 +676,24 @@ var easingFnName = this._easing.name; if (!onStart[easingFnName]) { onStart[easingFnName] = function easingFn(prop) { - if (!KUTE[prop] && prop === this._easing.name) { KUTE[prop] = this._easing; } + if (!KEC[prop] && prop === this._easing.name) { KEC[prop] = this._easing; } }; } return this; }; - // tween prototype - // queue tween object to main frame update - // move functions that use the ticker outside the prototype to be in the same scope with it + /** + * Starts tweening + * @param {number?} time the tween start time + * @returns {TweenBase} this instance + */ TweenBase.prototype.start = function start (time) { // now it's a good time to start add(this); this.playing = true; - this._startTime = typeof time !== 'undefined' ? time : KUTE.Time(); + this._startTime = typeof time !== 'undefined' ? time : KEC.Time(); this._startTime += this._delay; if (!this._startFired) { @@ -584,6 +710,10 @@ return this; }; + /** + * Stops tweening + * @returns {TweenBase} this instance + */ TweenBase.prototype.stop = function stop () { if (this.playing) { remove(this); @@ -597,6 +727,9 @@ return this; }; + /** + * Trigger internal completion callbacks. + */ TweenBase.prototype.close = function close () { var this$1$1 = this; @@ -611,20 +744,33 @@ stop.call(this); }; + /** + * Schedule another tween instance to start once this one completes. + * @param {KUTE.chainOption} args the tween animation start time + * @returns {TweenBase} this instance + */ TweenBase.prototype.chain = function chain (args) { this._chain = []; this._chain = args.length ? args : this._chain.concat(args); return this; }; + /** + * Stop tweening the chained tween instances. + */ TweenBase.prototype.stopChainedTweens = function stopChainedTweens () { if (this._chain && this._chain.length) { this._chain.forEach(function (tw) { return tw.stop(); }); } }; + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ TweenBase.prototype.update = function update (time) { var this$1$1 = this; - var T = time !== undefined ? time : KUTE.Time(); + var T = time !== undefined ? time : KEC.Time(); var elapsed; @@ -638,7 +784,7 @@ // render the update Object.keys(this.valuesEnd).forEach(function (tweenProp) { - KUTE[tweenProp](this$1$1.element, + KEC[tweenProp](this$1$1.element, this$1$1.valuesStart[tweenProp], this$1$1.valuesEnd[tweenProp], progress); @@ -675,16 +821,13 @@ // Update Tween Interface connect.tween = TweenBase; - defaultOptions.repeat = 0; - defaultOptions.repeatDelay = 0; - defaultOptions.yoyo = false; - defaultOptions.resetStart = false; - - // no need to set defaults for callbacks - // defaultOptions.onPause = undefined - // defaultOptions.onResume = undefined - - // the constructor that supports to, allTo methods + /** + * The `KUTE.Tween()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor adds additional functionality and is the default + * Tween object constructor in KUTE.js. + */ var Tween = /*@__PURE__*/(function (TweenBase) { function Tween() { var this$1$1 = this; @@ -697,8 +840,12 @@ this.valuesStart = {}; this.valuesEnd = {}; - var startObject = args[1]; - var endObject = args[2]; + // const startObject = args[1]; + // const endObject = args[2]; + var ref = args.slice(1); + var startObject = ref[0]; + var endObject = ref[1]; + var options = ref[2]; // set valuesEnd prepareObject.call(this, endObject, 'end'); @@ -720,20 +867,26 @@ } // set paused state + /** @type {boolean} */ this.paused = false; + /** @type {number?} */ this._pauseTime = null; // additional properties and options - var options = args[3]; - - this._repeat = options.repeat || defaultOptions.repeat; - this._repeatDelay = options.repeatDelay || defaultOptions.repeatDelay; + /** @type {number?} */ + this._repeat = options.repeat || defaultOptions$1.repeat; + /** @type {number?} */ + this._repeatDelay = options.repeatDelay || defaultOptions$1.repeatDelay; // we cache the number of repeats to be able to put it back after all cycles finish + /** @type {number?} */ this._repeatOption = this._repeat; // yoyo needs at least repeat: 1 + /** @type {KUTE.tweenProps} */ this.valuesRepeat = {}; // valuesRepeat - this._yoyo = options.yoyo || defaultOptions.yoyo; + /** @type {boolean} */ + this._yoyo = options.yoyo || defaultOptions$1.yoyo; + /** @type {boolean} */ this._reversed = false; // don't load extra callbacks @@ -749,7 +902,11 @@ Tween.prototype = Object.create( TweenBase && TweenBase.prototype ); Tween.prototype.constructor = Tween; - // additions to start method + /** + * Starts tweening, extended method + * @param {number?} time the tween start time + * @returns {Tween} this instance + */ Tween.prototype.start = function start (time) { var this$1$1 = this; @@ -780,7 +937,10 @@ return this; }; - // updates to super methods + /** + * Stops tweening, extended method + * @returns {Tween} this instance + */ Tween.prototype.stop = function stop () { TweenBase.prototype.stop.call(this); if (!this.paused && this.playing) { @@ -790,6 +950,9 @@ return this; }; + /** + * Trigger internal completion callbacks. + */ Tween.prototype.close = function close () { TweenBase.prototype.close.call(this); @@ -804,7 +967,10 @@ return this; }; - // additions to prototype + /** + * Resume tweening + * @returns {Tween} this instance + */ Tween.prototype.resume = function resume () { if (this.paused && this.playing) { this.paused = false; @@ -814,7 +980,7 @@ // re-queue execution context queueStart.call(this); // update time and let it roll - this._startTime += KUTE.Time() - this._pauseTime; + this._startTime += KEC.Time() - this._pauseTime; add(this); // restart ticker if stopped if (!Tick) { Ticker(); } @@ -822,11 +988,15 @@ return this; }; + /** + * Pause tweening + * @returns {Tween} this instance + */ Tween.prototype.pause = function pause () { if (!this.paused && this.playing) { remove(this); this.paused = true; - this._pauseTime = KUTE.Time(); + this._pauseTime = KEC.Time(); if (this._onPause !== undefined) { this._onPause.call(this); } @@ -834,23 +1004,29 @@ return this; }; + /** + * Reverses start values with end values + */ Tween.prototype.reverse = function reverse () { var this$1$1 = this; - // if (this._yoyo) { Object.keys(this.valuesEnd).forEach(function (reverseProp) { var tmp = this$1$1.valuesRepeat[reverseProp]; this$1$1.valuesRepeat[reverseProp] = this$1$1.valuesEnd[reverseProp]; this$1$1.valuesEnd[reverseProp] = tmp; this$1$1.valuesStart[reverseProp] = this$1$1.valuesRepeat[reverseProp]; }); - // } }; + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ Tween.prototype.update = function update (time) { var this$1$1 = this; - var T = time !== undefined ? time : KUTE.Time(); + var T = time !== undefined ? time : KEC.Time(); var elapsed; @@ -864,7 +1040,7 @@ // render the update Object.keys(this.valuesEnd).forEach(function (tweenProp) { - KUTE[tweenProp](this$1$1.element, + KEC[tweenProp](this$1$1.element, this$1$1.valuesStart[tweenProp], this$1$1.valuesEnd[tweenProp], progress); @@ -928,6 +1104,12 @@ // * new update method to work with the above // * other cool ideas + /** + * The `KUTE.TweenExtra()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor is intended for experiments or testing of new features. + */ var TweenExtra = /*@__PURE__*/(function (Tween) { function TweenExtra() { var args = [], len = arguments.length; @@ -958,16 +1140,30 @@ // to do // } - // set callbacks + /** + * Method to add callbacks on the fly. + * @param {string} name callback name + * @param {Function} fn callback function + * @returns {TweenExtra} + */ TweenExtra.prototype.on = function on (name, fn) { if (['start', 'stop', 'update', 'complete', 'pause', 'resume'].indexOf(name) > -1) { this[("_on" + (name.charAt(0).toUpperCase() + name.slice(1)))] = fn; } + return this; }; - // set options accepting [repeat,yoyo,delay,repeatDelay,easing] - TweenExtra.prototype.option = function option (o, v) { - this[("_" + o)] = v; + /** + * Method to set options on the fly. + * * accepting [repeat,yoyo,delay,repeatDelay,easing] + * + * @param {string} option the tick time + * @param {string | number | number[]} value the tick time + * @returns {TweenExtra} + */ + TweenExtra.prototype.option = function option (option$1, value) { + this[("_" + option$1)] = value; + return this; }; return TweenExtra; @@ -976,61 +1172,83 @@ // Tween Interface connect.tween = TweenExtra; - // KUTE.js Tween Collection - // ======================== - + /** + * The static method creates a new `Tween` object for each `HTMLElement` + * from and `Array`, `HTMLCollection` or `NodeList`. + */ var TweenCollection = function TweenCollection(els, vS, vE, Options) { var this$1$1 = this; + var TweenConstructor = connect.tween; + /** @type {KUTE.twCollection[]} */ this.tweens = []; - // set default offset - if (!('offset' in defaultOptions)) { defaultOptions.offset = 0; } - var Ops = Options || {}; - Ops.delay = Ops.delay || defaultOptions.delay; + /** @type {number?} */ + Ops.delay = Ops.delay || defaultOptions$1.delay; // set all options var options = []; Array.from(els).forEach(function (el, i) { - var TweenConstructor = connect.tween; options[i] = Ops || {}; - options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions.offset) : Ops.delay; + options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions$1.offset) : Ops.delay; if (el instanceof Element) { this$1$1.tweens.push(new TweenConstructor(el, vS, vE, options[i])); } else { - throw Error(("KUTE.js - " + el + " not instanceof [Element]")); + throw Error(("KUTE - " + el + " is not instanceof Element")); } }); + /** @type {number?} */ this.length = this.tweens.length; return this; }; + /** + * Starts tweening, all targets + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.start = function start (time) { - var T = time === undefined ? KUTE.Time() : time; + var T = time === undefined ? KEC.Time() : time; this.tweens.map(function (tween) { return tween.start(T); }); return this; }; + /** + * Stops tweening, all targets and their chains + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.stop = function stop () { this.tweens.map(function (tween) { return tween.stop(); }); return this; }; - TweenCollection.prototype.pause = function pause (time) { - var T = time === undefined ? KUTE.Time() : time; - this.tweens.map(function (tween) { return tween.pause(T); }); + /** + * Pause tweening, all targets + * @returns {TweenCollection} this instance + */ + TweenCollection.prototype.pause = function pause () { + this.tweens.map(function (tween) { return tween.pause(); }); return this; }; - TweenCollection.prototype.resume = function resume (time) { - var T = time === undefined ? KUTE.Time() : time; - this.tweens.map(function (tween) { return tween.resume(T); }); + /** + * Resume tweening, all targets + * @returns {TweenCollection} this instance + */ + TweenCollection.prototype.resume = function resume () { + this.tweens.map(function (tween) { return tween.resume(); }); return this; }; + /** + * Schedule another tween or collection to start after + * this one is complete. + * @param {number?} args the tween start time + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.chain = function chain (args) { var lastTween = this.tweens[this.length - 1]; if (args instanceof TweenCollection) { @@ -1043,14 +1261,26 @@ return this; }; + /** + * Check if any tween instance is playing + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.playing = function playing () { return this.tweens.some(function (tw) { return tw.playing; }); }; + /** + * Remove all tweens in the collection + */ TweenCollection.prototype.removeTweens = function removeTweens () { this.tweens = []; }; + /** + * Returns the maximum animation duration + * @returns {number} this instance + */ TweenCollection.prototype.getMaxDuration = function getMaxDuration () { var durations = []; this.tweens.forEach(function (tw) { @@ -1059,6 +1289,14 @@ return Math.max(durations); }; + /** + * ProgressBar + * + * @class + * A progress bar utility for KUTE.js that will connect + * a target ``. with a Tween instance + * allowing it to control the progress of the Tween. + */ var ProgressBar = function ProgressBar(element, tween) { var assign; @@ -1089,14 +1327,14 @@ var output = ref.output; // let progress = this.paused ? this.toolbar.value - // : (KUTE.Time() - this._startTime) / this._duration; + // : (KEC.Time() - this._startTime) / this._duration; // progress = progress > 1 - tick ? 1 : progress < 0.01 ? 0 : progress; var progress; if (this.paused) { progress = this.toolbar.value; } else { - progress = (KUTE.Time() - this._startTime) / this._duration; + progress = (KEC.Time() - this._startTime) / this._duration; } // progress = progress > 1 - tick ? 1 : progress < 0.01 ? 0 : progress; @@ -1105,6 +1343,7 @@ var value = !this._reversed ? progress : 1 - progress; this.toolbar.value = value; + // eslint-disable-next-line no-bitwise if (output) { output.value = ((value * 10000 >> 0) / 100) + "%"; } }; @@ -1136,7 +1375,7 @@ this.tween.pause(); this.toolbar.toggleEvents('add'); - KUTE.Tick = cancelAnimationFrame(KUTE.Ticker); + KEC.Tick = cancelAnimationFrame(KEC.Ticker); } }; @@ -1144,59 +1383,97 @@ if (this.tween.paused) { if (this.tween.paused) { this.tween.resume(); } - this.tween._startTime = KUTE.Time() + this.tween._startTime = KEC.Time() - (!this.tween._reversed ? this.value : 1 - this.value) * this.tween._duration; this.toolbar.toggleEvents('remove'); - KUTE.Tick = requestAnimationFrame(KUTE.Ticker); + KEC.Tick = requestAnimationFrame(KEC.Ticker); } }; + var TweenConstructor$1 = connect.tween; + + /** + * The `KUTE.to()` static method returns a new Tween object + * for a single `HTMLElement` at its current state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function to(element, endObject, optionsObj) { var options = optionsObj || {}; - var TweenConstructor = connect.tween; options.resetStart = endObject; - return new TweenConstructor(selector(element), endObject, endObject, options); + return new TweenConstructor$1(selector(element), endObject, endObject, options); } + var TweenConstructor = connect.tween; + + /** + * The `KUTE.fromTo()` static method returns a new Tween object + * for a single `HTMLElement` at a given state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function fromTo(element, startObject, endObject, optionsObj) { var options = optionsObj || {}; - var TweenConstructor = connect.tween; return new TweenConstructor(selector(element), startObject, endObject, options); } - // multiple elements tween objects + /** + * The `KUTE.allTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at their current state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenProps} optionsObj progress + * @returns {TweenCollection} the Tween object collection + */ function allTo(elements, endObject, optionsObj) { var options = optionsObj || {}; - optionsObj.resetStart = endObject; + options.resetStart = endObject; return new TweenCollection(selector(elements, true), endObject, endObject, options); } + /** + * The `KUTE.allFromTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at a given state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {TweenCollection} the Tween object collection + */ function allFromTo(elements, startObject, endObject, optionsObj) { var options = optionsObj || {}; return new TweenCollection(selector(elements, true), startObject, endObject, options); } - // Animation class - // * builds KUTE components - // * populate KUTE objects - // * AnimatonBase creates a KUTE.js build for pre-made Tween objects - // * AnimatonDevelopment can help you debug your new components + /** + * Animation Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + */ var Animation = function Animation(Component) { try { if (Component.component in supportedProperties) { - throw Error(("KUTE.js - " + (Component.component) + " already registered")); + throw Error(("KUTE - " + (Component.component) + " already registered")); } else if (Component.property in defaultValues) { - throw Error(("KUTE.js - " + (Component.property) + " already registered")); - } else { - this.setComponent(Component); + throw Error(("KUTE - " + (Component.property) + " already registered")); } } catch (e) { throw Error(e); } - }; - Animation.prototype.setComponent = function setComponent (Component) { var propertyInfo = this; var ComponentName = Component.component; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util } @@ -1241,9 +1518,10 @@ // set additional options if (Component.defaultOptions) { - Object.keys(Component.defaultOptions).forEach(function (op) { - defaultOptions[op] = Component.defaultOptions[op]; - }); + // Object.keys(Component.defaultOptions).forEach((op) => { + // defaultOptions[op] = Component.defaultOptions[op]; + // }); + Object.assign(defaultOptions$1, Component.defaultOptions); } // set functions @@ -1271,16 +1549,16 @@ }); } - // set component interpolate + // set component interpolation functions if (Component.Interpolate) { Object.keys(Component.Interpolate).forEach(function (fni) { var compIntObj = Component.Interpolate[fni]; - if (typeof (compIntObj) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj; + if (typeof (compIntObj) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj; } else { Object.keys(compIntObj).forEach(function (sfn) { - if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj[sfn]; + if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj[sfn]; } }); } @@ -1299,24 +1577,18 @@ return propertyInfo; }; - // AnimationDevelopment class + /** + * Animation Development Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + * + * In addition to the default class, this one provides more component + * information to help you with custom component development. + */ var AnimationDevelopment = /*@__PURE__*/(function (Animation) { - function AnimationDevelopment() { - var ref; - - var args = [], len = arguments.length; - while ( len-- ) args[ len ] = arguments[ len ]; - Animation.apply(this, args); - - (ref = this).setComponent.apply(ref, args); - } - - if ( Animation ) AnimationDevelopment.__proto__ = Animation; - AnimationDevelopment.prototype = Object.create( Animation && Animation.prototype ); - AnimationDevelopment.prototype.constructor = AnimationDevelopment; - - AnimationDevelopment.prototype.setComponent = function setComponent (Component) { - Animation.prototype.setComponent.call(this, Component); + function AnimationDevelopment(Component) { + Animation.call(this, Component); var propertyInfo = this; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util } @@ -1392,13 +1664,13 @@ var compIntObj = Component.Interpolate[fni]; // register new Interpolation functions if (typeof (compIntObj) === 'function') { - if (!Interpolate[fni]) { + if (!interpolate[fni]) { propertyInfo.adds.push(("" + fni)); } propertyInfo.uses.push(("" + fni)); } else { Object.keys(compIntObj).forEach(function (sfn) { - if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) { + if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) { propertyInfo.adds.push(("" + sfn)); } propertyInfo.uses.push(("" + sfn)); @@ -1427,20 +1699,41 @@ } return propertyInfo; - }; + } + + if ( Animation ) AnimationDevelopment.__proto__ = Animation; + AnimationDevelopment.prototype = Object.create( Animation && Animation.prototype ); + AnimationDevelopment.prototype.constructor = AnimationDevelopment; return AnimationDevelopment; }(Animation)); - function numbers(a, b, v) { // number1, number2, progress + /** + * Numbers Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {number} v progress + * @returns {number} the interpolated number + */ + function numbers(a, b, v) { var A = +a; var B = b - a; // a = +a; b -= a; return A + B * v; } - // trueDimension - returns { v = value, u = unit } - function trueDimension(dimValue, isAngle) { + /** + * trueDimension + * + * Returns the string value of a specific CSS property converted into a nice + * { v = value, u = unit } object. + * + * @param {string} dimValue the property string value + * @param {boolean | number} isAngle sets the utility to investigate angles + * @returns {{v: number, u: string}} the true {value, unit} tuple + */ + var trueDimension = function (dimValue, isAngle) { var intValue = parseInt(dimValue, 10) || 0; var mUnits = ['px', '%', 'deg', 'rad', 'em', 'rem', 'vh', 'vw']; var theUnit; @@ -1455,37 +1748,41 @@ } return { v: intValue, u: theUnit }; - } - - /* bgPosProp = { - property: 'backgroundPosition', - defaultValue: [0,0], - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } - } */ + }; // Component Functions + /** + * Sets the property update function. + * @param {string} prop the property name + */ function onStartBgPos(prop) { - if (this.valuesEnd[prop] && !KUTE[prop]) { - KUTE[prop] = function (elem, a, b, v) { + if (this.valuesEnd[prop] && !KEC[prop]) { + KEC[prop] = function (elem, a, b, v) { + /* eslint-disable -- no-bitwise & no-param-reassign impossible to satisfy */ elem.style[prop] = ((numbers(a[0], b[0], v) * 100 >> 0) / 100) + "% " + (((numbers(a[1], b[1], v) * 100 >> 0) / 100)) + "%"; + /* eslint-enable -- no-bitwise & no-param-reassign impossible to satisfy */ }; } } - /* bgPosProp = { - property: 'backgroundPosition', - defaultValue: [0,0], - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Functions + + /** + * Returns the property computed style. + * @param {string} prop the property + * @returns {string} the property computed style + */ function getBgPos(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } - function prepareBgPos(prop, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number[]} the property tween object + */ + function prepareBgPos(/* prop, */_, value) { if (value instanceof Array) { var x = trueDimension(value[0]).v; var y = trueDimension(value[1]).v; @@ -1518,6 +1815,15 @@ Util: { trueDimension: trueDimension }, }; + /** + * Units Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the interpolated value + unit string + */ function units(a, b, u, v) { // number1, number2, unit, progress var A = +a; var B = b - a; @@ -1533,13 +1839,20 @@ } */ // Component Properties - var radiusProps$1 = ['borderRadius', - 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']; + var radiusProps$1 = [ + 'borderRadius', + 'borderTopLeftRadius', 'borderTopRightRadius', + 'borderBottomLeftRadius', 'borderBottomRightRadius' ]; // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function radiusOnStartFn(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style[tweenProp] = units(a.v, b.v, b.u, v); }; } @@ -1549,16 +1862,11 @@ radiusOnStart$1[tweenProp] = radiusOnStartFn; }); - /* borderRadius = { - category: 'borderRadius', - properties : [..], - defaultValues: {..}, - interpolation: {units} - } */ - // Component Properties - var radiusProps = ['borderRadius', - 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']; + var radiusProps = [ + 'borderRadius', + 'borderTopLeftRadius', 'borderTopRightRadius', + 'borderBottomLeftRadius', 'borderBottomRightRadius']; var radiusValues = {}; radiusProps.forEach(function (x) { radiusValues[x] = 0; }); @@ -1569,11 +1877,21 @@ radiusOnStart[tweenProp] = radiusOnStartFn; }); + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} the property computed style + */ function getRadius(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } - function prepareRadius(tweenProp, value) { + /** + * Returns the property tween object. + * @param {string} value the property value + * @returns {{v: number, u: string}} the property tween object + */ + function prepareRadius(/* tweenProp, */_, value) { return trueDimension(value); } @@ -1596,12 +1914,20 @@ }; // Component Functions + /** + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ function boxModelOnStart(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ + /* eslint-disable no-bitwise -- impossible to satisfy */ elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a, b, v) * 10) >> 0) / 10 : (numbers(a, b, v)) >> 0) + "px"; + /* eslint-enable no-bitwise */ + /* eslint-enable no-param-reassign */ }; } } @@ -1621,9 +1947,21 @@ boxModelProperties.forEach(function (x) { boxModelValues[x] = 0; }); // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getBoxModel(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } + + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ function prepareBoxModel(tweenProp, value) { var boxValue = trueDimension(value); var offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; @@ -1640,7 +1978,7 @@ }; // Component Full Component - var boxModel = { + var BoxModel = { component: 'boxModelProperties', category: 'boxModel', properties: boxModelProperties, @@ -1650,29 +1988,50 @@ }; // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartClip(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { var h = 0; var cl = []; for (h; h < 4; h += 1) { - var c1 = a[h].v; var c2 = b[h].v; var - cu = b[h].u || 'px'; + var c1 = a[h].v; + var c2 = b[h].v; + var cu = b[h].u || 'px'; + // eslint-disable-next-line no-bitwise -- impossible to satisfy cl[h] = ((numbers(c1, c2, v) * 100 >> 0) / 100) + cu; } + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.clip = "rect(" + cl + ")"; }; } } // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string | number[]} computed style for property + */ function getClip(tweenProp/* , value */) { - var currentClip = getStyleForProperty(this.element, tweenProp); - var width = getStyleForProperty(this.element, 'width'); - var height = getStyleForProperty(this.element, 'height'); + var ref = this; + var element = ref.element; + var currentClip = getStyleForProperty(element, tweenProp); + var width = getStyleForProperty(element, 'width'); + var height = getStyleForProperty(element, 'height'); return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip; } - function prepareClip(tweenProp, value) { + + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number[]} the property tween object + */ + function prepareClip(/* tweenProp, */_, value) { if (value instanceof Array) { return value.map(function (x) { return trueDimension(x); }); } @@ -1689,7 +2048,7 @@ }; // Component Full - var clipProperty = { + var ClipProperty = { component: 'clipProperty', property: 'clip', defaultValue: [0, 0, 0, 0], @@ -1698,10 +2057,19 @@ Util: { trueDimension: trueDimension }, }; - // hexToRGB - returns RGB color object {r,g,b} - function hexToRGB (hex) { - var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") - var HEX = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; }); + /** + * hexToRGB + * + * Converts a #HEX color format into RGB + * and returns a color object {r,g,b}. + * + * @param {string} hex the degree angle + * @returns {KUTE.colorObject | null} the radian angle + */ + var hexToRGB = function (hex) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + var HEX = hex.replace(hexShorthand, function (_, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(HEX); return result ? { @@ -1709,10 +2077,17 @@ g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : null; - } + }; - // trueColor - replace transparent and transform any color to rgba()/rgb() - function trueColor(colorString) { + /** + * trueColor + * + * Transform any color to rgba()/rgb() and return a nice RGB(a) object. + * + * @param {string} colorString the color input + * @returns {KUTE.colorObject} the {r,g,b,a} color object + */ + var trueColor = function (colorString) { var result; if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string var vrgb = colorString.replace(/\s|\)/, '').split('(')[1].split(','); @@ -1734,7 +2109,9 @@ r: 0, g: 0, b: 0, a: 0, }; } - if (!/^#|^rgb/.test(colorString)) { // maybe we can check for web safe colors + // maybe we can check for web safe colors + // only works in a browser + if (!/^#|^rgb/.test(colorString)) { var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString; var webColor = getComputedStyle(siteHead, null).color; @@ -1747,8 +2124,16 @@ }; } return result; - } + }; + /** + * Color Interpolation Function. + * + * @param {KUTE.colorObject} a start color + * @param {KUTE.colorObject} b end color + * @param {number} v progress + * @returns {string} the resulting color + */ function colors(a, b, v) { var _c = {}; var ep = ')'; @@ -1757,12 +2142,10 @@ var rgba = 'rgba('; Object.keys(b).forEach(function (c) { - // _c[c] = c !== 'a' ? (numbers(a[c], b[c], v) >> 0 || 0) : (a[c] && b[c]) - // ? (numbers(a[c], b[c], v) * 100 >> 0) / 100 : null; if (c !== 'a') { - _c[c] = numbers(a[c], b[c], v) >> 0 || 0; + _c[c] = numbers(a[c], b[c], v) >> 0 || 0; // eslint-disable-line no-bitwise } else if (a[c] && b[c]) { - _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; + _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; // eslint-disable-line no-bitwise } }); @@ -1777,13 +2160,21 @@ // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) - var supportedColors$1 = ['color', 'backgroundColor', 'borderColor', - 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; + var supportedColors$1 = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', + 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor' ]; // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartColors(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = colors(a, b, v); }; } @@ -1792,11 +2183,13 @@ var colorsOnStart$1 = {}; supportedColors$1.forEach(function (x) { colorsOnStart$1[x] = onStartColors; }); - // Component Interpolation // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) - var supportedColors = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; + var supportedColors = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor' ]; var defaultColors = {}; supportedColors.forEach(function (tweenProp) { @@ -1809,10 +2202,22 @@ colorsOnStart[x] = onStartColors; }); + /** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} property computed style + */ function getColor(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } - function prepareColor(prop, value) { + + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.colorObject} the property tween object + */ + function prepareColor(/* prop, */_, value) { return trueColor(value); } @@ -1834,29 +2239,33 @@ Util: { trueColor: trueColor }, }; - /* filterEffects = { - property: 'filter', - subProperties: {}, - defaultValue: {}, - interpolators: {}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } - } */ - // Component Interpolation - function dropShadow(a, b, v) { + /** + * Sets the `drop-shadow` sub-property update function. + * * disimbiguation `dropshadow` interpolation function and `dropShadow` property + * @param {string} tweenProp the property name + */ + function dropshadow(a, b, v) { var params = []; var unit = 'px'; for (var i = 0; i < 3; i += 1) { + // eslint-disable-next-line no-bitwise params[i] = ((numbers(a[i], b[i], v) * 100 >> 0) / 100) + unit; } return ("drop-shadow(" + (params.concat(colors(a[3], b[3], v)).join(' ')) + ")"); } // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartFilter(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable-next-line no-param-reassign -- impossible to satisfy */ elem.style[tweenProp] = (b.url ? ("url(" + (b.url) + ")") : '') + /* eslint-disable no-bitwise -- impossible to satisfy */ + (a.opacity || b.opacity ? ("opacity(" + (((numbers(a.opacity, b.opacity, v) * 100) >> 0) / 100) + "%)") : '') + (a.blur || b.blur ? ("blur(" + (((numbers(a.blur, b.blur, v) * 100) >> 0) / 100) + "em)") : '') + (a.saturate || b.saturate ? ("saturate(" + (((numbers(a.saturate, b.saturate, v) * 100) >> 0) / 100) + "%)") : '') @@ -1866,7 +2275,8 @@ + (a.sepia || b.sepia ? ("sepia(" + (((numbers(a.sepia, b.sepia, v) * 100) >> 0) / 100) + "%)") : '') + (a.brightness || b.brightness ? ("brightness(" + (((numbers(a.brightness, b.brightness, v) * 100) >> 0) / 100) + "%)") : '') + (a.contrast || b.contrast ? ("contrast(" + (((numbers(a.contrast, b.contrast, v) * 100) >> 0) / 100) + "%)") : '') - + (a.dropShadow || b.dropShadow ? dropShadow(a.dropShadow, b.dropShadow, v) : ''); + + (a.dropShadow || b.dropShadow ? dropshadow(a.dropShadow, b.dropShadow, v) : ''); + /* eslint-enable no-bitwise -- impossible to satisfy */ }; } } @@ -1880,10 +2290,20 @@ } */ // Component Util + /** + * Returns camelCase filter sub-property. + * @param {string} str source string + * @returns {string} camelCase property name + */ function replaceDashNamespace(str) { return str.replace('-r', 'R').replace('-s', 'S'); } + /** + * Returns `drop-shadow` sub-property object. + * @param {(string | number)[]} shadow and `Array` with `drop-shadow` parameters + * @returns {KUTE.filterList['dropShadow']} the expected `drop-shadow` values + */ function parseDropShadow(shadow) { var newShadow; @@ -1902,6 +2322,11 @@ return newShadow; } + /** + * Returns an array with current filter sub-properties values. + * @param {string} currentStyle the current filter computed style + * @returns {{[x: string]: number}} the filter tuple + */ function parseFilterString(currentStyle) { var result = {}; var fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g; @@ -1926,6 +2351,12 @@ } // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {string} computed style for property + */ function getFilter(tweenProp, value) { var currentStyle = getStyleForProperty(this.element, tweenProp); var filterObject = parseFilterString(currentStyle); @@ -1940,7 +2371,14 @@ return filterObject; } - function prepareFilter(tweenProp, value) { + + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property name + * @returns {KUTE.filterList} the property tween object + */ + function prepareFilter(/* tweenProp, */_, value) { var filterObject = {}; var fnp; @@ -1974,6 +2412,10 @@ return filterObject; } + /** + * Adds missing sub-properties in `valuesEnd` from `valuesStart`. + * @param {string} tweenProp the property name + */ function crossCheckFilter(tweenProp) { var this$1$1 = this; @@ -2026,7 +2468,7 @@ sepia: numbers, invert: numbers, hueRotate: numbers, - dropShadow: { numbers: numbers, colors: colors, dropShadow: dropShadow }, + dropShadow: { numbers: numbers, colors: colors, dropshadow: dropshadow }, }, functions: filterFunctions, Util: { @@ -2038,18 +2480,30 @@ var attributes = {}; var onStartAttr = { + /** + * onStartAttr.attr + * + * Sets the sub-property update function. + * @param {string} tweenProp the property name + */ attr: function attr(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function (elem, vS, vE, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function (elem, vS, vE, v) { Object.keys(vE).forEach(function (oneAttr) { - KUTE.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); + KEC.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); }); }; } }, + /** + * onStartAttr.attributes + * + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ attributes: function attributes$1(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd.attr) { - KUTE[tweenProp] = attributes; + if (!KEC[tweenProp] && this.valuesEnd.attr) { + KEC[tweenProp] = attributes; } }, }; @@ -2061,15 +2515,27 @@ var svgColors = ['fill', 'stroke', 'stop-color']; // Component Util + /** + * Returns non-camelcase property name. + * @param {string} a the camelcase property name + * @returns {string} the non-camelcase property name + */ function replaceUppercase(a) { return a.replace(/[A-Z]/g, '-$&').toLowerCase(); } // Component Functions - function getAttr(tweenProp, value) { + /** + * Returns the current attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {{[x:string]: string}} attribute value + */ + function getAttr(/* tweenProp, */_, value) { var this$1$1 = this; var attrStartValues = {}; Object.keys(value).forEach(function (attr) { - // get the value for 'fill-opacity' not fillOpacity, also 'width' not the internal 'width_px' + // get the value for 'fill-opacity' not fillOpacity + // also 'width' not the internal 'width_px' var attribute = replaceUppercase(attr).replace(/_+[a-z]+/, ''); var currentValue = this$1$1.element.getAttribute(attribute); attrStartValues[attribute] = svgColors.includes(attribute) @@ -2080,6 +2546,12 @@ return attrStartValues; } + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} attrObj the property value + * @returns {number} the property tween object + */ function prepareAttr(tweenProp, attrObj) { var this$1$1 = this; // attr (string),attrObj (object) @@ -2101,6 +2573,7 @@ if (this$1$1.valuesEnd[tweenProp] && this$1$1.valuesEnd[tweenProp][tp] && !(tp in attributes)) { attributes[tp] = function (elem, oneAttr, a, b, v) { var _p = oneAttr.replace(suffix, ''); + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ elem.setAttribute(_p, ((numbers(a.v, b.v, v) * 1000 >> 0) / 1000) + b.u); }; } @@ -2169,28 +2642,38 @@ } */ // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartOpacity(tweenProp/* , value */) { // opacity could be 0 sometimes, we need to check regardless - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable */ elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000; + /* eslint-enable */ }; } } - /* opacityProperty = { - property: 'opacity', - defaultValue: 1, - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getOpacity(tweenProp/* , value */) { return getStyleForProperty(this.element, tweenProp); } - function prepareOpacity(tweenProp, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareOpacity(/* tweenProp, */_, value) { return parseFloat(value); // opacity always FLOAT } @@ -2202,7 +2685,7 @@ }; // Full Component - var opacityProperty = { + var OpacityProperty = { component: 'opacityProperty', property: 'opacity', defaultValue: 1, @@ -2210,51 +2693,58 @@ functions: opacityFunctions, }; - /* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartDraw(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable no-bitwise -- impossible to satisfy */ var pathLength = (a.l * 100 >> 0) / 100; var start = (numbers(a.s, b.s, v) * 100 >> 0) / 100; var end = (numbers(a.e, b.e, v) * 100 >> 0) / 100; var offset = 0 - start; var dashOne = end + offset; - + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDashoffset = offset + "px"; + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDasharray = (((dashOne < 1 ? 0 : dashOne) * 100 >> 0) / 100) + "px, " + pathLength + "px"; + /* eslint-disable no-bitwise -- impossible to satisfy */ }; } } - /* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Util + /** + * Convert a `` length percent value to absolute. + * @param {string} v raw value + * @param {number} l length value + * @returns {number} the absolute value + */ function percent(v, l) { return (parseFloat(v) / 100) * l; } - // http://stackoverflow.com/a/30376660 - // returns the length of a Rect + /** + * Returns the `` length. + * It doesn't compute `rx` and / or `ry` of the element. + * @see http://stackoverflow.com/a/30376660 + * @param {SVGRectElement} el target element + * @returns {number} the `` length + */ function getRectLength(el) { var w = el.getAttribute('width'); var h = el.getAttribute('height'); return (w * 2) + (h * 2); } - // getPolygonLength / getPolylineLength - // returns the length of the Polygon / Polyline + /** + * Returns the `` / `` length. + * @param {SVGPolylineElement | SVGPolygonElement} el target element + * @returns {number} the element length + */ function getPolyLength(el) { var points = el.getAttribute('points').split(' '); @@ -2285,7 +2775,11 @@ return len; } - // return the length of the line + /** + * Returns the `` length. + * @param {SVGLineElement} el target element + * @returns {number} the element length + */ function getLineLength(el) { var x1 = el.getAttribute('x1'); var x2 = el.getAttribute('x2'); @@ -2294,13 +2788,22 @@ return Math.sqrt(Math.pow( (x2 - x1), 2 ) + Math.pow( (y2 - y1), 2 )); } - // return the length of the circle + /** + * Returns the `` length. + * @param {SVGCircleElement} el target element + * @returns {number} the element length + */ function getCircleLength(el) { var r = el.getAttribute('r'); return 2 * Math.PI * r; } // returns the length of an ellipse + /** + * Returns the `` length. + * @param {SVGEllipseElement} el target element + * @returns {number} the element length + */ function getEllipseLength(el) { var rx = el.getAttribute('rx'); var ry = el.getAttribute('ry'); @@ -2309,7 +2812,11 @@ return ((Math.sqrt(0.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2; } - // returns the result of any of the below functions + /** + * Returns the shape length. + * @param {SVGPathCommander.shapeTypes} el target element + * @returns {number} the element length + */ function getTotalLength(el) { if (el.tagName === 'rect') { return getRectLength(el); @@ -2326,6 +2833,12 @@ return 0; } + /** + * Returns the property tween object. + * @param {SVGPathCommander.shapeTypes} element the target element + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ function getDraw(element, value) { var length = /path|glyph/.test(element.tagName) ? element.getTotalLength() @@ -2335,7 +2848,7 @@ var dasharray; var offset; - if (value instanceof Object) { + if (value instanceof Object && Object.keys(value).every(function (v) { return ['s', 'e', 'l'].includes(v); })) { return value; } if (typeof value === 'string') { var v = value.split(/,|\s/); @@ -2351,17 +2864,33 @@ return { s: start, e: end, l: length }; } + /** + * Reset CSS properties associated with the `draw` property. + * @param {SVGPathCommander.shapeTypes} element target + */ function resetDraw(elem) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ elem.style.strokeDashoffset = ''; elem.style.strokeDasharray = ''; + /* eslint-disable no-param-reassign -- impossible to satisfy */ } // Component Functions + /** + * Returns the property tween object. + * @returns {KUTE.drawObject} the property tween object + */ function getDrawValue(/* prop, value */) { return getDraw(this.element); } - function prepareDraw(a, o) { - return getDraw(this.element, o); + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ + function prepareDraw(_, value) { + return getDraw(this.element, value); } // All Component Functions @@ -2372,7 +2901,7 @@ }; // Component Full - var svgDraw = { + var SvgDrawProperty = { component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', @@ -2392,97 +2921,91 @@ }, }; - function clonePath(pathArray) { - return pathArray.map(function (x) { - if (Array.isArray(x)) { - return clonePath(x); - } - return !Number.isNaN(+x) ? +x : x; - }); - } - - var SVGPCO = { - origin: null, - decimals: 4, - round: 1, - }; - - function roundPath(pathArray, round) { - var decimalsOption = !Number.isNaN(+round) ? +round : SVGPCO.decimals; - var result; - - if (decimalsOption) { - result = pathArray.map(function (seg) { return seg.map(function (c) { - var nr = +c; - var dc = Math.pow( 10, decimalsOption ); - if (nr) { - return nr % 1 === 0 ? nr : Math.round(nr * dc) / dc; - } - return c; - }); }); - } else { - result = clonePath(pathArray); - } - return result; - } - + /** + * Segment params length + */ var paramsCount = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0, }; - function finalizeSegment(state) { - var pathCommand = state.pathValue[state.segmentStart]; - var pathComLK = pathCommand.toLowerCase(); - var params = state.data; + /** + * Breaks the parsing of a pathString once a segment is finalized. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function finalizeSegment(path) { + var pathCommand = path.pathValue[path.segmentStart]; + var LK = pathCommand.toLowerCase(); + var data = path.data; // Process duplicated commands (without comand name) - if (pathComLK === 'm' && params.length > 2) { - state.segments.push([pathCommand, params[0], params[1]]); - params = params.slice(2); - pathComLK = 'l'; - pathCommand = (pathCommand === 'm') ? 'l' : 'L'; + if (LK === 'm' && data.length > 2) { + // @ts-ignore + path.segments.push([pathCommand, data[0], data[1]]); + data = data.slice(2); + LK = 'l'; + pathCommand = pathCommand === 'm' ? 'l' : 'L'; } - if (pathComLK === 'r') { - state.segments.push([pathCommand].concat(params)); - } else { - while (params.length >= paramsCount[pathComLK]) { - state.segments.push([pathCommand].concat(params.splice(0, paramsCount[pathComLK]))); - if (!paramsCount[pathComLK]) { - break; - } + // @ts-ignore + while (data.length >= paramsCount[LK]) { + // path.segments.push([pathCommand].concat(data.splice(0, paramsCount[LK]))); + // @ts-ignore + path.segments.push([pathCommand ].concat( data.splice(0, paramsCount[LK]))); + // @ts-ignore + if (!paramsCount[LK]) { + break; } } } var invalidPathValue = 'Invalid path value'; - function scanFlag(state) { - var ch = state.pathValue.charCodeAt(state.index); + /** + * Validates an A (arc-to) specific path command value. + * Usually a `large-arc-flag` or `sweep-flag`. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function scanFlag(path) { + var index = path.index; + var ch = path.pathValue.charCodeAt(index); if (ch === 0x30/* 0 */) { - state.param = 0; - state.index += 1; + path.param = 0; + path.index += 1; return; } if (ch === 0x31/* 1 */) { - state.param = 1; - state.index += 1; + path.param = 1; + path.index += 1; return; } - // state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; - state.err = invalidPathValue + ": invalid Arc flag " + ch; + path.err = invalidPathValue + ": invalid Arc flag \"" + ch + "\", expecting 0 or 1 at index " + index; } + /** + * Checks if a character is a digit. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isDigit(code) { return (code >= 48 && code <= 57); // 0..9 } - function scanParam(state) { - var start = state.index; - var max = state.max; + /** + * Validates every character of the path string, + * every path command, negative numbers or floating point numbers. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function scanParam(path) { + var max = path.max; + var pathValue = path.pathValue; + var start = path.index; var index = start; var zeroFirst = false; var hasCeiling = false; @@ -2491,22 +3014,22 @@ var ch; if (index >= max) { - // state.err = 'SvgPath: missed param (at pos ' + index + ')'; - state.err = invalidPathValue + ": missing param " + (state.pathValue[index]); + // path.err = 'SvgPath: missed param (at pos ' + index + ')'; + path.err = invalidPathValue + " at " + index + ": missing param " + (pathValue[index]); return; } - ch = state.pathValue.charCodeAt(index); + ch = pathValue.charCodeAt(index); if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } // This logic is shamelessly borrowed from Esprima // https://github.com/ariya/esprimas if (!isDigit(ch) && ch !== 0x2E/* . */) { - // state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; - state.err = invalidPathValue + " at index " + index + ": " + (state.pathValue[index]) + " is not a number"; + // path.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; + path.err = invalidPathValue + " at index " + index + ": " + (pathValue[index]) + " is not a number"; return; } @@ -2514,63 +3037,68 @@ zeroFirst = (ch === 0x30/* 0 */); index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; if (zeroFirst && index < max) { // decimal number starts with '0' such as '09' is illegal. if (ch && isDigit(ch)) { - // state.err = 'SvgPath: numbers started with `0` such as `09` + // path.err = 'SvgPath: numbers started with `0` such as `09` // are illegal (at pos ' + start + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[start]) + " illegal number"; + path.err = invalidPathValue + " at index " + start + ": " + (pathValue[start]) + " illegal number"; return; } } - while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + while (index < max && isDigit(pathValue.charCodeAt(index))) { index += 1; hasCeiling = true; } - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } if (ch === 0x2E/* . */) { hasDot = true; index += 1; - while (isDigit(state.pathValue.charCodeAt(index))) { + while (isDigit(pathValue.charCodeAt(index))) { index += 1; hasDecimal = true; } - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } if (ch === 0x65/* e */ || ch === 0x45/* E */) { if (hasDot && !hasCeiling && !hasDecimal) { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[index]) + " invalid float exponent"; + path.err = invalidPathValue + " at index " + index + ": " + (pathValue[index]) + " invalid float exponent"; return; } index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { index += 1; } - if (index < max && isDigit(state.pathValue.charCodeAt(index))) { - while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + if (index < max && isDigit(pathValue.charCodeAt(index))) { + while (index < max && isDigit(pathValue.charCodeAt(index))) { index += 1; } } else { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[index]) + " invalid float exponent"; + // path.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; + path.err = invalidPathValue + " at index " + index + ": " + (pathValue[index]) + " invalid float exponent"; return; } } - state.index = index; - state.param = +state.pathValue.slice(start, index); + path.index = index; + path.param = +path.pathValue.slice(start, index); } + /** + * Checks if the character is a space. + * + * @param {number} ch the character to check + * @returns {boolean} check result + */ function isSpace(ch) { var specialSpaces = [ 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, @@ -2581,14 +3109,29 @@ || (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0); } - function skipSpaces(state) { - while (state.index < state.max && isSpace(state.pathValue.charCodeAt(state.index))) { - state.index += 1; + /** + * Points the parser to the next character in the + * path string every time it encounters any kind of + * space character. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function skipSpaces(path) { + var pathValue = path.pathValue; + var max = path.max; + while (path.index < max && isSpace(pathValue.charCodeAt(path.index))) { + path.index += 1; } } + /** + * Checks if the character is a path command. + * + * @param {any} code the character to check + * @returns {boolean} check result + */ function isPathCommand(code) { - // eslint-disable no-bitwise + // eslint-disable-next-line no-bitwise -- Impossible to satisfy switch (code | 0x20) { case 0x6D/* m */: case 0x7A/* z */: @@ -2600,13 +3143,20 @@ case 0x71/* q */: case 0x74/* t */: case 0x61/* a */: - case 0x72/* r */: + // case 0x72/* r */: return true; default: return false; } } + /** + * Checks if the character is or belongs to a number. + * [0-9]|+|-|. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isDigitStart(code) { return (code >= 48 && code <= 57) /* 0..9 */ || code === 0x2B /* + */ @@ -2614,191 +3164,238 @@ || code === 0x2E; /* . */ } + /** + * Checks if the character is an A (arc-to) path command. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isArcCommand(code) { - // eslint disable no-bitwise + // eslint-disable-next-line no-bitwise -- Impossible to satisfy return (code | 0x20) === 0x61; } - function scanSegment(state) { - var max = state.max; - var cmdCode = state.pathValue.charCodeAt(state.index); - var reqParams = paramsCount[state.pathValue[state.index].toLowerCase()]; - // let hasComma; + /** + * Scans every character in the path string to determine + * where a segment starts and where it ends. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function scanSegment(path) { + var max = path.max; + var pathValue = path.pathValue; + var index = path.index; + var cmdCode = pathValue.charCodeAt(index); + // @ts-ignore + var reqParams = paramsCount[pathValue[index].toLowerCase()]; - state.segmentStart = state.index; + path.segmentStart = index; if (!isPathCommand(cmdCode)) { - // state.err = 'SvgPath: bad command ' - // + state.pathValue[state.index] - // + ' (at pos ' + state.index + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[state.index]) + " not a path command"; + path.err = invalidPathValue + ": " + (pathValue[index]) + " not a path command"; return; } - state.index += 1; - skipSpaces(state); + path.index += 1; + skipSpaces(path); - state.data = []; + path.data = []; if (!reqParams) { // Z - finalizeSegment(state); + finalizeSegment(path); return; } - // hasComma = false; - for (;;) { for (var i = reqParams; i > 0; i -= 1) { - if (isArcCommand(cmdCode) && (i === 3 || i === 4)) { scanFlag(state); } - else { scanParam(state); } + if (isArcCommand(cmdCode) && (i === 3 || i === 4)) { scanFlag(path); } + else { scanParam(path); } - if (state.err.length) { + if (path.err.length) { return; } - state.data.push(state.param); + path.data.push(path.param); - skipSpaces(state); - // hasComma = false; + skipSpaces(path); - if (state.index < max && state.pathValue.charCodeAt(state.index) === 0x2C/* , */) { - state.index += 1; - skipSpaces(state); - // hasComma = true; + // after ',' param is mandatory + if (path.index < max && pathValue.charCodeAt(path.index) === 0x2C/* , */) { + path.index += 1; + skipSpaces(path); } } - // after ',' param is mandatory - // if (hasComma) { - // continue; - // } - - if (state.index >= state.max) { + if (path.index >= path.max) { break; } // Stop on next segment - if (!isDigitStart(state.pathValue.charCodeAt(state.index))) { + if (!isDigitStart(pathValue.charCodeAt(path.index))) { break; } } - finalizeSegment(state); + finalizeSegment(path); } - function SVGPathArray(pathString) { + /** + * Returns a clone of an existing `pathArray`. + * + * @param {SVGPathCommander.pathArray | SVGPathCommander.pathSegment} path the source `pathArray` + * @returns {any} the cloned `pathArray` + */ + function clonePath(path) { + return path.map(function (x) { return (Array.isArray(x) ? [].concat( x ) : x); }); + } + + /** + * The `PathParser` used by the parser. + * + * @param {string} pathString + */ + function PathParser(pathString) { + /** @type {SVGPathCommander.pathArray} */ + // @ts-ignore this.segments = []; + /** @type {string} */ this.pathValue = pathString; + /** @type {number} */ this.max = pathString.length; + /** @type {number} */ this.index = 0; + /** @type {number} */ this.param = 0.0; + /** @type {number} */ this.segmentStart = 0; + /** @type {any} */ this.data = []; + /** @type {string} */ this.err = ''; - // return this; } - function isPathArray(pathArray) { - return Array.isArray(pathArray) && pathArray.every(function (seg) { - var pathCommand = seg[0].toLowerCase(); - return paramsCount[pathCommand] === seg.length - 1 && /[achlmrqstvz]/g.test(pathCommand); + /** + * Iterates an array to check if it's an actual `pathArray`. + * + * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ + function isPathArray(path) { + return Array.isArray(path) && path.every(function (seg) { + var lk = seg[0].toLowerCase(); + return paramsCount[lk] === seg.length - 1 && 'achlmqstvz'.includes(lk); }); } - // Returns array of segments: - function parsePathString(pathString, round) { - if (isPathArray(pathString)) { - return clonePath(pathString); - } - - var state = new SVGPathArray(pathString); - - skipSpaces(state); - - while (state.index < state.max && !state.err.length) { - scanSegment(state); - } - - if (state.err.length) { - state.segments = []; - } else if (state.segments.length) { - if ('mM'.indexOf(state.segments[0][0]) < 0) { - // state.err = 'Path string should start with `M` or `m`'; - state.err = invalidPathValue + ": missing M/m"; - state.segments = []; - } else { - state.segments[0][0] = 'M'; - } - } - - return roundPath(state.segments, round); - } - - function isAbsoluteArray(pathInput) { - return isPathArray(pathInput) && pathInput.every(function (x) { return x[0] === x[0].toUpperCase(); }); - } - - function pathToAbsolute(pathInput, round) { - if (isAbsoluteArray(pathInput)) { + /** + * Parses a path string value and returns an array + * of segments we like to call `pathArray`. + * + * @param {SVGPathCommander.pathArray | string} pathInput the string to be parsed + * @returns {SVGPathCommander.pathArray} the resulted `pathArray` + */ + function parsePathString(pathInput) { + if (Array.isArray(pathInput) && isPathArray(pathInput)) { return clonePath(pathInput); } - var pathArray = parsePathString(pathInput, round); - var ii = pathArray.length; - var resultArray = []; - var x = 0; - var y = 0; - var mx = 0; - var my = 0; - var start = 0; + // @ts-ignore + var path = new PathParser(pathInput); // TS expects string - if (pathArray[0][0] === 'M') { - x = +pathArray[0][1]; - y = +pathArray[0][2]; - mx = x; - my = y; - start += 1; - resultArray.push(['M', x, y]); + skipSpaces(path); + + while (path.index < path.max && !path.err.length) { + scanSegment(path); } - for (var i = start; i < ii; i += 1) { - var segment = pathArray[i]; + if (path.err.length) { + // @ts-ignore + path.segments = []; + } else if (path.segments.length) { + if (!'mM'.includes(path.segments[0][0])) { + path.err = invalidPathValue + ": missing M/m"; + // @ts-ignore + path.segments = []; + } else { + path.segments[0][0] = 'M'; + } + } + + return path.segments; + } + + /** + * Iterates an array to check if it's a `pathArray` + * with all absolute values. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ + function isAbsoluteArray(path) { + return isPathArray(path) + && path.every(function (x) { return x[0] === x[0].toUpperCase(); }); + } + + /** + * Parses a path string value or object and returns an array + * of segments, all converted to absolute values. + * + * @param {SVGPathCommander.pathArray | string} pathInput the path string | object + * @returns {SVGPathCommander.absoluteArray} the resulted `pathArray` with absolute values + */ + function pathToAbsolute(pathInput) { + if (Array.isArray(pathInput) && isAbsoluteArray(pathInput)) { + return clonePath(pathInput); + } + + var path = parsePathString(pathInput); + var x = 0; var y = 0; + var mx = 0; var my = 0; + + // @ts-ignore -- the `absoluteSegment[]` is for sure an `absolutePath` + return path.map(function (segment) { + var assign, assign$1, assign$2; + + var values = segment.slice(1).map(Number); var pathCommand = segment[0]; + /** @type {SVGPathCommander.absoluteCommand} */ + // @ts-ignore var absCommand = pathCommand.toUpperCase(); + + if (pathCommand === 'M') { + (assign = values, x = assign[0], y = assign[1]); + mx = x; + my = y; + return ['M', x, y]; + } + /** @type {SVGPathCommander.absoluteSegment} */ + // @ts-ignore var absoluteSegment = []; - var newSeg = []; - resultArray.push(absoluteSegment); if (pathCommand !== absCommand) { - absoluteSegment[0] = absCommand; - switch (absCommand) { case 'A': - newSeg = segment.slice(1, -2).concat([+segment[6] + x, +segment[7] + y]); - for (var j = 0; j < newSeg.length; j += 1) { - absoluteSegment.push(newSeg[j]); - } + absoluteSegment = [ + absCommand, values[0], values[1], values[2], + values[3], values[4], values[5] + x, values[6] + y]; break; case 'V': - absoluteSegment[1] = +segment[1] + y; + absoluteSegment = [absCommand, values[0] + y]; break; case 'H': - absoluteSegment[1] = +segment[1] + x; + absoluteSegment = [absCommand, values[0] + x]; break; - default: - if (absCommand === 'M') { - mx = +segment[1] + x; - my = +segment[2] + y; - } - // for is here to stay for eslint - for (var j$1 = 1; j$1 < segment.length; j$1 += 1) { - absoluteSegment.push(+segment[j$1] + (j$1 % 2 ? x : y)); - } + default: { + // use brakets for `eslint: no-case-declaration` + // https://stackoverflow.com/a/50753272/803358 + var absValues = values.map(function (n, j) { return n + (j % 2 ? y : x); }); + // @ts-ignore for n, l, c, s, q, t + absoluteSegment = [absCommand ].concat( absValues); + } } } else { - for (var j$2 = 0; j$2 < segment.length; j$2 += 1) { - absoluteSegment.push(segment[j$2]); - } + // @ts-ignore + absoluteSegment = [absCommand ].concat( values); } var segLength = absoluteSegment.length; @@ -2808,163 +3405,292 @@ y = my; break; case 'H': - x = +absoluteSegment[1]; + // @ts-ignore + (assign$1 = absoluteSegment, x = assign$1[1]); break; case 'V': - y = +absoluteSegment[1]; + // @ts-ignore + (assign$2 = absoluteSegment, y = assign$2[1]); break; default: - x = +absoluteSegment[segLength - 2]; - y = +absoluteSegment[segLength - 1]; + // @ts-ignore + x = absoluteSegment[segLength - 2]; + // @ts-ignore + y = absoluteSegment[segLength - 1]; if (absCommand === 'M') { mx = x; my = y; } } - } - - return roundPath(resultArray, round); + return absoluteSegment; + }); } - function fixArc(pathArray, allPathCommands, i) { - if (pathArray[i].length > 7) { - pathArray[i].shift(); - var pi = pathArray[i]; - // const ni = i + 1; - var ni = i; - while (pi.length) { + /** + * Splits an extended A (arc-to) segment into two cubic-bezier segments. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` this segment belongs to + * @param {string[]} allPathCommands all previous path commands + * @param {number} i the segment index + */ + + function fixArc(path, allPathCommands, i) { + if (path[i].length > 7) { + path[i].shift(); + var segment = path[i]; + var ni = i; // ESLint + while (segment.length) { // if created multiple C:s, their original seg is saved allPathCommands[i] = 'A'; - pathArray.splice(ni += 1, 0, ['C'].concat(pi.splice(0, 6))); - // pathArray.splice(i += 1, 0, ['C'].concat(pi.splice(0, 6))); - // pathArray.splice(i++, 0, ['C'].concat(pi.splice(0, 6))); + // @ts-ignore + path.splice(ni += 1, 0, ['C' ].concat( segment.splice(0, 6))); } - pathArray.splice(i, 1); + path.splice(i, 1); } } - function isCurveArray(pathArray) { - return isPathArray(pathArray) && pathArray.slice(1).every(function (seg) { return seg[0] === 'C'; }); - } - - // returns {qx,qy} for shorthand quadratic bezier segments + /** + * Returns the missing control point from an + * T (shorthand quadratic bezier) segment. + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} qx control point x + * @param {number} qy control point y + * @param {string} prevCommand the previous path command + * @returns {{qx: number, qy: number}}} the missing control point + */ function shorthandToQuad(x1, y1, qx, qy, prevCommand) { - return 'QT'.indexOf(prevCommand) > -1 + return 'QT'.includes(prevCommand) ? { qx: x1 * 2 - qx, qy: y1 * 2 - qy } : { qx: x1, qy: y1 }; } - // returns {x1,x2} for shorthand cubic bezier segments + /** + * Returns the missing control point from an + * S (shorthand cubic bezier) segment. + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} x2 curve end x + * @param {number} y2 curve end y + * @param {string} prevCommand the previous path command + * @returns {{x1: number, y1: number}}} the missing control point + */ function shorthandToCubic(x1, y1, x2, y2, prevCommand) { - return 'CS'.indexOf(prevCommand) > -1 + return 'CS'.includes(prevCommand) ? { x1: x1 * 2 - x2, y1: y1 * 2 - y2 } : { x1: x1, y1: y1 }; } + /** + * Normalizes a single segment of a `pathArray` object. + * + * @param {SVGPathCommander.pathSegment} segment the segment object + * @param {any} params the coordinates of the previous segment + * @param {string} prevCommand the path command of the previous segment + * @returns {SVGPathCommander.normalSegment} the normalized segment + */ function normalizeSegment(segment, params, prevCommand) { var pathCommand = segment[0]; - var xy = segment.slice(1); + var px1 = params.x1; + var py1 = params.y1; + var px2 = params.x2; + var py2 = params.y2; + var values = segment.slice(1).map(Number); var result = segment; - if ('TQ'.indexOf(segment[0]) < 0) { + if (!'TQ'.includes(pathCommand)) { // optional but good to be cautious params.qx = null; params.qy = null; } if (pathCommand === 'H') { - result = ['L', segment[1], params.y1]; + result = ['L', segment[1], py1]; } else if (pathCommand === 'V') { - result = ['L', params.x1, segment[1]]; + result = ['L', px1, segment[1]]; } else if (pathCommand === 'S') { - var ref = shorthandToCubic(params.x1, params.y1, params.x2, params.y2, prevCommand); + var ref = shorthandToCubic(px1, py1, px2, py2, prevCommand); var x1 = ref.x1; var y1 = ref.y1; params.x1 = x1; params.y1 = y1; - result = ['C', x1, y1].concat(xy); + // @ts-ignore + result = ['C', x1, y1 ].concat( values); } else if (pathCommand === 'T') { - var ref$1 = shorthandToQuad(params.x1, params.y1, params.qx, params.qy, prevCommand); + var ref$1 = shorthandToQuad(px1, py1, params.qx, params.qy, prevCommand); var qx = ref$1.qx; var qy = ref$1.qy; params.qx = qx; params.qy = qy; - result = ['Q', qx, qy].concat(xy); + // @ts-ignore + result = ['Q', qx, qy ].concat( values); } else if (pathCommand === 'Q') { - var nqx = xy[0]; - var nqy = xy[1]; + var nqx = values[0]; + var nqy = values[1]; params.qx = nqx; params.qy = nqy; } + + // @ts-ignore -- we-re switching `pathSegment` type return result; } - function isNormalizedArray(pathArray) { - return Array.isArray(pathArray) && pathArray.every(function (seg) { - var pathCommand = seg[0].toLowerCase(); - return paramsCount[pathCommand] === seg.length - 1 && /[ACLMQZ]/.test(seg[0]); // achlmrqstvz - }); + /** + * Iterates an array to check if it's a `pathArray` + * with all segments are in non-shorthand notation + * with absolute values. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ + function isNormalizedArray(path) { + return isAbsoluteArray(path) && path.every(function (seg) { return 'ACLMQZ'.includes(seg[0]); }); } - function normalizePath(pathInput, round) { // pathArray|pathString + /** + * @type {SVGPathCommander.parserParams} + */ + var paramsParser = { + x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, + }; + + /** + * Normalizes a `path` object for further processing: + * * convert segments to absolute values + * * convert shorthand path commands to their non-shorthand notation + * + * @param {SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray' + * @returns {SVGPathCommander.normalArray} the normalized `pathArray` + */ + function normalizePath(pathInput) { + var assign; + if (isNormalizedArray(pathInput)) { return clonePath(pathInput); } - var pathArray = pathToAbsolute(pathInput, round); - var params = { - x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, - }; + var path = pathToAbsolute(pathInput); + var params = Object.assign({}, paramsParser); var allPathCommands = []; - var ii = pathArray.length; + var ii = path.length; + var pathCommand = ''; var prevCommand = ''; - var segment; - var seglen; for (var i = 0; i < ii; i += 1) { - // save current path command - var ref = pathArray[i]; - var pathCommand = ref[0]; + (assign = path[i], pathCommand = assign[0]); // Save current path command allPathCommands[i] = pathCommand; // Get previous path command if (i) { prevCommand = allPathCommands[i - 1]; } - // Previous path command is inputted to processSegment - pathArray[i] = normalizeSegment(pathArray[i], params, prevCommand); + // Previous path command is used to normalizeSegment + // @ts-ignore -- expected on normalization + path[i] = normalizeSegment(path[i], params, prevCommand); - segment = pathArray[i]; - seglen = segment.length; + var segment = path[i]; + var seglen = segment.length; params.x1 = +segment[seglen - 2]; params.y1 = +segment[seglen - 1]; params.x2 = +(segment[seglen - 4]) || params.x1; params.y2 = +(segment[seglen - 3]) || params.y1; } - return roundPath(pathArray, round); + + // @ts-ignore -- a `normalArray` is absolutely an `absoluteArray` + return path; } + /** + * Checks a `pathArray` for an unnecessary `Z` segment + * and returns a new `pathArray` without it. + * + * The `pathInput` must be a single path, without + * sub-paths. For multi-path `` elements, + * use `splitPath` first and apply this utility on each + * sub-path separately. + * + * @param {SVGPathCommander.pathArray | string} pathInput the `pathArray` source + * @return {SVGPathCommander.pathArray} a fixed `pathArray` + */ + function fixPath(pathInput) { + var pathArray = parsePathString(pathInput); + var normalArray = normalizePath(pathArray); + var length = pathArray.length; + var isClosed = normalArray.slice(-1)[0][0] === 'Z'; + var segBeforeZ = isClosed ? length - 2 : length - 1; + + var ref = normalArray[0].slice(1); + var mx = ref[0]; + var my = ref[1]; + var ref$1 = normalArray[segBeforeZ].slice(-2); + var x = ref$1[0]; + var y = ref$1[1]; + + if (isClosed && mx === x && my === y) { + // @ts-ignore -- `pathSegment[]` is a `pathArray` + return pathArray.slice(0, -1); + } + return pathArray; + } + + /** + * Iterates an array to check if it's a `pathArray` + * with all C (cubic bezier) segments. + * + * @param {SVGPathCommander.pathArray} path the `Array` to be checked + * @returns {boolean} iteration result + */ + function isCurveArray(path) { + return isPathArray(path) && path.every(function (seg) { return 'MC'.includes(seg[0]); }); + } + + /** + * Returns an {x,y} vector rotated by a given + * angle in radian. + * + * @param {number} x the initial vector x + * @param {number} y the initial vector y + * @param {number} rad the radian vector angle + * @returns {{x: number, y: number}} the rotated vector + */ function rotateVector(x, y, rad) { var X = x * Math.cos(rad) - y * Math.sin(rad); var Y = x * Math.sin(rad) + y * Math.cos(rad); return { x: X, y: Y }; } - // for more information of where this math came from visit: - // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes - // LAF = largeArcFlag, SF = sweepFlag + /** + * Converts A (arc-to) segments to C (cubic-bezier-to). + * + * For more information of where this math came from visit: + * http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes + * + * @param {number} X1 the starting x position + * @param {number} Y1 the starting y position + * @param {number} RX x-radius of the arc + * @param {number} RY y-radius of the arc + * @param {number} angle x-axis-rotation of the arc + * @param {number} LAF large-arc-flag of the arc + * @param {number} SF sweep-flag of the arc + * @param {number} X2 the ending x position + * @param {number} Y2 the ending y position + * @param {number[]=} recursive the parameters needed to split arc into 2 segments + * @return {number[]} the resulting cubic-bezier segment(s) + */ + function arcToCubic(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, recursive) { + var assign; - function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) { + var x1 = X1; var y1 = Y1; var rx = RX; var ry = RY; var x2 = X2; var y2 = Y2; + // for more information of where this Math came from visit: + // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes var d120 = (Math.PI * 120) / 180; - var rad = (Math.PI / 180) * (angle || 0); + + var rad = (Math.PI / 180) * (+angle || 0); + /** @type {number[]} */ var res = []; - var X1 = x1; - var X2 = x2; - var Y1 = y1; - var Y2 = y2; - var RX = rx; - var RY = ry; var xy; var f1; var f2; @@ -2972,41 +3698,39 @@ var cy; if (!recursive) { - xy = rotateVector(X1, Y1, -rad); - X1 = xy.x; - Y1 = xy.y; - xy = rotateVector(X2, Y2, -rad); - X2 = xy.x; - Y2 = xy.y; + xy = rotateVector(x1, y1, -rad); + x1 = xy.x; + y1 = xy.y; + xy = rotateVector(x2, y2, -rad); + x2 = xy.x; + y2 = xy.y; - var x = (X1 - X2) / 2; - var y = (Y1 - Y2) / 2; - var h = (x * x) / (RX * RY) + (Math.pow( y, 2 )) / (Math.pow( RY, 2 )); + var x = (x1 - x2) / 2; + var y = (y1 - y2) / 2; + var h = (x * x) / (rx * rx) + (y * y) / (ry * ry); if (h > 1) { h = Math.sqrt(h); - RX *= h; - RY *= h; + rx *= h; + ry *= h; } - var rx2 = Math.pow( RX, 2 ); - var ry2 = Math.pow( RY, 2 ); + var rx2 = rx * rx; + var ry2 = ry * ry; + var k = (LAF === SF ? -1 : 1) - * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) - / (rx2 * y * y + ry2 * x * x))); + * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) + / (rx2 * y * y + ry2 * x * x))); - cx = ((k * RX * y) / RY) + ((X1 + X2) / 2); - cy = ((k * -RY * x) / RX) + ((Y1 + Y2) / 2); - - // f1 = Math.asin(((Y1 - cy) / RY).toFixed(9)); // keep toFIxed(9)! - // f2 = Math.asin(((Y2 - cy) / RY).toFixed(9)); - f1 = Math.asin((((Y1 - cy) / RY) * Math.pow( 10, 9 ) >> 0) / (Math.pow( 10, 9 ))); - f2 = Math.asin((((Y2 - cy) / RY) * Math.pow( 10, 9 ) >> 0) / (Math.pow( 10, 9 ))); - - f1 = X1 < cx ? Math.PI - f1 : f1; - f2 = X2 < cx ? Math.PI - f2 : f2; - - if (f1 < 0) { f1 = Math.PI * 2 + f1; } - if (f2 < 0) { f2 = Math.PI * 2 + f2; } + cx = ((k * rx * y) / ry) + ((x1 + x2) / 2); + cy = ((k * -ry * x) / rx) + ((y1 + y2) / 2); + // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise + f1 = (Math.asin((((y1 - cy) / ry))) * (Math.pow( 10, 9 )) >> 0) / (Math.pow( 10, 9 )); + // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise + f2 = (Math.asin((((y2 - cy) / ry))) * (Math.pow( 10, 9 )) >> 0) / (Math.pow( 10, 9 )); + f1 = x1 < cx ? Math.PI - f1 : f1; + f2 = x2 < cx ? Math.PI - f2 : f2; + if (f1 < 0) { (f1 = Math.PI * 2 + f1); } + if (f2 < 0) { (f2 = Math.PI * 2 + f2); } if (SF && f1 > f2) { f1 -= Math.PI * 2; } @@ -3014,55 +3738,56 @@ f2 -= Math.PI * 2; } } else { - var r1 = recursive[0]; - var r2 = recursive[1]; - var r3 = recursive[2]; - var r4 = recursive[3]; - f1 = r1; - f2 = r2; - cx = r3; - cy = r4; + (assign = recursive, f1 = assign[0], f2 = assign[1], cx = assign[2], cy = assign[3]); } - var df = f2 - f1; - if (Math.abs(df) > d120) { - var f2old = f2; var x2old = X2; var - y2old = Y2; - + var f2old = f2; + var x2old = x2; + var y2old = y2; f2 = f1 + d120 * (SF && f2 > f1 ? 1 : -1); - X2 = cx + RX * Math.cos(f2); - Y2 = cy + RY * Math.sin(f2); - res = arcToCubic(X2, Y2, RX, RY, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]); + x2 = cx + rx * Math.cos(f2); + y2 = cy + ry * Math.sin(f2); + res = arcToCubic(x2, y2, rx, ry, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]); } - df = f2 - f1; var c1 = Math.cos(f1); var s1 = Math.sin(f1); var c2 = Math.cos(f2); var s2 = Math.sin(f2); var t = Math.tan(df / 4); - var hx = (4 / 3) * RX * t; - var hy = (4 / 3) * RY * t; - var m1 = [X1, Y1]; - var m2 = [X1 + hx * s1, Y1 - hy * c1]; - var m3 = [X2 + hx * s2, Y2 - hy * c2]; - var m4 = [X2, Y2]; + var hx = (4 / 3) * rx * t; + var hy = (4 / 3) * ry * t; + var m1 = [x1, y1]; + var m2 = [x1 + hx * s1, y1 - hy * c1]; + var m3 = [x2 + hx * s2, y2 - hy * c2]; + var m4 = [x2, y2]; m2[0] = 2 * m1[0] - m2[0]; m2[1] = 2 * m1[1] - m2[1]; - if (recursive) { - return [m2, m3, m4].concat(res); + return m2.concat( m3, m4, res); } - res = [m2, m3, m4].concat(res).join().split(','); - return res.map(function (rz, i) { - if (i % 2) { - return rotateVector(res[i - 1], rz, rad).y; - } - return rotateVector(rz, res[i + 1], rad).x; - }); + res = m2.concat( m3, m4, res); + var newres = []; + for (var i = 0, ii = res.length; i < ii; i += 1) { + newres[i] = i % 2 + ? rotateVector(res[i - 1], res[i], rad).y + : rotateVector(res[i], res[i + 1], rad).x; + } + return newres; } + /** + * Converts a Q (quadratic-bezier) segment to C (cubic-bezier). + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} qx control point x + * @param {number} qy control point y + * @param {number} x2 curve end x + * @param {number} y2 curve end y + * @returns {number[]} the cubic-bezier segment + */ function quadToCubic(x1, y1, qx, qy, x2, y2) { var r13 = 1 / 3; var r23 = 2 / 3; @@ -3074,7 +3799,21 @@ x2, y2 ]; } - // t = [0-1] + /** + * Returns the {x,y} coordinates of a point at a + * given length of a cubic-bezier segment. + * + * @param {number} p1x the starting point X + * @param {number} p1y the starting point Y + * @param {number} c1x the first control point X + * @param {number} c1y the first control point Y + * @param {number} c2x the second control point X + * @param {number} c2y the second control point Y + * @param {number} p2x the ending point X + * @param {number} p2y the ending point Y + * @param {number} t a [0-1] ratio + * @returns {{x: number, y: number}} the requested {x,y} coordinates + */ function getPointAtSegLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) { var t1 = 1 - t; return { @@ -3089,183 +3828,349 @@ }; } + /** + * Returns the coordinates of a specified distance + * ratio between two points. + * + * @param {[number, number]} a the first point coordinates + * @param {[number, number]} b the second point coordinates + * @param {number} t the ratio + * @returns {[number, number]} the midpoint coordinates + */ function midPoint(a, b, t) { var ax = a[0]; - var ay = a[1]; - var bx = b[0]; + var ay = a[1]; var bx = b[0]; var by = b[1]; return [ax + (bx - ax) * t, ay + (by - ay) * t]; } + /** + * Converts an L (line-to) segment to C (cubic-bezier). + * + * @param {number} x1 line start x + * @param {number} y1 line start y + * @param {number} x2 line end x + * @param {number} y2 line end y + * @returns {number[]} the cubic-bezier segment + */ function lineToCubic(x1, y1, x2, y2) { var t = 0.5; + /** @type {[number, number]} */ var p0 = [x1, y1]; + /** @type {[number, number]} */ var p1 = [x2, y2]; var p2 = midPoint(p0, p1, t); var p3 = midPoint(p1, p2, t); var p4 = midPoint(p2, p3, t); var p5 = midPoint(p3, p4, t); var p6 = midPoint(p4, p5, t); - var cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t)); - var cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0)); + // const cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t)); + var seg1 = p0.concat( p2, p4, p6, [t]); + // @ts-ignore + var cp1 = getPointAtSegLength.apply(void 0, seg1); + // const cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0)); + var seg2 = p6.concat( p5, p3, p1, [0]); + // @ts-ignore + var cp2 = getPointAtSegLength.apply(void 0, seg2); return [cp1.x, cp1.y, cp2.x, cp2.y, x2, y2]; } + /** + * Converts any segment to C (cubic-bezier). + * + * @param {SVGPathCommander.pathSegment} segment the source segment + * @param {SVGPathCommander.parserParams} params the source segment parameters + * @returns {SVGPathCommander.cubicSegment | SVGPathCommander.MSegment} the cubic-bezier segment + */ function segmentToCubic(segment, params) { - if ('TQ'.indexOf(segment[0]) < 0) { + var pathCommand = segment[0]; + var values = segment.slice(1).map(function (n) { return +n; }); + var x = values[0]; + var y = values[1]; + var args; + var px1 = params.x1; + var py1 = params.y1; + var px = params.x; + var py = params.y; + + if (!'TQ'.includes(pathCommand)) { params.qx = null; params.qy = null; } - var ref = segment.slice(1); - var s1 = ref[0]; - var s2 = ref[1]; - - switch (segment[0]) { + switch (pathCommand) { case 'M': - params.x = s1; - params.y = s2; + params.x = x; + params.y = y; return segment; case 'A': - return ['C'].concat(arcToCubic.apply(0, [params.x1, params.y1].concat(segment.slice(1)))); + args = [px1, py1 ].concat( values); + // @ts-ignore -- relax, the utility will return 6 numbers + return ['C' ].concat( arcToCubic.apply(void 0, args)); case 'Q': - params.qx = s1; - params.qy = s2; - return ['C'].concat(quadToCubic.apply(0, [params.x1, params.y1].concat(segment.slice(1)))); + params.qx = x; + params.qy = y; + args = [px1, py1 ].concat( values); + // @ts-ignore -- also returning 6 numbers + return ['C' ].concat( quadToCubic.apply(void 0, args)); case 'L': - return ['C'].concat(lineToCubic(params.x1, params.y1, segment[1], segment[2])); + // @ts-ignore -- also returning 6 numbers + return ['C' ].concat( lineToCubic(px1, py1, x, y)); case 'Z': - return ['C'].concat(lineToCubic(params.x1, params.y1, params.x, params.y)); + // @ts-ignore -- also returning 6 numbers + return ['C' ].concat( lineToCubic(px1, py1, px, py)); } + // @ts-ignore -- we're switching `pathSegment` type return segment; } - function pathToCurve(pathInput, round) { + /** + * Parses a path string value or 'pathArray' and returns a new one + * in which all segments are converted to cubic-bezier. + * + * In addition, un-necessary `Z` segment is removed if previous segment + * extends to the `M` segment. + * + * @param {SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray' + * @returns {SVGPathCommander.curveArray} the resulted `pathArray` converted to cubic-bezier + */ + function pathToCurve(pathInput) { var assign; - // pathArray|pathString + if (isCurveArray(pathInput)) { return clonePath(pathInput); } - var pathArray = normalizePath(pathInput, round); - var params = { - x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, - }; + var path = fixPath(normalizePath(pathInput)); + var params = Object.assign({}, paramsParser); var allPathCommands = []; - var pathCommand = ''; - var ii = pathArray.length; - var segment; - var seglen; + var pathCommand = ''; // ts-lint + var ii = path.length; for (var i = 0; i < ii; i += 1) { - if (pathArray[i]) { (assign = pathArray[i], pathCommand = assign[0]); } - + (assign = path[i], pathCommand = assign[0]); allPathCommands[i] = pathCommand; - pathArray[i] = segmentToCubic(pathArray[i], params); - fixArc(pathArray, allPathCommands, i); - ii = pathArray.length; // solves curveArrays ending in Z + path[i] = segmentToCubic(path[i], params); - segment = pathArray[i]; - seglen = segment.length; + fixArc(path, allPathCommands, i); + ii = path.length; + var segment = path[i]; + var seglen = segment.length; params.x1 = +segment[seglen - 2]; params.y1 = +segment[seglen - 1]; params.x2 = +(segment[seglen - 4]) || params.x1; params.y2 = +(segment[seglen - 3]) || params.y1; } - return roundPath(pathArray, round); + + // @ts-ignore + return path; } - function pathToString(pathArray) { - return pathArray.map(function (x) { return x[0].concat(x.slice(1).join(' ')); }).join(''); + /** + * SVGPathCommander default options + * @type {SVGPathCommander.options} + */ + var defaultOptions = { + origin: [0, 0, 0], + round: 4, + }; + + /** + * Rounds the values of a `pathArray` instance to + * a specified amount of decimals and returns it. + * + * @param {SVGPathCommander.pathArray} path the source `pathArray` + * @param {number | boolean} roundOption the amount of decimals to round numbers to + * @returns {SVGPathCommander.pathArray} the resulted `pathArray` with rounded values + */ + function roundPath(path, roundOption) { + var round = defaultOptions.round; + if (roundOption === false || round === false) { return clonePath(path); } + round = roundOption >= 1 ? roundOption : round; + // to round values to the power + // the `round` value must be integer + // @ts-ignore + var pow = round >= 1 ? (Math.pow( 10, round )) : 1; + + // @ts-ignore -- `pathSegment[]` is `pathArray` + return path.map(function (pi) { + var values = pi.slice(1).map(Number) + .map(function (n) { return (n % 1 === 0 ? n : Math.round(n * pow) / pow); }); + return [pi[0] ].concat( values); + }); } - // reverse CURVE based pathArray segments only - function reverseCurve(pathArray) { - var rotatedCurve = pathArray.slice(1) + /** + * Returns a valid `d` attribute string value created + * by rounding values and concatenating the `pathArray` segments. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` object + * @param {any} round amount of decimals to round values to + * @returns {string} the concatenated path string + */ + function pathToString(path, round) { + return roundPath(path, round) + .map(function (x) { return x[0] + x.slice(1).join(' '); }).join(''); + } + + /** + * Reverses all segments and their values from a `pathArray` + * which consists of only C (cubic-bezier) path commands. + * + * @param {SVGPathCommander.curveArray} path the source `pathArray` + * @returns {SVGPathCommander.curveArray} the reversed `pathArray` + */ + function reverseCurve(path) { + var rotatedCurve = path.slice(1) .map(function (x, i, curveOnly) { return (!i - ? pathArray[0].slice(1).concat(x.slice(1)) - : curveOnly[i - 1].slice(-2).concat(x.slice(1))); }) - .map(function (x) { return x.map(function (y, i) { return x[x.length - i - 2 * (1 - (i % 2))]; }); }) + ? path[0].slice(1).concat( x.slice(1)) + : curveOnly[i - 1].slice(-2).concat( x.slice(1))); }) + .map(function (x) { return x.map(function (_, i) { return x[x.length - i - 2 * (1 - (i % 2))]; }); }) .reverse(); - return [['M'].concat(rotatedCurve[0] - .slice(0, 2))] - .concat(rotatedCurve.map(function (x) { return ['C'].concat(x.slice(2)); })); + // @ts-ignore -- expected on reverse operations + return [['M' ].concat( rotatedCurve[0].slice(0, 2)) ].concat( rotatedCurve.map(function (x) { return ['C' ].concat( x.slice(2)); })); } - // https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js - + /** + * Returns the area of a single segment shape. + * + * http://objectmix.com/graphics/133553-area-closed-bezier-curve.html + * + * @param {number} x0 the starting point X + * @param {number} y0 the starting point Y + * @param {number} x1 the first control point X + * @param {number} y1 the first control point Y + * @param {number} x2 the second control point X + * @param {number} y2 the second control point Y + * @param {number} x3 the ending point X + * @param {number} y3 the ending point Y + * @returns {number} the area of the cubic-bezier segment + */ function getCubicSegArea(x0, y0, x1, y1, x2, y2, x3, y3) { - // http://objectmix.com/graphics/133553-area-closed-bezier-curve.html return (3 * ((y3 - y0) * (x1 + x2) - (x3 - x0) * (y1 + y2) + (y1 * (x0 - x2)) - (x1 * (y0 - y2)) + (y3 * (x2 + x0 / 3)) - (x3 * (y2 + y0 / 3)))) / 20; } - function getPathArea(pathArray, round) { - var x = 0; var y = 0; var mx = 0; var my = 0; var - len = 0; - return pathToCurve(pathArray, round).map(function (seg) { - var assign; + /** + * Returns the area of a shape. + * @author Jürg Lehni & Jonathan Puckey + * + * => https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js + * + * @param {SVGPathCommander.pathArray} path the shape `pathArray` + * @returns {number} the length of the cubic-bezier segment + */ + function getPathArea(path) { + var x = 0; var y = 0; + var len = 0; + return pathToCurve(path).map(function (seg) { + var assign, assign$1; switch (seg[0]) { case 'M': - case 'Z': - mx = seg[0] === 'M' ? seg[1] : mx; - my = seg[0] === 'M' ? seg[2] : my; - x = mx; - y = my; + (assign = seg, x = assign[1], y = assign[2]); return 0; default: - len = getCubicSegArea.apply(0, [x, y].concat(seg.slice(1))); - (assign = seg.slice(-2), x = assign[0], y = assign[1]); + // @ts-ignore -- the utility will have proper amount of params + len = getCubicSegArea.apply(void 0, [ x, y ].concat( seg.slice(1) )); + + (assign$1 = seg.slice(-2).map(Number), x = assign$1[0], y = assign$1[1]); return len; } }).reduce(function (a, b) { return a + b; }, 0); } - function getDrawDirection(pathArray, round) { - return getPathArea(pathToCurve(pathArray, round)) >= 0; + /** + * Check if a path is drawn clockwise and returns true if so, + * false otherwise. + * + * @param {SVGPathCommander.pathArray} path the path string or `pathArray` + * @returns {boolean} true when clockwise or false if not + */ + function getDrawDirection(path) { + return getPathArea(pathToCurve(path)) >= 0; } - function splitCubic(pts, marker) { - var t = marker || 0.5; + /** + * Split a cubic-bezier segment into two. + * + * @param {number[]} pts the cubic-bezier parameters + * @return {SVGPathCommander.cubicSegment[]} two new cubic-bezier segments + */ + function splitCubic(pts/* , ratio */) { + var t = /* ratio || */ 0.5; var p0 = pts.slice(0, 2); var p1 = pts.slice(2, 4); var p2 = pts.slice(4, 6); var p3 = pts.slice(6, 8); + // @ts-ignore var p4 = midPoint(p0, p1, t); + // @ts-ignore var p5 = midPoint(p1, p2, t); + // @ts-ignore var p6 = midPoint(p2, p3, t); var p7 = midPoint(p4, p5, t); var p8 = midPoint(p5, p6, t); var p9 = midPoint(p7, p8, t); return [ - ['C'].concat(p4, p7, p9), - ['C'].concat(p8, p6, p3) ]; + ['C' ].concat( p4, p7, p9), + // @ts-ignore + ['C' ].concat( p8, p6, p3) ]; } + /** + * Split a path into an `Array` of sub-path strings. + * + * In the process, values are converted to absolute + * for visual consistency. + * + * @param {SVGPathCommander.pathArray | string} pathInput the source `pathArray` + * @return {string[]} an array with all sub-path strings + */ function splitPath(pathInput) { - return pathToString(pathToAbsolute(pathInput, 0)) + return pathToString(pathToAbsolute(pathInput), 0) .replace(/(m|M)/g, '|$1') .split('|') .map(function (s) { return s.trim(); }) .filter(function (s) { return s; }); } + /** + * @param {number} p1 + * @param {number} p2 + * @param {number} p3 + * @param {number} p4 + * @param {number} t a [0-1] ratio + * @returns {number} + */ function base3(p1, p2, p3, p4, t) { var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4; var t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3; return t * t2 - 3 * p1 + 3 * p2; } - // returns the cubic bezier segment length + /** + * Returns the C (cubic-bezier) segment length. + * + * @param {number} x1 the starting point X + * @param {number} y1 the starting point Y + * @param {number} x2 the first control point X + * @param {number} y2 the first control point Y + * @param {number} x3 the second control point X + * @param {number} y3 the second control point Y + * @param {number} x4 the ending point X + * @param {number} y4 the ending point Y + * @param {number} z a [0-1] ratio + * @returns {number} the cubic-bezier segment length + */ function getSegCubicLength(x1, y1, x2, y2, x3, y3, x4, y4, z) { - var Z; + var Z = z; if (z === null || Number.isNaN(+z)) { Z = 1; } // Z = Z > 1 ? 1 : Z < 0 ? 0 : Z; @@ -3289,6 +4194,14 @@ return z2 * sum; } + /** + * Returns the square root of the distance + * between two given points. + * + * @param {[number, number]} a the first point coordinates + * @param {[number, number]} b the second point coordinates + * @returns {number} the distance value + */ function distanceSquareRoot(a, b) { return Math.sqrt( (a[0] - b[0]) * (a[0] - b[0]) @@ -3296,23 +4209,22 @@ ); } - /* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers} }, - functions = { prepareStart, prepareProperty, onStart, crossCheck } - } */ - // Component Functions + + /** + * Sets the property update function. + * @param {string} tweenProp the `path` property + */ function onStartCubicMorph(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function updateMorph(elem, a, b, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function updateMorph(elem, a, b, v) { var curve = []; var path1 = a.curve; var path2 = b.curve; for (var i = 0, l = path2.length; i < l; i += 1) { // each path command curve.push([path1[i][0]]); for (var j = 1, l2 = path1[i].length; j < l2; j += 1) { // each command coordinate + /* eslint-disable-next-line no-bitwise -- impossible to satisfy */ curve[i].push((numbers(path1[i][j], path2[i][j], v) * 1000 >> 0) / 1000); } } @@ -3321,19 +4233,17 @@ } } - /* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } - } */ - // Component Util - function getCurveArray(pathString) { - return pathToCurve(splitPath(pathToString(pathToAbsolute(pathString)))[0]) + /** + * Returns first `pathArray` from multi-paths path. + * @param {SVGPathCommander.pathArray | string} source the source `pathArray` or string + * @returns {KUTE.curveSpecs[]} an `Array` with a custom tuple for `equalizeSegments` + */ + function getCurveArray(source) { + return pathToCurve(splitPath(source)[0]) .map(function (segment, i, pathArray) { - var segmentData = i && pathArray[i - 1].slice(-2).concat(segment.slice(1)); - var curveLength = i ? getSegCubicLength.apply(0, segmentData) : 0; + var segmentData = i && pathArray[i - 1].slice(-2).concat( segment.slice(1)); + var curveLength = i ? getSegCubicLength.apply(void 0, segmentData) : 0; var subsegs; if (i) { @@ -3351,6 +4261,13 @@ }); } + /** + * Returns two `curveArray` with same amount of segments. + * @param {SVGPathCommander.curveArray} path1 the first `curveArray` + * @param {SVGPathCommander.curveArray} path2 the second `curveArray` + * @param {number} TL the maximum `curveArray` length + * @returns {SVGPathCommander.curveArray[]} equalized segments + */ function equalizeSegments(path1, path2, TL) { var c1 = getCurveArray(path1); var c2 = getCurveArray(path2); @@ -3386,23 +4303,34 @@ : equalizeSegments(result[0], result[1], tl); } + /** + * Returns all possible path rotations for `curveArray`. + * @param {SVGPathCommander.curveArray} a the source `curveArray` + * @returns {SVGPathCommander.curveArray[]} all rotations for source + */ function getRotations(a) { var segCount = a.length; var pointCount = segCount - 1; - return a.map(function (f, idx) { return a.map(function (p, i) { + return a.map(function (_, idx) { return a.map(function (__, i) { var oldSegIdx = idx + i; var seg; if (i === 0 || (a[oldSegIdx] && a[oldSegIdx][0] === 'M')) { seg = a[oldSegIdx]; - return ['M'].concat(seg.slice(-2)); + return ['M' ].concat( seg.slice(-2)); } if (oldSegIdx >= segCount) { oldSegIdx -= pointCount; } return a[oldSegIdx]; }); }); } + /** + * Returns the `curveArray` rotation for the best morphing animation. + * @param {SVGPathCommander.curveArray} a the target `curveArray` + * @param {SVGPathCommander.curveArray} b the reference `curveArray` + * @returns {SVGPathCommander.curveArray} the best `a` rotation + */ function getRotatedCurve(a, b) { var segCount = a.length - 1; var lineLengths = []; @@ -3410,8 +4338,8 @@ var sumLensSqrd = 0; var rotations = getRotations(a); - rotations.forEach(function (r, i) { - a.slice(1).forEach(function (s, j) { + rotations.forEach(function (_, i) { + a.slice(1).forEach(function (__, j) { sumLensSqrd += distanceSquareRoot(a[(i + j) % segCount].slice(-2), b[j % segCount].slice(-2)); }); lineLengths[i] = sumLensSqrd; @@ -3424,10 +4352,23 @@ } // Component Functions + /** + * Returns the current `d` attribute value. + * @returns {string} + */ function getCubicMorph(/* tweenProp, value */) { return this.element.getAttribute('d'); } - function prepareCubicMorph(tweenProp, value) { + + /** + * Returns the property tween object. + * @see KUTE.curveObject + * + * @param {string} _ is the `path` property name, not needed + * @param {string | KUTE.curveObject} value the `path` property value + * @returns {KUTE.curveObject} + */ + function prepareCubicMorph(/* tweenProp, */_, value) { // get path d attribute or create a path from string value var pathObject = {}; // remove newlines, they break some JSON strings @@ -3451,7 +4392,12 @@ } return pathObject; } - function crossCheckCubicMorph(tweenProp) { + + /** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} tweenProp is `path` tween property, but it's not needed + */ + function crossCheckCubicMorph(tweenProp/** , value */) { if (this.valuesEnd[tweenProp]) { var pathCurve1 = this.valuesStart[tweenProp].curve; var pathCurve2 = this.valuesEnd[tweenProp].curve; @@ -3499,22 +4445,20 @@ clonePath: clonePath, getDrawDirection: getDrawDirection, splitCubic: splitCubic, + splitPath: splitPath, + fixPath: fixPath, getCurveArray: getCurveArray, }, }; - /* svgTransform = { - property: 'svgTransform', - subProperties, - defaultValue, - Interpolate: {numbers}, - functions - } */ - // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function svgTransformOnStart(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function (l, a, b, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function (l, a, b, v) { var x = 0; var y = 0; var deg = Math.PI / 180; @@ -3545,6 +4489,7 @@ x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0; // finally we apply the transform attribute value + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ l.setAttribute('transform', (x || y ? (("translate(" + ((x * 1000 >> 0) / 1000) + (y ? (("," + ((y * 1000 >> 0) / 1000))) : '') + ")")) : '') + (rotate ? ("rotate(" + ((rotate * 1000 >> 0) / 1000) + ")") : '') + (skewX ? ("skewX(" + ((skewX * 1000 >> 0) / 1000) + ")") : '') @@ -3554,20 +4499,17 @@ } } - /* const svgTransform = { - property: 'svgTransform', - subProperties, - defaultValue, - Interpolate: {numbers}, - functions - } */ - // Component Util - function parseStringOrigin(origin, ref) { - var x = ref.x; - var width = ref.width; - + /** + * Returns a correct transform origin consistent with the shape bounding box. + * @param {string} origin transform origin string + * @param {SVGPathCommander.pathBBox} bbox path bounding box + * @returns {number} + */ + function parseStringOrigin(origin, bbox) { var result; + var x = bbox.x; + var width = bbox.width; if (/[a-z]/i.test(origin) && !/px/.test(origin)) { result = origin.replace(/top|left/, 0) .replace(/right|bottom/, 100) @@ -3578,7 +4520,11 @@ return result; } - // helper function that turns transform value from string to object + /** + * Parse SVG transform string and return an object. + * @param {string} a transform string + * @returns {Object} + */ function parseTransformString(a) { var c = {}; var d = a && /\)/.test(a) @@ -3596,7 +4542,14 @@ return c; } - function parseTransformSVG(p, v) { + /** + * Returns the SVG transform tween object. + * @param {string} _ property name + * @param {Object} v property value object + * @returns {KUTE.transformSVGObject} the SVG transform tween object + */ + function parseTransformSVG(/* prop */_, v) { + /** @type {KUTE.transformSVGObject} */ var svgTransformObject = {}; // by default the transformOrigin is "50% 50%" of the shape box @@ -3650,12 +4603,23 @@ } // Component Functions - function prepareSvgTransform(p, v) { - return parseTransformSVG.call(this, p, v); + /** + * Returns the property tween object. + * @param {string} prop the property name + * @param {string} value the property value + * @returns {KUTE.transformSVGObject} the property tween object + */ + function prepareSvgTransform(prop, value) { + return parseTransformSVG.call(this, prop, value); } - // returns an obect with current transform attribute value - function getStartSvgTransform(tweenProp, value) { + /** + * Returns an object with the current transform attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {string} current transform object + */ + function getStartSvgTransform(/* tweenProp */_, value) { var transformObject = {}; var currentTransform = parseTransformString(this.element.getAttribute('transform')); @@ -3732,10 +4696,22 @@ Util: { parseStringOrigin: parseStringOrigin, parseTransformString: parseTransformString, parseTransformSVG: parseTransformSVG }, }; + /** + * A global namespace for 'addEventListener' string. + * @type {string} + */ var addEventListener = 'addEventListener'; + /** + * A global namespace for 'removeEventListener' string. + * @type {string} + */ var removeEventListener = 'removeEventListener'; + /** + * A global namespace for passive events support. + * @type {boolean} + */ var supportPassive = (function () { var result = false; try { @@ -3755,9 +4731,24 @@ return result; })(); + // general event options + + /** + * A global namespace for most scroll event listeners. + */ + var passiveHandler = supportPassive ? { passive: true } : false; + + /** + * A global namespace for mouse hover events. + * @type {[string, string]} + */ var mouseHoverEvents = ('onmouseleave' in document) ? ['mouseenter', 'mouseleave'] : ['mouseover', 'mouseout']; - var supportTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints) || false; + /** + * A global namespace for touch events support. + * @type {boolean} + */ + var supportTouch = 'ontouchstart' in window || 'msMaxTouchPoints' in navigator; // Component Util // events preventing scroll @@ -3769,22 +4760,36 @@ ? document.body : document.documentElement; - // scroll event options - // it's important to stop propagating when animating scroll - var passiveHandler = supportPassive ? { passive: false } : false; - - // prevent mousewheel or touch events while tweening scroll + /** + * Prevent further scroll events until scroll animation is over. + * @param {Event} e event object + */ function preventScroll(e) { if (this.scrolling) { e.preventDefault(); } } + + /** + * Returns the scroll element / target. + * @returns {{el: Element, st: Element}} + */ function getScrollTargets() { var el = this.element; return el === scrollContainer ? { el: document, st: document.body } : { el: el, st: el }; } + + /** + * Toggles scroll prevention callback on scroll events. + * @param {string} action addEventListener / removeEventListener + * @param {Element} element target + */ function toggleScrollEvents(action, element) { element[action](mouseHoverEvents[0], preventScroll, passiveHandler); element[action](touchOrWheel, preventScroll, passiveHandler); } + + /** + * Action performed before scroll animation start. + */ function scrollIn() { var targets = getScrollTargets.call(this); @@ -3794,6 +4799,9 @@ targets.st.style.pointerEvents = 'none'; } } + /** + * Action performed when scroll animation ends. + */ function scrollOut() { // prevent scroll when tweening scroll var targets = getScrollTargets.call(this); @@ -3805,22 +4813,38 @@ } // Component Functions + /** + * * Sets the scroll target. + * * Adds the scroll prevention event listener. + * * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartScroll(tweenProp) { // checking 0 will NOT add the render function - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element; scrollIn.call(this); - KUTE[tweenProp] = function (elem, a, b, v) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable */ elem.scrollTop = (numbers(a, b, v)) >> 0; + /* eslint-enable */ }; } } + + /** + * Removes the scroll prevention event listener. + */ function onCompleteScroll(/* tweenProp */) { scrollOut.call(this); } // Component Functions + /** + * Returns the current property computed style. + * @returns {number} computed style for property + */ function getScroll() { this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element; @@ -3830,7 +4854,13 @@ : this.element.scrollTop; } - function prepareScroll(prop, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareScroll(/* prop, */_, value) { return parseInt(value, 10); } @@ -3843,7 +4873,7 @@ }; // Full Component - var scrollProperty = { + var ScrollProperty = { component: 'scrollProperty', property: 'scroll', defaultValue: 0, @@ -3851,7 +4881,7 @@ functions: scrollFunctions, // export stuff to global Util: { - preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets, toggleScrollEvents: toggleScrollEvents, supportPassive: supportPassive, + preventScroll: preventScroll, scrollIn: scrollIn, scrollOut: scrollOut, getScrollTargets: getScrollTargets, toggleScrollEvents: toggleScrollEvents, }, }; @@ -3859,9 +4889,13 @@ var shadowProps$1 = ['boxShadow', 'textShadow']; // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartShadow(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { // let's start with the numbers | set unit | also determine inset var params = []; var unit = 'px'; @@ -3871,9 +4905,11 @@ var inset = (a[5] && a[5] !== 'none') || (b[5] && b[5] !== 'none') ? ' inset' : false; for (var i = 0; i < sl; i += 1) { + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ params.push(((numbers(a[i], b[i], v) * 1000 >> 0) / 1000) + unit); } // the final piece of the puzzle, the DOM update + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style[tweenProp] = inset ? colors(colA, colB, v) + params.join(' ') + inset : colors(colA, colB, v) + params.join(' '); @@ -3888,10 +4924,16 @@ // Component Util - // box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit - // text-shadow: none | offset-x offset-y blur-radius color |initial|inherit - // utility function to process values accordingly - // numbers must be floats and color must be rgb object + /** + * Return the box-shadow / text-shadow tween object. + * * box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit + * * text-shadow: none | offset-x offset-y blur-radius color |initial|inherit + * * numbers must be floats and color must be rgb object + * + * @param {(number | string)[]} shadow an `Array` with shadow parameters + * @param {string} tweenProp the property name + * @returns {KUTE.shadowObject} the property tween object + */ function processShadowArray(shadow, tweenProp) { var newShadow; @@ -3923,12 +4965,17 @@ newShadow = tweenProp === 'boxShadow' ? newShadow - : newShadow.filter(function (x, i) { return [0, 1, 2, 4].includes(i); }); + : newShadow.filter(function (_, i) { return [0, 1, 2, 4].includes(i); }); return newShadow; } // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getShadow(tweenProp/* , value */) { var cssShadow = getStyleForProperty(this.element, tweenProp); // '0px 0px 0px 0px rgb(0,0,0)' @@ -3937,6 +4984,12 @@ : cssShadow; } + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} propValue the property value + * @returns {KUTE.shadowObject} the property tween object + */ function prepareShadow(tweenProp, propValue) { // [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset] // parseProperty for boxShadow, builds basic structure with ready to tween values @@ -3973,7 +5026,7 @@ }; // Component Full - var shadowProperties = { + var ShadowProperties = { component: 'shadowProperties', properties: shadowProps, defaultValues: { @@ -3985,36 +5038,27 @@ Util: { processShadowArray: processShadowArray, trueColor: trueColor }, }; - /* textProperties = { - category: 'textProperties', - defaultValues: [], - interpolators: {units}, - functions = { prepareStart, prepareProperty, onStart:{} - } */ - // Component Properties - var textProperties$1 = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing']; + var textProperties = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing']; var textOnStart$1 = {}; + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function textPropOnStart(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style[tweenProp] = units(a.v, b.v, b.u, v); }; } } - textProperties$1.forEach(function (tweenProp) { + textProperties.forEach(function (tweenProp) { textOnStart$1[tweenProp] = textPropOnStart; }); - /* textProperties = { - category: 'textProperties', - defaultValues: [], - interpolators: {units} - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Properties var textProps = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing']; var textOnStart = {}; @@ -4024,11 +5068,22 @@ textOnStart[tweenProp] = textPropOnStart; }); + /** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} computed style for property + */ function getTextProp(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } - function prepareTextProp(prop, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareTextProp(/* prop */_, value) { return trueDimension(value); } @@ -4040,7 +5095,7 @@ }; // Component Full - var textProperties = { + var TextProperties = { component: 'textProperties', category: 'textProperties', properties: textProps, @@ -4071,10 +5126,16 @@ // Component Functions var onStartWrite = { + /** + * onStartWrite.text + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ text: function text(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { var chars = this._textChars; - var charsets = charSet[defaultOptions.textChars]; + var charsets = charSet[defaultOptions$1.textChars]; if (chars in charSet) { charsets = charSet[chars]; @@ -4082,12 +5143,13 @@ charsets = chars; } - KUTE[tweenProp] = function (elem, a, b, v) { + KEC[tweenProp] = function (elem, a, b, v) { var initialText = ''; var endText = ''; var finalText = b === '' ? ' ' : b; var firstLetterA = a.substring(0); var firstLetterB = b.substring(0); + /* eslint-disable */ var pointer = charsets[(Math.random() * charsets.length) >> 0]; if (a === ' ') { @@ -4106,13 +5168,22 @@ .substring(0, Math.min(v * firstLetterB.length, firstLetterB.length) >> 0); elem.innerHTML = v < 1 ? ((endText + pointer + initialText)) : finalText; } + /* eslint-enable */ }; } }, + /** + * onStartWrite.number + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ number: function number(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0 - KUTE[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { // numbers can be 0 + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable */ elem.innerHTML = numbers(a, b, v) >> 0; + /* eslint-enable */ }; } }, @@ -4137,8 +5208,10 @@ textWriteWrapper = document.createElement('SPAN'); textWriteWrapper.className = classNAME; textWriteWrapper.innerHTML = elementInnerHTML; + /* eslint-disable no-param-reassign -- impossible to satisfy */ el.appendChild(textWriteWrapper); el.innerHTML = textWriteWrapper.outerHTML; + /* eslint-enable no-param-reassign -- impossible to satisfy */ } else if (el.children.length && el.children[0].className === classNAME) { (assign = el.children, textWriteWrapper = assign[0]); } @@ -4189,9 +5262,11 @@ var oldTargetSegs = getTextPartsArray(target, 'text-part'); var newTargetSegs = getTextPartsArray(wrapContentsSpan(newText), 'text-part'); + /* eslint-disable no-param-reassign */ target.innerHTML = ''; target.innerHTML += oldTargetSegs.map(function (s) { s.className += ' oldText'; return s.outerHTML; }).join(''); target.innerHTML += newTargetSegs.map(function (s) { s.className += ' newText'; return s.outerHTML.replace(s.innerHTML, ''); }).join(''); + /* eslint-enable no-param-reassign */ return [oldTargetSegs, newTargetSegs]; } @@ -4230,8 +5305,10 @@ })); textTween = textTween.concat(newTargets.map(function (el, i) { function onComplete() { + /* eslint-disable no-param-reassign */ target.innerHTML = newText; target.playing = false; + /* eslint-enable no-param-reassign */ } options.duration = options.duration === 'auto' ? newTargetSegs[i].innerHTML.length * 75 : options.duration; @@ -4245,6 +5322,7 @@ textTween.start = function startTweens() { if (!target.playing) { textTween.forEach(function (tw) { return tw.start(); }); + // eslint-disable-next-line no-param-reassign target.playing = true; } }; @@ -4253,10 +5331,20 @@ } // Component Functions + /** + * Returns the current element `innerHTML`. + * @returns {string} computed style for property + */ function getWrite(/* tweenProp, value */) { return this.element.innerHTML; } + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number | string} the property tween object + */ function prepareText(tweenProp, value) { if (tweenProp === 'number') { return parseFloat(value); @@ -4273,7 +5361,7 @@ }; // Full Component - var textWrite = { + var TextWrite = { component: 'textWriteProperties', category: 'textWrite', properties: ['text', 'number'], @@ -4285,9 +5373,18 @@ Util: { charSet: charSet, createTextTweens: createTextTweens }, }; + /** + * Array Interpolation Function. + * + * @param {number[]} a start array + * @param {number[]} b end array + * @param {number} v progress + * @returns {number[]} the resulting array + */ function arrays(a, b, v) { - var result = []; - for (var i = 0, l = b.length; i < l; i += 1) { + var result = []; var length = b.length; + for (var i = 0; i < length; i += 1) { + // eslint-disable-next-line no-bitwise result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0) / 1000; } return result; @@ -4299,9 +5396,13 @@ // Component Functions var onStartTransform = { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ transform: function transform(tweenProp) { - if (CSS3Matrix && this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = function (elem, a, b, v) { + if (CSS3Matrix && this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { var matrix = new CSS3Matrix(); var tObject = {}; @@ -4334,29 +5435,35 @@ : matrix; // set element style + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = matrix.toString(); }; } }, + /** + * onStartTransform.CSS3Matrix + * + * Sets the update function for the property. + * @param {string} prop the property name + */ CSS3Matrix: function CSS3Matrix$1(prop) { if (CSS3Matrix && this.valuesEnd.transform) { - if (!KUTE[prop]) { KUTE[prop] = CSS3Matrix; } + if (!KEC[prop]) { KEC[prop] = CSS3Matrix; } } }, }; - /* transformMatrix = { - property : 'transform', - defaultValue: {}, - interpolators: {} - functions = { prepareStart, prepareProperty, onStart, crossCheck } - } */ - // Component name var matrixComponent = 'transformMatrix'; // Component Functions - function getTransform(tweenProp, value) { + /** + * Returns the current transform object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.transformMObject} transform object + */ + function getTransform(/* tweenProp, */_, value) { var transformObject = {}; var currentValue = this.element[matrixComponent]; @@ -4372,7 +5479,13 @@ return transformObject; } - function prepareTransform(tweenProp, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformMObject} the property tween object + */ + function prepareTransform(/* tweenProp, */_, value) { if (typeof (value) === 'object' && !value.length) { var pv; var transformObject = {}; @@ -4431,16 +5544,20 @@ throw Error(("KUTE.js - \"" + value + "\" is not valid/supported transform function")); } + /** + * Sets the end values for the next `to()` method call. + * @param {string} tweenProp the property name + */ function onCompleteTransform(tweenProp) { - var this$1$1 = this; - if (this.valuesEnd[tweenProp]) { - this.element[matrixComponent] = {}; - Object.keys(this.valuesEnd[tweenProp]).forEach(function (tf) { - this$1$1.element[matrixComponent][tf] = this$1$1.valuesEnd[tweenProp][tf]; - }); + this.element[matrixComponent] = Object.assign({}, this.valuesEnd[tweenProp]); } } + + /** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ function crossCheckTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective) { @@ -4498,19 +5615,19 @@ var Components = { BackgroundPosition: BackgroundPosition, BorderRadius: BorderRadius, - BoxModel: boxModel, - ClipProperty: clipProperty, + BoxModel: BoxModel, + ClipProperty: ClipProperty, ColorProperties: colorProperties, FilterEffects: filterEffects, HTMLAttributes: htmlAttributes, - OpacityProperty: opacityProperty, - SVGDraw: svgDraw, + OpacityProperty: OpacityProperty, + SVGDraw: SvgDrawProperty, SVGCubicMorph: svgCubicMorph, SVGTransform: svgTransform, - ScrollProperty: scrollProperty, - ShadowProperties: shadowProperties, - TextProperties: textProperties, - TextWriteProperties: textWrite, + ScrollProperty: ScrollProperty, + ShadowProperties: ShadowProperties, + TextProperties: TextProperties, + TextWriteProperties: TextWrite, MatrixTransform: matrixTransform, }; @@ -4520,7 +5637,15 @@ Components[component] = new AnimationDevelopment(compOps); }); - var version = "2.1.3"; + var version = "2.2.0alpha2"; + + // @ts-ignore + + /** + * A global namespace for library version. + * @type {string} + */ + var Version = version; var indexExtra = { Animation: AnimationDevelopment, @@ -4542,11 +5667,11 @@ Easing: Easing, CubicBezier: CubicBezier, Render: Render, - Interpolate: Interpolate, + Interpolate: interpolate, Process: Process, - Internals: Internals, + Internals: internals, Selector: selector, - Version: version, + Version: Version, }; return indexExtra; diff --git a/demo/src/kute-extra.min.js b/demo/src/kute-extra.min.js index 6c3058b..850a7ac 100644 --- a/demo/src/kute-extra.min.js +++ b/demo/src/kute-extra.min.js @@ -1,2 +1,2 @@ -// KUTE.js Extra v2.1.3 | thednp © 2021 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t=function(t,e,n,r,a){var i=this;this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;var o=function(t){return i.sampleCurveY(i.solveCurveX(t))};return Object.defineProperty(o,"name",{writable:!0}),o.name=a||"cubic-bezier("+[t,e,n,r]+")",o};t.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},t.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},t.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},t.prototype.solveCurveX=function(t){var e,n,r,a,i,o,s=1e-5;for(r=t,o=0;o<32;o+=1){if(a=this.sampleCurveX(r)-t,Math.abs(a)(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var e={},n=[],r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},a={},i={},o="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},s={};s.now=o;var u=0,c=function(t){for(var e=0;e1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},I.tween=V,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var N=function(t){function n(){for(var e=this,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),this.valuesStart={},this.valuesEnd={};var a=n[1],i=n[2];C.call(this,i,"end"),this._resetStart?this.valuesStart=a:C.call(this,a,"start"),this._resetStart||Object.keys(m).forEach((function(t){Object.keys(m[t]).forEach((function(n){m[t][n].call(e,n)}))})),this.paused=!1,this._pauseTime=null;var o=n[3];return this._repeat=o.repeat||d.repeat,this._repeatDelay=o.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=o.yoyo||d.yoyo,this._reversed=!1,this}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.start=function(e){var n=this;return this._resetStart&&(this.valuesStart=this._resetStart,_.call(this),Object.keys(m).forEach((function(t){Object.keys(m[t]).forEach((function(e){m[t][e].call(n,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((function(t){n.valuesRepeat[t]=n.valuesStart[t]})),t.prototype.start.call(this,e),this},n.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),L.call(this),this._startTime+=e.Time()-this._pauseTime,x(this),u||c()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){var t=this;Object.keys(this.valuesEnd).forEach((function(e){var n=t.valuesRepeat[e];t.valuesRepeat[e]=t.valuesEnd[e],t.valuesEnd[e]=n,t.valuesStart[e]=t.valuesRepeat[e]}))},n.prototype.update=function(t){var n,r=this,a=void 0!==t?t:e.Time();if(a1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=a,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.start()})),!1))},n}(V);I.tween=N;var R=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.on=function(t,e){["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e)},e.prototype.option=function(t,e){this["_"+t]=e},e}(N);I.tween=R;var U=function(t,e,n,r){var a=this;this.tweens=[],"offset"in d||(d.offset=0);var i=r||{};i.delay=i.delay||d.delay;var o=[];return Array.from(t).forEach((function(t,r){var s=I.tween;if(o[r]=i||{},o[r].delay=r>0?i.delay+(i.offset||d.offset):i.delay,!(t instanceof Element))throw Error("KUTE.js - "+t+" not instanceof [Element]");a.tweens.push(new s(t,e,n,o[r]))})),this.length=this.tweens.length,this};U.prototype.start=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.start(n)})),this},U.prototype.stop=function(){return this.tweens.map((function(t){return t.stop()})),this},U.prototype.pause=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.pause(n)})),this},U.prototype.resume=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.resume(n)})),this},U.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof U)e.chain(t.tweens);else{if(!(t instanceof I.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},U.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},U.prototype.removeTweens=function(){this.tweens=[]},U.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var q=function(t,e){var n;if(this.element=P(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,n=this.element.parentNode.getElementsByTagName("OUTPUT"),this.element.output=n[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof I.tween))throw TypeError("tween parameter is not ["+I.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};q.prototype.updateBar=function(){var t,n=this.toolbar.output;(t=this.paused?this.toolbar.value:(e.Time()-this._startTime)/this._duration)>.9999&&(t=1),t<.01&&(t=0);var r=this._reversed?1-t:t;this.toolbar.value=r,n&&(n.value=(1e4*r>>0)/100+"%")},q.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},q.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},q.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},q.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),e.Tick=cancelAnimationFrame(e.Ticker))},q.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=e.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),e.Tick=requestAnimationFrame(e.Ticker))};var F=function(t){try{if(t.component in h)throw Error("KUTE.js - "+t.component+" already registered");if(t.property in f)throw Error("KUTE.js - "+t.property+" already registered");this.setComponent(t)}catch(t){throw Error(t)}};F.prototype.setComponent=function(t){var e=this,n=t.component,r={prepareProperty:v,prepareStart:g,onStart:i,onComplete:y,crossCheck:m},o=t.category,s=t.property,u=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return h[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(f[s]=t.defaultValue,e.supports=s+" property"):t.defaultValues&&(Object.keys(t.defaultValues).forEach((function(e){f[e]=t.defaultValues[e]})),e.supports=(u||s)+" "+(s||o)+" properties"),t.defaultOptions&&Object.keys(t.defaultOptions).forEach((function(e){d[e]=t.defaultOptions[e]})),t.functions&&Object.keys(r).forEach((function(e){e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][o||s]||(r[e][n][o||s]=t.functions[e])):Object.keys(t.functions[e]).forEach((function(a){r[e][n]||(r[e][n]={}),r[e][n][a]||(r[e][n][a]=t.functions[e][a])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),b[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){E[e]||(E[e]=t.Util[e])})),e};var D=function(t){function e(){for(var e,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),(e=this).setComponent.apply(e,n)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setComponent=function(e){t.prototype.setComponent.call(this,e);var n=this,r={prepareProperty:v,prepareStart:g,onStart:i,onComplete:y,crossCheck:m},o=e.category,s=e.property,u=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;return"defaultValue"in e?(n.supports=s+" property",n.defaultValue=(""+e.defaultValue).length?"YES":"not set or incorrect"):e.defaultValues&&(n.supports=(u||s)+" "+(s||o)+" properties",n.defaultValues=Object.keys(e.defaultValues).length===u?"YES":"Not set or incomplete"),e.defaultOptions&&(n.extends=[],Object.keys(e.defaultOptions).forEach((function(t){n.extends.push(t)})),n.extends.length?n.extends="with <"+n.extends.join(", ")+"> new option(s)":delete n.extends),e.functions&&(n.interface=[],n.render=[],n.warning=[],Object.keys(r).forEach((function(t){t in e.functions?("prepareProperty"===t&&n.interface.push("fromTo()"),"prepareStart"===t&&n.interface.push("to()"),"onStart"===t&&(n.render="can render update")):("prepareProperty"===t&&n.warning.push("fromTo()"),"prepareStart"===t&&n.warning.push("to()"),"onStart"===t&&(n.render="no function to render update"))})),n.interface.length?n.interface=(o||s)+" can use ["+n.interface.join(", ")+"] method(s)":delete n.uses,n.warning.length?n.warning=(o||s)+" can't use ["+n.warning.join(", ")+"] method(s) because values aren't processed":delete n.warning),e.Interpolate?(n.uses=[],n.adds=[],Object.keys(e.Interpolate).forEach((function(t){var r=e.Interpolate[t];"function"==typeof r?(a[t]||n.adds.push(""+t),n.uses.push(""+t)):Object.keys(r).forEach((function(e){"function"!=typeof r[e]||a[t]||n.adds.push(""+e),n.uses.push(""+e)}))})),n.uses.length?n.uses="["+n.uses.join(", ")+"] interpolation function(s)":delete n.uses,n.adds.length?n.adds="new ["+n.adds.join(", ")+"] interpolation function(s)":delete n.adds):n.critical="For "+(s||o)+" no interpolation function[s] is set",e.Util&&(n.hasUtil=Object.keys(e.Util).join(",")),n},e}(F);function H(t,e,n){return+t+(e-t)*n}function B(t,e){for(var n,r=parseInt(t,10)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i>0)/100+"% "+(100*H(n[1],r[1],a)>>0)/100+"%"})}},z={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:H},functions:Q,Util:{trueDimension:B}};function X(t,e,n,r){return+t+(e-t)*r+n}function Y(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=X(n.v,r.v,r.u,a)})}var W={};["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"].forEach((function(t){W[t]=Y}));var $=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],G={};$.forEach((function(t){G[t]=0}));var Z={};$.forEach((function(t){Z[t]=Y}));var K={component:"borderRadiusProperties",category:"borderRadius",properties:$,defaultValues:G,Interpolate:{units:X},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:Z},Util:{trueDimension:B}};function J(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(a>.99||a<.01?(10*H(n,r,a)>>0)/10:H(n,r,a)>>0)+"px"})}var tt={};["top","left","width","height"].forEach((function(t){tt[t]=J}));var et=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],nt={};et.forEach((function(t){nt[t]=0}));var rt={};et.forEach((function(t){rt[t]=J}));var at={component:"boxModelProperties",category:"boxModel",properties:et,defaultValues:nt,Interpolate:{numbers:H},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){var n=B(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:rt}};var it={prepareStart:function(t){var e=M(this.element,t),n=M(this.element,"width"),r=M(this.element,"height");return/rect/.test(e)?e:[0,n,r,0]},prepareProperty:function(t,e){if(e instanceof Array)return e.map((function(t){return B(t)}));var n=e.replace(/rect|\(|\)/g,"");return(n=/,/g.test(n)?n.split(","):n.split(/\s/)).map((function(t){return B(t)}))},onStart:function(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(t,e,n,r){for(var a=0,i=[];a<4;a+=1){var o=e[a].v,s=n[a].v,u=n[a].u||"px";i[a]=(100*H(o,s,r)>>0)/100+u}t.style.clip="rect("+i+")"})}},ot={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:H},functions:it,Util:{trueDimension:B}};function st(t){var e;if(/rgb|rgba/.test(t)){var n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){var a=function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r})),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);e={r:a.r,g:a.g,b:a.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var o=getComputedStyle(i,null).color;o=/rgb/.test(o)?o.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",e={r:parseInt(o[0],10),g:parseInt(o[1],10),b:parseInt(o[2],10)}}return e}function ut(t,e,n){var r={},a=",";return Object.keys(e).forEach((function(a){"a"!==a?r[a]=H(t[a],e[a],n)>>0||0:t[a]&&e[a]&&(r[a]=(100*H(t[a],e[a],n)>>0)/100)})),r.a?"rgba("+r.r+a+r.g+a+r.b+a+r.a+")":"rgb("+r.r+a+r.g+a+r.b+")"}function ct(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=ut(n,r,a)})}var lt={};["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"].forEach((function(t){lt[t]=ct}));var pt=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],ht={};pt.forEach((function(t){ht[t]="#000"}));var ft={};pt.forEach((function(t){ft[t]=ct}));var dt={component:"colorProperties",category:"colors",properties:pt,defaultValues:ht,Interpolate:{numbers:H,colors:ut},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){return st(e)},onStart:ft},Util:{trueColor:st}};function vt(t,e,n){for(var r=[],a=0;a<3;a+=1)r[a]=(100*H(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+r.concat(ut(t[3],e[3],n)).join(" ")+")"}function gt(t){return t.replace("-r","R").replace("-s","S")}function mt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n+=1)e[n]=parseFloat(e[n]);return e[3]=st(e[3]),e}function yt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var a=0,i=r.length;a>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*H(n.blur,r.blur,a)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*H(n.saturate,r.saturate,a)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*H(n.invert,r.invert,a)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*H(n.grayscale,r.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*H(n.hueRotate,r.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*H(n.sepia,r.sepia,a)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*H(n.brightness,r.brightness,a)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*H(n.contrast,r.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?vt(n.dropShadow,r.dropShadow,a):"")})},crossCheck:function(t){var e=this;this.valuesEnd[t]&&Object.keys(this.valuesStart[t]).forEach((function(n){e.valuesEnd[t][n]||(e.valuesEnd[t][n]=e.valuesStart[t][n])}))}},wt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:H,blur:H,saturate:H,grayscale:H,brightness:H,contrast:H,sepia:H,invert:H,hueRotate:H,dropShadow:{numbers:H,colors:ut,dropShadow:vt}},functions:bt,Util:{parseDropShadow:mt,parseFilterString:yt,replaceDashNamespace:gt,trueColor:st}},Et={},xt="htmlAttributes",St=["fill","stroke","stop-color"];function kt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var Tt={prepareStart:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(t){var e=kt(t).replace(/_+[a-z]+/,""),a=n.element.getAttribute(e);r[e]=St.includes(e)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(t)?1:0)})),r},prepareProperty:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(a){var o=kt(a),s=/(%|[a-z]+)$/,u=n.element.getAttribute(o.replace(/_+[a-z]+/,""));if(St.includes(o))i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in Et)&&(Et[e]=function(t,e,n,r,a){t.setAttribute(e,ut(n,r,a))})},r[o]=st(e[a])||f.htmlAttributes[a];else if(null!==u&&s.test(u)){var c=B(u).u||B(e[a]).u,l=/%/.test(c)?"_percent":"_"+c;i.htmlAttributes[o+l]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in Et)&&(Et[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*H(n.v,r.v,a)>>0)/1e3+r.u)})},r[o+l]=B(e[a])}else s.test(e[a])&&null!==u&&(null===u||s.test(u))||(i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in Et)&&(Et[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*H(n,r,a)>>0)/1e3)})},r[o]=parseFloat(e[a]))})),r},onStart:{attr:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,n,r,a){Object.keys(r).forEach((function(i){e.attributes[i](t,i,n[i],r[i],a)}))})},attributes:function(t){!e[t]&&this.valuesEnd.attr&&(e[t]=Et)}}},Ot={component:xt,property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:H,colors:ut},functions:Tt,Util:{replaceUppercase:kt,trueColor:st,trueDimension:B}};var Mt={prepareStart:function(t){return M(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(1e3*H(n,r,a)>>0)/1e3})}},Ct={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:H},functions:Mt};function _t(t,e){return parseFloat(t)/100*e}function jt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function It(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!==t&&void 0!==e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*H(e.s,n.s,r)>>0)/100,o=(100*H(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},Ut={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:H},functions:Rt,Util:{getRectLength:jt,getPolyLength:It,getLineLength:At,getCircleLength:Pt,getEllipseLength:Lt,getTotalLength:Vt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Nt,percent:_t}};function qt(t){return t.map((function(t){return Array.isArray(t)?qt(t):Number.isNaN(+t)?t:+t}))}var Ft=4;function Dt(t,e){var n=Number.isNaN(+e)?Ft:+e;return n?t.map((function(t){return t.map((function(t){var e=+t,r=Math.pow(10,n);return e?e%1==0?e:Math.round(e*r)/r:t}))})):qt(t)}var Ht={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function Bt(t){var e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;if("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Ht[n]&&(t.segments.push([e].concat(r.splice(0,Ht[n]))),Ht[n]););}var Qt="Invalid path value";function zt(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void(t.index+=1)):49===e?(t.param=1,void(t.index+=1)):void(t.err=Qt+": invalid Arc flag "+e)}function Xt(t){return t>=48&&t<=57}function Yt(t){var e,n=t.index,r=t.max,a=n,i=!1,o=!1,s=!1,u=!1;if(a>=r)t.err=Qt+": missing param "+t.pathValue[a];else if(43!==(e=t.pathValue.charCodeAt(a))&&45!==e||(e=(a+=1)=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1;var e}function $t(t){return t>=48&&t<=57||43===t||45===t||46===t}function Gt(t){var e=t.max,n=t.pathValue.charCodeAt(t.index),r=Ht[t.pathValue[t.index].toLowerCase()];if(t.segmentStart=t.index,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0;default:return!1}}(n))if(t.index+=1,Wt(t),t.data=[],r){for(;;){for(var a=r;a>0;a-=1){if(97!=(32|n)||3!==a&&4!==a?Yt(t):zt(t),t.err.length)return;t.data.push(t.param),Wt(t),t.index=t.max)break;if(!$t(t.pathValue.charCodeAt(t.index)))break}Bt(t)}else Bt(t);else t.err=Qt+": "+t.pathValue[t.index]+" not a path command"}function Zt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function Kt(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Ht[e]===t.length-1&&/[achlmrqstvz]/g.test(e)}))}function Jt(t,e){if(Kt(t))return qt(t);var n=new Zt(t);for(Wt(n);n.index7){t[n].shift();for(var r=t[n],a=n;r.length;)e[n]="A",t.splice(a+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}function ne(t,e,n){var r=t[0],a=t.slice(1),i=t;if("TQ".indexOf(t[0])<0&&(e.qx=null,e.qy=null),"H"===r)i=["L",t[1],e.y1];else if("V"===r)i=["L",e.x1,t[1]];else if("S"===r){var o=function(t,e,n,r,a){return"CS".indexOf(a)>-1?{x1:2*t-n,y1:2*e-r}:{x1:t,y1:e}}(e.x1,e.y1,e.x2,e.y2,n),s=o.x1,u=o.y1;e.x1=s,e.y1=u,i=["C",s,u].concat(a)}else if("T"===r){var c=function(t,e,n,r,a){return"QT".indexOf(a)>-1?{qx:2*t-n,qy:2*e-r}:{qx:t,qy:e}}(e.x1,e.y1,e.qx,e.qy,n),l=c.qx,p=c.qy;e.qx=l,e.qy=p,i=["Q",l,p].concat(a)}else if("Q"===r){var h=a[0],f=a[1];e.qx=h,e.qy=f}return i}function re(t,e){if(function(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Ht[e]===t.length-1&&/[ACLMQZ]/.test(t[0])}))}(t))return qt(t);for(var n,r,a=te(t,e),i={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},o=[],s=a.length,u="",c=0;c1&&(x*=O=Math.sqrt(O),S*=O);var M=Math.pow(x,2),C=Math.pow(S,2),_=(i===o?-1:1)*Math.sqrt(Math.abs((M*C-M*T*T-C*k*k)/(M*T*T+C*k*k)));f=_*x*T/S+(y+b)/2,d=_*-S*k/x+(w+E)/2,p=Math.asin(((w-d)/S*Math.pow(10,9)>>0)/Math.pow(10,9)),h=Math.asin(((E-d)/S*Math.pow(10,9)>>0)/Math.pow(10,9)),p=yh&&(p-=2*Math.PI),!o&&h>p&&(h-=2*Math.PI)}var j=h-p;if(Math.abs(j)>v){var I=h,A=b,P=E;h=p+v*(o&&h>p?1:-1),b=f+x*Math.cos(h),E=d+S*Math.sin(h),m=ie(b,E,x,S,a,0,o,A,P,[h,I,f,d])}j=h-p;var L=Math.cos(p),V=Math.sin(p),N=Math.cos(h),R=Math.sin(h),U=Math.tan(j/4),q=4/3*x*U,F=4/3*S*U,D=[y,w],H=[y+q*V,w-F*L],B=[b+q*R,E-F*N],Q=[b,E];return H[0]=2*D[0]-H[0],H[1]=2*D[1]-H[1],c?[H,B,Q].concat(m):(m=[H,B,Q].concat(m).join().split(",")).map((function(t,e){return e%2?ae(m[e-1],t,g).y:ae(t,m[e+1],g).x}))}function oe(t,e,n,r,a,i){var o=1/3,s=2/3;return[o*t+s*n,o*e+s*r,o*a+s*n,o*i+s*r,a,i]}function se(t,e,n,r,a,i,o,s,u){var c=1-u;return{x:Math.pow(c,3)*t+c*c*3*u*n+3*c*u*u*a+Math.pow(u,3)*o,y:Math.pow(c,3)*e+c*c*3*u*r+3*c*u*u*i+Math.pow(u,3)*s}}function ue(t,e,n){var r=t[0],a=t[1];return[r+(e[0]-r)*n,a+(e[1]-a)*n]}function ce(t,e,n,r){var a=.5,i=[t,e],o=[n,r],s=ue(i,o,a),u=ue(o,s,a),c=ue(s,u,a),l=ue(u,c,a),p=ue(c,l,a),h=se.apply(0,i.concat(s,c,p,a)),f=se.apply(0,p.concat(l,u,o,0));return[h.x,h.y,f.x,f.y,n,r]}function le(t,e){"TQ".indexOf(t[0])<0&&(e.qx=null,e.qy=null);var n=t.slice(1),r=n[0],a=n[1];switch(t[0]){case"M":return e.x=r,e.y=a,t;case"A":return["C"].concat(ie.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"Q":return e.qx=r,e.qy=a,["C"].concat(oe.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"L":return["C"].concat(ce(e.x1,e.y1,t[1],t[2]));case"Z":return["C"].concat(ce(e.x1,e.y1,e.x,e.y))}return t}function pe(t,e){if(function(t){return Kt(t)&&t.slice(1).every((function(t){return"C"===t[0]}))}(t))return qt(t);for(var n,r,a=re(t,e),i={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},o=[],s="",u=a.length,c=0;c=0}function ge(t,e){var n=e||.5,r=t.slice(0,2),a=t.slice(2,4),i=t.slice(4,6),o=t.slice(6,8),s=ue(r,a,n),u=ue(a,i,n),c=ue(i,o,n),l=ue(s,u,n),p=ue(u,c,n),h=ue(l,p,n);return[["C"].concat(s,l,h),["C"].concat(p,c,o)]}function me(t,e,n,r,a){return a*(a*(-3*t+9*e-9*n+3*r)+6*t-12*e+6*n)-3*t+3*e}function ye(t,e,n,r,a,i,o,s,u){var c;(null===u||Number.isNaN(+u))&&(c=1),c>1&&(c=1),c<0&&(c=0);var l=c/2,p=0,h=0,f=0,d=0,v=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach((function(u,c){h=me(t,n,a,o,p=l*u+l),f=me(e,r,i,s,p),d+=v[c]*Math.sqrt(h*h+f*f)})),l*d}function be(t){return pe((e=he(te(t)),he(te(e,0)).replace(/(m|M)/g,"|$1").split("|").map((function(t){return t.trim()})).filter((function(t){return t})))[0]).map((function(t,e,n){var r=e&&n[e-1].slice(-2).concat(t.slice(1)),a=e?ye.apply(0,r):0;return{s:t,ss:e?a?ge(r):[t,t]:[t],l:a}}));var e}function we(t,e,n){var r=be(t),a=be(e),i=r.length,o=a.length,s=r.filter((function(t){return t.l})).length,u=a.filter((function(t){return t.l})).length,c=r.filter((function(t){return t.l})).reduce((function(t,e){return t+e.l}),0)/s||0,l=a.filter((function(t){return t.l})).reduce((function(t,e){return t+e.l}),0)/u||0,p=n||Math.max(i,o),h=[c,l],f=[p-i,p-o],d=0,v=[r,a].map((function(t,e){return t.l===p?t.map((function(t){return t.s})):t.map((function(t,n){return d=n&&f[e]&&t.l>=h[e],f[e]-=d?1:0,d?t.ss:[t.s]})).flat()}));return v[0].length===v[1].length?v:we(v[0],v[1],p)}function Ee(t){var e=t.length,n=e-1;return t.map((function(r,a){return t.map((function(r,i){var o,s=a+i;return 0===i||t[s]&&"M"===t[s][0]?(o=t[s],["M"].concat(o.slice(-2))):(s>=e&&(s-=n),t[s])}))}))}function xe(t,e){var n=t.length-1,r=[],a=0,i=Ee(t);return i.forEach((function(i,o){t.slice(1).forEach((function(r,i){a+=function(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}(t[(o+i)%n].slice(-2),e[i%n].slice(-2))})),r[o]=a,a=0})),i[r.indexOf(Math.min.apply(null,r))]}var Se={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=new RegExp("\\n","ig"),a=null;return e instanceof SVGElement?a=e:/^\.|^#/.test(e)&&(a=P(e)),"object"==typeof e&&e.curve?e:(a&&/path|glyph/.test(a.tagName)?n.original=a.getAttribute("d").replace(r,""):a||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,e,n,r){for(var a=[],i=e.curve,o=n.curve,s=0,u=o.length;s>0)/1e3)}t.setAttribute("d",1===r?n.original:he(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=we(this.valuesStart[t].original,this.valuesEnd[t].original),a=ve(r[0])!==ve(r[1])?fe(r[0]):qt(r[0]);this.valuesStart[t].curve=a,this.valuesEnd[t].curve=xe(r[1],a)}}}},ke={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:H,pathToString:he},functions:Se,Util:{pathToCurve:pe,pathToAbsolute:te,pathToString:he,parsePathString:Jt,getRotatedCurve:xe,getRotations:Ee,equalizeSegments:we,reverseCurve:fe,clonePath:qt,getDrawDirection:ve,splitCubic:ge,getCurveArray:be}};function Te(t,e){var n=e.x,r=e.width;return/[a-z]/i.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function Oe(t){var e={},n=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none";if(n instanceof Array)for(var r=0,a=n.length;r>0)/1e3+(i?","+(1e3*i>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(p?"skewX("+(1e3*p>>0)/1e3+")":"")+(h?"skewY("+(1e3*h>>0)/1e3+")":"")+(1!==s?"scale("+(1e3*s>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=Me.call(this,t,Oe(this.element.getAttribute("transform")));Object.keys(r).forEach((function(t){e[t]=r[t]}));var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));e.translate=[i.matrix.e,i.matrix.f],Object.keys(e).forEach((function(t){t in n&&"origin"!==t||(n[t]=e[t])}))}}},_e={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:H},functions:Ce,Util:{parseStringOrigin:Te,parseTransformString:Oe,parseTransformSVG:Me}},je=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){return t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){throw Error("Passive events are not supported")}return t}(),Ie="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],Ae="ontouchstart"in window||navigator.msMaxTouchPoints||!1?"touchstart":"mousewheel",Pe=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement,Le=!!je&&{passive:!1};function Ve(t){this.scrolling&&t.preventDefault()}function Ne(){var t=this.element;return t===Pe?{el:document,st:document.body}:{el:t,st:t}}function Re(t,e){e[t](Ie[0],Ve,Le),e[t](Ae,Ve,Le)}function Ue(){var t=Ne.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,Re("addEventListener",t.el),t.st.style.pointerEvents="none")}function qe(){var t=Ne.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,Re("removeEventListener",t.el),t.st.style.pointerEvents="")}var Fe={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Pe,this.element===Pe?window.pageYOffset||Pe.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e,10)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Pe,Ue.call(this),e[t]=function(t,e,n,r){t.scrollTop=H(e,n,r)>>0})},onComplete:function(){qe.call(this)}},De={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:H},functions:Fe,Util:{preventScroll:Ve,scrollIn:Ue,scrollOut:qe,getScrollTargets:Ne,toggleScrollEvents:Re,supportPassive:je}};function He(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){for(var i=[],o="textShadow"===t?3:4,s=3===o?n[3]:n[4],u=3===o?r[3]:r[4],c=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",l=0;l>0)/1e3+"px");e.style[t]=c?ut(s,u,a)+i.join(" ")+c:ut(s,u,a)+i.join(" ")})}var Be={};["boxShadow","textShadow"].forEach((function(t){Be[t]=He}));var Qe=["boxShadow","textShadow"];function ze(t,e){var n;3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t);for(var r=0;r<4;r+=1)n[r]=parseFloat(n[r]);return n[4]=st(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].includes(e)})),n}var Xe={};Qe.forEach((function(t){Xe[t]=He}));var Ye={component:"shadowProperties",properties:Qe,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:H,colors:ut},functions:{prepareStart:function(t){var e=M(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(e)?f[t]:e},prepareProperty:function(t,e){var n=e;if("string"==typeof n){var r="none",a=n.match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi);r=/inset/.test(n)?"inset":r,n=ze(n=(n=/inset/.test(n)?n.replace(/(\s+inset|inset+\s)/g,""):n).replace(a[0],"").split(" ").concat([a[0].replace(/\s/g,"")],[r]),t)}else n instanceof Array&&(n=ze(n,t));return n},onStart:Xe},Util:{processShadowArray:ze,trueColor:st}},We={};function $e(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=X(n.v,r.v,r.u,a)})}["fontSize","lineHeight","letterSpacing","wordSpacing"].forEach((function(t){We[t]=$e}));var Ge=["fontSize","lineHeight","letterSpacing","wordSpacing"],Ze={};Ge.forEach((function(t){Ze[t]=$e}));var Ke={component:"textProperties",category:"textProperties",properties:Ge,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:X},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){return B(e)},onStart:Ze},Util:{trueDimension:B}},Je=String("abcdefghijklmnopqrstuvwxyz").split(""),tn=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),en=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),nn=String("0123456789").split(""),rn=Je.concat(tn,nn),an=rn.concat(en),on={alpha:Je,upper:tn,symbols:en,numeric:nn,alphanumeric:rn,all:an},sn={text:function(t){if(!e[t]&&this.valuesEnd[t]){var n=this._textChars,r=on[d.textChars];n in on?r=on[n]:n&&n.length&&(r=n),e[t]=function(t,e,n,a){var i="",o="",s=""===n?" ":n,u=e.substring(0),c=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(o=c.substring(Math.min(a*c.length,c.length)>>0,0),t.innerHTML=a<1?o+l:s):" "===n?(i=u.substring(0,Math.min((1-a)*u.length,u.length)>>0),t.innerHTML=a<1?i+l:s):(i=u.substring(u.length,Math.min(a*u.length,u.length)>>0),o=c.substring(0,Math.min(a*c.length,c.length)>>0),t.innerHTML=a<1?o+l+i:s)}}},number:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(t,e,n,r){t.innerHTML=H(e,n,r)>>0})}};function un(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function cn(t,e){var n=[],r=t.children.length;if(r){for(var a,i=[],o=t.innerHTML,s=0,u=void 0,c=void 0,l=void 0;s>0)/1e3;return r}var pn="undefined"!=typeof DOMMatrix?DOMMatrix:null,hn="transformMatrix";var fn={BackgroundPosition:z,BorderRadius:K,BoxModel:at,ClipProperty:ot,ColorProperties:dt,FilterEffects:wt,HTMLAttributes:Ot,OpacityProperty:Ct,SVGDraw:Ut,SVGCubicMorph:ke,SVGTransform:_e,ScrollProperty:De,ShadowProperties:Ye,TextProperties:Ke,TextWriteProperties:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:H},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:sn},Util:{charSet:on,createTextTweens:function(t,e,n){if(t.playing)return!1;var r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);var a=I.tween,i=function(t,e){var n=cn(t,"text-part"),r=cn(un(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),o=i[0],s=i[1],u=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText")),l=[],p=0;return(l=(l=l.concat(u.map((function(t,e){return r.duration="auto"===r.duration?75*o[e].innerHTML.length:r.duration,r.delay=p,r.onComplete=null,p+=r.duration,new a(t,{text:t.innerHTML},{text:""},r)})))).concat(c.map((function(n,i){return r.duration="auto"===r.duration?75*s[i].innerHTML.length:r.duration,r.delay=p,r.onComplete=i===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=r.duration,new a(n,{text:""},{text:s[i].innerHTML},r)})))).start=function(){t.playing||(l.forEach((function(t){return t.start()})),t.playing=!0)},l}}},MatrixTransform:{component:hn,property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={},r=this.element.transformMatrix;return r?Object.keys(r).forEach((function(t){n[t]=r[t]})):Object.keys(e).forEach((function(t){n[t]="perspective"===t?e[t]:f.transform[t]})),n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n,r={},a={},i={},o={},s={},u=[{translate3d:a},{rotate3d:i},{skew:s},{scale3d:o}];return Object.keys(e).forEach((function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length)n=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e,10)})),r[t]="scale3d"===t?[n[0]||1,n[1]||1,n[2]||1]:[n[0]||0,n[1]||0,n[2]||0];else if(/[XYZ]/.test(t)){var u={};/translate/.test(t)?u=a:/rotate/.test(t)?u=i:/scale/.test(t)?u=o:/skew/.test(t)&&(u=s),u[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t],10)}else"skew"===t?(n=e[t].map((function(t){return parseInt(t,10)||0})),r[t]=[n[0]||0,n[1]||0]):r[t]=parseInt(e[t],10)})),u.forEach((function(t){var e=Object.keys(t)[0],n=t[e];Object.keys(n).length&&!r[e]&&(r[e]="scale3d"===e?[n.x||1,n.y||1,n.z||1]:"skew"===e?[n.x||0,n.y||0]:[n.x||0,n.y||0,n.z||0])})),r}throw Error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){pn&&this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){var i=new pn,o={};Object.keys(r).forEach((function(t){o[t]="perspective"===t?H(n[t],r[t],a):ln(n[t],r[t],a)})),o.perspective&&(i.m34=-1/o.perspective),i=o.translate3d?i.translate(o.translate3d[0],o.translate3d[1],o.translate3d[2]):i,i=o.rotate3d?i.rotate(o.rotate3d[0],o.rotate3d[1],o.rotate3d[2]):i,o.skew&&(i=o.skew[0]?i.skewX(o.skew[0]):i,i=o.skew[1]?i.skewY(o.skew[1]):i),i=o.scale3d?i.scale(o.scale3d[0],o.scale3d[1],o.scale3d[2]):i,e.style[t]=i.toString()})},CSS3Matrix:function(t){pn&&this.valuesEnd.transform&&(e[t]||(e[t]=pn))}},onComplete:function(t){var e=this;this.valuesEnd[t]&&(this.element.transformMatrix={},Object.keys(this.valuesEnd[t]).forEach((function(n){e.element.transformMatrix[n]=e.valuesEnd[t][n]})))},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:H,translate3d:ln,rotate3d:ln,skew:ln,scale3d:ln}}};Object.keys(fn).forEach((function(t){var e=fn[t];fn[t]=new D(e)}));return{Animation:D,Components:fn,Tween:R,fromTo:function(t,e,n,r){var a=r||{};return new(0,I.tween)(P(t),e,n,a)},to:function(t,e,n){var r=n||{},a=I.tween;return r.resetStart=e,new a(P(t),e,e,r)},TweenCollection:U,ProgressBar:q,allFromTo:function(t,e,n,r){var a=r||{};return new U(P(t,!0),e,n,a)},allTo:function(t,e,n){var r=n||{};return n.resetStart=e,new U(P(t,!0),e,e,r)},Objects:w,Util:E,Easing:A,CubicBezier:t,Render:p,Interpolate:a,Process:j,Internals:T,Selector:P,Version:"2.1.3"}})); +// KUTE.js Extra v2.2.0alpha2 | thednp © 2021 | MIT-License +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t=function(t,e,n,r,a){var i=this;this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;var o=function(t){return i.sampleCurveY(i.solveCurveX(t))};return Object.defineProperty(o,"name",{writable:!0}),o.name=a||"cubic-bezier("+[t,e,n,r]+")",o};t.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},t.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},t.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},t.prototype.solveCurveX=function(t){var e,n,r,a,i,o,s=1e-5;for(r=t,o=0;o<32;o+=1){if(a=this.sampleCurveX(r)-t,Math.abs(a)(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var e={},n=[],r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},a={},i={},o="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},s={};s.now=o;var u=0,c=function(t){for(var e=0;e1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},I.tween=N;var V=function(t){function n(){for(var e=this,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),this.valuesStart={},this.valuesEnd={};var a=n.slice(1),i=a[0],o=a[1],s=a[2];return _.call(this,o,"end"),this._resetStart?this.valuesStart=i:_.call(this,i,"start"),this._resetStart||Object.keys(m).forEach((function(t){Object.keys(m[t]).forEach((function(n){m[t][n].call(e,n)}))})),this.paused=!1,this._pauseTime=null,this._repeat=s.repeat||d.repeat,this._repeatDelay=s.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=s.yoyo||d.yoyo,this._reversed=!1,this}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.start=function(e){var n=this;return this._resetStart&&(this.valuesStart=this._resetStart,C.call(this),Object.keys(m).forEach((function(t){Object.keys(m[t]).forEach((function(e){m[t][e].call(n,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((function(t){n.valuesRepeat[t]=n.valuesStart[t]})),t.prototype.start.call(this,e),this},n.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),L.call(this),this._startTime+=e.Time()-this._pauseTime,x(this),u||c()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(S(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){var t=this;Object.keys(this.valuesEnd).forEach((function(e){var n=t.valuesRepeat[e];t.valuesRepeat[e]=t.valuesEnd[e],t.valuesEnd[e]=n,t.valuesStart[e]=t.valuesRepeat[e]}))},n.prototype.update=function(t){var n,r=this,a=void 0!==t?t:e.Time();if(a1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=a,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.start()})),!1))},n}(N);I.tween=V;var R=function(t){function e(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return t.apply(this,e),this}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.on=function(t,e){return["start","stop","update","complete","pause","resume"].indexOf(t)>-1&&(this["_on"+(t.charAt(0).toUpperCase()+t.slice(1))]=e),this},e.prototype.option=function(t,e){return this["_"+t]=e,this},e}(V);I.tween=R;var U=function(t,e,n,r){var a=this,i=I.tween;this.tweens=[];var o=r||{};o.delay=o.delay||d.delay;var s=[];return Array.from(t).forEach((function(t,r){if(s[r]=o||{},s[r].delay=r>0?o.delay+(o.offset||d.offset):o.delay,!(t instanceof Element))throw Error("KUTE - "+t+" is not instanceof Element");a.tweens.push(new i(t,e,n,s[r]))})),this.length=this.tweens.length,this};U.prototype.start=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.start(n)})),this},U.prototype.stop=function(){return this.tweens.map((function(t){return t.stop()})),this},U.prototype.pause=function(){return this.tweens.map((function(t){return t.pause()})),this},U.prototype.resume=function(){return this.tweens.map((function(t){return t.resume()})),this},U.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof U)e.chain(t.tweens);else{if(!(t instanceof I.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},U.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},U.prototype.removeTweens=function(){this.tweens=[]},U.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var F=function(t,e){var n;if(this.element=P(t),this.element.tween=e,this.element.tween.toolbar=this.element,this.element.toolbar=this,n=this.element.parentNode.getElementsByTagName("OUTPUT"),this.element.output=n[0],!(this.element instanceof HTMLInputElement))throw TypeError("Target element is not [HTMLInputElement]");if("range"!==this.element.type)throw TypeError("Target element is not a range input");if(!(e instanceof I.tween))throw TypeError("tween parameter is not ["+I.tween+"]");this.element.setAttribute("value",0),this.element.setAttribute("min",0),this.element.setAttribute("max",1),this.element.setAttribute("step",1e-4),this.element.tween._onUpdate=this.updateBar,this.element.addEventListener("mousedown",this.downAction,!1)};F.prototype.updateBar=function(){var t,n=this.toolbar.output;(t=this.paused?this.toolbar.value:(e.Time()-this._startTime)/this._duration)>.9999&&(t=1),t<.01&&(t=0);var r=this._reversed?1-t:t;this.toolbar.value=r,n&&(n.value=(1e4*r>>0)/100+"%")},F.prototype.toggleEvents=function(t){this.element[t+"EventListener"]("mousemove",this.moveAction,!1),this.element[t+"EventListener"]("mouseup",this.upAction,!1)},F.prototype.updateTween=function(){var t=(this.tween._reversed?1-this.value:this.value)*this.tween._duration-1e-4;this.tween._startTime=0,this.tween.update(t)},F.prototype.moveAction=function(){this.toolbar.updateTween.call(this)},F.prototype.downAction=function(){this.tween.playing||this.tween.start(),this.tween.paused||(this.tween.pause(),this.toolbar.toggleEvents("add"),e.Tick=cancelAnimationFrame(e.Ticker))},F.prototype.upAction=function(){this.tween.paused&&(this.tween.paused&&this.tween.resume(),this.tween._startTime=e.Time()-(this.tween._reversed?1-this.value:this.value)*this.tween._duration,this.toolbar.toggleEvents("remove"),e.Tick=requestAnimationFrame(e.Ticker))};var q=I.tween;var D=I.tween;var H=function(t){try{if(t.component in h)throw Error("KUTE - "+t.component+" already registered");if(t.property in f)throw Error("KUTE - "+t.property+" already registered")}catch(t){throw Error(t)}var e=this,n=t.component,r={prepareProperty:v,prepareStart:g,onStart:i,onComplete:y,crossCheck:m},o=t.category,s=t.property,u=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return h[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(f[s]=t.defaultValue,e.supports=s+" property"):t.defaultValues&&(Object.keys(t.defaultValues).forEach((function(e){f[e]=t.defaultValues[e]})),e.supports=(u||s)+" "+(s||o)+" properties"),t.defaultOptions&&Object.assign(d,t.defaultOptions),t.functions&&Object.keys(r).forEach((function(e){e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][o||s]||(r[e][n][o||s]=t.functions[e])):Object.keys(t.functions[e]).forEach((function(a){r[e][n]||(r[e][n]={}),r[e][n][a]||(r[e][n][a]=t.functions[e][a])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),b[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){E[e]||(E[e]=t.Util[e])})),e},B=function(t){function e(e){t.call(this,e);var n=this,r={prepareProperty:v,prepareStart:g,onStart:i,onComplete:y,crossCheck:m},o=e.category,s=e.property,u=e.properties&&e.properties.length||e.subProperties&&e.subProperties.length;return"defaultValue"in e?(n.supports=s+" property",n.defaultValue=(""+e.defaultValue).length?"YES":"not set or incorrect"):e.defaultValues&&(n.supports=(u||s)+" "+(s||o)+" properties",n.defaultValues=Object.keys(e.defaultValues).length===u?"YES":"Not set or incomplete"),e.defaultOptions&&(n.extends=[],Object.keys(e.defaultOptions).forEach((function(t){n.extends.push(t)})),n.extends.length?n.extends="with <"+n.extends.join(", ")+"> new option(s)":delete n.extends),e.functions&&(n.interface=[],n.render=[],n.warning=[],Object.keys(r).forEach((function(t){t in e.functions?("prepareProperty"===t&&n.interface.push("fromTo()"),"prepareStart"===t&&n.interface.push("to()"),"onStart"===t&&(n.render="can render update")):("prepareProperty"===t&&n.warning.push("fromTo()"),"prepareStart"===t&&n.warning.push("to()"),"onStart"===t&&(n.render="no function to render update"))})),n.interface.length?n.interface=(o||s)+" can use ["+n.interface.join(", ")+"] method(s)":delete n.uses,n.warning.length?n.warning=(o||s)+" can't use ["+n.warning.join(", ")+"] method(s) because values aren't processed":delete n.warning),e.Interpolate?(n.uses=[],n.adds=[],Object.keys(e.Interpolate).forEach((function(t){var r=e.Interpolate[t];"function"==typeof r?(a[t]||n.adds.push(""+t),n.uses.push(""+t)):Object.keys(r).forEach((function(e){"function"!=typeof r[e]||a[t]||n.adds.push(""+e),n.uses.push(""+e)}))})),n.uses.length?n.uses="["+n.uses.join(", ")+"] interpolation function(s)":delete n.uses,n.adds.length?n.adds="new ["+n.adds.join(", ")+"] interpolation function(s)":delete n.adds):n.critical="For "+(s||o)+" no interpolation function[s] is set",e.Util&&(n.hasUtil=Object.keys(e.Util).join(",")),n}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(H);function Q(t,e,n){return+t+(e-t)*n}var z=function(t,e){for(var n,r=parseInt(t,10)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i>0)/100+"% "+(100*Q(n[1],r[1],a)>>0)/100+"%"})}},Y={component:"backgroundPositionProp",property:"backgroundPosition",defaultValue:[50,50],Interpolate:{numbers:Q},functions:X,Util:{trueDimension:z}};function W(t,e,n,r){return+t+(e-t)*r+n}function $(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=W(n.v,r.v,r.u,a)})}var G={};["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"].forEach((function(t){G[t]=$}));var Z=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],K={};Z.forEach((function(t){K[t]=0}));var J={};Z.forEach((function(t){J[t]=$}));var tt={component:"borderRadiusProperties",category:"borderRadius",properties:Z,defaultValues:K,Interpolate:{units:W},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){return z(e)},onStart:J},Util:{trueDimension:z}};function et(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(a>.99||a<.01?(10*Q(n,r,a)>>0)/10:Q(n,r,a)>>0)+"px"})}var nt={};["top","left","width","height"].forEach((function(t){nt[t]=et}));var rt=["top","left","width","height","right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],at={};rt.forEach((function(t){at[t]=0}));var it={};rt.forEach((function(t){it[t]=et}));var ot={component:"boxModelProperties",category:"boxModel",properties:rt,defaultValues:at,Interpolate:{numbers:Q},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){var n=z(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:it}};var st={prepareStart:function(t){var e=this.element,n=M(e,t),r=M(e,"width"),a=M(e,"height");return/rect/.test(n)?n:[0,r,a,0]},prepareProperty:function(t,e){if(e instanceof Array)return e.map((function(t){return z(t)}));var n=e.replace(/rect|\(|\)/g,"");return(n=/,/g.test(n)?n.split(","):n.split(/\s/)).map((function(t){return z(t)}))},onStart:function(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(t,e,n,r){for(var a=0,i=[];a<4;a+=1){var o=e[a].v,s=n[a].v,u=n[a].u||"px";i[a]=(100*Q(o,s,r)>>0)/100+u}t.style.clip="rect("+i+")"})}},ut={component:"clipProperty",property:"clip",defaultValue:[0,0,0,0],Interpolate:{numbers:Q},functions:st,Util:{trueDimension:z}},ct=function(t){var e;if(/rgb|rgba/.test(t)){var n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){var a=function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r})),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);e={r:a.r,g:a.g,b:a.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var o=getComputedStyle(i,null).color;o=/rgb/.test(o)?o.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",e={r:parseInt(o[0],10),g:parseInt(o[1],10),b:parseInt(o[2],10)}}return e};function lt(t,e,n){var r={},a=",";return Object.keys(e).forEach((function(a){"a"!==a?r[a]=Q(t[a],e[a],n)>>0||0:t[a]&&e[a]&&(r[a]=(100*Q(t[a],e[a],n)>>0)/100)})),r.a?"rgba("+r.r+a+r.g+a+r.b+a+r.a+")":"rgb("+r.r+a+r.g+a+r.b+")"}function pt(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=lt(n,r,a)})}var ht={};["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"].forEach((function(t){ht[t]=pt}));var ft=["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],dt={};ft.forEach((function(t){dt[t]="#000"}));var vt={};ft.forEach((function(t){vt[t]=pt}));var gt={component:"colorProperties",category:"colors",properties:ft,defaultValues:dt,Interpolate:{numbers:Q,colors:lt},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){return ct(e)},onStart:vt},Util:{trueColor:ct}};function mt(t,e,n){for(var r=[],a=0;a<3;a+=1)r[a]=(100*Q(t[a],e[a],n)>>0)/100+"px";return"drop-shadow("+r.concat(lt(t[3],e[3],n)).join(" ")+")"}function yt(t){return t.replace("-r","R").replace("-s","S")}function bt(t){var e;3===t.length?e=[t[0],t[1],0,t[2]]:4===t.length&&(e=[t[0],t[1],t[2],t[3]]);for(var n=0;n<3;n+=1)e[n]=parseFloat(e[n]);return e[3]=ct(e[3]),e}function wt(t){var e={},n=t.match(/(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g),r="none"!==t?n:"none";if(r instanceof Array)for(var a=0,i=r.length;a>0)/100+"%)":"")+(n.blur||r.blur?"blur("+(100*Q(n.blur,r.blur,a)>>0)/100+"em)":"")+(n.saturate||r.saturate?"saturate("+(100*Q(n.saturate,r.saturate,a)>>0)/100+"%)":"")+(n.invert||r.invert?"invert("+(100*Q(n.invert,r.invert,a)>>0)/100+"%)":"")+(n.grayscale||r.grayscale?"grayscale("+(100*Q(n.grayscale,r.grayscale,a)>>0)/100+"%)":"")+(n.hueRotate||r.hueRotate?"hue-rotate("+(100*Q(n.hueRotate,r.hueRotate,a)>>0)/100+"deg)":"")+(n.sepia||r.sepia?"sepia("+(100*Q(n.sepia,r.sepia,a)>>0)/100+"%)":"")+(n.brightness||r.brightness?"brightness("+(100*Q(n.brightness,r.brightness,a)>>0)/100+"%)":"")+(n.contrast||r.contrast?"contrast("+(100*Q(n.contrast,r.contrast,a)>>0)/100+"%)":"")+(n.dropShadow||r.dropShadow?mt(n.dropShadow,r.dropShadow,a):"")})},crossCheck:function(t){var e=this;this.valuesEnd[t]&&Object.keys(this.valuesStart[t]).forEach((function(n){e.valuesEnd[t][n]||(e.valuesEnd[t][n]=e.valuesStart[t][n])}))}},xt={component:"filterEffects",property:"filter",defaultValue:{opacity:100,blur:0,saturate:100,grayscale:0,brightness:100,contrast:100,sepia:0,invert:0,hueRotate:0,dropShadow:[0,0,0,{r:0,g:0,b:0}],url:""},Interpolate:{opacity:Q,blur:Q,saturate:Q,grayscale:Q,brightness:Q,contrast:Q,sepia:Q,invert:Q,hueRotate:Q,dropShadow:{numbers:Q,colors:lt,dropshadow:mt}},functions:Et,Util:{parseDropShadow:bt,parseFilterString:wt,replaceDashNamespace:yt,trueColor:ct}},St={},kt="htmlAttributes",Tt=["fill","stroke","stop-color"];function Ot(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var Mt={prepareStart:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(t){var e=Ot(t).replace(/_+[a-z]+/,""),a=n.element.getAttribute(e);r[e]=Tt.includes(e)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(t)?1:0)})),r},prepareProperty:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(a){var o=Ot(a),s=/(%|[a-z]+)$/,u=n.element.getAttribute(o.replace(/_+[a-z]+/,""));if(Tt.includes(o))i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in St)&&(St[e]=function(t,e,n,r,a){t.setAttribute(e,lt(n,r,a))})},r[o]=ct(e[a])||f.htmlAttributes[a];else if(null!==u&&s.test(u)){var c=z(u).u||z(e[a]).u,l=/%/.test(c)?"_percent":"_"+c;i.htmlAttributes[o+l]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in St)&&(St[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*Q(n.v,r.v,a)>>0)/1e3+r.u)})},r[o+l]=z(e[a])}else s.test(e[a])&&null!==u&&(null===u||s.test(u))||(i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in St)&&(St[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*Q(n,r,a)>>0)/1e3)})},r[o]=parseFloat(e[a]))})),r},onStart:{attr:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,n,r,a){Object.keys(r).forEach((function(i){e.attributes[i](t,i,n[i],r[i],a)}))})},attributes:function(t){!e[t]&&this.valuesEnd.attr&&(e[t]=St)}}},_t={component:kt,property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:Q,colors:lt},functions:Mt,Util:{replaceUppercase:Ot,trueColor:ct,trueDimension:z}};var Ct={prepareStart:function(t){return M(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(1e3*Q(n,r,a)>>0)/1e3})}},jt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:Q},functions:Ct};function It(t,e){return parseFloat(t)/100*e}function At(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Pt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!==t&&void 0!==e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*Q(e.s,n.s,r)>>0)/100,o=(100*Q(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}},qt={component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:Q},functions:Ft,Util:{getRectLength:At,getPolyLength:Pt,getLineLength:Lt,getCircleLength:Nt,getEllipseLength:Vt,getTotalLength:Rt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Ut,percent:It}},Dt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function Ht(t){var e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;for("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L");r.length>=Dt[n]&&(t.segments.push([e].concat(r.splice(0,Dt[n]))),Dt[n]););}var Bt="Invalid path value";function Qt(t){var e=t.index,n=t.pathValue.charCodeAt(e);return 48===n?(t.param=0,void(t.index+=1)):49===n?(t.param=1,void(t.index+=1)):void(t.err=Bt+': invalid Arc flag "'+n+'", expecting 0 or 1 at index '+e)}function zt(t){return t>=48&&t<=57}function Xt(t){var e,n=t.max,r=t.pathValue,a=t.index,i=a,o=!1,s=!1,u=!1,c=!1;if(i>=n)t.err=Bt+" at "+i+": missing param "+r[i];else if(43!==(e=r.charCodeAt(i))&&45!==e||(e=(i+=1)=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1}function Wt(t){return t>=48&&t<=57||43===t||45===t||46===t}function $t(t){var e=t.max,n=t.pathValue,r=t.index,a=n.charCodeAt(r),i=Dt[n[r].toLowerCase()];if(t.segmentStart=r,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:return!0;default:return!1}}(a))if(t.index+=1,Yt(t),t.data=[],i){for(;;){for(var o=i;o>0;o-=1){if(97!=(32|a)||3!==o&&4!==o?Xt(t):Qt(t),t.err.length)return;t.data.push(t.param),Yt(t),t.index=t.max)break;if(!Wt(n.charCodeAt(t.index)))break}Ht(t)}else Ht(t);else t.err=Bt+": "+n[r]+" not a path command"}function Gt(t){return t.map((function(t){return Array.isArray(t)?[].concat(t):t}))}function Zt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function Kt(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Dt[e]===t.length-1&&"achlmqstvz".includes(e)}))}function Jt(t){if(Array.isArray(t)&&Kt(t))return Gt(t);var e=new Zt(t);for(Yt(e);e.index7){t[n].shift();for(var r=t[n],a=n;r.length;)e[n]="A",t.splice(a+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}function re(t,e,n){var r=t[0],a=e.x1,i=e.y1,o=e.x2,s=e.y2,u=t.slice(1).map(Number),c=t;if("TQ".includes(r)||(e.qx=null,e.qy=null),"H"===r)c=["L",t[1],i];else if("V"===r)c=["L",a,t[1]];else if("S"===r){var l=function(t,e,n,r,a){return"CS".includes(a)?{x1:2*t-n,y1:2*e-r}:{x1:t,y1:e}}(a,i,o,s,n),p=l.x1,h=l.y1;e.x1=p,e.y1=h,c=["C",p,h].concat(u)}else if("T"===r){var f=function(t,e,n,r,a){return"QT".includes(a)?{qx:2*t-n,qy:2*e-r}:{qx:t,qy:e}}(a,i,e.qx,e.qy,n),d=f.qx,v=f.qy;e.qx=d,e.qy=v,c=["Q",d,v].concat(u)}else if("Q"===r){var g=u[0],m=u[1];e.qx=g,e.qy=m}return c}var ae={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null};function ie(t){if(function(t){return te(t)&&t.every((function(t){return"ACLMQZ".includes(t[0])}))}(t))return Gt(t);for(var e=ee(t),n=Object.assign({},ae),r=[],a=e.length,i="",o="",s=0;s1&&(y*=M=Math.sqrt(M),b*=M);var _=y*y,C=b*b,j=(i===o?-1:1)*Math.sqrt(Math.abs((_*C-_*O*O-C*T*T)/(_*O*O+C*T*T)));d=j*y*O/b+(g+w)/2,v=j*-b*T/y+(m+E)/2,h=(Math.asin((m-v)/b)*Math.pow(10,9)>>0)/Math.pow(10,9),f=(Math.asin((E-v)/b)*Math.pow(10,9)>>0)/Math.pow(10,9),h=gf&&(h-=2*Math.PI),!o&&f>h&&(f-=2*Math.PI)}var I=f-h;if(Math.abs(I)>x){var A=f,P=w,L=E;f=h+x*(o&&f>h?1:-1),k=ue(w=d+y*Math.cos(f),E=v+b*Math.sin(f),y,b,a,0,o,P,L,[f,A,d,v])}I=f-h;var N=Math.cos(h),V=Math.sin(h),R=Math.cos(f),U=Math.sin(f),F=Math.tan(I/4),q=4/3*y*F,D=4/3*b*F,H=[g,m],B=[g+q*V,m-D*N],Q=[w+q*U,E-D*R],z=[w,E];if(B[0]=2*H[0]-B[0],B[1]=2*H[1]-B[1],c)return B.concat(Q,z,k);for(var X=[],Y=0,W=(k=B.concat(Q,z,k)).length;Y=1?e:n)>=1?Math.pow(10,n):1;return t.map((function(t){var e=t.slice(1).map(Number).map((function(t){return t%1==0?t:Math.round(t*r)/r}));return[t[0]].concat(e)}))}(t,e).map((function(t){return t[0]+t.slice(1).join(" ")})).join("")}function me(t){var e=t.slice(1).map((function(e,n,r){return n?r[n-1].slice(-2).concat(e.slice(1)):t[0].slice(1).concat(e.slice(1))})).map((function(t){return t.map((function(e,n){return t[t.length-n-2*(1-n%2)]}))})).reverse();return[["M"].concat(e[0].slice(0,2))].concat(e.map((function(t){return["C"].concat(t.slice(2))})))}function ye(t,e,n,r,a,i,o,s){return 3*((s-e)*(n+a)-(o-t)*(r+i)+r*(t-a)-n*(e-i)+s*(a+t/3)-o*(i+e/3))/20}function be(t){return function(t){var e=0,n=0,r=0;return de(t).map((function(t){var a,i;return"M"===t[0]?(e=(a=t)[1],n=a[2],0):(r=ye.apply(void 0,[e,n].concat(t.slice(1))),i=t.slice(-2).map(Number),e=i[0],n=i[1],r)})).reduce((function(t,e){return t+e}),0)}(de(t))>=0}function we(t){var e=.5,n=t.slice(0,2),r=t.slice(2,4),a=t.slice(4,6),i=t.slice(6,8),o=pe(n,r,e),s=pe(r,a,e),u=pe(a,i,e),c=pe(o,s,e),l=pe(s,u,e),p=pe(c,l,e);return[["C"].concat(o,c,p),["C"].concat(l,u,i)]}function Ee(t){return ge(ee(t),0).replace(/(m|M)/g,"|$1").split("|").map((function(t){return t.trim()})).filter((function(t){return t}))}function xe(t,e,n,r,a){return a*(a*(-3*t+9*e-9*n+3*r)+6*t-12*e+6*n)-3*t+3*e}function Se(t,e,n,r,a,i,o,s,u){var c=u;(null===u||Number.isNaN(+u))&&(c=1),c>1&&(c=1),c<0&&(c=0);var l=c/2,p=0,h=0,f=0,d=0,v=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach((function(u,c){h=xe(t,n,a,o,p=l*u+l),f=xe(e,r,i,s,p),d+=v[c]*Math.sqrt(h*h+f*f)})),l*d}function ke(t){return de(Ee(t)[0]).map((function(t,e,n){var r=e&&n[e-1].slice(-2).concat(t.slice(1)),a=e?Se.apply(void 0,r):0;return{s:t,ss:e?a?we(r):[t,t]:[t],l:a}}))}function Te(t,e,n){var r=ke(t),a=ke(e),i=r.length,o=a.length,s=r.filter((function(t){return t.l})).length,u=a.filter((function(t){return t.l})).length,c=r.filter((function(t){return t.l})).reduce((function(t,e){return t+e.l}),0)/s||0,l=a.filter((function(t){return t.l})).reduce((function(t,e){return t+e.l}),0)/u||0,p=n||Math.max(i,o),h=[c,l],f=[p-i,p-o],d=0,v=[r,a].map((function(t,e){return t.l===p?t.map((function(t){return t.s})):t.map((function(t,n){return d=n&&f[e]&&t.l>=h[e],f[e]-=d?1:0,d?t.ss:[t.s]})).flat()}));return v[0].length===v[1].length?v:Te(v[0],v[1],p)}function Oe(t){var e=t.length,n=e-1;return t.map((function(r,a){return t.map((function(r,i){var o,s=a+i;return 0===i||t[s]&&"M"===t[s][0]?(o=t[s],["M"].concat(o.slice(-2))):(s>=e&&(s-=n),t[s])}))}))}function Me(t,e){var n=t.length-1,r=[],a=0,i=Oe(t);return i.forEach((function(i,o){t.slice(1).forEach((function(r,i){a+=function(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}(t[(o+i)%n].slice(-2),e[i%n].slice(-2))})),r[o]=a,a=0})),i[r.indexOf(Math.min.apply(null,r))]}var _e={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=new RegExp("\\n","ig"),a=null;return e instanceof SVGElement?a=e:/^\.|^#/.test(e)&&(a=P(e)),"object"==typeof e&&e.curve?e:(a&&/path|glyph/.test(a.tagName)?n.original=a.getAttribute("d").replace(r,""):a||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,e,n,r){for(var a=[],i=e.curve,o=n.curve,s=0,u=o.length;s>0)/1e3)}t.setAttribute("d",1===r?n.original:ge(a))})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].curve,n=this.valuesEnd[t].curve;if(!e||!n||e&&n&&"M"===e[0][0]&&e.length!==n.length){var r=Te(this.valuesStart[t].original,this.valuesEnd[t].original),a=be(r[0])!==be(r[1])?me(r[0]):Gt(r[0]);this.valuesStart[t].curve=a,this.valuesEnd[t].curve=Me(r[1],a)}}}},Ce={component:"svgCubicMorph",property:"path",defaultValue:[],Interpolate:{numbers:Q,pathToString:ge},functions:_e,Util:{pathToCurve:de,pathToAbsolute:ee,pathToString:ge,parsePathString:Jt,getRotatedCurve:Me,getRotations:Oe,equalizeSegments:Te,reverseCurve:me,clonePath:Gt,getDrawDirection:be,splitCubic:we,splitPath:Ee,fixPath:oe,getCurveArray:ke}};function je(t,e){var n=e.x,r=e.width;return/[a-z]/i.test(t)&&!/px/.test(t)?t.replace(/top|left/,0).replace(/right|bottom/,100).replace(/center|middle/,50):/%/.test(t)?n+parseFloat(t)*r/100:parseFloat(t)}function Ie(t){var e={},n=t&&/\)/.test(t)?t.substring(0,t.length-1).split(/\)\s|\)/):"none";if(n instanceof Array)for(var r=0,a=n.length;r>0)/1e3+(i?","+(1e3*i>>0)/1e3:"")+")":"")+(u?"rotate("+(1e3*u>>0)/1e3+")":"")+(p?"skewX("+(1e3*p>>0)/1e3+")":"")+(h?"skewY("+(1e3*h>>0)/1e3+")":"")+(1!==s?"scale("+(1e3*s>>0)/1e3+")":""))})},crossCheck:function(t){if(this._resetStart&&this.valuesEnd[t]){var e=this.valuesStart[t],n=this.valuesEnd[t],r=Ae.call(this,t,Ie(this.element.getAttribute("transform")));Object.keys(r).forEach((function(t){e[t]=r[t]}));var a=this.element.ownerSVGElement,i=a.createSVGTransformFromMatrix(a.createSVGMatrix().translate(-e.origin[0],-e.origin[1]).translate("translate"in e?e.translate[0]:0,"translate"in e?e.translate[1]:0).rotate(e.rotate||0).skewX(e.skewX||0).skewY(e.skewY||0).scale(e.scale||1).translate(+e.origin[0],+e.origin[1]));e.translate=[i.matrix.e,i.matrix.f],Object.keys(e).forEach((function(t){t in n&&"origin"!==t||(n[t]=e[t])}))}}},Le={component:"svgTransformProperty",property:"svgTransform",defaultOptions:{transformOrigin:"50% 50%"},defaultValue:{translate:0,rotate:0,skewX:0,skewY:0,scale:1},Interpolate:{numbers:Q},functions:Pe,Util:{parseStringOrigin:je,parseTransformString:Ie,parseTransformSVG:Ae}},Ne=!!function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){return t=!0}});document.addEventListener("DOMContentLoaded",(function t(){document.removeEventListener("DOMContentLoaded",t,e)}),e)}catch(t){throw Error("Passive events are not supported")}return t}()&&{passive:!0},Ve="onmouseleave"in document?["mouseenter","mouseleave"]:["mouseover","mouseout"],Re="ontouchstart"in window||"msMaxTouchPoints"in navigator?"touchstart":"mousewheel",Ue=navigator&&/(EDGE|Mac)/i.test(navigator.userAgent)?document.body:document.documentElement;function Fe(t){this.scrolling&&t.preventDefault()}function qe(){var t=this.element;return t===Ue?{el:document,st:document.body}:{el:t,st:t}}function De(t,e){e[t](Ve[0],Fe,Ne),e[t](Re,Fe,Ne)}function He(){var t=qe.call(this);"scroll"in this.valuesEnd&&!t.el.scrolling&&(t.el.scrolling=1,De("addEventListener",t.el),t.st.style.pointerEvents="none")}function Be(){var t=qe.call(this);"scroll"in this.valuesEnd&&t.el.scrolling&&(t.el.scrolling=0,De("removeEventListener",t.el),t.st.style.pointerEvents="")}var Qe={prepareStart:function(){return this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ue,this.element===Ue?window.pageYOffset||Ue.scrollTop:this.element.scrollTop},prepareProperty:function(t,e){return parseInt(e,10)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(this.element=!("scroll"in this.valuesEnd)||this.element&&this.element!==window?this.element:Ue,He.call(this),e[t]=function(t,e,n,r){t.scrollTop=Q(e,n,r)>>0})},onComplete:function(){Be.call(this)}},ze={component:"scrollProperty",property:"scroll",defaultValue:0,Interpolate:{numbers:Q},functions:Qe,Util:{preventScroll:Fe,scrollIn:He,scrollOut:Be,getScrollTargets:qe,toggleScrollEvents:De}};function Xe(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){for(var i=[],o="textShadow"===t?3:4,s=3===o?n[3]:n[4],u=3===o?r[3]:r[4],c=!!(n[5]&&"none"!==n[5]||r[5]&&"none"!==r[5])&&" inset",l=0;l>0)/1e3+"px");e.style[t]=c?lt(s,u,a)+i.join(" ")+c:lt(s,u,a)+i.join(" ")})}var Ye={};["boxShadow","textShadow"].forEach((function(t){Ye[t]=Xe}));var We=["boxShadow","textShadow"];function $e(t,e){var n;3===t.length?n=[t[0],t[1],0,0,t[2],"none"]:4===t.length?n=/inset|none/.test(t[3])?[t[0],t[1],0,0,t[2],t[3]]:[t[0],t[1],t[2],0,t[3],"none"]:5===t.length?n=/inset|none/.test(t[4])?[t[0],t[1],t[2],0,t[3],t[4]]:[t[0],t[1],t[2],t[3],t[4],"none"]:6===t.length&&(n=t);for(var r=0;r<4;r+=1)n[r]=parseFloat(n[r]);return n[4]=ct(n[4]),n="boxShadow"===e?n:n.filter((function(t,e){return[0,1,2,4].includes(e)})),n}var Ge={};We.forEach((function(t){Ge[t]=Xe}));var Ze={component:"shadowProperties",properties:We,defaultValues:{boxShadow:"0px 0px 0px 0px rgb(0,0,0)",textShadow:"0px 0px 0px rgb(0,0,0)"},Interpolate:{numbers:Q,colors:lt},functions:{prepareStart:function(t){var e=M(this.element,t);return/^none$|^initial$|^inherit$|^inset$/.test(e)?f[t]:e},prepareProperty:function(t,e){var n=e;if("string"==typeof n){var r="none",a=n.match(/(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi);r=/inset/.test(n)?"inset":r,n=$e(n=(n=/inset/.test(n)?n.replace(/(\s+inset|inset+\s)/g,""):n).replace(a[0],"").split(" ").concat([a[0].replace(/\s/g,"")],[r]),t)}else n instanceof Array&&(n=$e(n,t));return n},onStart:Ge},Util:{processShadowArray:$e,trueColor:ct}},Ke={};function Je(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=W(n.v,r.v,r.u,a)})}["fontSize","lineHeight","letterSpacing","wordSpacing"].forEach((function(t){Ke[t]=Je}));var tn=["fontSize","lineHeight","letterSpacing","wordSpacing"],en={};tn.forEach((function(t){en[t]=Je}));var nn={component:"textProperties",category:"textProperties",properties:tn,defaultValues:{fontSize:0,lineHeight:0,letterSpacing:0,wordSpacing:0},Interpolate:{units:W},functions:{prepareStart:function(t){return M(this.element,t)||f[t]},prepareProperty:function(t,e){return z(e)},onStart:en},Util:{trueDimension:z}},rn=String("abcdefghijklmnopqrstuvwxyz").split(""),an=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),on=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),sn=String("0123456789").split(""),un=rn.concat(an,sn),cn=un.concat(on),ln={alpha:rn,upper:an,symbols:on,numeric:sn,alphanumeric:un,all:cn},pn={text:function(t){if(!e[t]&&this.valuesEnd[t]){var n=this._textChars,r=ln[d.textChars];n in ln?r=ln[n]:n&&n.length&&(r=n),e[t]=function(t,e,n,a){var i="",o="",s=""===n?" ":n,u=e.substring(0),c=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(o=c.substring(Math.min(a*c.length,c.length)>>0,0),t.innerHTML=a<1?o+l:s):" "===n?(i=u.substring(0,Math.min((1-a)*u.length,u.length)>>0),t.innerHTML=a<1?i+l:s):(i=u.substring(u.length,Math.min(a*u.length,u.length)>>0),o=c.substring(0,Math.min(a*c.length,c.length)>>0),t.innerHTML=a<1?o+l+i:s)}}},number:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(t,e,n,r){t.innerHTML=Q(e,n,r)>>0})}};function hn(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function fn(t,e){var n=[],r=t.children.length;if(r){for(var a,i=[],o=t.innerHTML,s=0,u=void 0,c=void 0,l=void 0;s>0)/1e3;return r}var vn="undefined"!=typeof DOMMatrix?DOMMatrix:null,gn="transformMatrix";var mn={BackgroundPosition:Y,BorderRadius:tt,BoxModel:ot,ClipProperty:ut,ColorProperties:gt,FilterEffects:xt,HTMLAttributes:_t,OpacityProperty:jt,SVGDraw:qt,SVGCubicMorph:Ce,SVGTransform:Le,ScrollProperty:ze,ShadowProperties:Ze,TextProperties:nn,TextWriteProperties:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:Q},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:pn},Util:{charSet:ln,createTextTweens:function(t,e,n){if(t.playing)return!1;var r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);var a=I.tween,i=function(t,e){var n=fn(t,"text-part"),r=fn(hn(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),o=i[0],s=i[1],u=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText")),l=[],p=0;return(l=(l=l.concat(u.map((function(t,e){return r.duration="auto"===r.duration?75*o[e].innerHTML.length:r.duration,r.delay=p,r.onComplete=null,p+=r.duration,new a(t,{text:t.innerHTML},{text:""},r)})))).concat(c.map((function(n,i){return r.duration="auto"===r.duration?75*s[i].innerHTML.length:r.duration,r.delay=p,r.onComplete=i===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=r.duration,new a(n,{text:""},{text:s[i].innerHTML},r)})))).start=function(){t.playing||(l.forEach((function(t){return t.start()})),t.playing=!0)},l}}},MatrixTransform:{component:gn,property:"transform",defaultValue:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,skew:[0,0],skewX:0,skewY:0,scale3d:[1,1,1],scaleX:1,scaleY:1,scaleZ:1},functions:{prepareStart:function(t,e){var n={},r=this.element.transformMatrix;return r?Object.keys(r).forEach((function(t){n[t]=r[t]})):Object.keys(e).forEach((function(t){n[t]="perspective"===t?e[t]:f.transform[t]})),n},prepareProperty:function(t,e){if("object"==typeof e&&!e.length){var n,r={},a={},i={},o={},s={},u=[{translate3d:a},{rotate3d:i},{skew:s},{scale3d:o}];return Object.keys(e).forEach((function(t){if(/3d/.test(t)&&"object"==typeof e[t]&&e[t].length)n=e[t].map((function(e){return"scale3d"===t?parseFloat(e):parseInt(e,10)})),r[t]="scale3d"===t?[n[0]||1,n[1]||1,n[2]||1]:[n[0]||0,n[1]||0,n[2]||0];else if(/[XYZ]/.test(t)){var u={};/translate/.test(t)?u=a:/rotate/.test(t)?u=i:/scale/.test(t)?u=o:/skew/.test(t)&&(u=s),u[t.replace(/translate|rotate|scale|skew/,"").toLowerCase()]=/scale/.test(t)?parseFloat(e[t]):parseInt(e[t],10)}else"skew"===t?(n=e[t].map((function(t){return parseInt(t,10)||0})),r[t]=[n[0]||0,n[1]||0]):r[t]=parseInt(e[t],10)})),u.forEach((function(t){var e=Object.keys(t)[0],n=t[e];Object.keys(n).length&&!r[e]&&(r[e]="scale3d"===e?[n.x||1,n.y||1,n.z||1]:"skew"===e?[n.x||0,n.y||0]:[n.x||0,n.y||0,n.z||0])})),r}throw Error('KUTE.js - "'+e+'" is not valid/supported transform function')},onStart:{transform:function(t){vn&&this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){var i=new vn,o={};Object.keys(r).forEach((function(t){o[t]="perspective"===t?Q(n[t],r[t],a):dn(n[t],r[t],a)})),o.perspective&&(i.m34=-1/o.perspective),i=o.translate3d?i.translate(o.translate3d[0],o.translate3d[1],o.translate3d[2]):i,i=o.rotate3d?i.rotate(o.rotate3d[0],o.rotate3d[1],o.rotate3d[2]):i,o.skew&&(i=o.skew[0]?i.skewX(o.skew[0]):i,i=o.skew[1]?i.skewY(o.skew[1]):i),i=o.scale3d?i.scale(o.scale3d[0],o.scale3d[1],o.scale3d[2]):i,e.style[t]=i.toString()})},CSS3Matrix:function(t){vn&&this.valuesEnd.transform&&(e[t]||(e[t]=vn))}},onComplete:function(t){this.valuesEnd[t]&&(this.element.transformMatrix=Object.assign({},this.valuesEnd[t]))},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:Q,translate3d:dn,rotate3d:dn,skew:dn,scale3d:dn}}};Object.keys(mn).forEach((function(t){var e=mn[t];mn[t]=new B(e)}));return{Animation:B,Components:mn,Tween:R,fromTo:function(t,e,n,r){var a=r||{};return new D(P(t),e,n,a)},to:function(t,e,n){var r=n||{};return r.resetStart=e,new q(P(t),e,e,r)},TweenCollection:U,ProgressBar:F,allFromTo:function(t,e,n,r){var a=r||{};return new U(P(t,!0),e,n,a)},allTo:function(t,e,n){var r=n||{};return r.resetStart=e,new U(P(t,!0),e,e,r)},Objects:w,Util:E,Easing:A,CubicBezier:t,Render:p,Interpolate:a,Process:j,Internals:T,Selector:P,Version:"2.2.0alpha2"}})); diff --git a/demo/src/kute.min.js b/demo/src/kute.min.js index f3ae0b3..9701ab8 100644 --- a/demo/src/kute.min.js +++ b/demo/src/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.1.3 | thednp © 2021 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t=function(t,e,n,r,a){var i=this;this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;var s=function(t){return i.sampleCurveY(i.solveCurveX(t))};return Object.defineProperty(s,"name",{writable:!0}),s.name=a||"cubic-bezier("+[t,e,n,r]+")",s};t.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},t.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},t.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},t.prototype.solveCurveX=function(t){var e,n,r,a,i,s,o=1e-5;for(r=t,s=0;s<32;s+=1){if(a=this.sampleCurveX(r)-t,Math.abs(a)(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var e={},n=[],r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},a={},i={},s="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},o={};o.now=s;var u=0,c=function(t){for(var e=0;e1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=N,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var V=function(t){function n(){for(var e=this,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),this.valuesStart={},this.valuesEnd={};var a=n[1],i=n[2];T.call(this,i,"end"),this._resetStart?this.valuesStart=a:T.call(this,a,"start"),this._resetStart||Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(n){g[t][n].call(e,n)}))})),this.paused=!1,this._pauseTime=null;var s=n[3];return this._repeat=s.repeat||d.repeat,this._repeatDelay=s.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=s.yoyo||d.yoyo,this._reversed=!1,this}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.start=function(e){var n=this;return this._resetStart&&(this.valuesStart=this._resetStart,S.call(this),Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(e){g[t][e].call(n,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((function(t){n.valuesRepeat[t]=n.valuesStart[t]})),t.prototype.start.call(this,e),this},n.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),P.call(this),this._startTime+=e.Time()-this._pauseTime,E(this),u||c()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){var t=this;Object.keys(this.valuesEnd).forEach((function(e){var n=t.valuesRepeat[e];t.valuesRepeat[e]=t.valuesEnd[e],t.valuesEnd[e]=n,t.valuesStart[e]=t.valuesRepeat[e]}))},n.prototype.update=function(t){var n,r=this,a=void 0!==t?t:e.Time();if(a1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=a,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.start()})),!1))},n}(N);A.tween=V;var q=function(t,e,n,r){var a=this;this.tweens=[],"offset"in d||(d.offset=0);var i=r||{};i.delay=i.delay||d.delay;var s=[];return Array.from(t).forEach((function(t,r){var o=A.tween;if(s[r]=i||{},s[r].delay=r>0?i.delay+(i.offset||d.offset):i.delay,!(t instanceof Element))throw Error("KUTE.js - "+t+" not instanceof [Element]");a.tweens.push(new o(t,e,n,s[r]))})),this.length=this.tweens.length,this};q.prototype.start=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.start(n)})),this},q.prototype.stop=function(){return this.tweens.map((function(t){return t.stop()})),this},q.prototype.pause=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.pause(n)})),this},q.prototype.resume=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.resume(n)})),this},q.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof q)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},q.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},q.prototype.removeTweens=function(){this.tweens=[]},q.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{if(t.component in p)throw Error("KUTE.js - "+t.component+" already registered");if(t.property in f)throw Error("KUTE.js - "+t.property+" already registered");this.setComponent(t)}catch(t){throw Error(t)}};function D(t,e){for(var n,r=parseInt(t,10)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i.99||a<.01?(10*F(n,r,a)>>0)/10:F(n,r,a)>>0)+"px"})}H.prototype.setComponent=function(t){var e=this,n=t.component,r={prepareProperty:v,prepareStart:y,onStart:i,onComplete:m,crossCheck:g},s=t.category,o=t.property,u=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return p[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(f[o]=t.defaultValue,e.supports=o+" property"):t.defaultValues&&(Object.keys(t.defaultValues).forEach((function(e){f[e]=t.defaultValues[e]})),e.supports=(u||o)+" "+(o||s)+" properties"),t.defaultOptions&&Object.keys(t.defaultOptions).forEach((function(e){d[e]=t.defaultOptions[e]})),t.functions&&Object.keys(r).forEach((function(e){e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][s||o]||(r[e][n][s||o]=t.functions[e])):Object.keys(t.functions[e]).forEach((function(a){r[e][n]||(r[e][n]={}),r[e][n][a]||(r[e][n][a]=t.functions[e][a])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),b[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){w[e]||(w[e]=t.Util[e])})),e};var U={};["top","left","width","height"].forEach((function(t){U[t]=Q}));var R=["top","left","width","height"],X={};R.forEach((function(t){X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:F},functions:{prepareStart:function(t){return C(this.element,t)||f[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:X},Util:{trueDimension:D}};function Z(t){var e;if(/rgb|rgba/.test(t)){var n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){var a=function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r})),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);e={r:a.r,g:a.g,b:a.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var s=getComputedStyle(i,null).color;s=/rgb/.test(s)?s.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",e={r:parseInt(s[0],10),g:parseInt(s[1],10),b:parseInt(s[2],10)}}return e}function z(t,e,n){var r={},a=",";return Object.keys(e).forEach((function(a){"a"!==a?r[a]=F(t[a],e[a],n)>>0||0:t[a]&&e[a]&&(r[a]=(100*F(t[a],e[a],n)>>0)/100)})),r.a?"rgba("+r.r+a+r.g+a+r.b+a+r.a+")":"rgb("+r.r+a+r.g+a+r.b+")"}function Y(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=z(n,r,a)})}var K={};["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"].forEach((function(t){K[t]=Y}));var $=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};$.forEach((function(t){W[t]="#000"}));var G={};$.forEach((function(t){G[t]=Y}));var J={component:"colorProperties",category:"colors",properties:$,defaultValues:W,Interpolate:{numbers:F,colors:z},functions:{prepareStart:function(t){return C(this.element,t)||f[t]},prepareProperty:function(t,e){return Z(e)},onStart:G},Util:{trueColor:Z}},tt={},et="htmlAttributes",nt=["fill","stroke","stop-color"];function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var at={prepareStart:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(t){var e=rt(t).replace(/_+[a-z]+/,""),a=n.element.getAttribute(e);r[e]=nt.includes(e)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(t)?1:0)})),r},prepareProperty:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(a){var s=rt(a),o=/(%|[a-z]+)$/,u=n.element.getAttribute(s.replace(/_+[a-z]+/,""));if(nt.includes(s))i.htmlAttributes[s]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,a){t.setAttribute(e,z(n,r,a))})},r[s]=Z(e[a])||f.htmlAttributes[a];else if(null!==u&&o.test(u)){var c=D(u).u||D(e[a]).u,l=/%/.test(c)?"_percent":"_"+c;i.htmlAttributes[s+l]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*F(n.v,r.v,a)>>0)/1e3+r.u)})},r[s+l]=D(e[a])}else o.test(e[a])&&null!==u&&(null===u||o.test(u))||(i.htmlAttributes[s]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*F(n,r,a)>>0)/1e3)})},r[s]=parseFloat(e[a]))})),r},onStart:{attr:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,n,r,a){Object.keys(r).forEach((function(i){e.attributes[i](t,i,n[i],r[i],a)}))})},attributes:function(t){!e[t]&&this.valuesEnd.attr&&(e[t]=tt)}}},it={component:et,property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:F,colors:z},functions:at,Util:{replaceUppercase:rt,trueColor:Z,trueDimension:D}};var st={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(1e3*F(n,r,a)>>0)/1e3})}},ot={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:F},functions:st},ut=String("abcdefghijklmnopqrstuvwxyz").split(""),ct=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),lt=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ht=String("0123456789").split(""),pt=ut.concat(ct,ht),ft=pt.concat(lt),dt={alpha:ut,upper:ct,symbols:lt,numeric:ht,alphanumeric:pt,all:ft},vt={text:function(t){if(!e[t]&&this.valuesEnd[t]){var n=this._textChars,r=dt[d.textChars];n in dt?r=dt[n]:n&&n.length&&(r=n),e[t]=function(t,e,n,a){var i="",s="",o=""===n?" ":n,u=e.substring(0),c=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=c.substring(Math.min(a*c.length,c.length)>>0,0),t.innerHTML=a<1?s+l:o):" "===n?(i=u.substring(0,Math.min((1-a)*u.length,u.length)>>0),t.innerHTML=a<1?i+l:o):(i=u.substring(u.length,Math.min(a*u.length,u.length)>>0),s=c.substring(0,Math.min(a*c.length,c.length)>>0),t.innerHTML=a<1?s+l+i:o)}}},number:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(t,e,n,r){t.innerHTML=F(e,n,r)>>0})}};function yt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function gt(t,e){var n=[],r=t.children.length;if(r){for(var a,i=[],s=t.innerHTML,o=0,u=void 0,c=void 0,l=void 0;o>0)/1e3+n+")"}function bt(t,e,n,r){for(var a=[],i=0;i<3;i+=1)a[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+a.join(",")+")"}function xt(t,e,n,r){var a="";return a+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",a+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",a+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function Et(t,e,n,r){var a=[];return a[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+a.join(",")+")"}function Mt(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function kt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!==t&&void 0!==e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*F(e.s,n.s,r)>>0)/100,s=(100*F(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+a+"px"})}},jt=4;function Lt(t){return t.map((function(t){return Array.isArray(t)?Lt(t):Number.isNaN(+t)?t:+t}))}function Pt(t,e){var n=Number.isNaN(+e)?jt:+e;return n?t.map((function(t){return t.map((function(t){var e=+t,r=Math.pow(10,n);return e?e%1==0?e:Math.round(e*r)/r:t}))})):Lt(t)}function Nt(t,e,n){if(t[n].length>7){t[n].shift();for(var r=t[n],a=n;r.length;)e[n]="A",t.splice(a+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Vt[e]===t.length-1&&/[achlmrqstvz]/g.test(e)}))}function Ht(t){var e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;if("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Vt[n]&&(t.segments.push([e].concat(r.splice(0,Vt[n]))),Vt[n]););}var Dt="Invalid path value";function Ft(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void(t.index+=1)):49===e?(t.param=1,void(t.index+=1)):void(t.err=Dt+": invalid Arc flag "+e)}function Qt(t){return t>=48&&t<=57}function Ut(t){var e,n=t.index,r=t.max,a=n,i=!1,s=!1,o=!1,u=!1;if(a>=r)t.err=Dt+": missing param "+t.pathValue[a];else if(43!==(e=t.pathValue.charCodeAt(a))&&45!==e||(e=(a+=1)=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1;var e}function Xt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Bt(t){var e=t.max,n=t.pathValue.charCodeAt(t.index),r=Vt[t.pathValue[t.index].toLowerCase()];if(t.segmentStart=t.index,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0;default:return!1}}(n))if(t.index+=1,Rt(t),t.data=[],r){for(;;){for(var a=r;a>0;a-=1){if(97!=(32|n)||3!==a&&4!==a?Ut(t):Ft(t),t.err.length)return;t.data.push(t.param),Rt(t),t.index=t.max)break;if(!Xt(t.pathValue.charCodeAt(t.index)))break}Ht(t)}else Ht(t);else t.err=Dt+": "+t.pathValue[t.index]+" not a path command"}function Zt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function zt(t,e){if(function(t){return qt(t)&&t.every((function(t){return t[0]===t[0].toUpperCase()}))}(t))return Lt(t);var n=function(t,e){if(qt(t))return Lt(t);var n=new Zt(t);for(Rt(n);n.index-1?{x1:2*t-n,y1:2*e-r}:{x1:t,y1:e}}(e.x1,e.y1,e.x2,e.y2,n),o=s.x1,u=s.y1;e.x1=o,e.y1=u,i=["C",o,u].concat(a)}else if("T"===r){var c=function(t,e,n,r,a){return"QT".indexOf(a)>-1?{qx:2*t-n,qy:2*e-r}:{qx:t,qy:e}}(e.x1,e.y1,e.qx,e.qy,n),l=c.qx,h=c.qy;e.qx=l,e.qy=h,i=["Q",l,h].concat(a)}else if("Q"===r){var p=a[0],f=a[1];e.qx=p,e.qy=f}return i}function Kt(t,e){if(function(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Vt[e]===t.length-1&&/[ACLMQZ]/.test(t[0])}))}(t))return Lt(t);for(var n,r,a=zt(t,e),i={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},s=[],o=a.length,u="",c=0;c1&&(E*=O=Math.sqrt(O),M*=O);var C=Math.pow(E,2),T=Math.pow(M,2),S=(i===s?-1:1)*Math.sqrt(Math.abs((C*T-C*k*k-T*_*_)/(C*k*k+T*_*_)));f=S*E*k/M+(m+b)/2,d=S*-M*_/E+(x+w)/2,h=Math.asin(((x-d)/M*Math.pow(10,9)>>0)/Math.pow(10,9)),p=Math.asin(((w-d)/M*Math.pow(10,9)>>0)/Math.pow(10,9)),h=mp&&(h-=2*Math.PI),!s&&p>h&&(p-=2*Math.PI)}var I=p-h;if(Math.abs(I)>v){var A=p,j=b,L=w;p=h+v*(s&&p>h?1:-1),b=f+E*Math.cos(p),w=d+M*Math.sin(p),g=Wt(b,w,E,M,a,0,s,j,L,[p,A,f,d])}I=p-h;var P=Math.cos(h),N=Math.sin(h),V=Math.cos(p),q=Math.sin(p),H=Math.tan(I/4),D=4/3*E*H,F=4/3*M*H,Q=[m,x],U=[m+D*N,x-F*P],R=[b+D*q,w-F*V],X=[b,w];return U[0]=2*Q[0]-U[0],U[1]=2*Q[1]-U[1],c?[U,R,X].concat(g):(g=[U,R,X].concat(g).join().split(",")).map((function(t,e){return e%2?$t(g[e-1],t,y).y:$t(t,g[e+1],y).x}))}function Gt(t,e,n,r,a,i){var s=1/3,o=2/3;return[s*t+o*n,s*e+o*r,s*a+o*n,s*i+o*r,a,i]}function Jt(t,e,n,r,a,i,s,o,u){var c=1-u;return{x:Math.pow(c,3)*t+c*c*3*u*n+3*c*u*u*a+Math.pow(u,3)*s,y:Math.pow(c,3)*e+c*c*3*u*r+3*c*u*u*i+Math.pow(u,3)*o}}function te(t,e,n){var r=t[0],a=t[1];return[r+(e[0]-r)*n,a+(e[1]-a)*n]}function ee(t,e,n,r){var a=.5,i=[t,e],s=[n,r],o=te(i,s,a),u=te(s,o,a),c=te(o,u,a),l=te(u,c,a),h=te(c,l,a),p=Jt.apply(0,i.concat(o,c,h,a)),f=Jt.apply(0,h.concat(l,u,s,0));return[p.x,p.y,f.x,f.y,n,r]}function ne(t,e){"TQ".indexOf(t[0])<0&&(e.qx=null,e.qy=null);var n=t.slice(1),r=n[0],a=n[1];switch(t[0]){case"M":return e.x=r,e.y=a,t;case"A":return["C"].concat(Wt.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"Q":return e.qx=r,e.qy=a,["C"].concat(Gt.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"L":return["C"].concat(ee(e.x1,e.y1,t[1],t[2]));case"Z":return["C"].concat(ee(e.x1,e.y1,e.x,e.y))}return t}function re(t,e){if(function(t){return qt(t)&&t.slice(1).every((function(t){return"C"===t[0]}))}(t))return Lt(t);for(var n,r,a=Kt(t,e),i={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},s=[],o="",u=a.length,c=0;c1&&(c=1),c<0&&(c=0);var l=c/2,h=0,p=0,f=0,d=0,v=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach((function(u,c){p=ie(t,n,a,s,h=l*u+l),f=ie(e,r,i,o,h),d+=v[c]*Math.sqrt(p*p+f*f)})),l*d}function oe(t,e){var n=0;return re(t,e).forEach((function(t,e,r){n+="M"!==t[0]?se.apply(0,r[e-1].slice(-2).concat(t.slice(1))):0})),n}function ue(t,e){var n,r,a=0;return re(t,9).map((function(t,i,s){return r=i?s[i-1].slice(-2).concat(t.slice(1)):t.slice(1),n=i?se.apply(0,r):0,a+=n,0===i?{x:r[0],y:r[1]}:a>e&&e>a-n?Jt.apply(0,r.concat(1-(a-e)/n)):null})).filter((function(t){return t})).slice(-1)[0]}function ce(t,e,n,r,a,i,s,o){return 3*((o-e)*(n+a)-(s-t)*(r+i)+r*(t-a)-n*(e-i)+o*(a+t/3)-s*(i+e/3))/20}function le(t,e){return function(t,e){var n=0,r=0,a=0,i=0,s=0;return re(t,e).map((function(t){var e;switch(t[0]){case"M":case"Z":return a="M"===t[0]?t[1]:a,i="M"===t[0]?t[2]:i,n=a,r=i,0;default:return s=ce.apply(0,[n,r].concat(t.slice(1))),e=t.slice(-2),n=e[0],r=e[1],s}})).reduce((function(t,e){return t+e}),0)}(re(t,e))>=0}function he(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function pe(t,e,n,r){for(var a=[],i=0;i>0)/1e3)}return a}function fe(t){return t.reduce((function(e,n,r){return r?e+he(t[r-1],n):0}),0)}function de(t,e){var n,r,a=re((n=ae(t),ae(zt(n,0)).replace(/(m|M)/g,"|$1").split("|").map((function(t){return t.trim()})).filter((function(t){return t})))[0],4),i=oe(a),s=[],o=3;e&&!Number.isNaN(e)&&+e>0&&(o=Math.max(o,Math.ceil(i/e)));for(var u=0;u-1))return!1;n.push([a[1],a[2]])}return e=fe(n),!!r&&{ring:n,pathLength:e}}(n)||de(n,e)}function ye(t,e){for(var n,r,a,i,s=t.length,o=1/0,u=0,c=0;ce;)r=te(n,r,.5),t.splice(a+1,0,r)}function be(t){return Array.isArray(t)&&t.every((function(t){return Array.isArray(t)&&2===t.length&&!Number.isNaN(t[0])&&!Number.isNaN(t[1])}))}function xe(t,e){var n,r,a=t;if("string"==typeof a){var i=ve(a,e);a=i.ring,n=i.skipBisect,r=i.pathLength}else if(!Array.isArray(a))throw Error(Dt+": "+a);var s=a.slice(0);if(s.pathLength=r,!be(s))throw Error(Dt+": "+s);return s.length>1&&he(s[0],s[s.length-1])<1e-9&&s.pop(),!n&&e&&!Number.isNaN(e)&&+e>0&&me(s,e),s}function we(t,e,n){var r=n||d.morphPrecision,a=xe(t,r),i=xe(e,r),s=a.length-i.length;return ge(a,s<0?-1*s:0),ge(i,s>0?s:0),ye(a,i),[Pt(a),Pt(i)]}var Ee={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=new RegExp("\\n","ig"),a=null;return e instanceof SVGElement?a=e:/^\.|^#/.test(e)&&(a=L(e)),"object"==typeof e&&e.pathArray?e:(a&&["path","glyph"].includes(a.tagName)?n.original=a.getAttribute("d").replace(r,""):a||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,e,n,r){var a=e.pathArray,i=n.pathArray,s=i.length;t.setAttribute("d",1===r?n.original:"M"+pe(a,i,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=we(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision,10):d.morphPrecision),a=r[0],i=r[1];this.valuesStart[t].pathArray=a,this.valuesEnd[t].pathArray=i}}}},Me={EssentialBoxModel:B,ColorsProperties:J,HTMLAttributes:it,OpacityProperty:ot,TextWrite:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:F},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:vt},Util:{charSet:dt,createTextTweens:function(t,e,n){if(t.playing)return!1;var r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);var a=A.tween,i=function(t,e){var n=gt(t,"text-part"),r=gt(yt(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),s=i[0],o=i[1],u=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText")),l=[],h=0;return(l=(l=l.concat(u.map((function(t,e){return r.duration="auto"===r.duration?75*s[e].innerHTML.length:r.duration,r.delay=h,r.onComplete=null,h+=r.duration,new a(t,{text:t.innerHTML},{text:""},r)})))).concat(c.map((function(n,i){return r.duration="auto"===r.duration?75*o[i].innerHTML.length:r.duration,r.delay=h,r.onComplete=i===o.length-1?function(){t.innerHTML=e,t.playing=!1}:null,h+=r.duration,new a(n,{text:""},{text:o[i].innerHTML},r)})))).start=function(){t.playing||(l.forEach((function(t){return t.start()})),t.playing=!0)},l}}},TransformFunctions:{component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t){var e=O(this.element);return e[t]?e[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},a=[],i=[],s=[],o=["translate3d","translate","rotate3d","skew"];return Object.keys(e).forEach((function(t){var u="object"==typeof e[t]&&e[t].length?e[t].map((function(t){return parseInt(t,10)})):parseInt(e[t],10);if(o.includes(t)){var c="translate"===t||"rotate"===t?t+"3d":t;r[c]="skew"===t?u.length?[u[0]||0,u[1]||0]:[u||0,0]:"translate"===t?u.length?[u[0]||0,u[1]||0,u[2]||0]:[u||0,0,0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(t)){var l=t.replace(/[XYZ]/,""),h="skew"===l?l:l+"3d",p="skew"===l?2:3,f=[];"translate"===l?f=a:"rotate"===l?f=i:"skew"===l&&(f=s);for(var d=0;d>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+a.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:Et}},SVGDraw:{component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:F},functions:At,Util:{getRectLength:_t,getPolyLength:kt,getLineLength:Ot,getCircleLength:Ct,getEllipseLength:Tt,getTotalLength:St,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:It,percent:Mt}},SVGMorph:{component:"svgMorph",property:"path",defaultValue:[],Interpolate:pe,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Ee,Util:{addPoints:ge,bisect:me,normalizeRing:xe,validRing:be,getInterpolationPoints:we,pathStringToRing:ve,distanceSquareRoot:he,midPoint:te,approximateRing:de,rotateRing:ye,pathToString:ae,pathToCurve:re,getPathLength:oe,getPointAtLength:ue,getDrawDirection:le,roundPath:Pt}}};Object.keys(Me).forEach((function(t){var e=Me[t];Me[t]=new H(e)}));return{Animation:H,Components:Me,Tween:V,fromTo:function(t,e,n,r){var a=r||{};return new(0,A.tween)(L(t),e,n,a)},to:function(t,e,n){var r=n||{},a=A.tween;return r.resetStart=e,new a(L(t),e,e,r)},TweenCollection:q,allFromTo:function(t,e,n,r){var a=r||{};return new q(L(t,!0),e,n,a)},allTo:function(t,e,n){var r=n||{};return n.resetStart=e,new q(L(t,!0),e,e,r)},Objects:x,Util:w,Easing:j,CubicBezier:t,Render:h,Interpolate:a,Process:I,Internals:k,Selector:L,Version:"2.1.3"}})); +// KUTE.js Standard v2.2.0alpha2 | thednp © 2021 | MIT-License +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t=function(t,e,n,r,a){var i=this;this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;var o=function(t){return i.sampleCurveY(i.solveCurveX(t))};return Object.defineProperty(o,"name",{writable:!0}),o.name=a||"cubic-bezier("+[t,e,n,r]+")",o};t.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},t.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},t.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},t.prototype.solveCurveX=function(t){var e,n,r,a,i,o,s=1e-5;for(r=t,o=0;o<32;o+=1){if(a=this.sampleCurveX(r)-t,Math.abs(a)(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var e={},n=[],r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},a={},i={},o="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},s={};s.now=o;var u=0,c=function(t){for(var e=0;e1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=N;var q=function(t){function n(){for(var e=this,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),this.valuesStart={},this.valuesEnd={};var a=n.slice(1),i=a[0],o=a[1],s=a[2];return T.call(this,o,"end"),this._resetStart?this.valuesStart=i:T.call(this,i,"start"),this._resetStart||Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(n){g[t][n].call(e,n)}))})),this.paused=!1,this._pauseTime=null,this._repeat=s.repeat||d.repeat,this._repeatDelay=s.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=s.yoyo||d.yoyo,this._reversed=!1,this}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.start=function(e){var n=this;return this._resetStart&&(this.valuesStart=this._resetStart,S.call(this),Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(e){g[t][e].call(n,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((function(t){n.valuesRepeat[t]=n.valuesStart[t]})),t.prototype.start.call(this,e),this},n.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),L.call(this),this._startTime+=e.Time()-this._pauseTime,E(this),u||c()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){var t=this;Object.keys(this.valuesEnd).forEach((function(e){var n=t.valuesRepeat[e];t.valuesRepeat[e]=t.valuesEnd[e],t.valuesEnd[e]=n,t.valuesStart[e]=t.valuesRepeat[e]}))},n.prototype.update=function(t){var n,r=this,a=void 0!==t?t:e.Time();if(a1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=a,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.start()})),!1))},n}(N);A.tween=q;var H=function(t,e,n,r){var a=this,i=A.tween;this.tweens=[];var o=r||{};o.delay=o.delay||d.delay;var s=[];return Array.from(t).forEach((function(t,r){if(s[r]=o||{},s[r].delay=r>0?o.delay+(o.offset||d.offset):o.delay,!(t instanceof Element))throw Error("KUTE - "+t+" is not instanceof Element");a.tweens.push(new i(t,e,n,s[r]))})),this.length=this.tweens.length,this};H.prototype.start=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.start(n)})),this},H.prototype.stop=function(){return this.tweens.map((function(t){return t.stop()})),this},H.prototype.pause=function(){return this.tweens.map((function(t){return t.pause()})),this},H.prototype.resume=function(){return this.tweens.map((function(t){return t.resume()})),this},H.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},H.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},H.prototype.removeTweens=function(){this.tweens=[]},H.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var V=A.tween;var D=A.tween;var F=function(t){try{if(t.component in h)throw Error("KUTE - "+t.component+" already registered");if(t.property in f)throw Error("KUTE - "+t.property+" already registered")}catch(t){throw Error(t)}var e=this,n=t.component,r={prepareProperty:v,prepareStart:y,onStart:i,onComplete:m,crossCheck:g},o=t.category,s=t.property,u=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return h[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(f[s]=t.defaultValue,e.supports=s+" property"):t.defaultValues&&(Object.keys(t.defaultValues).forEach((function(e){f[e]=t.defaultValues[e]})),e.supports=(u||s)+" "+(s||o)+" properties"),t.defaultOptions&&Object.assign(d,t.defaultOptions),t.functions&&Object.keys(r).forEach((function(e){e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][o||s]||(r[e][n][o||s]=t.functions[e])):Object.keys(t.functions[e]).forEach((function(a){r[e][n]||(r[e][n]={}),r[e][n][a]||(r[e][n][a]=t.functions[e][a])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),b[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){x[e]||(x[e]=t.Util[e])})),e},Q=function(t,e){for(var n,r=parseInt(t,10)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i.99||a<.01?(10*U(n,r,a)>>0)/10:U(n,r,a)>>0)+"px"})}var B={};["top","left","width","height"].forEach((function(t){B[t]=X}));var Z=["top","left","width","height"],R={};Z.forEach((function(t){R[t]=X}));var Y={component:"essentialBoxModel",category:"boxModel",properties:Z,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:U},functions:{prepareStart:function(t){return O(this.element,t)||f[t]},prepareProperty:function(t,e){var n=Q(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:Q}},z=function(t){var e;if(/rgb|rgba/.test(t)){var n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){var a=function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r})),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);e={r:a.r,g:a.g,b:a.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var o=getComputedStyle(i,null).color;o=/rgb/.test(o)?o.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",e={r:parseInt(o[0],10),g:parseInt(o[1],10),b:parseInt(o[2],10)}}return e};function K(t,e,n){var r={},a=",";return Object.keys(e).forEach((function(a){"a"!==a?r[a]=U(t[a],e[a],n)>>0||0:t[a]&&e[a]&&(r[a]=(100*U(t[a],e[a],n)>>0)/100)})),r.a?"rgba("+r.r+a+r.g+a+r.b+a+r.a+")":"rgb("+r.r+a+r.g+a+r.b+")"}function $(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=K(n,r,a)})}var W={};["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"].forEach((function(t){W[t]=$}));var G=["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],J={};G.forEach((function(t){J[t]="#000"}));var tt={};G.forEach((function(t){tt[t]=$}));var et={component:"colorProperties",category:"colors",properties:G,defaultValues:J,Interpolate:{numbers:U,colors:K},functions:{prepareStart:function(t){return O(this.element,t)||f[t]},prepareProperty:function(t,e){return z(e)},onStart:tt},Util:{trueColor:z}},nt={},rt="htmlAttributes",at=["fill","stroke","stop-color"];function it(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var ot={prepareStart:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(t){var e=it(t).replace(/_+[a-z]+/,""),a=n.element.getAttribute(e);r[e]=at.includes(e)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(t)?1:0)})),r},prepareProperty:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(a){var o=it(a),s=/(%|[a-z]+)$/,u=n.element.getAttribute(o.replace(/_+[a-z]+/,""));if(at.includes(o))i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=function(t,e,n,r,a){t.setAttribute(e,K(n,r,a))})},r[o]=z(e[a])||f.htmlAttributes[a];else if(null!==u&&s.test(u)){var c=Q(u).u||Q(e[a]).u,l=/%/.test(c)?"_percent":"_"+c;i.htmlAttributes[o+l]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*U(n.v,r.v,a)>>0)/1e3+r.u)})},r[o+l]=Q(e[a])}else s.test(e[a])&&null!==u&&(null===u||s.test(u))||(i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*U(n,r,a)>>0)/1e3)})},r[o]=parseFloat(e[a]))})),r},onStart:{attr:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,n,r,a){Object.keys(r).forEach((function(i){e.attributes[i](t,i,n[i],r[i],a)}))})},attributes:function(t){!e[t]&&this.valuesEnd.attr&&(e[t]=nt)}}},st={component:rt,property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:U,colors:K},functions:ot,Util:{replaceUppercase:it,trueColor:z,trueDimension:Q}};var ut={prepareStart:function(t){return O(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(1e3*U(n,r,a)>>0)/1e3})}},ct={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:U},functions:ut},lt=String("abcdefghijklmnopqrstuvwxyz").split(""),pt=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ht=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ft=String("0123456789").split(""),dt=lt.concat(pt,ft),vt=dt.concat(ht),yt={alpha:lt,upper:pt,symbols:ht,numeric:ft,alphanumeric:dt,all:vt},gt={text:function(t){if(!e[t]&&this.valuesEnd[t]){var n=this._textChars,r=yt[d.textChars];n in yt?r=yt[n]:n&&n.length&&(r=n),e[t]=function(t,e,n,a){var i="",o="",s=""===n?" ":n,u=e.substring(0),c=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(o=c.substring(Math.min(a*c.length,c.length)>>0,0),t.innerHTML=a<1?o+l:s):" "===n?(i=u.substring(0,Math.min((1-a)*u.length,u.length)>>0),t.innerHTML=a<1?i+l:s):(i=u.substring(u.length,Math.min(a*u.length,u.length)>>0),o=c.substring(0,Math.min(a*c.length,c.length)>>0),t.innerHTML=a<1?o+l+i:s)}}},number:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(t,e,n,r){t.innerHTML=U(e,n,r)>>0})}};function mt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function bt(t,e){var n=[],r=t.children.length;if(r){for(var a,i=[],o=t.innerHTML,s=0,u=void 0,c=void 0,l=void 0;s>0)/1e3+n+")"}function xt(t,e,n,r){for(var a=[],i=0;i<3;i+=1)a[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+a.join(",")+")"}function Et(t,e,n,r){var a="";return a+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",a+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",a+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function Mt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function _t(t,e,n,r){var a=[];return a[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+a.join(",")+")"}function kt(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ot(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!==t&&void 0!==e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*U(e.s,n.s,r)>>0)/100,o=(100*U(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}};function Lt(t,e,n){if(t[n].length>7){t[n].shift();for(var r=t[n],a=n;r.length;)e[n]="A",t.splice(a+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){var e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;for("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L");r.length>=Nt[n]&&(t.segments.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}var Ht="Invalid path value";function Vt(t){var e=t.index,n=t.pathValue.charCodeAt(e);return 48===n?(t.param=0,void(t.index+=1)):49===n?(t.param=1,void(t.index+=1)):void(t.err=Ht+': invalid Arc flag "'+n+'", expecting 0 or 1 at index '+e)}function Dt(t){return t>=48&&t<=57}function Ft(t){var e,n=t.max,r=t.pathValue,a=t.index,i=a,o=!1,s=!1,u=!1,c=!1;if(i>=n)t.err=Ht+" at "+i+": missing param "+r[i];else if(43!==(e=r.charCodeAt(i))&&45!==e||(e=(i+=1)=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1}function Ut(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){var e=t.max,n=t.pathValue,r=t.index,a=n.charCodeAt(r),i=Nt[n[r].toLowerCase()];if(t.segmentStart=r,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:return!0;default:return!1}}(a))if(t.index+=1,Qt(t),t.data=[],i){for(;;){for(var o=i;o>0;o-=1){if(97!=(32|a)||3!==o&&4!==o?Ft(t):Vt(t),t.err.length)return;t.data.push(t.param),Qt(t),t.index=t.max)break;if(!Ut(n.charCodeAt(t.index)))break}qt(t)}else qt(t);else t.err=Ht+": "+n[r]+" not a path command"}function Bt(t){return t.map((function(t){return Array.isArray(t)?[].concat(t):t}))}function Zt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function Rt(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Nt[e]===t.length-1&&"achlmqstvz".includes(e)}))}function Yt(t){if(Array.isArray(t)&&Rt(t))return Bt(t);var e=new Zt(t);for(Qt(e);e.index1&&(m*=O=Math.sqrt(O),b*=O);var T=m*m,S=b*b,I=(i===o?-1:1)*Math.sqrt(Math.abs((T*S-T*C*C-S*k*k)/(T*C*C+S*k*k)));d=I*m*C/b+(y+w)/2,v=I*-b*k/m+(g+x)/2,h=(Math.asin((g-v)/b)*Math.pow(10,9)>>0)/Math.pow(10,9),f=(Math.asin((x-v)/b)*Math.pow(10,9)>>0)/Math.pow(10,9),h=yf&&(h-=2*Math.PI),!o&&f>h&&(f-=2*Math.PI)}var A=f-h;if(Math.abs(A)>E){var j=f,P=w,L=x;f=h+E*(o&&f>h?1:-1),_=te(w=d+m*Math.cos(f),x=v+b*Math.sin(f),m,b,a,0,o,P,L,[f,j,d,v])}A=f-h;var N=Math.cos(h),q=Math.sin(h),H=Math.cos(f),V=Math.sin(f),D=Math.tan(A/4),F=4/3*m*D,Q=4/3*b*D,U=[y,g],X=[y+F*q,g-Q*N],B=[w+F*V,x-Q*H],Z=[w,x];if(X[0]=2*U[0]-X[0],X[1]=2*U[1]-X[1],c)return X.concat(B,Z,_);for(var R=[],Y=0,z=(_=X.concat(B,Z,_)).length;Y=1?e:n)>=1?Math.pow(10,n):1;return t.map((function(t){var e=t.slice(1).map(Number).map((function(t){return t%1==0?t:Math.round(t*r)/r}));return[t[0]].concat(e)}))}function ce(t,e){return ue(t,e).map((function(t){return t[0]+t.slice(1).join(" ")})).join("")}function le(t,e,n,r,a){return a*(a*(-3*t+9*e-9*n+3*r)+6*t-12*e+6*n)-3*t+3*e}function pe(t,e,n,r,a,i,o,s,u){var c=u;(null===u||Number.isNaN(+u))&&(c=1),c>1&&(c=1),c<0&&(c=0);var l=c/2,p=0,h=0,f=0,d=0,v=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach((function(u,c){h=le(t,n,a,o,p=l*u+l),f=le(e,r,i,s,p),d+=v[c]*Math.sqrt(h*h+f*f)})),l*d}function he(t){var e=0;return oe(t).forEach((function(t,n,r){var a="M"!==t[0]?r[n-1].slice(-2).concat(t.slice(1)):[];e+="M"===t[0]?0:pe.apply(void 0,a)})),e}function fe(t,e){var n,r,a,i=0;return oe(t).map((function(t,o,s){if(r=o?s[o-1].slice(-2).concat(t.slice(1)):t.slice(1),n=o?pe.apply(void 0,r):0,i+=n,0===o)a={x:r[0],y:r[1]};else if(i>e&&e>i-n){var u=r.concat([1-(i-e)/n]);a=ne.apply(void 0,u)}else a=null;return a})).filter((function(t){return t})).slice(-1)[0]}function de(t,e,n,r,a,i,o,s){return 3*((s-e)*(n+a)-(o-t)*(r+i)+r*(t-a)-n*(e-i)+s*(a+t/3)-o*(i+e/3))/20}function ve(t){return function(t){var e=0,n=0,r=0;return oe(t).map((function(t){var a,i;return"M"===t[0]?(e=(a=t)[1],n=a[2],0):(r=de.apply(void 0,[e,n].concat(t.slice(1))),i=t.slice(-2).map(Number),e=i[0],n=i[1],r)})).reduce((function(t,e){return t+e}),0)}(oe(t))>=0}function ye(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ge(t,e,n,r){for(var a=[],i=0;i>0)/1e3)}return a}function me(t,e){var n,r,a=oe((n=ce(t),ce(Kt(n),0).replace(/(m|M)/g,"|$1").split("|").map((function(t){return t.trim()})).filter((function(t){return t})))[0]),i=he(a),o=[],s=3;e&&!Number.isNaN(e)&&+e>0&&(s=Math.max(s,Math.ceil(i/e)));for(var u=0;ue;)r=re(n,r,.5),t.splice(a+1,0,r)}function Me(t){return Array.isArray(t)&&t.every((function(t){return Array.isArray(t)&&2===t.length&&!Number.isNaN(t[0])&&!Number.isNaN(t[1])}))}function _e(t,e){var n,r,a;if("string"==typeof t)a=(n=be(t,e)).polygon,r=n.skipBisect;else if(!Array.isArray(t))throw Error(Ht+": "+t);var i=[].concat(a);if(!Me(i))throw Error(Ht+": "+i);return i.length>1&&ye(i[0],i[i.length-1])<1e-9&&i.pop(),!r&&e&&!Number.isNaN(e)&&+e>0&&Ee(i,e),i}function ke(t,e,n){var r=n||d.morphPrecision,a=_e(t,r),i=_e(e,r),o=a.length-i.length;return xe(a,o<0?-1*o:0),xe(i,o>0?o:0),we(a,i),[ue(a),ue(i)]}var Ce={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=new RegExp("\\n","ig"),a=null;return e instanceof SVGPathElement?a=e:/^\.|^#/.test(e)&&(a=P(e)),"object"==typeof e&&e.polygon?e:(a&&["path","glyph"].includes(a.tagName)?n.original=a.getAttribute("d").replace(r,""):a||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,e,n,r){var a=e.polygon,i=n.polygon,o=i.length;t.setAttribute("d",1===r?n.original:"M"+ge(a,i,o,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].polygon,n=this.valuesEnd[t].polygon;if(!e||!n||e&&n&&e.length!==n.length){var r=ke(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision,10):d.morphPrecision),a=r[0],i=r[1];this.valuesStart[t].polygon=a,this.valuesEnd[t].polygon=i}}}},Oe={EssentialBoxModel:Y,ColorsProperties:et,HTMLAttributes:st,OpacityProperty:ct,TextWriteProp:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:U},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:yt,createTextTweens:function(t,e,n){if(t.playing)return!1;var r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);var a=A.tween,i=function(t,e){var n=bt(t,"text-part"),r=bt(mt(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),o=i[0],s=i[1],u=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText")),l=[],p=0;return(l=(l=l.concat(u.map((function(t,e){return r.duration="auto"===r.duration?75*o[e].innerHTML.length:r.duration,r.delay=p,r.onComplete=null,p+=r.duration,new a(t,{text:t.innerHTML},{text:""},r)})))).concat(c.map((function(n,i){return r.duration="auto"===r.duration?75*s[i].innerHTML.length:r.duration,r.delay=p,r.onComplete=i===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=r.duration,new a(n,{text:""},{text:s[i].innerHTML},r)})))).start=function(){t.playing||(l.forEach((function(t){return t.start()})),t.playing=!0)},l}}},TransformFunctions:{component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t){var e=C(this.element);return e[t]?e[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},a=[],i=[],o=[],s=["translate3d","translate","rotate3d","skew"];return Object.keys(e).forEach((function(t){var u="object"==typeof e[t]&&e[t].length?e[t].map((function(t){return parseInt(t,10)})):parseInt(e[t],10);if(s.includes(t)){var c="translate"===t||"rotate"===t?t+"3d":t;r[c]="skew"===t?u.length?[u[0]||0,u[1]||0]:[u||0,0]:"translate"===t?u.length?[u[0]||0,u[1]||0,u[2]||0]:[u||0,0,0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(t)){var l=t.replace(/[XYZ]/,""),p="skew"===l?l:l+"3d",h="skew"===l?2:3,f=[];"translate"===l?f=a:"rotate"===l?f=i:"skew"===l&&(f=o);for(var d=0;d>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+a.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:Mt,skew:_t}},SVGDraw:{component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:U},functions:Pt,Util:{getRectLength:Ct,getPolyLength:Ot,getLineLength:Tt,getCircleLength:St,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:jt,percent:kt}},SVGMorph:{component:"svgMorph",property:"path",defaultValue:[],Interpolate:ge,defaultOptions:{morphPrecision:10},functions:Ce,Util:{addPoints:xe,bisect:Ee,getPolygon:_e,validPolygon:Me,getInterpolationPoints:ke,pathStringToPolygon:be,distanceSquareRoot:ye,midPoint:re,approximatePolygon:me,rotatePolygon:we,pathToString:ce,pathToCurve:oe,getPathLength:he,getPointAtLength:fe,getDrawDirection:ve,roundPath:ue}}};Object.keys(Oe).forEach((function(t){var e=Oe[t];Oe[t]=new F(e)}));return{Animation:F,Components:Oe,Tween:q,fromTo:function(t,e,n,r){var a=r||{};return new D(P(t),e,n,a)},to:function(t,e,n){var r=n||{};return r.resetStart=e,new V(P(t),e,e,r)},TweenCollection:H,allFromTo:function(t,e,n,r){var a=r||{};return new H(P(t,!0),e,n,a)},allTo:function(t,e,n){var r=n||{};return r.resetStart=e,new H(P(t,!0),e,e,r)},Objects:w,Util:x,Easing:j,CubicBezier:t,Render:p,Interpolate:a,Process:I,Internals:k,Selector:P,Version:"2.2.0alpha2"}})); diff --git a/demo/svgCubicMorph.html b/demo/svgCubicMorph.html index a72a032..fdb5d46 100644 --- a/demo/svgCubicMorph.html +++ b/demo/svgCubicMorph.html @@ -94,9 +94,9 @@

The component will process paths and out of the box will provide the closest possible interpolation by default. It also implements a series of solutions from Paper.js to determine paths draw direction and automatically reverse one of them for most accurate presentation and as a result the previously featured options reverseFirstPath and reverseSecondPath have been deprecated.

-

The main difference with the SVG Morph component is the fact that this components is converting all path commands to cubicBezierTo, - giving it the upper hand over the original morph component. While the other component will spend time to process the path data and create polygons, this component should deliver - the animation faster and using considerably less power.

+

The main difference with the SVG Morph component is the fact that this components is converting all path commands to cubicBezierTo, giving it + the upper hand over the original morph component in many regards. While the other component will spend time to process the path data and create polygons, this component should + deliver the animation faster and using considerably less power.

All path processing is powered by our SVGPathCommander starting KUTE.js version 2.0.14, which aims to modernize and improve the path processing and enable transition from closed to and from un-closed shapes.

@@ -131,13 +131,9 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
- + - - - - @@ -153,15 +149,12 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864

Some takeaways:

    -
  • The red shape and its corresponding end shape are both the originals, un-edited shapes, both have the Z path command, notice a strange line at the bottom-right of the rectangle - during the animation. We'll have another example about that line.
    • -
  • The olive shape and its corresponding end shape both have been edited by removing the Z path command, notice the strange line during the animation is gone, also a different - presentation.
    • +
  • The olive shape and its corresponding end shape are both the originals, un-edited shapes.
  • The blue shape and its corresponding end shape have been edited by removing their Z path commands and by adding additional curve points using a vector graphics editor to match the amount of points in both shapes.

In this example we focus on experimentation to discover ways to optimize the morph animation so that the points travel optimal distance. Keep in mind that the Z path command is actually a shorthand - for L (line path command), sometimes it's required to close the shape, our shapes here happen to be OK without it.

+ for L (line path command), sometimes it's required to close the shape, however the path processing tools will remove it or replace it when converting path segments to C cubic-bezier.

Each morph animation as well as each pair of shapes can have its own quirks. You can use the technique on your shapes to optimize the animation to your style. Chris Coyier wrote an excelent article in which he explains the terminology and workflow on how SVG morphing animation works with simple examples.

@@ -192,14 +185,6 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
- - - - + diff --git a/demo/svgMorph.html b/demo/svgMorph.html index b50c9b6..0e4dce3 100644 --- a/demo/svgMorph.html +++ b/demo/svgMorph.html @@ -381,7 +381,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
  • Starting with KUTE.js version 2.0.14 the component implements SVGPathCommander for path processing, solving previous issues with over-optimized path strings among other issues. You can try the SVGPathCommander demo page to prepare your path strings.
  • Since SVG Morph animation works only with path elements, you might need a convertToPath feature, so - grab one here.
    • + grab one here.
  • Both SVG morph components will always animate first sub-path from both starting and ending shapes, and for any case hopefully this demo will guide you in mastering the technique.
  • In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or SVGPathCommander to apply a scale transformation to your shapes' path commands.
    • @@ -419,8 +419,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start(); - - + diff --git a/dist/kute.esm.js b/dist/kute.esm.js index a68204e..d64a3f4 100644 --- a/dist/kute.esm.js +++ b/dist/kute.esm.js @@ -1,20 +1,46 @@ /*! -* KUTE.js Standard v2.1.3 (http://thednp.github.io/kute.js) +* KUTE.js Standard v2.2.0alpha2 (http://thednp.github.io/kute.js) * Copyright 2015-2021 © thednp * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE) */ +/** + * Creates cubic-bezier easing functions. + * + * @class + */ class CubicBezier { + /** + * @constructor + * @param {number} p1x - first point horizontal position + * @param {number} p1y - first point vertical position + * @param {number} p2x - second point horizontal position + * @param {number} p2y - second point vertical position + * @param {string=} functionName - an optional function name + * @returns {(t: number) => number} a new CubicBezier easing function + */ constructor(p1x, p1y, p2x, p2y, functionName) { // pre-calculate the polynomial coefficients // First and last control points are implied to be (0,0) and (1.0, 1.0) + + /** @type {number} */ this.cx = 3.0 * p1x; + + /** @type {number} */ this.bx = 3.0 * (p2x - p1x) - this.cx; + + /** @type {number} */ this.ax = 1.0 - this.cx - this.bx; - + + /** @type {number} */ this.cy = 3.0 * p1y; + + /** @type {number} */ this.by = 3.0 * (p2y - p1y) - this.cy; + + /** @type {number} */ this.ay = 1.0 - this.cy - this.by; - + + /** @type {(t: number) => number} */ const BezierEasing = (t) => this.sampleCurveY(this.solveCurveX(t)); // this function needs a name @@ -24,18 +50,34 @@ class CubicBezier { return BezierEasing; } + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled X value + */ sampleCurveX(t) { return ((this.ax * t + this.bx) * t + this.cx) * t; } + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled Y value + */ sampleCurveY(t) { return ((this.ay * t + this.by) * t + this.cy) * t; } + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled curve derivative X value + */ sampleCurveDerivativeX(t) { return (3.0 * this.ax * t + 2.0 * this.bx) * t + this.cx; } + /** + * @param {number} x - progress [0-1] + * @return {number} - solved curve X value + */ solveCurveX(x) { let t0; let t1; @@ -76,35 +118,38 @@ class CubicBezier { } } -var KUTE$1 = {}; +/** + * The KUTE.js Execution Context + */ +const KEC = {}; -var Tweens = []; +const Tweens = []; -let globalObject; +let gl0bal; -if (typeof global !== 'undefined') globalObject = global; -else if (typeof window !== 'undefined') globalObject = window.self; -else globalObject = {}; +if (typeof global !== 'undefined') gl0bal = global; +else if (typeof window !== 'undefined') gl0bal = window.self; +else gl0bal = {}; -var globalObject$1 = globalObject; +const globalObject = gl0bal; // KUTE.js INTERPOLATE FUNCTIONS // ============================= -var Interpolate = {}; +const interpolate = {}; // schedule property specific function on animation start // link property update function to KUTE.js execution context -var onStart = {}; +const onStart = {}; // Include a performance.now polyfill. // source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts -let now; +let performanceNow; // In node.js, use process.hrtime. // eslint-disable-next-line // @ts-ignore if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) { - now = () => { + performanceNow = () => { // eslint-disable-next-line // @ts-ignore const time = process.hrtime(); @@ -116,24 +161,27 @@ if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrt // In a browser, use self.performance.now if it is available. // This must be bound, because directly assigning this function // leads to an invocation exception in Chrome. - now = self.performance.now.bind(self.performance); + performanceNow = self.performance.now.bind(self.performance); } else if (typeof Date !== 'undefined' && Date.now) { // Use Date.now if it is available. - now = Date.now; + performanceNow = Date.now; } else { // Otherwise, use 'new Date().getTime()'. - now = () => new Date().getTime(); + performanceNow = () => new Date().getTime(); } -var now$1 = now; +const now = performanceNow; const Time = {}; -Time.now = now$1; -// const that = window.self || window || {}; -// Time.now = that.performance.now.bind(that.performance); +Time.now = now; +// eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy let Tick = 0; +/** + * + * @param {number | Date} time + */ const Ticker = (time) => { let i = 0; while (i < Tweens.length) { @@ -154,66 +202,72 @@ function stop() { Tick = null; Object.keys(onStart).forEach((obj) => { if (typeof (onStart[obj]) === 'function') { - if (KUTE$1[obj]) delete KUTE$1[obj]; + if (KEC[obj]) delete KEC[obj]; } else { Object.keys(onStart[obj]).forEach((prop) => { - if (KUTE$1[prop]) delete KUTE$1[prop]; + if (KEC[prop]) delete KEC[prop]; }); } }); - Object.keys(Interpolate).forEach((i) => { - if (KUTE$1[i]) delete KUTE$1[i]; + Object.keys(interpolate).forEach((i) => { + if (KEC[i]) delete KEC[i]; }); } }, 64); } -// KUTE.js render update functions -// =============================== +// render update functions +// ======================= const Render = { Tick, Ticker, Tweens, Time, }; Object.keys(Render).forEach((blob) => { - if (!KUTE$1[blob]) { - KUTE$1[blob] = blob === 'Time' ? Time.now : Render[blob]; + if (!KEC[blob]) { + KEC[blob] = blob === 'Time' ? Time.now : Render[blob]; } }); -globalObject$1._KUTE = KUTE$1; +globalObject._KUTE = KEC; -var supportedProperties = {}; +// all supported properties +const supportedProperties = {}; -var defaultValues = {}; +const defaultValues = {}; -const defaultOptions = { +const defaultOptions$1 = { duration: 700, delay: 0, easing: 'linear', + repeat: 0, + repeatDelay: 0, + yoyo: false, + resetStart: false, + offset: 0, }; // used in preparePropertiesObject -var prepareProperty = {}; +const prepareProperty = {}; // check current property value when .to() method is used -var prepareStart = {}; +const prepareStart = {}; // checks for differences between the processed start and end values, // can be set to make sure start unit and end unit are same, // stack transforms, process SVG paths, // any type of post processing the component needs -var crossCheck = {}; +const crossCheck = {}; // schedule property specific function on animation complete -var onComplete = {}; +const onComplete = {}; // link properties to interpolate functions -var linkProperty = {}; +const linkProperty = {}; -var Objects = { +const Objects = { supportedProperties, defaultValues, - defaultOptions, + defaultOptions: defaultOptions$1, prepareProperty, prepareStart, crossCheck, @@ -223,19 +277,41 @@ var Objects = { }; // util - a general object for utils like rgbToHex, processEasing -var Util = {}; +const Util = {}; -var add = (tw) => Tweens.push(tw); +/** + * KUTE.add(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ +const add = (tw) => Tweens.push(tw); -var remove = (tw) => { +/** + * KUTE.remove(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ +const remove = (tw) => { const i = Tweens.indexOf(tw); if (i !== -1) Tweens.splice(i, 1); }; -var getAll = () => Tweens; +/** + * KUTE.add(Tween) + * + * @return {KUTE.Tween[]} tw a new tween to add + */ +const getAll = () => Tweens; -var removeAll = () => { Tweens.length = 0; }; +/** + * KUTE.removeAll() + */ +const removeAll = () => { Tweens.length = 0; }; +/** + * linkInterpolation + * @this {KUTE.Tween} + */ function linkInterpolation() { // DON'T change Object.keys(linkProperty).forEach((component) => { const componentLink = linkProperty[component]; @@ -245,18 +321,18 @@ function linkInterpolation() { // DON'T change if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius && Object.keys(this.valuesEnd).some((i) => (componentProps && componentProps.includes(i)) || (i === 'attr' && Object.keys(this.valuesEnd[i]).some((j) => componentProps && componentProps.includes(j))))) { - if (!KUTE$1[fnObj]) KUTE$1[fnObj] = componentLink[fnObj]; + if (!KEC[fnObj]) KEC[fnObj] = componentLink[fnObj]; } else { Object.keys(this.valuesEnd).forEach((prop) => { const propObject = this.valuesEnd[prop]; if (propObject instanceof Object) { Object.keys(propObject).forEach((i) => { if (typeof (componentLink[i]) === 'function') { // transformCSS3 - if (!KUTE$1[i]) KUTE$1[i] = componentLink[i]; + if (!KEC[i]) KEC[i] = componentLink[i]; } else { Object.keys(componentLink[fnObj]).forEach((j) => { if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix - if (!KUTE$1[j]) KUTE$1[j] = componentLink[i][j]; + if (!KEC[j]) KEC[j] = componentLink[i][j]; } }); } @@ -268,7 +344,7 @@ function linkInterpolation() { // DON'T change }); } -var Internals = { +const internals = { add, remove, getAll, @@ -277,7 +353,14 @@ var Internals = { linkInterpolation, }; -// getInlineStyle - get transform style for element from cssText for .to() method +/** + * getInlineStyle + * Returns the transform style for element from + * cssText. Used by for the `.to()` static method. + * + * @param {Element} el target element + * @returns {object} + */ function getInlineStyle(el) { // if the scroll applies to `window` it returns as it has no styling if (!el.style) return false; @@ -305,14 +388,23 @@ function getInlineStyle(el) { return transformObject; } -// getStyleForProperty - get computed style property for element for .to() method +/** + * getStyleForProperty + * + * Returns the computed style property for element for .to() method. + * Used by for the `.to()` static method. + * + * @param {Element} elem + * @param {string} propertyName + * @returns {string} + */ function getStyleForProperty(elem, propertyName) { + let result = defaultValues[propertyName]; const styleAttribute = elem.style; const computedStyle = getComputedStyle(elem) || elem.currentStyle; const styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName]) ? styleAttribute[propertyName] : computedStyle[propertyName]; - let result = defaultValues[propertyName]; if (propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute)) { result = styleValue; @@ -321,7 +413,14 @@ function getStyleForProperty(elem, propertyName) { return result; } -// prepareObject - returns all processed valuesStart / valuesEnd +/** + * prepareObject + * + * Returns all processed valuesStart / valuesEnd. + * + * @param {Element} obj the values start/end object + * @param {string} fn toggles between the two + */ function prepareObject(obj, fn) { // this, props object, type: start/end const propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd; @@ -364,7 +463,14 @@ function prepareObject(obj, fn) { // this, props object, type: start/end }); } -// getStartValues - returns the startValue for to() method +/** + * getStartValues + * + * Returns the start values for to() method. + * Used by for the `.to()` static method. + * + * @this {KUTE.Tween} the tween instance + */ function getStartValues() { const startValues = {}; const currentStyle = getInlineStyle(this.element); @@ -407,7 +513,10 @@ var Process = { prepareObject, }; -var connect = {}; +const connect = {}; +/** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */ +connect.tween = null; +connect.processEasing = null; const Easing = { linear: new CubicBezier(0, 0, 1, 1, 'linear'), @@ -444,6 +553,12 @@ const Easing = { easingBackInOut: new CubicBezier(0.68, -0.55, 0.265, 1.55, 'easingBackInOut'), }; +/** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor name + * @returns {KUTE.easingFunction} a valid easingfunction + */ function processBezierEasing(fn) { if (typeof fn === 'function') { return fn; @@ -454,14 +569,22 @@ function processBezierEasing(fn) { return new CubicBezier(bz[0] * 1, bz[1] * 1, bz[2] * 1, bz[3] * 1); // bezier easing } // if (/elastic|bounce/i.test(fn)) { - // throw TypeError(`KUTE.js - CubicBezier doesn't support ${fn} easing.`); + // throw TypeError(`KUTE - CubicBezier doesn't support ${fn} easing.`); // } return Easing.linear; } connect.processEasing = processBezierEasing; -// a public selector utility +/** + * selector + * + * A selector utility for KUTE.js. + * + * @param {KUTE.selectorType} el target(s) or string selector + * @param {boolean | number} multi when true returns an array/collection of elements + * @returns {Element | Element[] | null} + */ function selector(el, multi) { try { let requestedElem; @@ -496,20 +619,34 @@ function queueStart() { linkInterpolation.call(this); } -// single Tween object construct -// TweenBase is meant to be use for pre-processed values +/** + * The `TweenBase` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * `TweenBase` is meant to be used with pre-processed values. + */ class TweenBase { + /** + * @param {Element} targetElement the target element + * @param {KUTE.tweenProps} startObject the start values + * @param {KUTE.tweenProps} endObject the end values + * @param {KUTE.tweenOptions} opsObject the end values + * @returns {TweenBase} the resulting Tween object + */ constructor(targetElement, startObject, endObject, opsObject) { // element animation is applied to this.element = targetElement; + /** @type {boolean} */ this.playing = false; - + /** @type {number?} */ this._startTime = null; + /** @type {boolean} */ this._startFired = false; - this.valuesEnd = endObject; // valuesEnd - this.valuesStart = startObject; // valuesStart + // type is set via KUTE.tweenProps + this.valuesEnd = endObject; + this.valuesStart = startObject; // OPTIONS const options = opsObject || {}; @@ -517,9 +654,12 @@ class TweenBase { // used by to() method and expects object : {} / false this._resetStart = options.resetStart || 0; // you can only set a core easing function as default + /** @type {KUTE.easingOption} */ this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing); - this._duration = options.duration || defaultOptions.duration; // duration option | default - this._delay = options.delay || defaultOptions.delay; // delay option | default + /** @type {number} */ + this._duration = options.duration || defaultOptions$1.duration; // duration option | default + /** @type {number} */ + this._delay = options.delay || defaultOptions$1.delay; // delay option | default // set other options Object.keys(options).forEach((op) => { @@ -537,22 +677,24 @@ class TweenBase { const easingFnName = this._easing.name; if (!onStart[easingFnName]) { onStart[easingFnName] = function easingFn(prop) { - if (!KUTE$1[prop] && prop === this._easing.name) KUTE$1[prop] = this._easing; + if (!KEC[prop] && prop === this._easing.name) KEC[prop] = this._easing; }; } return this; } - // tween prototype - // queue tween object to main frame update - // move functions that use the ticker outside the prototype to be in the same scope with it + /** + * Starts tweening + * @param {number?} time the tween start time + * @returns {TweenBase} this instance + */ start(time) { // now it's a good time to start add(this); this.playing = true; - this._startTime = typeof time !== 'undefined' ? time : KUTE$1.Time(); + this._startTime = typeof time !== 'undefined' ? time : KEC.Time(); this._startTime += this._delay; if (!this._startFired) { @@ -569,6 +711,10 @@ class TweenBase { return this; } + /** + * Stops tweening + * @returns {TweenBase} this instance + */ stop() { if (this.playing) { remove(this); @@ -582,6 +728,9 @@ class TweenBase { return this; } + /** + * Trigger internal completion callbacks. + */ close() { // scroll|transformMatrix need this Object.keys(onComplete).forEach((component) => { @@ -594,18 +743,31 @@ class TweenBase { stop.call(this); } + /** + * Schedule another tween instance to start once this one completes. + * @param {KUTE.chainOption} args the tween animation start time + * @returns {TweenBase} this instance + */ chain(args) { this._chain = []; this._chain = args.length ? args : this._chain.concat(args); return this; } + /** + * Stop tweening the chained tween instances. + */ stopChainedTweens() { if (this._chain && this._chain.length) this._chain.forEach((tw) => tw.stop()); } + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ update(time) { - const T = time !== undefined ? time : KUTE$1.Time(); + const T = time !== undefined ? time : KEC.Time(); let elapsed; @@ -619,7 +781,7 @@ class TweenBase { // render the update Object.keys(this.valuesEnd).forEach((tweenProp) => { - KUTE$1[tweenProp](this.element, + KEC[tweenProp](this.element, this.valuesStart[tweenProp], this.valuesEnd[tweenProp], progress); @@ -657,17 +819,18 @@ class TweenBase { // Update Tween Interface connect.tween = TweenBase; -defaultOptions.repeat = 0; -defaultOptions.repeatDelay = 0; -defaultOptions.yoyo = false; -defaultOptions.resetStart = false; - -// no need to set defaults for callbacks -// defaultOptions.onPause = undefined -// defaultOptions.onResume = undefined - -// the constructor that supports to, allTo methods +/** + * The `KUTE.Tween()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor adds additional functionality and is the default + * Tween object constructor in KUTE.js. + */ class Tween extends TweenBase { + /** + * @param {KUTE.tweenParams} args (*target*, *startValues*, *endValues*, *options*) + * @returns {Tween} the resulting Tween object + */ constructor(...args) { super(...args); // this calls the constructor of TweenBase @@ -675,8 +838,9 @@ class Tween extends TweenBase { this.valuesStart = {}; this.valuesEnd = {}; - const startObject = args[1]; - const endObject = args[2]; + // const startObject = args[1]; + // const endObject = args[2]; + const [startObject, endObject, options] = args.slice(1); // set valuesEnd prepareObject.call(this, endObject, 'end'); @@ -698,20 +862,26 @@ class Tween extends TweenBase { } // set paused state + /** @type {boolean} */ this.paused = false; + /** @type {number?} */ this._pauseTime = null; // additional properties and options - const options = args[3]; - - this._repeat = options.repeat || defaultOptions.repeat; - this._repeatDelay = options.repeatDelay || defaultOptions.repeatDelay; + /** @type {number?} */ + this._repeat = options.repeat || defaultOptions$1.repeat; + /** @type {number?} */ + this._repeatDelay = options.repeatDelay || defaultOptions$1.repeatDelay; // we cache the number of repeats to be able to put it back after all cycles finish + /** @type {number?} */ this._repeatOption = this._repeat; // yoyo needs at least repeat: 1 + /** @type {KUTE.tweenProps} */ this.valuesRepeat = {}; // valuesRepeat - this._yoyo = options.yoyo || defaultOptions.yoyo; + /** @type {boolean} */ + this._yoyo = options.yoyo || defaultOptions$1.yoyo; + /** @type {boolean} */ this._reversed = false; // don't load extra callbacks @@ -723,7 +893,11 @@ class Tween extends TweenBase { return this; } - // additions to start method + /** + * Starts tweening, extended method + * @param {number?} time the tween start time + * @returns {Tween} this instance + */ start(time) { // on start we reprocess the valuesStart for TO() method if (this._resetStart) { @@ -752,7 +926,10 @@ class Tween extends TweenBase { return this; } - // updates to super methods + /** + * Stops tweening, extended method + * @returns {Tween} this instance + */ stop() { super.stop(); if (!this.paused && this.playing) { @@ -762,6 +939,9 @@ class Tween extends TweenBase { return this; } + /** + * Trigger internal completion callbacks. + */ close() { super.close(); @@ -776,7 +956,10 @@ class Tween extends TweenBase { return this; } - // additions to prototype + /** + * Resume tweening + * @returns {Tween} this instance + */ resume() { if (this.paused && this.playing) { this.paused = false; @@ -786,7 +969,7 @@ class Tween extends TweenBase { // re-queue execution context queueStart.call(this); // update time and let it roll - this._startTime += KUTE$1.Time() - this._pauseTime; + this._startTime += KEC.Time() - this._pauseTime; add(this); // restart ticker if stopped if (!Tick) Ticker(); @@ -794,11 +977,15 @@ class Tween extends TweenBase { return this; } + /** + * Pause tweening + * @returns {Tween} this instance + */ pause() { if (!this.paused && this.playing) { remove(this); this.paused = true; - this._pauseTime = KUTE$1.Time(); + this._pauseTime = KEC.Time(); if (this._onPause !== undefined) { this._onPause.call(this); } @@ -806,19 +993,25 @@ class Tween extends TweenBase { return this; } + /** + * Reverses start values with end values + */ reverse() { - // if (this._yoyo) { Object.keys(this.valuesEnd).forEach((reverseProp) => { const tmp = this.valuesRepeat[reverseProp]; this.valuesRepeat[reverseProp] = this.valuesEnd[reverseProp]; this.valuesEnd[reverseProp] = tmp; this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp]; }); - // } } + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ update(time) { - const T = time !== undefined ? time : KUTE$1.Time(); + const T = time !== undefined ? time : KEC.Time(); let elapsed; @@ -832,7 +1025,7 @@ class Tween extends TweenBase { // render the update Object.keys(this.valuesEnd).forEach((tweenProp) => { - KUTE$1[tweenProp](this.element, + KEC[tweenProp](this.element, this.valuesStart[tweenProp], this.valuesEnd[tweenProp], progress); @@ -886,60 +1079,90 @@ class Tween extends TweenBase { // Update Tween Interface Update connect.tween = Tween; -// KUTE.js Tween Collection -// ======================== - +/** + * The static method creates a new `Tween` object for each `HTMLElement` + * from and `Array`, `HTMLCollection` or `NodeList`. + */ class TweenCollection { + /** + * + * @param {Element[] | HTMLCollection | NodeList} els target elements + * @param {KUTE.tweenProps} vS the start values + * @param {KUTE.tweenProps} vE the end values + * @param {KUTE.tweenOptions} Options tween options + * @returns {TweenCollection} the Tween object collection + */ constructor(els, vS, vE, Options) { + const TweenConstructor = connect.tween; + /** @type {KUTE.twCollection[]} */ this.tweens = []; - // set default offset - if (!('offset' in defaultOptions)) defaultOptions.offset = 0; - const Ops = Options || {}; - Ops.delay = Ops.delay || defaultOptions.delay; + /** @type {number?} */ + Ops.delay = Ops.delay || defaultOptions$1.delay; // set all options const options = []; Array.from(els).forEach((el, i) => { - const TweenConstructor = connect.tween; options[i] = Ops || {}; - options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions.offset) : Ops.delay; + options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions$1.offset) : Ops.delay; if (el instanceof Element) { this.tweens.push(new TweenConstructor(el, vS, vE, options[i])); } else { - throw Error(`KUTE.js - ${el} not instanceof [Element]`); + throw Error(`KUTE - ${el} is not instanceof Element`); } }); + /** @type {number?} */ this.length = this.tweens.length; return this; } + /** + * Starts tweening, all targets + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ start(time) { - const T = time === undefined ? KUTE$1.Time() : time; + const T = time === undefined ? KEC.Time() : time; this.tweens.map((tween) => tween.start(T)); return this; } + /** + * Stops tweening, all targets and their chains + * @returns {TweenCollection} this instance + */ stop() { this.tweens.map((tween) => tween.stop()); return this; } - pause(time) { - const T = time === undefined ? KUTE$1.Time() : time; - this.tweens.map((tween) => tween.pause(T)); + /** + * Pause tweening, all targets + * @returns {TweenCollection} this instance + */ + pause() { + this.tweens.map((tween) => tween.pause()); return this; } - resume(time) { - const T = time === undefined ? KUTE$1.Time() : time; - this.tweens.map((tween) => tween.resume(T)); + /** + * Resume tweening, all targets + * @returns {TweenCollection} this instance + */ + resume() { + this.tweens.map((tween) => tween.resume()); return this; } + /** + * Schedule another tween or collection to start after + * this one is complete. + * @param {number?} args the tween start time + * @returns {TweenCollection} this instance + */ chain(args) { const lastTween = this.tweens[this.length - 1]; if (args instanceof TweenCollection) { @@ -952,14 +1175,26 @@ class TweenCollection { return this; } + /** + * Check if any tween instance is playing + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ playing() { return this.tweens.some((tw) => tw.playing); } + /** + * Remove all tweens in the collection + */ removeTweens() { this.tweens = []; } + /** + * Returns the maximum animation duration + * @returns {number} this instance + */ getMaxDuration() { const durations = []; this.tweens.forEach((tw) => { @@ -969,52 +1204,94 @@ class TweenCollection { } } +const { tween: TweenConstructor$1 } = connect; + +/** + * The `KUTE.to()` static method returns a new Tween object + * for a single `HTMLElement` at its current state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function to(element, endObject, optionsObj) { const options = optionsObj || {}; - const TweenConstructor = connect.tween; options.resetStart = endObject; - return new TweenConstructor(selector(element), endObject, endObject, options); + return new TweenConstructor$1(selector(element), endObject, endObject, options); } +const { tween: TweenConstructor } = connect; + +/** + * The `KUTE.fromTo()` static method returns a new Tween object + * for a single `HTMLElement` at a given state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function fromTo(element, startObject, endObject, optionsObj) { const options = optionsObj || {}; - const TweenConstructor = connect.tween; return new TweenConstructor(selector(element), startObject, endObject, options); } -// multiple elements tween objects +/** + * The `KUTE.allTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at their current state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenProps} optionsObj progress + * @returns {TweenCollection} the Tween object collection + */ function allTo(elements, endObject, optionsObj) { const options = optionsObj || {}; - optionsObj.resetStart = endObject; + options.resetStart = endObject; return new TweenCollection(selector(elements, true), endObject, endObject, options); } +/** + * The `KUTE.allFromTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at a given state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {TweenCollection} the Tween object collection + */ function allFromTo(elements, startObject, endObject, optionsObj) { const options = optionsObj || {}; return new TweenCollection(selector(elements, true), startObject, endObject, options); } -// Animation class -// * builds KUTE components -// * populate KUTE objects -// * AnimatonBase creates a KUTE.js build for pre-made Tween objects -// * AnimatonDevelopment can help you debug your new components +/** + * Animation Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + */ class Animation { + /** + * @constructor + * @param {KUTE.fullComponent} Component + */ constructor(Component) { try { if (Component.component in supportedProperties) { - throw Error(`KUTE.js - ${Component.component} already registered`); + throw Error(`KUTE - ${Component.component} already registered`); } else if (Component.property in defaultValues) { - throw Error(`KUTE.js - ${Component.property} already registered`); - } else { - this.setComponent(Component); + throw Error(`KUTE - ${Component.property} already registered`); } } catch (e) { throw Error(e); } - } - setComponent(Component) { const propertyInfo = this; const ComponentName = Component.component; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util } @@ -1059,9 +1336,10 @@ class Animation { // set additional options if (Component.defaultOptions) { - Object.keys(Component.defaultOptions).forEach((op) => { - defaultOptions[op] = Component.defaultOptions[op]; - }); + // Object.keys(Component.defaultOptions).forEach((op) => { + // defaultOptions[op] = Component.defaultOptions[op]; + // }); + Object.assign(defaultOptions$1, Component.defaultOptions); } // set functions @@ -1089,16 +1367,16 @@ class Animation { }); } - // set component interpolate + // set component interpolation functions if (Component.Interpolate) { Object.keys(Component.Interpolate).forEach((fni) => { const compIntObj = Component.Interpolate[fni]; - if (typeof (compIntObj) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj; + if (typeof (compIntObj) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj; } else { Object.keys(compIntObj).forEach((sfn) => { - if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj[sfn]; + if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj[sfn]; } }); } @@ -1118,8 +1396,17 @@ class Animation { } } -// trueDimension - returns { v = value, u = unit } -function trueDimension(dimValue, isAngle) { +/** + * trueDimension + * + * Returns the string value of a specific CSS property converted into a nice + * { v = value, u = unit } object. + * + * @param {string} dimValue the property string value + * @param {boolean | number} isAngle sets the utility to investigate angles + * @returns {{v: number, u: string}} the true {value, unit} tuple + */ +const trueDimension = (dimValue, isAngle) => { const intValue = parseInt(dimValue, 10) || 0; const mUnits = ['px', '%', 'deg', 'rad', 'em', 'rem', 'vh', 'vw']; let theUnit; @@ -1134,9 +1421,17 @@ function trueDimension(dimValue, isAngle) { } return { v: intValue, u: theUnit }; -} +}; -function numbers(a, b, v) { // number1, number2, progress +/** + * Numbers Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {number} v progress + * @returns {number} the interpolated number + */ +function numbers(a, b, v) { const A = +a; const B = b - a; // a = +a; b -= a; @@ -1144,12 +1439,20 @@ function numbers(a, b, v) { // number1, number2, progress } // Component Functions +/** + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ function boxModelOnStart(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable no-param-reassign -- impossible to satisfy */ + /* eslint-disable no-bitwise -- impossible to satisfy */ elem.style[tweenProp] = `${v > 0.99 || v < 0.01 ? ((numbers(a, b, v) * 10) >> 0) / 10 : (numbers(a, b, v)) >> 0}px`; + /* eslint-enable no-bitwise */ + /* eslint-enable no-param-reassign */ }; } } @@ -1160,9 +1463,21 @@ const baseBoxOnStart = {}; baseBoxProps.forEach((x) => { baseBoxOnStart[x] = boxModelOnStart; }); // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getBoxModel(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } + +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property name + * @returns {number} the property tween object + */ function prepareBoxModel(tweenProp, value) { const boxValue = trueDimension(value); const offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; @@ -1186,7 +1501,7 @@ const essentialBoxModelFunctions = { }; // Component Essential -const essentialBoxModel = { +const BoxModelEssential = { component: 'essentialBoxModel', category: 'boxModel', properties: essentialBoxProps, @@ -1196,10 +1511,19 @@ const essentialBoxModel = { Util: { trueDimension }, }; -// hexToRGB - returns RGB color object {r,g,b} -var hexToRGB = (hex) => { - const hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") - const HEX = hex.replace(hexShorthand, (m, r, g, b) => r + r + g + g + b + b); +/** + * hexToRGB + * + * Converts a #HEX color format into RGB + * and returns a color object {r,g,b}. + * + * @param {string} hex the degree angle + * @returns {KUTE.colorObject | null} the radian angle + */ +const hexToRGB = (hex) => { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + const hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + const HEX = hex.replace(hexShorthand, (_, r, g, b) => r + r + g + g + b + b); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(HEX); return result ? { @@ -1209,8 +1533,15 @@ var hexToRGB = (hex) => { } : null; }; -// trueColor - replace transparent and transform any color to rgba()/rgb() -function trueColor(colorString) { +/** + * trueColor + * + * Transform any color to rgba()/rgb() and return a nice RGB(a) object. + * + * @param {string} colorString the color input + * @returns {KUTE.colorObject} the {r,g,b,a} color object + */ +const trueColor = (colorString) => { let result; if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string const vrgb = colorString.replace(/\s|\)/, '').split('(')[1].split(','); @@ -1232,7 +1563,9 @@ function trueColor(colorString) { r: 0, g: 0, b: 0, a: 0, }; } - if (!/^#|^rgb/.test(colorString)) { // maybe we can check for web safe colors + // maybe we can check for web safe colors + // only works in a browser + if (!/^#|^rgb/.test(colorString)) { const siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString; let webColor = getComputedStyle(siteHead, null).color; @@ -1245,8 +1578,16 @@ function trueColor(colorString) { }; } return result; -} +}; +/** + * Color Interpolation Function. + * + * @param {KUTE.colorObject} a start color + * @param {KUTE.colorObject} b end color + * @param {number} v progress + * @returns {string} the resulting color + */ function colors(a, b, v) { const _c = {}; const ep = ')'; @@ -1255,12 +1596,10 @@ function colors(a, b, v) { const rgba = 'rgba('; Object.keys(b).forEach((c) => { - // _c[c] = c !== 'a' ? (numbers(a[c], b[c], v) >> 0 || 0) : (a[c] && b[c]) - // ? (numbers(a[c], b[c], v) * 100 >> 0) / 100 : null; if (c !== 'a') { - _c[c] = numbers(a[c], b[c], v) >> 0 || 0; + _c[c] = numbers(a[c], b[c], v) >> 0 || 0; // eslint-disable-line no-bitwise } else if (a[c] && b[c]) { - _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; + _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; // eslint-disable-line no-bitwise } }); @@ -1275,13 +1614,22 @@ function colors(a, b, v) { // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) -const supportedColors$1 = ['color', 'backgroundColor', 'borderColor', - 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; +const supportedColors$1 = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', + 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor', +]; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartColors(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = (elem, a, b, v) => { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = colors(a, b, v); }; } @@ -1290,11 +1638,14 @@ function onStartColors(tweenProp) { const colorsOnStart$1 = {}; supportedColors$1.forEach((x) => { colorsOnStart$1[x] = onStartColors; }); -// Component Interpolation // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) -const supportedColors = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; +const supportedColors = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor', +]; const defaultColors = {}; supportedColors.forEach((tweenProp) => { @@ -1307,10 +1658,22 @@ supportedColors.forEach((x) => { colorsOnStart[x] = onStartColors; }); +/** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} property computed style + */ function getColor(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } -function prepareColor(prop, value) { + +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.colorObject} the property tween object + */ +function prepareColor(/* prop, */_, value) { return trueColor(value); } @@ -1336,18 +1699,30 @@ const colorProperties = { const attributes = {}; const onStartAttr = { + /** + * onStartAttr.attr + * + * Sets the sub-property update function. + * @param {string} tweenProp the property name + */ attr(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE$1[tweenProp] = (elem, vS, vE, v) => { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (elem, vS, vE, v) => { Object.keys(vE).forEach((oneAttr) => { - KUTE$1.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); + KEC.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); }); }; } }, + /** + * onStartAttr.attributes + * + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ attributes(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd.attr) { - KUTE$1[tweenProp] = attributes; + if (!KEC[tweenProp] && this.valuesEnd.attr) { + KEC[tweenProp] = attributes; } }, }; @@ -1359,13 +1734,25 @@ const ComponentName = 'htmlAttributes'; const svgColors = ['fill', 'stroke', 'stop-color']; // Component Util +/** + * Returns non-camelcase property name. + * @param {string} a the camelcase property name + * @returns {string} the non-camelcase property name + */ function replaceUppercase(a) { return a.replace(/[A-Z]/g, '-$&').toLowerCase(); } // Component Functions -function getAttr(tweenProp, value) { +/** + * Returns the current attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {{[x:string]: string}} attribute value + */ +function getAttr(/* tweenProp, */_, value) { const attrStartValues = {}; Object.keys(value).forEach((attr) => { - // get the value for 'fill-opacity' not fillOpacity, also 'width' not the internal 'width_px' + // get the value for 'fill-opacity' not fillOpacity + // also 'width' not the internal 'width_px' const attribute = replaceUppercase(attr).replace(/_+[a-z]+/, ''); const currentValue = this.element.getAttribute(attribute); attrStartValues[attribute] = svgColors.includes(attribute) @@ -1376,6 +1763,12 @@ function getAttr(tweenProp, value) { return attrStartValues; } +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} attrObj the property value + * @returns {number} the property tween object + */ function prepareAttr(tweenProp, attrObj) { // attr (string),attrObj (object) const attributesObject = {}; @@ -1395,6 +1788,7 @@ function prepareAttr(tweenProp, attrObj) { // attr (string),attrObj (object) if (this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes)) { attributes[tp] = (elem, oneAttr, a, b, v) => { const _p = oneAttr.replace(suffix, ''); + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ elem.setAttribute(_p, ((numbers(a.v, b.v, v) * 1000 >> 0) / 1000) + b.u); }; } @@ -1463,28 +1857,38 @@ const htmlAttributes = { } */ // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartOpacity(tweenProp/* , value */) { // opacity could be 0 sometimes, we need to check regardless - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable */ elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000; + /* eslint-enable */ }; } } -/* opacityProperty = { - property: 'opacity', - defaultValue: 1, - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } -} */ - // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getOpacity(tweenProp/* , value */) { return getStyleForProperty(this.element, tweenProp); } -function prepareOpacity(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ +function prepareOpacity(/* tweenProp, */_, value) { return parseFloat(value); // opacity always FLOAT } @@ -1496,7 +1900,7 @@ const opacityFunctions = { }; // Full Component -const opacityProperty = { +const OpacityProperty = { component: 'opacityProperty', property: 'opacity', defaultValue: 1, @@ -1523,10 +1927,16 @@ const charSet = { // Component Functions const onStartWrite = { + /** + * onStartWrite.text + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ text(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { const chars = this._textChars; - let charsets = charSet[defaultOptions.textChars]; + let charsets = charSet[defaultOptions$1.textChars]; if (chars in charSet) { charsets = charSet[chars]; @@ -1534,12 +1944,13 @@ const onStartWrite = { charsets = chars; } - KUTE$1[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { let initialText = ''; let endText = ''; const finalText = b === '' ? ' ' : b; const firstLetterA = a.substring(0); const firstLetterB = b.substring(0); + /* eslint-disable */ const pointer = charsets[(Math.random() * charsets.length) >> 0]; if (a === ' ') { @@ -1558,13 +1969,22 @@ const onStartWrite = { .substring(0, Math.min(v * firstLetterB.length, firstLetterB.length) >> 0); elem.innerHTML = v < 1 ? ((endText + pointer + initialText)) : finalText; } + /* eslint-enable */ }; } }, + /** + * onStartWrite.number + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ number(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { // numbers can be 0 - KUTE$1[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { // numbers can be 0 + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable */ elem.innerHTML = numbers(a, b, v) >> 0; + /* eslint-enable */ }; } }, @@ -1587,8 +2007,10 @@ function wrapContentsSpan(el, classNAME) { textWriteWrapper = document.createElement('SPAN'); textWriteWrapper.className = classNAME; textWriteWrapper.innerHTML = elementInnerHTML; + /* eslint-disable no-param-reassign -- impossible to satisfy */ el.appendChild(textWriteWrapper); el.innerHTML = textWriteWrapper.outerHTML; + /* eslint-enable no-param-reassign -- impossible to satisfy */ } else if (el.children.length && el.children[0].className === classNAME) { [textWriteWrapper] = el.children; } @@ -1639,9 +2061,11 @@ function setSegments(target, newText) { const oldTargetSegs = getTextPartsArray(target, 'text-part'); const newTargetSegs = getTextPartsArray(wrapContentsSpan(newText), 'text-part'); + /* eslint-disable no-param-reassign */ target.innerHTML = ''; target.innerHTML += oldTargetSegs.map((s) => { s.className += ' oldText'; return s.outerHTML; }).join(''); target.innerHTML += newTargetSegs.map((s) => { s.className += ' newText'; return s.outerHTML.replace(s.innerHTML, ''); }).join(''); + /* eslint-enable no-param-reassign */ return [oldTargetSegs, newTargetSegs]; } @@ -1680,8 +2104,10 @@ function createTextTweens(target, newText, ops) { })); textTween = textTween.concat(newTargets.map((el, i) => { function onComplete() { + /* eslint-disable no-param-reassign */ target.innerHTML = newText; target.playing = false; + /* eslint-enable no-param-reassign */ } options.duration = options.duration === 'auto' ? newTargetSegs[i].innerHTML.length * 75 : options.duration; @@ -1695,6 +2121,7 @@ function createTextTweens(target, newText, ops) { textTween.start = function startTweens() { if (!target.playing) { textTween.forEach((tw) => tw.start()); + // eslint-disable-next-line no-param-reassign target.playing = true; } }; @@ -1703,10 +2130,20 @@ function createTextTweens(target, newText, ops) { } // Component Functions +/** + * Returns the current element `innerHTML`. + * @returns {string} computed style for property + */ function getWrite(/* tweenProp, value */) { return this.element.innerHTML; } +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number | string} the property tween object + */ function prepareText(tweenProp, value) { if (tweenProp === 'number') { return parseFloat(value); @@ -1723,7 +2160,7 @@ const textWriteFunctions = { }; // Full Component -const textWrite = { +const TextWrite = { component: 'textWriteProperties', category: 'textWrite', properties: ['text', 'number'], @@ -1735,62 +2172,132 @@ const textWrite = { Util: { charSet, createTextTweens }, }; +/** + * Perspective Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the perspective function in string format + */ function perspective(a, b, u, v) { + // eslint-disable-next-line no-bitwise return `perspective(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`; } +/** + * Translate 3D Interpolation Function. + * + * @param {number[]} a start [x,y,z] position + * @param {number[]} b end [x,y,z] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D translation string + */ function translate3d(a, b, u, v) { const translateArray = []; for (let ax = 0; ax < 3; ax += 1) { translateArray[ax] = (a[ax] || b[ax] + // eslint-disable-next-line no-bitwise ? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u; } return `translate3d(${translateArray.join(',')})`; } +/** + * 3D Rotation Interpolation Function. + * + * @param {number} a start [x,y,z] angles + * @param {number} b end [x,y,z] angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D rotation string + */ function rotate3d(a, b, u, v) { let rotateStr = ''; + // eslint-disable-next-line no-bitwise rotateStr += a[0] || b[0] ? `rotateX(${((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000}${u})` : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[1] || b[1] ? `rotateY(${((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000}${u})` : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[2] || b[2] ? `rotateZ(${((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000}${u})` : ''; return rotateStr; } +/** + * Translate 2D Interpolation Function. + * + * @param {number[]} a start [x,y] position + * @param {number[]} b end [x,y] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 2D translation string + */ function translate(a, b, u, v) { const translateArray = []; + // eslint-disable-next-line no-bitwise translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return `translate(${translateArray.join(',')})`; } +/** + * 2D Rotation Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated rotation + */ function rotate(a, b, u, v) { + // eslint-disable-next-line no-bitwise return `rotate(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`; } +/** + * Scale Interpolation Function. + * + * @param {number} a start scale + * @param {number} b end scale + * @param {number} v progress + * @returns {string} the interpolated scale + */ function scale(a, b, v) { + // eslint-disable-next-line no-bitwise return `scale(${((a + (b - a) * v) * 1000 >> 0) / 1000})`; } +/** + * Skew Interpolation Function. + * + * @param {number} a start {x,y} angles + * @param {number} b end {x,y} angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated string value of skew(s) + */ function skew(a, b, u, v) { const skewArray = []; + // eslint-disable-next-line no-bitwise skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return `skew(${skewArray.join(',')})`; } -/* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - -// same to svg transform, attr - // Component Functions +/** + * Sets the property update function. + * * same to svgTransform, htmlAttributes + * @param {string} tweenProp the property name + */ function onStartTransform(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE$1[tweenProp] = (elem, a, b, v) => { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0 + (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z] + (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z] @@ -1800,23 +2307,27 @@ function onStartTransform(tweenProp) { } } -/* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - // same to svg transform, attr // the component developed for modern browsers supporting non-prefixed transform // Component Functions -function getTransform(tweenProperty/* , value */) { +/** + * Returns the current property inline style. + * @param {string} tweenProp the property name + * @returns {string} inline style for property + */ +function getTransform(tweenProp/* , value */) { const currentStyle = getInlineStyle(this.element); - return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; + return currentStyle[tweenProp] ? currentStyle[tweenProp] : defaultValues[tweenProp]; } -function prepareTransform(prop, obj) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformFObject} the property tween object + */ +function prepareTransform(/* prop, */_, obj) { const prepAxis = ['X', 'Y', 'Z']; // coordinates const transformObject = {}; const translateArray = []; const rotateArray = []; const skewArray = []; @@ -1870,6 +2381,10 @@ function prepareTransform(prop, obj) { return transformObject; } +/** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ function crossCheckTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp]) { @@ -1915,7 +2430,7 @@ const defaultTransformValues = { }; // Full Component -const transformFunctionsComponent = { +const TransformFunctions = { component: 'transformFunctions', property: 'transform', subProperties: supportedTransformProperties, @@ -1932,51 +2447,58 @@ const transformFunctionsComponent = { }, }; -/* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } -} */ - // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartDraw(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable no-bitwise -- impossible to satisfy */ const pathLength = (a.l * 100 >> 0) / 100; const start = (numbers(a.s, b.s, v) * 100 >> 0) / 100; const end = (numbers(a.e, b.e, v) * 100 >> 0) / 100; const offset = 0 - start; const dashOne = end + offset; - + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDashoffset = `${offset}px`; + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDasharray = `${((dashOne < 1 ? 0 : dashOne) * 100 >> 0) / 100}px, ${pathLength}px`; + /* eslint-disable no-bitwise -- impossible to satisfy */ }; } } -/* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } -} */ - // Component Util +/** + * Convert a `` length percent value to absolute. + * @param {string} v raw value + * @param {number} l length value + * @returns {number} the absolute value + */ function percent(v, l) { return (parseFloat(v) / 100) * l; } -// http://stackoverflow.com/a/30376660 -// returns the length of a Rect +/** + * Returns the `` length. + * It doesn't compute `rx` and / or `ry` of the element. + * @see http://stackoverflow.com/a/30376660 + * @param {SVGRectElement} el target element + * @returns {number} the `` length + */ function getRectLength(el) { const w = el.getAttribute('width'); const h = el.getAttribute('height'); return (w * 2) + (h * 2); } -// getPolygonLength / getPolylineLength -// returns the length of the Polygon / Polyline +/** + * Returns the `` / `` length. + * @param {SVGPolylineElement | SVGPolygonElement} el target element + * @returns {number} the element length + */ function getPolyLength(el) { const points = el.getAttribute('points').split(' '); @@ -2007,7 +2529,11 @@ function getPolyLength(el) { return len; } -// return the length of the line +/** + * Returns the `` length. + * @param {SVGLineElement} el target element + * @returns {number} the element length + */ function getLineLength(el) { const x1 = el.getAttribute('x1'); const x2 = el.getAttribute('x2'); @@ -2016,13 +2542,22 @@ function getLineLength(el) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); } -// return the length of the circle +/** + * Returns the `` length. + * @param {SVGCircleElement} el target element + * @returns {number} the element length + */ function getCircleLength(el) { const r = el.getAttribute('r'); return 2 * Math.PI * r; } // returns the length of an ellipse +/** + * Returns the `` length. + * @param {SVGEllipseElement} el target element + * @returns {number} the element length + */ function getEllipseLength(el) { const rx = el.getAttribute('rx'); const ry = el.getAttribute('ry'); @@ -2031,7 +2566,11 @@ function getEllipseLength(el) { return ((Math.sqrt(0.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2; } -// returns the result of any of the below functions +/** + * Returns the shape length. + * @param {SVGPathCommander.shapeTypes} el target element + * @returns {number} the element length + */ function getTotalLength(el) { if (el.tagName === 'rect') { return getRectLength(el); @@ -2048,6 +2587,12 @@ function getTotalLength(el) { return 0; } +/** + * Returns the property tween object. + * @param {SVGPathCommander.shapeTypes} element the target element + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ function getDraw(element, value) { const length = /path|glyph/.test(element.tagName) ? element.getTotalLength() @@ -2057,7 +2602,7 @@ function getDraw(element, value) { let dasharray; let offset; - if (value instanceof Object) { + if (value instanceof Object && Object.keys(value).every((v) => ['s', 'e', 'l'].includes(v))) { return value; } if (typeof value === 'string') { const v = value.split(/,|\s/); @@ -2073,17 +2618,33 @@ function getDraw(element, value) { return { s: start, e: end, l: length }; } +/** + * Reset CSS properties associated with the `draw` property. + * @param {SVGPathCommander.shapeTypes} element target + */ function resetDraw(elem) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ elem.style.strokeDashoffset = ''; elem.style.strokeDasharray = ''; + /* eslint-disable no-param-reassign -- impossible to satisfy */ } // Component Functions +/** + * Returns the property tween object. + * @returns {KUTE.drawObject} the property tween object + */ function getDrawValue(/* prop, value */) { return getDraw(this.element); } -function prepareDraw(a, o) { - return getDraw(this.element, o); +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ +function prepareDraw(_, value) { + return getDraw(this.element, value); } // All Component Functions @@ -2094,7 +2655,7 @@ const svgDrawFunctions = { }; // Component Full -const svgDraw = { +const SvgDrawProperty = { component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', @@ -2114,125 +2675,112 @@ const svgDraw = { }, }; -const SVGPCO = { - origin: null, - decimals: 4, - round: 1, -}; +/** + * Splits an extended A (arc-to) segment into two cubic-bezier segments. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` this segment belongs to + * @param {string[]} allPathCommands all previous path commands + * @param {number} i the segment index + */ -function clonePath(pathArray) { - return pathArray.map((x) => { - if (Array.isArray(x)) { - return clonePath(x); - } - return !Number.isNaN(+x) ? +x : x; - }); -} - -function roundPath(pathArray, round) { - const decimalsOption = !Number.isNaN(+round) ? +round : SVGPCO.decimals; - let result; - - if (decimalsOption) { - result = pathArray.map((seg) => seg.map((c) => { - const nr = +c; - const dc = 10 ** decimalsOption; - if (nr) { - return nr % 1 === 0 ? nr : Math.round(nr * dc) / dc; - } - return c; - })); - } else { - result = clonePath(pathArray); - } - return result; -} - -function fixArc(pathArray, allPathCommands, i) { - if (pathArray[i].length > 7) { - pathArray[i].shift(); - const pi = pathArray[i]; - // const ni = i + 1; - let ni = i; - while (pi.length) { +function fixArc(path, allPathCommands, i) { + if (path[i].length > 7) { + path[i].shift(); + const segment = path[i]; + let ni = i; // ESLint + while (segment.length) { // if created multiple C:s, their original seg is saved allPathCommands[i] = 'A'; - pathArray.splice(ni += 1, 0, ['C'].concat(pi.splice(0, 6))); - // pathArray.splice(i += 1, 0, ['C'].concat(pi.splice(0, 6))); - // pathArray.splice(i++, 0, ['C'].concat(pi.splice(0, 6))); + // @ts-ignore + path.splice(ni += 1, 0, ['C', ...segment.splice(0, 6)]); } - pathArray.splice(i, 1); + path.splice(i, 1); } } -var paramsCount = { +/** + * Segment params length + */ +const paramsCount = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0, }; -function isPathArray(pathArray) { - return Array.isArray(pathArray) && pathArray.every((seg) => { - const pathCommand = seg[0].toLowerCase(); - return paramsCount[pathCommand] === seg.length - 1 && /[achlmrqstvz]/g.test(pathCommand); - }); -} - -function isCurveArray(pathArray) { - return isPathArray(pathArray) && pathArray.slice(1).every((seg) => seg[0] === 'C'); -} - -function finalizeSegment(state) { - let pathCommand = state.pathValue[state.segmentStart]; - let pathComLK = pathCommand.toLowerCase(); - let params = state.data; +/** + * Breaks the parsing of a pathString once a segment is finalized. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ +function finalizeSegment(path) { + let pathCommand = path.pathValue[path.segmentStart]; + let LK = pathCommand.toLowerCase(); + let { data } = path; // Process duplicated commands (without comand name) - if (pathComLK === 'm' && params.length > 2) { - state.segments.push([pathCommand, params[0], params[1]]); - params = params.slice(2); - pathComLK = 'l'; - pathCommand = (pathCommand === 'm') ? 'l' : 'L'; + if (LK === 'm' && data.length > 2) { + // @ts-ignore + path.segments.push([pathCommand, data[0], data[1]]); + data = data.slice(2); + LK = 'l'; + pathCommand = pathCommand === 'm' ? 'l' : 'L'; } - if (pathComLK === 'r') { - state.segments.push([pathCommand].concat(params)); - } else { - while (params.length >= paramsCount[pathComLK]) { - state.segments.push([pathCommand].concat(params.splice(0, paramsCount[pathComLK]))); - if (!paramsCount[pathComLK]) { - break; - } + // @ts-ignore + while (data.length >= paramsCount[LK]) { + // path.segments.push([pathCommand].concat(data.splice(0, paramsCount[LK]))); + // @ts-ignore + path.segments.push([pathCommand, ...data.splice(0, paramsCount[LK])]); + // @ts-ignore + if (!paramsCount[LK]) { + break; } } } -var invalidPathValue = 'Invalid path value'; +const invalidPathValue = 'Invalid path value'; -function scanFlag(state) { - const ch = state.pathValue.charCodeAt(state.index); +/** + * Validates an A (arc-to) specific path command value. + * Usually a `large-arc-flag` or `sweep-flag`. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ +function scanFlag(path) { + const { index } = path; + const ch = path.pathValue.charCodeAt(index); if (ch === 0x30/* 0 */) { - state.param = 0; - state.index += 1; + path.param = 0; + path.index += 1; return; } if (ch === 0x31/* 1 */) { - state.param = 1; - state.index += 1; + path.param = 1; + path.index += 1; return; } - // state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; - state.err = `${invalidPathValue}: invalid Arc flag ${ch}`; + path.err = `${invalidPathValue}: invalid Arc flag "${ch}", expecting 0 or 1 at index ${index}`; } +/** + * Checks if a character is a digit. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isDigit(code) { return (code >= 48 && code <= 57); // 0..9 } -function scanParam(state) { - const start = state.index; - const { max } = state; +/** + * Validates every character of the path string, + * every path command, negative numbers or floating point numbers. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ +function scanParam(path) { + const { max, pathValue, index: start } = path; let index = start; let zeroFirst = false; let hasCeiling = false; @@ -2241,22 +2789,22 @@ function scanParam(state) { let ch; if (index >= max) { - // state.err = 'SvgPath: missed param (at pos ' + index + ')'; - state.err = `${invalidPathValue}: missing param ${state.pathValue[index]}`; + // path.err = 'SvgPath: missed param (at pos ' + index + ')'; + path.err = `${invalidPathValue} at ${index}: missing param ${pathValue[index]}`; return; } - ch = state.pathValue.charCodeAt(index); + ch = pathValue.charCodeAt(index); if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } // This logic is shamelessly borrowed from Esprima // https://github.com/ariya/esprimas if (!isDigit(ch) && ch !== 0x2E/* . */) { - // state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; - state.err = `${invalidPathValue} at index ${index}: ${state.pathValue[index]} is not a number`; + // path.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; + path.err = `${invalidPathValue} at index ${index}: ${pathValue[index]} is not a number`; return; } @@ -2264,63 +2812,68 @@ function scanParam(state) { zeroFirst = (ch === 0x30/* 0 */); index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; if (zeroFirst && index < max) { // decimal number starts with '0' such as '09' is illegal. if (ch && isDigit(ch)) { - // state.err = 'SvgPath: numbers started with `0` such as `09` + // path.err = 'SvgPath: numbers started with `0` such as `09` // are illegal (at pos ' + start + ')'; - state.err = `${invalidPathValue}: ${state.pathValue[start]} illegal number`; + path.err = `${invalidPathValue} at index ${start}: ${pathValue[start]} illegal number`; return; } } - while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + while (index < max && isDigit(pathValue.charCodeAt(index))) { index += 1; hasCeiling = true; } - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } if (ch === 0x2E/* . */) { hasDot = true; index += 1; - while (isDigit(state.pathValue.charCodeAt(index))) { + while (isDigit(pathValue.charCodeAt(index))) { index += 1; hasDecimal = true; } - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } if (ch === 0x65/* e */ || ch === 0x45/* E */) { if (hasDot && !hasCeiling && !hasDecimal) { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = `${invalidPathValue}: ${state.pathValue[index]} invalid float exponent`; + path.err = `${invalidPathValue} at index ${index}: ${pathValue[index]} invalid float exponent`; return; } index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { index += 1; } - if (index < max && isDigit(state.pathValue.charCodeAt(index))) { - while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + if (index < max && isDigit(pathValue.charCodeAt(index))) { + while (index < max && isDigit(pathValue.charCodeAt(index))) { index += 1; } } else { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = `${invalidPathValue}: ${state.pathValue[index]} invalid float exponent`; + // path.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; + path.err = `${invalidPathValue} at index ${index}: ${pathValue[index]} invalid float exponent`; return; } } - state.index = index; - state.param = +state.pathValue.slice(start, index); + path.index = index; + path.param = +path.pathValue.slice(start, index); } +/** + * Checks if the character is a space. + * + * @param {number} ch the character to check + * @returns {boolean} check result + */ function isSpace(ch) { const specialSpaces = [ 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, @@ -2331,14 +2884,28 @@ function isSpace(ch) { || (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0); } -function skipSpaces(state) { - while (state.index < state.max && isSpace(state.pathValue.charCodeAt(state.index))) { - state.index += 1; +/** + * Points the parser to the next character in the + * path string every time it encounters any kind of + * space character. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ +function skipSpaces(path) { + const { pathValue, max } = path; + while (path.index < max && isSpace(pathValue.charCodeAt(path.index))) { + path.index += 1; } } +/** + * Checks if the character is a path command. + * + * @param {any} code the character to check + * @returns {boolean} check result + */ function isPathCommand(code) { - // eslint-disable no-bitwise + // eslint-disable-next-line no-bitwise -- Impossible to satisfy switch (code | 0x20) { case 0x6D/* m */: case 0x7A/* z */: @@ -2350,13 +2917,20 @@ function isPathCommand(code) { case 0x71/* q */: case 0x74/* t */: case 0x61/* a */: - case 0x72/* r */: + // case 0x72/* r */: return true; default: return false; } } +/** + * Checks if the character is or belongs to a number. + * [0-9]|+|-|. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isDigitStart(code) { return (code >= 48 && code <= 57) /* 0..9 */ || code === 0x2B /* + */ @@ -2364,184 +2938,234 @@ function isDigitStart(code) { || code === 0x2E; /* . */ } +/** + * Checks if the character is an A (arc-to) path command. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isArcCommand(code) { - // eslint disable no-bitwise + // eslint-disable-next-line no-bitwise -- Impossible to satisfy return (code | 0x20) === 0x61; } -function scanSegment(state) { - const { max } = state; - const cmdCode = state.pathValue.charCodeAt(state.index); - const reqParams = paramsCount[state.pathValue[state.index].toLowerCase()]; - // let hasComma; +/** + * Scans every character in the path string to determine + * where a segment starts and where it ends. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ +function scanSegment(path) { + const { max, pathValue, index } = path; + const cmdCode = pathValue.charCodeAt(index); + // @ts-ignore + const reqParams = paramsCount[pathValue[index].toLowerCase()]; - state.segmentStart = state.index; + path.segmentStart = index; if (!isPathCommand(cmdCode)) { - // state.err = 'SvgPath: bad command ' - // + state.pathValue[state.index] - // + ' (at pos ' + state.index + ')'; - state.err = `${invalidPathValue}: ${state.pathValue[state.index]} not a path command`; + path.err = `${invalidPathValue}: ${pathValue[index]} not a path command`; return; } - state.index += 1; - skipSpaces(state); + path.index += 1; + skipSpaces(path); - state.data = []; + path.data = []; if (!reqParams) { // Z - finalizeSegment(state); + finalizeSegment(path); return; } - // hasComma = false; - for (;;) { for (let i = reqParams; i > 0; i -= 1) { - if (isArcCommand(cmdCode) && (i === 3 || i === 4)) scanFlag(state); - else scanParam(state); + if (isArcCommand(cmdCode) && (i === 3 || i === 4)) scanFlag(path); + else scanParam(path); - if (state.err.length) { + if (path.err.length) { return; } - state.data.push(state.param); + path.data.push(path.param); - skipSpaces(state); - // hasComma = false; + skipSpaces(path); - if (state.index < max && state.pathValue.charCodeAt(state.index) === 0x2C/* , */) { - state.index += 1; - skipSpaces(state); - // hasComma = true; + // after ',' param is mandatory + if (path.index < max && pathValue.charCodeAt(path.index) === 0x2C/* , */) { + path.index += 1; + skipSpaces(path); } } - // after ',' param is mandatory - // if (hasComma) { - // continue; - // } - - if (state.index >= state.max) { + if (path.index >= path.max) { break; } // Stop on next segment - if (!isDigitStart(state.pathValue.charCodeAt(state.index))) { + if (!isDigitStart(pathValue.charCodeAt(path.index))) { break; } } - finalizeSegment(state); + finalizeSegment(path); } -function SVGPathArray(pathString) { +/** + * Returns a clone of an existing `pathArray`. + * + * @param {SVGPathCommander.pathArray | SVGPathCommander.pathSegment} path the source `pathArray` + * @returns {any} the cloned `pathArray` + */ +function clonePath(path) { + return path.map((x) => (Array.isArray(x) ? [...x] : x)); +} + +/** + * The `PathParser` used by the parser. + * + * @param {string} pathString + */ +function PathParser(pathString) { + /** @type {SVGPathCommander.pathArray} */ + // @ts-ignore this.segments = []; + /** @type {string} */ this.pathValue = pathString; + /** @type {number} */ this.max = pathString.length; + /** @type {number} */ this.index = 0; + /** @type {number} */ this.param = 0.0; + /** @type {number} */ this.segmentStart = 0; + /** @type {any} */ this.data = []; + /** @type {string} */ this.err = ''; - // return this; } -// Returns array of segments: -function parsePathString(pathString, round) { - if (isPathArray(pathString)) { - return clonePath(pathString); - } - - const state = new SVGPathArray(pathString); - - skipSpaces(state); - - while (state.index < state.max && !state.err.length) { - scanSegment(state); - } - - if (state.err.length) { - state.segments = []; - } else if (state.segments.length) { - if ('mM'.indexOf(state.segments[0][0]) < 0) { - // state.err = 'Path string should start with `M` or `m`'; - state.err = `${invalidPathValue}: missing M/m`; - state.segments = []; - } else { - state.segments[0][0] = 'M'; - } - } - - return roundPath(state.segments, round); +/** + * Iterates an array to check if it's an actual `pathArray`. + * + * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ +function isPathArray(path) { + return Array.isArray(path) && path.every((seg) => { + const lk = seg[0].toLowerCase(); + return paramsCount[lk] === seg.length - 1 && 'achlmqstvz'.includes(lk); + }); } -function isAbsoluteArray(pathInput) { - return isPathArray(pathInput) && pathInput.every((x) => x[0] === x[0].toUpperCase()); -} - -function pathToAbsolute(pathInput, round) { - if (isAbsoluteArray(pathInput)) { +/** + * Parses a path string value and returns an array + * of segments we like to call `pathArray`. + * + * @param {SVGPathCommander.pathArray | string} pathInput the string to be parsed + * @returns {SVGPathCommander.pathArray} the resulted `pathArray` + */ +function parsePathString(pathInput) { + if (Array.isArray(pathInput) && isPathArray(pathInput)) { return clonePath(pathInput); } - const pathArray = parsePathString(pathInput, round); - const ii = pathArray.length; - const resultArray = []; - let x = 0; - let y = 0; - let mx = 0; - let my = 0; - let start = 0; + // @ts-ignore + const path = new PathParser(pathInput); // TS expects string - if (pathArray[0][0] === 'M') { - x = +pathArray[0][1]; - y = +pathArray[0][2]; - mx = x; - my = y; - start += 1; - resultArray.push(['M', x, y]); + skipSpaces(path); + + while (path.index < path.max && !path.err.length) { + scanSegment(path); } - for (let i = start; i < ii; i += 1) { - const segment = pathArray[i]; + if (path.err.length) { + // @ts-ignore + path.segments = []; + } else if (path.segments.length) { + if (!'mM'.includes(path.segments[0][0])) { + path.err = `${invalidPathValue}: missing M/m`; + // @ts-ignore + path.segments = []; + } else { + path.segments[0][0] = 'M'; + } + } + + return path.segments; +} + +/** + * Iterates an array to check if it's a `pathArray` + * with all absolute values. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ +function isAbsoluteArray(path) { + return isPathArray(path) + && path.every((x) => x[0] === x[0].toUpperCase()); +} + +/** + * Parses a path string value or object and returns an array + * of segments, all converted to absolute values. + * + * @param {SVGPathCommander.pathArray | string} pathInput the path string | object + * @returns {SVGPathCommander.absoluteArray} the resulted `pathArray` with absolute values + */ +function pathToAbsolute(pathInput) { + if (Array.isArray(pathInput) && isAbsoluteArray(pathInput)) { + return clonePath(pathInput); + } + + const path = parsePathString(pathInput); + let x = 0; let y = 0; + let mx = 0; let my = 0; + + // @ts-ignore -- the `absoluteSegment[]` is for sure an `absolutePath` + return path.map((segment) => { + const values = segment.slice(1).map(Number); const [pathCommand] = segment; + /** @type {SVGPathCommander.absoluteCommand} */ + // @ts-ignore const absCommand = pathCommand.toUpperCase(); - const absoluteSegment = []; - let newSeg = []; - resultArray.push(absoluteSegment); + + if (pathCommand === 'M') { + [x, y] = values; + mx = x; + my = y; + return ['M', x, y]; + } + /** @type {SVGPathCommander.absoluteSegment} */ + // @ts-ignore + let absoluteSegment = []; if (pathCommand !== absCommand) { - absoluteSegment[0] = absCommand; - switch (absCommand) { case 'A': - newSeg = segment.slice(1, -2).concat([+segment[6] + x, +segment[7] + y]); - for (let j = 0; j < newSeg.length; j += 1) { - absoluteSegment.push(newSeg[j]); - } + absoluteSegment = [ + absCommand, values[0], values[1], values[2], + values[3], values[4], values[5] + x, values[6] + y]; break; case 'V': - absoluteSegment[1] = +segment[1] + y; + absoluteSegment = [absCommand, values[0] + y]; break; case 'H': - absoluteSegment[1] = +segment[1] + x; + absoluteSegment = [absCommand, values[0] + x]; break; - default: - if (absCommand === 'M') { - mx = +segment[1] + x; - my = +segment[2] + y; - } - // for is here to stay for eslint - for (let j = 1; j < segment.length; j += 1) { - absoluteSegment.push(+segment[j] + (j % 2 ? x : y)); - } + default: { + // use brakets for `eslint: no-case-declaration` + // https://stackoverflow.com/a/50753272/803358 + const absValues = values.map((n, j) => n + (j % 2 ? y : x)); + // @ts-ignore for n, l, c, s, q, t + absoluteSegment = [absCommand, ...absValues]; + } } } else { - for (let j = 0; j < segment.length; j += 1) { - absoluteSegment.push(segment[j]); - } + // @ts-ignore + absoluteSegment = [absCommand, ...values]; } const segLength = absoluteSegment.length; @@ -2551,136 +3175,255 @@ function pathToAbsolute(pathInput, round) { y = my; break; case 'H': - x = +absoluteSegment[1]; + // @ts-ignore + [, x] = absoluteSegment; break; case 'V': - y = +absoluteSegment[1]; + // @ts-ignore + [, y] = absoluteSegment; break; default: - x = +absoluteSegment[segLength - 2]; - y = +absoluteSegment[segLength - 1]; + // @ts-ignore + x = absoluteSegment[segLength - 2]; + // @ts-ignore + y = absoluteSegment[segLength - 1]; if (absCommand === 'M') { mx = x; my = y; } } - } - - return roundPath(resultArray, round); + return absoluteSegment; + }); } -// returns {qx,qy} for shorthand quadratic bezier segments +/** + * Returns the missing control point from an + * T (shorthand quadratic bezier) segment. + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} qx control point x + * @param {number} qy control point y + * @param {string} prevCommand the previous path command + * @returns {{qx: number, qy: number}}} the missing control point + */ function shorthandToQuad(x1, y1, qx, qy, prevCommand) { - return 'QT'.indexOf(prevCommand) > -1 + return 'QT'.includes(prevCommand) ? { qx: x1 * 2 - qx, qy: y1 * 2 - qy } : { qx: x1, qy: y1 }; } -// returns {x1,x2} for shorthand cubic bezier segments +/** + * Returns the missing control point from an + * S (shorthand cubic bezier) segment. + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} x2 curve end x + * @param {number} y2 curve end y + * @param {string} prevCommand the previous path command + * @returns {{x1: number, y1: number}}} the missing control point + */ function shorthandToCubic(x1, y1, x2, y2, prevCommand) { - return 'CS'.indexOf(prevCommand) > -1 + return 'CS'.includes(prevCommand) ? { x1: x1 * 2 - x2, y1: y1 * 2 - y2 } : { x1, y1 }; } +/** + * Normalizes a single segment of a `pathArray` object. + * + * @param {SVGPathCommander.pathSegment} segment the segment object + * @param {any} params the coordinates of the previous segment + * @param {string} prevCommand the path command of the previous segment + * @returns {SVGPathCommander.normalSegment} the normalized segment + */ function normalizeSegment(segment, params, prevCommand) { const [pathCommand] = segment; - const xy = segment.slice(1); + const { + x1: px1, y1: py1, x2: px2, y2: py2, + } = params; + const values = segment.slice(1).map(Number); let result = segment; - if ('TQ'.indexOf(segment[0]) < 0) { + if (!'TQ'.includes(pathCommand)) { // optional but good to be cautious params.qx = null; params.qy = null; } if (pathCommand === 'H') { - result = ['L', segment[1], params.y1]; + result = ['L', segment[1], py1]; } else if (pathCommand === 'V') { - result = ['L', params.x1, segment[1]]; + result = ['L', px1, segment[1]]; } else if (pathCommand === 'S') { - const { x1, y1 } = shorthandToCubic(params.x1, params.y1, params.x2, params.y2, prevCommand); + const { x1, y1 } = shorthandToCubic(px1, py1, px2, py2, prevCommand); params.x1 = x1; params.y1 = y1; - result = ['C', x1, y1].concat(xy); + // @ts-ignore + result = ['C', x1, y1, ...values]; } else if (pathCommand === 'T') { - const { qx, qy } = shorthandToQuad(params.x1, params.y1, params.qx, params.qy, prevCommand); + const { qx, qy } = shorthandToQuad(px1, py1, params.qx, params.qy, prevCommand); params.qx = qx; params.qy = qy; - result = ['Q', qx, qy].concat(xy); + // @ts-ignore + result = ['Q', qx, qy, ...values]; } else if (pathCommand === 'Q') { - const [nqx, nqy] = xy; + const [nqx, nqy] = values; params.qx = nqx; params.qy = nqy; } + + // @ts-ignore -- we-re switching `pathSegment` type return result; } -function isNormalizedArray(pathArray) { - return Array.isArray(pathArray) && pathArray.every((seg) => { - const pathCommand = seg[0].toLowerCase(); - return paramsCount[pathCommand] === seg.length - 1 && /[ACLMQZ]/.test(seg[0]); // achlmrqstvz - }); +/** + * Iterates an array to check if it's a `pathArray` + * with all segments are in non-shorthand notation + * with absolute values. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ +function isNormalizedArray(path) { + return isAbsoluteArray(path) && path.every((seg) => 'ACLMQZ'.includes(seg[0])); } -function normalizePath(pathInput, round) { // pathArray|pathString +/** + * @type {SVGPathCommander.parserParams} + */ +const paramsParser = { + x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, +}; + +/** + * Normalizes a `path` object for further processing: + * * convert segments to absolute values + * * convert shorthand path commands to their non-shorthand notation + * + * @param {SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray' + * @returns {SVGPathCommander.normalArray} the normalized `pathArray` + */ +function normalizePath(pathInput) { if (isNormalizedArray(pathInput)) { return clonePath(pathInput); } - const pathArray = pathToAbsolute(pathInput, round); - const params = { - x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, - }; + const path = pathToAbsolute(pathInput); + const params = { ...paramsParser }; const allPathCommands = []; - const ii = pathArray.length; + const ii = path.length; + let pathCommand = ''; let prevCommand = ''; - let segment; - let seglen; for (let i = 0; i < ii; i += 1) { - // save current path command - const [pathCommand] = pathArray[i]; + [pathCommand] = path[i]; // Save current path command allPathCommands[i] = pathCommand; // Get previous path command if (i) prevCommand = allPathCommands[i - 1]; - // Previous path command is inputted to processSegment - pathArray[i] = normalizeSegment(pathArray[i], params, prevCommand); + // Previous path command is used to normalizeSegment + // @ts-ignore -- expected on normalization + path[i] = normalizeSegment(path[i], params, prevCommand); - segment = pathArray[i]; - seglen = segment.length; + const segment = path[i]; + const seglen = segment.length; params.x1 = +segment[seglen - 2]; params.y1 = +segment[seglen - 1]; params.x2 = +(segment[seglen - 4]) || params.x1; params.y2 = +(segment[seglen - 3]) || params.y1; } - return roundPath(pathArray, round); + + // @ts-ignore -- a `normalArray` is absolutely an `absoluteArray` + return path; } +/** + * Checks a `pathArray` for an unnecessary `Z` segment + * and returns a new `pathArray` without it. + * + * The `pathInput` must be a single path, without + * sub-paths. For multi-path `` elements, + * use `splitPath` first and apply this utility on each + * sub-path separately. + * + * @param {SVGPathCommander.pathArray | string} pathInput the `pathArray` source + * @return {SVGPathCommander.pathArray} a fixed `pathArray` + */ +function fixPath(pathInput) { + const pathArray = parsePathString(pathInput); + const normalArray = normalizePath(pathArray); + const { length } = pathArray; + const isClosed = normalArray.slice(-1)[0][0] === 'Z'; + const segBeforeZ = isClosed ? length - 2 : length - 1; + + const [mx, my] = normalArray[0].slice(1); + const [x, y] = normalArray[segBeforeZ].slice(-2); + + if (isClosed && mx === x && my === y) { + // @ts-ignore -- `pathSegment[]` is a `pathArray` + return pathArray.slice(0, -1); + } + return pathArray; +} + +/** + * Iterates an array to check if it's a `pathArray` + * with all C (cubic bezier) segments. + * + * @param {SVGPathCommander.pathArray} path the `Array` to be checked + * @returns {boolean} iteration result + */ +function isCurveArray(path) { + return isPathArray(path) && path.every((seg) => 'MC'.includes(seg[0])); +} + +/** + * Returns an {x,y} vector rotated by a given + * angle in radian. + * + * @param {number} x the initial vector x + * @param {number} y the initial vector y + * @param {number} rad the radian vector angle + * @returns {{x: number, y: number}} the rotated vector + */ function rotateVector(x, y, rad) { const X = x * Math.cos(rad) - y * Math.sin(rad); const Y = x * Math.sin(rad) + y * Math.cos(rad); return { x: X, y: Y }; } -// for more information of where this math came from visit: -// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes -// LAF = largeArcFlag, SF = sweepFlag - -function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) { +/** + * Converts A (arc-to) segments to C (cubic-bezier-to). + * + * For more information of where this math came from visit: + * http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes + * + * @param {number} X1 the starting x position + * @param {number} Y1 the starting y position + * @param {number} RX x-radius of the arc + * @param {number} RY y-radius of the arc + * @param {number} angle x-axis-rotation of the arc + * @param {number} LAF large-arc-flag of the arc + * @param {number} SF sweep-flag of the arc + * @param {number} X2 the ending x position + * @param {number} Y2 the ending y position + * @param {number[]=} recursive the parameters needed to split arc into 2 segments + * @return {number[]} the resulting cubic-bezier segment(s) + */ +function arcToCubic(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, recursive) { + let x1 = X1; let y1 = Y1; let rx = RX; let ry = RY; let x2 = X2; let y2 = Y2; + // for more information of where this Math came from visit: + // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes const d120 = (Math.PI * 120) / 180; - const rad = (Math.PI / 180) * (angle || 0); + + const rad = (Math.PI / 180) * (+angle || 0); + /** @type {number[]} */ let res = []; - let X1 = x1; - let X2 = x2; - let Y1 = y1; - let Y2 = y2; - let RX = rx; - let RY = ry; let xy; let f1; let f2; @@ -2688,41 +3431,39 @@ function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) { let cy; if (!recursive) { - xy = rotateVector(X1, Y1, -rad); - X1 = xy.x; - Y1 = xy.y; - xy = rotateVector(X2, Y2, -rad); - X2 = xy.x; - Y2 = xy.y; + xy = rotateVector(x1, y1, -rad); + x1 = xy.x; + y1 = xy.y; + xy = rotateVector(x2, y2, -rad); + x2 = xy.x; + y2 = xy.y; - const x = (X1 - X2) / 2; - const y = (Y1 - Y2) / 2; - let h = (x * x) / (RX * RY) + (y ** 2) / (RY ** 2); + const x = (x1 - x2) / 2; + const y = (y1 - y2) / 2; + let h = (x * x) / (rx * rx) + (y * y) / (ry * ry); if (h > 1) { h = Math.sqrt(h); - RX *= h; - RY *= h; + rx *= h; + ry *= h; } - const rx2 = RX ** 2; - const ry2 = RY ** 2; + const rx2 = rx * rx; + const ry2 = ry * ry; + const k = (LAF === SF ? -1 : 1) - * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) - / (rx2 * y * y + ry2 * x * x))); + * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) + / (rx2 * y * y + ry2 * x * x))); - cx = ((k * RX * y) / RY) + ((X1 + X2) / 2); - cy = ((k * -RY * x) / RX) + ((Y1 + Y2) / 2); - - // f1 = Math.asin(((Y1 - cy) / RY).toFixed(9)); // keep toFIxed(9)! - // f2 = Math.asin(((Y2 - cy) / RY).toFixed(9)); - f1 = Math.asin((((Y1 - cy) / RY) * 10 ** 9 >> 0) / (10 ** 9)); - f2 = Math.asin((((Y2 - cy) / RY) * 10 ** 9 >> 0) / (10 ** 9)); - - f1 = X1 < cx ? Math.PI - f1 : f1; - f2 = X2 < cx ? Math.PI - f2 : f2; - - if (f1 < 0) f1 = Math.PI * 2 + f1; - if (f2 < 0) f2 = Math.PI * 2 + f2; + cx = ((k * rx * y) / ry) + ((x1 + x2) / 2); + cy = ((k * -ry * x) / rx) + ((y1 + y2) / 2); + // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise + f1 = (Math.asin((((y1 - cy) / ry))) * (10 ** 9) >> 0) / (10 ** 9); + // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise + f2 = (Math.asin((((y2 - cy) / ry))) * (10 ** 9) >> 0) / (10 ** 9); + f1 = x1 < cx ? Math.PI - f1 : f1; + f2 = x2 < cx ? Math.PI - f2 : f2; + if (f1 < 0) (f1 = Math.PI * 2 + f1); + if (f2 < 0) (f2 = Math.PI * 2 + f2); if (SF && f1 > f2) { f1 -= Math.PI * 2; } @@ -2730,52 +3471,56 @@ function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) { f2 -= Math.PI * 2; } } else { - const [r1, r2, r3, r4] = recursive; - f1 = r1; - f2 = r2; - cx = r3; - cy = r4; + [f1, f2, cx, cy] = recursive; } - let df = f2 - f1; - if (Math.abs(df) > d120) { - const f2old = f2; const x2old = X2; const - y2old = Y2; - + const f2old = f2; + const x2old = x2; + const y2old = y2; f2 = f1 + d120 * (SF && f2 > f1 ? 1 : -1); - X2 = cx + RX * Math.cos(f2); - Y2 = cy + RY * Math.sin(f2); - res = arcToCubic(X2, Y2, RX, RY, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]); + x2 = cx + rx * Math.cos(f2); + y2 = cy + ry * Math.sin(f2); + res = arcToCubic(x2, y2, rx, ry, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]); } - df = f2 - f1; const c1 = Math.cos(f1); const s1 = Math.sin(f1); const c2 = Math.cos(f2); const s2 = Math.sin(f2); const t = Math.tan(df / 4); - const hx = (4 / 3) * RX * t; - const hy = (4 / 3) * RY * t; - const m1 = [X1, Y1]; - const m2 = [X1 + hx * s1, Y1 - hy * c1]; - const m3 = [X2 + hx * s2, Y2 - hy * c2]; - const m4 = [X2, Y2]; + const hx = (4 / 3) * rx * t; + const hy = (4 / 3) * ry * t; + const m1 = [x1, y1]; + const m2 = [x1 + hx * s1, y1 - hy * c1]; + const m3 = [x2 + hx * s2, y2 - hy * c2]; + const m4 = [x2, y2]; m2[0] = 2 * m1[0] - m2[0]; m2[1] = 2 * m1[1] - m2[1]; - if (recursive) { - return [m2, m3, m4].concat(res); + return [...m2, ...m3, ...m4, ...res]; } - res = [m2, m3, m4].concat(res).join().split(','); - return res.map((rz, i) => { - if (i % 2) { - return rotateVector(res[i - 1], rz, rad).y; - } - return rotateVector(rz, res[i + 1], rad).x; - }); + res = [...m2, ...m3, ...m4, ...res]; + const newres = []; + for (let i = 0, ii = res.length; i < ii; i += 1) { + newres[i] = i % 2 + ? rotateVector(res[i - 1], res[i], rad).y + : rotateVector(res[i], res[i + 1], rad).x; + } + return newres; } +/** + * Converts a Q (quadratic-bezier) segment to C (cubic-bezier). + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} qx control point x + * @param {number} qy control point y + * @param {number} x2 curve end x + * @param {number} y2 curve end y + * @returns {number[]} the cubic-bezier segment + */ function quadToCubic(x1, y1, qx, qy, x2, y2) { const r13 = 1 / 3; const r23 = 2 / 3; @@ -2788,7 +3533,21 @@ function quadToCubic(x1, y1, qx, qy, x2, y2) { ]; } -// t = [0-1] +/** + * Returns the {x,y} coordinates of a point at a + * given length of a cubic-bezier segment. + * + * @param {number} p1x the starting point X + * @param {number} p1y the starting point Y + * @param {number} c1x the first control point X + * @param {number} c1y the first control point Y + * @param {number} c2x the second control point X + * @param {number} c2y the second control point Y + * @param {number} p2x the ending point X + * @param {number} p2y the ending point Y + * @param {number} t a [0-1] ratio + * @returns {{x: number, y: number}} the requested {x,y} coordinates + */ function getPointAtSegLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) { const t1 = 1 - t; return { @@ -2803,112 +3562,235 @@ function getPointAtSegLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) { }; } +/** + * Returns the coordinates of a specified distance + * ratio between two points. + * + * @param {[number, number]} a the first point coordinates + * @param {[number, number]} b the second point coordinates + * @param {number} t the ratio + * @returns {[number, number]} the midpoint coordinates + */ function midPoint(a, b, t) { - const ax = a[0]; - const ay = a[1]; - const bx = b[0]; - const by = b[1]; + const [ax, ay] = a; const [bx, by] = b; return [ax + (bx - ax) * t, ay + (by - ay) * t]; } +/** + * Converts an L (line-to) segment to C (cubic-bezier). + * + * @param {number} x1 line start x + * @param {number} y1 line start y + * @param {number} x2 line end x + * @param {number} y2 line end y + * @returns {number[]} the cubic-bezier segment + */ function lineToCubic(x1, y1, x2, y2) { const t = 0.5; + /** @type {[number, number]} */ const p0 = [x1, y1]; + /** @type {[number, number]} */ const p1 = [x2, y2]; const p2 = midPoint(p0, p1, t); const p3 = midPoint(p1, p2, t); const p4 = midPoint(p2, p3, t); const p5 = midPoint(p3, p4, t); const p6 = midPoint(p4, p5, t); - const cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t)); - const cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0)); + // const cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t)); + const seg1 = [...p0, ...p2, ...p4, ...p6, t]; + // @ts-ignore + const cp1 = getPointAtSegLength(...seg1); + // const cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0)); + const seg2 = [...p6, ...p5, ...p3, ...p1, 0]; + // @ts-ignore + const cp2 = getPointAtSegLength(...seg2); return [cp1.x, cp1.y, cp2.x, cp2.y, x2, y2]; } +/** + * Converts any segment to C (cubic-bezier). + * + * @param {SVGPathCommander.pathSegment} segment the source segment + * @param {SVGPathCommander.parserParams} params the source segment parameters + * @returns {SVGPathCommander.cubicSegment | SVGPathCommander.MSegment} the cubic-bezier segment + */ function segmentToCubic(segment, params) { - if ('TQ'.indexOf(segment[0]) < 0) { + const [pathCommand] = segment; + const values = segment.slice(1).map((n) => +n); + const [x, y] = values; + let args; + const { + x1: px1, y1: py1, x: px, y: py, + } = params; + + if (!'TQ'.includes(pathCommand)) { params.qx = null; params.qy = null; } - const [s1, s2] = segment.slice(1); - - switch (segment[0]) { + switch (pathCommand) { case 'M': - params.x = s1; - params.y = s2; + params.x = x; + params.y = y; return segment; case 'A': - return ['C'].concat(arcToCubic.apply(0, [params.x1, params.y1].concat(segment.slice(1)))); + args = [px1, py1, ...values]; + // @ts-ignore -- relax, the utility will return 6 numbers + return ['C', ...arcToCubic(...args)]; case 'Q': - params.qx = s1; - params.qy = s2; - return ['C'].concat(quadToCubic.apply(0, [params.x1, params.y1].concat(segment.slice(1)))); + params.qx = x; + params.qy = y; + args = [px1, py1, ...values]; + // @ts-ignore -- also returning 6 numbers + return ['C', ...quadToCubic(...args)]; case 'L': - return ['C'].concat(lineToCubic(params.x1, params.y1, segment[1], segment[2])); + // @ts-ignore -- also returning 6 numbers + return ['C', ...lineToCubic(px1, py1, x, y)]; case 'Z': - return ['C'].concat(lineToCubic(params.x1, params.y1, params.x, params.y)); + // @ts-ignore -- also returning 6 numbers + return ['C', ...lineToCubic(px1, py1, px, py)]; } + // @ts-ignore -- we're switching `pathSegment` type return segment; } -function pathToCurve(pathInput, round) { // pathArray|pathString +/** + * Parses a path string value or 'pathArray' and returns a new one + * in which all segments are converted to cubic-bezier. + * + * In addition, un-necessary `Z` segment is removed if previous segment + * extends to the `M` segment. + * + * @param {SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray' + * @returns {SVGPathCommander.curveArray} the resulted `pathArray` converted to cubic-bezier + */ +function pathToCurve(pathInput) { if (isCurveArray(pathInput)) { return clonePath(pathInput); } - const pathArray = normalizePath(pathInput, round); - const params = { - x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, - }; + const path = fixPath(normalizePath(pathInput)); + const params = { ...paramsParser }; const allPathCommands = []; - let pathCommand = ''; - let ii = pathArray.length; - let segment; - let seglen; + let pathCommand = ''; // ts-lint + let ii = path.length; for (let i = 0; i < ii; i += 1) { - if (pathArray[i]) [pathCommand] = pathArray[i]; - + [pathCommand] = path[i]; allPathCommands[i] = pathCommand; - pathArray[i] = segmentToCubic(pathArray[i], params); - fixArc(pathArray, allPathCommands, i); - ii = pathArray.length; // solves curveArrays ending in Z + path[i] = segmentToCubic(path[i], params); - segment = pathArray[i]; - seglen = segment.length; + fixArc(path, allPathCommands, i); + ii = path.length; + const segment = path[i]; + const seglen = segment.length; params.x1 = +segment[seglen - 2]; params.y1 = +segment[seglen - 1]; params.x2 = +(segment[seglen - 4]) || params.x1; params.y2 = +(segment[seglen - 3]) || params.y1; } - return roundPath(pathArray, round); + + // @ts-ignore + return path; } -function pathToString(pathArray) { - return pathArray.map((x) => x[0].concat(x.slice(1).join(' '))).join(''); +/** + * SVGPathCommander default options + * @type {SVGPathCommander.options} + */ +const defaultOptions = { + origin: [0, 0, 0], + round: 4, +}; + +/** + * Rounds the values of a `pathArray` instance to + * a specified amount of decimals and returns it. + * + * @param {SVGPathCommander.pathArray} path the source `pathArray` + * @param {number | boolean} roundOption the amount of decimals to round numbers to + * @returns {SVGPathCommander.pathArray} the resulted `pathArray` with rounded values + */ +function roundPath(path, roundOption) { + let { round } = defaultOptions; + if (roundOption === false || round === false) return clonePath(path); + round = roundOption >= 1 ? roundOption : round; + // to round values to the power + // the `round` value must be integer + // @ts-ignore + const pow = round >= 1 ? (10 ** round) : 1; + + // @ts-ignore -- `pathSegment[]` is `pathArray` + return path.map((pi) => { + const values = pi.slice(1).map(Number) + .map((n) => (n % 1 === 0 ? n : Math.round(n * pow) / pow)); + return [pi[0], ...values]; + }); } +/** + * Returns a valid `d` attribute string value created + * by rounding values and concatenating the `pathArray` segments. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` object + * @param {any} round amount of decimals to round values to + * @returns {string} the concatenated path string + */ +function pathToString(path, round) { + return roundPath(path, round) + .map((x) => x[0] + x.slice(1).join(' ')).join(''); +} + +/** + * Split a path into an `Array` of sub-path strings. + * + * In the process, values are converted to absolute + * for visual consistency. + * + * @param {SVGPathCommander.pathArray | string} pathInput the source `pathArray` + * @return {string[]} an array with all sub-path strings + */ function splitPath(pathInput) { - return pathToString(pathToAbsolute(pathInput, 0)) + return pathToString(pathToAbsolute(pathInput), 0) .replace(/(m|M)/g, '|$1') .split('|') .map((s) => s.trim()) .filter((s) => s); } +/** + * @param {number} p1 + * @param {number} p2 + * @param {number} p3 + * @param {number} p4 + * @param {number} t a [0-1] ratio + * @returns {number} + */ function base3(p1, p2, p3, p4, t) { const t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4; const t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3; return t * t2 - 3 * p1 + 3 * p2; } -// returns the cubic bezier segment length +/** + * Returns the C (cubic-bezier) segment length. + * + * @param {number} x1 the starting point X + * @param {number} y1 the starting point Y + * @param {number} x2 the first control point X + * @param {number} y2 the first control point Y + * @param {number} x3 the second control point X + * @param {number} y3 the second control point Y + * @param {number} x4 the ending point X + * @param {number} y4 the ending point Y + * @param {number} z a [0-1] ratio + * @returns {number} the cubic-bezier segment length + */ function getSegCubicLength(x1, y1, x2, y2, x3, y3, x4, y4, z) { - let Z; + let Z = z; if (z === null || Number.isNaN(+z)) Z = 1; // Z = Z > 1 ? 1 : Z < 0 ? 0 : Z; @@ -2932,34 +3814,50 @@ function getSegCubicLength(x1, y1, x2, y2, x3, y3, x4, y4, z) { return z2 * sum; } -// calculates the shape total length -// equivalent to shape.getTotalLength() -// pathToCurve version -function getPathLength(pathArray, round) { +/** + * Returns the shape total length, + * or the equivalent to `shape.getTotalLength()` + * pathToCurve version + * + * @param {SVGPathCommander.pathArray} path the target `pathArray` + * @returns {number} the shape total length + */ +function getPathLength(path) { let totalLength = 0; - pathToCurve(pathArray, round).forEach((s, i, curveArray) => { - totalLength += s[0] !== 'M' ? getSegCubicLength.apply(0, curveArray[i - 1].slice(-2).concat(s.slice(1))) : 0; + pathToCurve(path).forEach((s, i, curveArray) => { + const args = s[0] !== 'M' ? [...curveArray[i - 1].slice(-2), ...s.slice(1)] : []; + totalLength += s[0] === 'M' ? 0 + // @ts-ignore + : getSegCubicLength(...args); }); return totalLength; } -// calculates the shape total length -// almost equivalent to shape.getTotalLength() -function getPointAtLength(pathArray, length) { +/** + * Returns [x,y] coordinates of a point at a given length of a shape. + * + * @param {string | SVGPathCommander.pathArray} path the `pathArray` to look into + * @param {number} length the length of the shape to look at + * @returns {number[]} the requested [x,y] coordinates + */ +function getPointAtLength(path, length) { let totalLength = 0; let segLen; let data; let result; - - return pathToCurve(pathArray, 9).map((seg, i, curveArray) => { // process data - data = i ? curveArray[i - 1].slice(-2).concat(seg.slice(1)) : seg.slice(1); - segLen = i ? getSegCubicLength.apply(0, data) : 0; + // @ts-ignore + return pathToCurve(path).map((seg, i, curveArray) => { + data = i ? [...curveArray[i - 1].slice(-2), ...seg.slice(1)] : seg.slice(1); + // @ts-ignore + segLen = i ? getSegCubicLength(...data) : 0; totalLength += segLen; if (i === 0) { result = { x: data[0], y: data[1] }; } else if (totalLength > length && length > totalLength - segLen) { - result = getPointAtSegLength.apply(0, data.concat(1 - (totalLength - length) / segLen)); + const args = [...data, 1 - ((totalLength - length) / segLen)]; + // @ts-ignore + result = getPointAtSegLength(...args); } else { result = null; } @@ -2968,41 +3866,80 @@ function getPointAtLength(pathArray, length) { }).filter((x) => x).slice(-1)[0]; // isolate last segment } -// https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js - +/** + * Returns the area of a single segment shape. + * + * http://objectmix.com/graphics/133553-area-closed-bezier-curve.html + * + * @param {number} x0 the starting point X + * @param {number} y0 the starting point Y + * @param {number} x1 the first control point X + * @param {number} y1 the first control point Y + * @param {number} x2 the second control point X + * @param {number} y2 the second control point Y + * @param {number} x3 the ending point X + * @param {number} y3 the ending point Y + * @returns {number} the area of the cubic-bezier segment + */ function getCubicSegArea(x0, y0, x1, y1, x2, y2, x3, y3) { - // http://objectmix.com/graphics/133553-area-closed-bezier-curve.html return (3 * ((y3 - y0) * (x1 + x2) - (x3 - x0) * (y1 + y2) + (y1 * (x0 - x2)) - (x1 * (y0 - y2)) + (y3 * (x2 + x0 / 3)) - (x3 * (y2 + y0 / 3)))) / 20; } -function getPathArea(pathArray, round) { - let x = 0; let y = 0; let mx = 0; let my = 0; let - len = 0; - return pathToCurve(pathArray, round).map((seg) => { +/** + * Returns the area of a shape. + * @author Jürg Lehni & Jonathan Puckey + * + * => https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js + * + * @param {SVGPathCommander.pathArray} path the shape `pathArray` + * @returns {number} the length of the cubic-bezier segment + */ +function getPathArea(path) { + let x = 0; let y = 0; + let len = 0; + return pathToCurve(path).map((seg) => { switch (seg[0]) { case 'M': - case 'Z': - mx = seg[0] === 'M' ? seg[1] : mx; - my = seg[0] === 'M' ? seg[2] : my; - x = mx; - y = my; + [, x, y] = seg; return 0; default: - len = getCubicSegArea.apply(0, [x, y].concat(seg.slice(1))); - [x, y] = seg.slice(-2); + // @ts-ignore -- the utility will have proper amount of params + len = getCubicSegArea(...[x, y, ...seg.slice(1)]); + + [x, y] = seg.slice(-2).map(Number); return len; } }).reduce((a, b) => a + b, 0); } -function getDrawDirection(pathArray, round) { - return getPathArea(pathToCurve(pathArray, round)) >= 0; +/** + * Check if a path is drawn clockwise and returns true if so, + * false otherwise. + * + * @param {SVGPathCommander.pathArray} path the path string or `pathArray` + * @returns {boolean} true when clockwise or false if not + */ +function getDrawDirection(path) { + return getPathArea(pathToCurve(path)) >= 0; } -var epsilon = 1e-9; +/** + * A global namespace for epsilon. + * + * @type {number} + */ +const epsilon = 1e-9; +/** + * Returns the square root of the distance + * between two given points. + * + * @param {[number, number]} a the first point coordinates + * @param {[number, number]} b the second point coordinates + * @returns {number} the distance value + */ function distanceSquareRoot(a, b) { return Math.sqrt( (a[0] - b[0]) * (a[0] - b[0]) @@ -3010,11 +3947,21 @@ function distanceSquareRoot(a, b) { ); } +/** + * Coordinates Interpolation Function. + * + * @param {number[][]} a start coordinates + * @param {number[][]} b end coordinates + * @param {string} l amount of coordinates + * @param {number} v progress + * @returns {number[][]} the interpolated coordinates + */ function coords(a, b, l, v) { const points = []; for (let i = 0; i < l; i += 1) { // for each point points[i] = []; for (let j = 0; j < 2; j += 1) { // each point coordinate + // eslint-disable-next-line no-bitwise points[i].push(((a[i][j] + (b[i][j] - a[i][j]) * v) * 1000 >> 0) / 1000); } } @@ -3029,42 +3976,45 @@ function coords(a, b, l, v) { } */ // Component functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartSVGMorph(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE$1[tweenProp] = (elem, a, b, v) => { - const path1 = a.pathArray; const path2 = b.pathArray; const - len = path2.length; + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + const path1 = a.polygon; const path2 = b.polygon; + const len = path2.length; elem.setAttribute('d', (v === 1 ? b.original : `M${coords(path1, path2, len, v).join('L')}Z`)); }; } } -/* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers,coords}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ - -// Component Interpolation -// function function(array1, array2, length, progress) - // Component Util // original script flubber // https://github.com/veltman/flubber -function polygonLength(ring) { - return ring.reduce((length, point, i) => (i - ? length + distanceSquareRoot(ring[i - 1], point) +/** + * Returns polygon length. + * @param {KUTE.polygonMorph} polygon target polygon + * @returns {number} length + */ +function polygonLength(polygon) { + return polygon.reduce((length, point, i) => (i + ? length + distanceSquareRoot(polygon[i - 1], point) : 0), 0); } +/** + * Returns an existing polygin and its length or false if not polygon. + * @param {SVGPathCommander.pathArray} pathArray target polygon + * @returns {KUTE.exactRing} length + */ function exactRing(pathArray) { - const ring = []; + const polygon = []; const pathlen = pathArray.length; let segment = []; let pathCommand = ''; - let pathLength = 0; if (!pathArray.length || pathArray[0][0] !== 'M') { return false; @@ -3076,54 +4026,68 @@ function exactRing(pathArray) { if ((pathCommand === 'M' && i) || pathCommand === 'Z') { break; // !! - } else if ('ML'.indexOf(pathCommand) > -1) { - ring.push([segment[1], segment[2]]); + } else if ('ML'.includes(pathCommand)) { + polygon.push([segment[1], segment[2]]); } else { return false; } } - pathLength = polygonLength(ring); - - return pathlen ? { ring, pathLength } : false; + return pathlen ? { polygon } : false; } -function approximateRing(parsed, maxSegmentLength) { +/** + * Returns polygon length. + * @param {SVGPathCommander.pathArray} parsed target polygon + * @param {number} maxLength the maximum segment length + * @returns {KUTE.exactRing} length + */ +function approximatePolygon(parsed, maxLength) { const ringPath = splitPath(pathToString(parsed))[0]; - const curvePath = pathToCurve(ringPath, 4); + const curvePath = pathToCurve(ringPath); const pathLength = getPathLength(curvePath); - const ring = []; + const polygon = []; let numPoints = 3; let point; - if (maxSegmentLength && !Number.isNaN(maxSegmentLength) && +maxSegmentLength > 0) { - numPoints = Math.max(numPoints, Math.ceil(pathLength / maxSegmentLength)); + if (maxLength && !Number.isNaN(maxLength) && +maxLength > 0) { + numPoints = Math.max(numPoints, Math.ceil(pathLength / maxLength)); } for (let i = 0; i < numPoints; i += 1) { point = getPointAtLength(curvePath, (pathLength * i) / numPoints); - ring.push([point.x, point.y]); + polygon.push([point.x, point.y]); } // Make all rings clockwise if (!getDrawDirection(curvePath)) { - ring.reverse(); + polygon.reverse(); } return { - pathLength, - ring, + polygon, skipBisect: true, }; } -function pathStringToRing(str, maxSegmentLength) { - const parsed = normalizePath(str, 0); - return exactRing(parsed) || approximateRing(parsed, maxSegmentLength); +/** + * Parses a path string and returns a polygon array. + * @param {string} str path string + * @param {number} maxLength maximum amount of points + * @returns {KUTE.exactRing} the polygon array we need + */ +function pathStringToPolygon(str, maxLength) { + const parsed = normalizePath(str); + return exactRing(parsed) || approximatePolygon(parsed, maxLength); } -function rotateRing(ring, vs) { - const len = ring.length; +/** + * Rotates a polygon to better match its pair. + * @param {KUTE.polygonMorph} polygon the target polygon + * @param {KUTE.polygonMorph} vs the reference polygon + */ +function rotatePolygon(polygon, vs) { + const len = polygon.length; let min = Infinity; let bestOffset; let sumOfSquares = 0; @@ -3134,13 +4098,9 @@ function rotateRing(ring, vs) { for (let offset = 0; offset < len; offset += 1) { sumOfSquares = 0; - // vs.forEach((p, i) => { - // const d = distanceSquareRoot(ring[(offset + i) % len], p); - // sumOfSquares += d * d; - // }); for (let i = 0; i < vs.length; i += 1) { p = vs[i]; - d = distanceSquareRoot(ring[(offset + i) % len], p); + d = distanceSquareRoot(polygon[(offset + i) % len], p); sumOfSquares += d * d; } @@ -3151,15 +4111,19 @@ function rotateRing(ring, vs) { } if (bestOffset) { - spliced = ring.splice(0, bestOffset); - ring.splice(ring.length, 0, ...spliced); + spliced = polygon.splice(0, bestOffset); + polygon.splice(polygon.length, 0, ...spliced); } } -function addPoints(ring, numPoints) { - const desiredLength = ring.length + numPoints; - // const step = ring.pathLength / numPoints; - const step = polygonLength(ring) / numPoints; +/** + * Sample additional points for a polygon to better match its pair. + * @param {KUTE.polygonObject} polygon the target polygon + * @param {number} numPoints the amount of points needed + */ +function addPoints(polygon, numPoints) { + const desiredLength = polygon.length + numPoints; + const step = polygonLength(polygon) / numPoints; let i = 0; let cursor = 0; @@ -3168,14 +4132,14 @@ function addPoints(ring, numPoints) { let b; let segment; - while (ring.length < desiredLength) { - a = ring[i]; - b = ring[(i + 1) % ring.length]; + while (polygon.length < desiredLength) { + a = polygon[i]; + b = polygon[(i + 1) % polygon.length]; segment = distanceSquareRoot(a, b); if (insertAt <= cursor + segment) { - ring.splice(i + 1, 0, segment + polygon.splice(i + 1, 0, segment ? midPoint(a, b, (insertAt - cursor) / segment) : a.slice(0)); insertAt += step; @@ -3186,48 +4150,62 @@ function addPoints(ring, numPoints) { } } -function bisect(ring, maxSegmentLength = Infinity) { +/** + * Split segments of a polygon until it reaches a certain + * amount of points. + * @param {number[][]} polygon the target polygon + * @param {number} maxSegmentLength the maximum amount of points + */ +function bisect(polygon, maxSegmentLength = Infinity) { let a = []; let b = []; - for (let i = 0; i < ring.length; i += 1) { - a = ring[i]; - b = i === ring.length - 1 ? ring[0] : ring[i + 1]; + for (let i = 0; i < polygon.length; i += 1) { + a = polygon[i]; + b = i === polygon.length - 1 ? polygon[0] : polygon[i + 1]; // Could splice the whole set for a segment instead, but a bit messy while (distanceSquareRoot(a, b) > maxSegmentLength) { b = midPoint(a, b, 0.5); - ring.splice(i + 1, 0, b); + polygon.splice(i + 1, 0, b); } } } -function validRing(ring) { - return Array.isArray(ring) - && ring.every((point) => Array.isArray(point) +/** + * Checks the validity of a polygon. + * @param {KUTE.polygonMorph} polygon the target polygon + * @returns {boolean} the result of the check + */ +function validPolygon(polygon) { + return Array.isArray(polygon) + && polygon.every((point) => Array.isArray(point) && point.length === 2 && !Number.isNaN(point[0]) && !Number.isNaN(point[1])); } -function normalizeRing(input, maxSegmentLength) { +/** + * Returns a new polygon and its length from string or another `Array`. + * @param {KUTE.polygonMorph | string} input the target polygon + * @param {number} maxSegmentLength the maximum amount of points + * @returns {KUTE.polygonMorph} normalized polygon + */ +function getPolygon(input, maxSegmentLength) { let skipBisect; - let pathLength; - let ring = input; + let polygon; - if (typeof (ring) === 'string') { - const converted = pathStringToRing(ring, maxSegmentLength); - ring = converted.ring; - skipBisect = converted.skipBisect; - pathLength = converted.pathLength; - } else if (!Array.isArray(ring)) { - throw Error(`${invalidPathValue}: ${ring}`); + if (typeof (input) === 'string') { + const converted = pathStringToPolygon(input, maxSegmentLength); + ({ polygon, skipBisect } = converted); + } else if (!Array.isArray(input)) { + throw Error(`${invalidPathValue}: ${input}`); } - const points = ring.slice(0); - points.pathLength = pathLength; + /** @type {KUTE.polygonMorph} */ + const points = [...polygon]; - if (!validRing(points)) { + if (!validPolygon(points)) { throw Error(`${invalidPathValue}: ${points}`); } @@ -3245,39 +4223,56 @@ function normalizeRing(input, maxSegmentLength) { return points; } -function getInterpolationPoints(pathArray1, pathArray2, precision) { - const morphPrecision = precision || defaultOptions.morphPrecision; - const fromRing = normalizeRing(pathArray1, morphPrecision); - const toRing = normalizeRing(pathArray2, morphPrecision); +/** + * Returns two new polygons ready to tween. + * @param {string} path1 the first path string + * @param {string} path2 the second path string + * @param {number} precision the morphPrecision option value + * @returns {KUTE.polygonMorph[]} the two polygons + */ +function getInterpolationPoints(path1, path2, precision) { + const morphPrecision = precision || defaultOptions$1.morphPrecision; + const fromRing = getPolygon(path1, morphPrecision); + const toRing = getPolygon(path2, morphPrecision); const diff = fromRing.length - toRing.length; addPoints(fromRing, diff < 0 ? diff * -1 : 0); addPoints(toRing, diff > 0 ? diff : 0); - rotateRing(fromRing, toRing); + rotatePolygon(fromRing, toRing); return [roundPath(fromRing), roundPath(toRing)]; } // Component functions +/** + * Returns the current `d` attribute value. + * @returns {string} the `d` attribute value + */ function getSVGMorph(/* tweenProp */) { return this.element.getAttribute('d'); } -function prepareSVGMorph(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.polygonObject} value the property value + * @returns {KUTE.polygonObject} the property tween object + */ +function prepareSVGMorph(/* tweenProp */_, value) { const pathObject = {}; // remove newlines, they brake JSON strings sometimes const pathReg = new RegExp('\\n', 'ig'); let elem = null; - if (value instanceof SVGElement) { + if (value instanceof SVGPathElement) { elem = value; } else if (/^\.|^#/.test(value)) { elem = selector(value); } // first make sure we return pre-processed values - if (typeof (value) === 'object' && value.pathArray) { + if (typeof (value) === 'object' && value.polygon) { return value; } if (elem && ['path', 'glyph'].includes(elem.tagName)) { pathObject.original = elem.getAttribute('d').replace(pathReg, ''); @@ -3288,10 +4283,15 @@ function prepareSVGMorph(tweenProp, value) { return pathObject; } + +/** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} prop the `path` property name + */ function crossCheckSVGMorph(prop) { if (this.valuesEnd[prop]) { - const pathArray1 = this.valuesStart[prop].pathArray; - const pathArray2 = this.valuesEnd[prop].pathArray; + const pathArray1 = this.valuesStart[prop].polygon; + const pathArray2 = this.valuesEnd[prop].polygon; // skip already processed paths // allow the component to work with pre-processed values if (!pathArray1 || !pathArray2 @@ -3301,11 +4301,11 @@ function crossCheckSVGMorph(prop) { // process morphPrecision const morphPrecision = this._morphPrecision ? parseInt(this._morphPrecision, 10) - : defaultOptions.morphPrecision; + : defaultOptions$1.morphPrecision; const [path1, path2] = getInterpolationPoints(p1, p2, morphPrecision); - this.valuesStart[prop].pathArray = path1; - this.valuesEnd[prop].pathArray = path2; + this.valuesStart[prop].polygon = path1; + this.valuesEnd[prop].polygon = path2; } } } @@ -3319,27 +4319,29 @@ const svgMorphFunctions = { }; // Component Full -const svgMorph = { +const SVGMorph = { component: 'svgMorph', property: 'path', defaultValue: [], Interpolate: coords, - defaultOptions: { morphPrecision: 10, morphIndex: 0 }, + defaultOptions: { morphPrecision: 10 }, functions: svgMorphFunctions, // Export utils to global for faster execution Util: { + // component addPoints, bisect, - normalizeRing, - validRing, // component + getPolygon, + validPolygon, getInterpolationPoints, - pathStringToRing, + pathStringToPolygon, distanceSquareRoot, midPoint, - approximateRing, - rotateRing, + approximatePolygon, + rotatePolygon, + // svg-path-commander pathToString, - pathToCurve, // svg-path-commander + pathToCurve, getPathLength, getPointAtLength, getDrawDirection, @@ -3348,14 +4350,14 @@ const svgMorph = { }; const Components = { - EssentialBoxModel: essentialBoxModel, + EssentialBoxModel: BoxModelEssential, ColorsProperties: colorProperties, HTMLAttributes: htmlAttributes, - OpacityProperty: opacityProperty, - TextWrite: textWrite, - TransformFunctions: transformFunctionsComponent, - SVGDraw: svgDraw, - SVGMorph: svgMorph, + OpacityProperty, + TextWriteProp: TextWrite, + TransformFunctions, + SVGDraw: SvgDrawProperty, + SVGMorph, }; // init components @@ -3364,7 +4366,17 @@ Object.keys(Components).forEach((component) => { Components[component] = new Animation(compOps); }); -var version = "2.1.3"; +var version = "2.2.0alpha2"; + +// @ts-ignore + +/** + * A global namespace for library version. + * @type {string} + */ +const Version = version; + +// KUTE.js standard distribution version const KUTE = { Animation, @@ -3385,11 +4397,11 @@ const KUTE = { Easing, CubicBezier, Render, - Interpolate, + Interpolate: interpolate, Process, - Internals, + Internals: internals, Selector: selector, - Version: version, + Version, }; export { KUTE as default }; diff --git a/dist/kute.esm.min.js b/dist/kute.esm.min.js index 4e07bd2..4d572aa 100644 --- a/dist/kute.esm.min.js +++ b/dist/kute.esm.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.1.3 | thednp © 2021 | MIT-License -class t{constructor(t,e,n,r,s){this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;const a=t=>this.sampleCurveY(this.solveCurveX(t));return Object.defineProperty(a,"name",{writable:!0}),a.name=s||`cubic-bezier(${[t,e,n,r]})`,a}sampleCurveX(t){return((this.ax*t+this.bx)*t+this.cx)*t}sampleCurveY(t){return((this.ay*t+this.by)*t+this.cy)*t}sampleCurveDerivativeX(t){return(3*this.ax*t+2*this.bx)*t+this.cx}solveCurveX(t){let e,n,r,s,a,i;const o=1e-5;for(r=t,i=0;i<32;i+=1){if(s=this.sampleCurveX(r)-t,Math.abs(s)n)return n;for(;es?e=r:n=r,r=.5*(n-e)+e}return r}}var e={},n=[];let r;r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{};var s=r,a={},i={};let o;o="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?()=>{const t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:()=>(new Date).getTime();var l=o;const c={};c.now=l;let u=0;const h=t=>{let e=0;for(;e{!n.length&&u&&(cancelAnimationFrame(u),u=null,Object.keys(i).forEach((t=>{"function"==typeof i[t]?e[t]&&delete e[t]:Object.keys(i[t]).forEach((t=>{e[t]&&delete e[t]}))})),Object.keys(a).forEach((t=>{e[t]&&delete e[t]})))}),64)}const f={Tick:u,Ticker:h,Tweens:n,Time:c};Object.keys(f).forEach((t=>{e[t]||(e[t]="Time"===t?c.now:f[t])})),s._KUTE=e;var d={},g={};const y={duration:700,delay:0,easing:"linear"};var m={},b={},v={},x={},E={},w={supportedProperties:d,defaultValues:g,defaultOptions:y,prepareProperty:m,prepareStart:b,crossCheck:v,onStart:i,onComplete:x,linkProperty:E},k={},C=t=>n.push(t),O=t=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)};function _(){Object.keys(E).forEach((t=>{const n=E[t],r=d[t];Object.keys(n).forEach((t=>{"function"==typeof n[t]&&Object.keys(this.valuesEnd).some((t=>r&&r.includes(t)||"attr"===t&&Object.keys(this.valuesEnd[t]).some((t=>r&&r.includes(t)))))?e[t]||(e[t]=n[t]):Object.keys(this.valuesEnd).forEach((r=>{const s=this.valuesEnd[r];s instanceof Object&&Object.keys(s).forEach((r=>{"function"==typeof n[r]?e[r]||(e[r]=n[r]):Object.keys(n[t]).forEach((t=>{n[r]&&"function"==typeof n[r][t]&&(e[t]||(e[t]=n[r][t]))}))}))}))}))}))}var M={add:C,remove:O,getAll:()=>n,removeAll:()=>{n.length=0},stop:p,linkInterpolation:_};function T(t){if(!t.style)return!1;const e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.forEach((t=>{if(/transform/i.test(t)){t.split(":")[1].split(")").forEach((t=>{const e=t.split("("),s=e[0],a=e[1];/matrix/.test(s)||(n[s]=r.includes(s)?a.split(","):a)}))}})),n}function I(t,e){const n=t.style,r=getComputedStyle(t)||t.currentStyle,s=n[e]&&!/auto|initial|none|unset/.test(n[e])?n[e]:r[e];let a=g[e];return"transform"!==e&&(e in r||e in n)&&(a=s),a}function S(t,e){const n="start"===e?this.valuesStart:this.valuesEnd;Object.keys(m).forEach((e=>{const r=m[e],s=d[e];Object.keys(r).forEach((e=>{const a={};Object.keys(t).forEach((i=>{g[i]&&r[i]?n[i]=r[i].call(this,i,t[i]):!g[e]&&"transform"===e&&s.includes(i)?a[i]=t[i]:g[i]||"transform"!==i?!g[e]&&s&&s.includes(i)&&(n[i]=r[e].call(this,i,t[i])):n[i]=t[i]})),Object.keys(a).length&&(n[e]=r[e].call(this,e,a))}))}))}function A(){const t={},e=T(this.element);Object.keys(this.valuesStart).forEach((e=>{Object.keys(b).forEach((n=>{const r=b[n];Object.keys(r).forEach((s=>{(s===e&&r[e]||d[n]&&d[n].includes(e))&&(t[e]=r[s].call(this,e,this.valuesStart[e]))}))}))})),Object.keys(e).forEach((n=>{n in this.valuesStart||(t[n]=e[n]||g[n])})),this.valuesStart={},S.call(this,t,"start")}var j={getInlineStyle:T,getStyleForProperty:I,getStartValues:A,prepareObject:S},L={};const P={linear:new t(0,0,1,1,"linear"),easingSinusoidalIn:new t(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new t(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new t(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new t(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new t(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new t(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new t(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new t(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new t(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new t(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new t(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new t(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new t(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new t(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new t(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new t(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new t(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new t(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new t(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new t(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new t(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new t(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new t(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new t(.68,-.55,.265,1.55,"easingBackInOut")};function N(t,e){try{let n,r;return e?(r=t instanceof Array&&t.every((t=>t instanceof Element)),n=t instanceof HTMLCollection||t instanceof NodeList||r?t:document.querySelectorAll(t)):n=t instanceof Element||t===window?t:document.querySelector(t),n}catch(e){throw TypeError(`KUTE.js - Element(s) not found: ${t}.`)}}function $(){Object.keys(i).forEach((t=>{"function"==typeof i[t]?i[t].call(this,t):Object.keys(i[t]).forEach((e=>{i[t][e].call(this,e)}))})),_.call(this)}L.processEasing=function(e){if("function"==typeof e)return e;if("function"==typeof P[e])return P[e];if(/bezier/.test(e)){const n=e.replace(/bezier|\s|\(|\)/g,"").split(",");return new t(1*n[0],1*n[1],1*n[2],1*n[3])}return P.linear};class V{constructor(t,n,r,s){this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n;const a=s||{};this._resetStart=a.resetStart||0,this._easing="function"==typeof a.easing?a.easing:L.processEasing(a.easing),this._duration=a.duration||y.duration,this._delay=a.delay||y.delay,Object.keys(a).forEach((t=>{const e=`_${t}`;e in this||(this[e]=a[t])}));const o=this._easing.name;return i[o]||(i[o]=function(t){e[t]||t!==this._easing.name||(e[t]=this._easing)}),this}start(t){return C(this),this.playing=!0,this._startTime=void 0!==t?t:e.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),$.call(this),this._startFired=!0),u||h(),this}stop(){return this.playing&&(O(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this}close(){Object.keys(x).forEach((t=>{Object.keys(x[t]).forEach((e=>{x[t][e].call(this,e)}))})),this._startFired=!1,p.call(this)}chain(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this}stopChainedTweens(){this._chain&&this._chain.length&&this._chain.forEach((t=>t.stop()))}update(t){const n=void 0!==t?t:e.Time();let r;if(n1?1:r;const s=this._easing(r);return Object.keys(this.valuesEnd).forEach((t=>{e[t](this.element,this.valuesStart[t],this.valuesEnd[t],s)})),this._onUpdate&&this._onUpdate.call(this),1!==r||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((t=>t.start())),!1)}}L.tween=V,y.repeat=0,y.repeatDelay=0,y.yoyo=!1,y.resetStart=!1;class q extends V{constructor(...t){super(...t),this.valuesStart={},this.valuesEnd={};const e=t[1],n=t[2];S.call(this,n,"end"),this._resetStart?this.valuesStart=e:S.call(this,e,"start"),this._resetStart||Object.keys(v).forEach((t=>{Object.keys(v[t]).forEach((e=>{v[t][e].call(this,e)}))})),this.paused=!1,this._pauseTime=null;const r=t[3];return this._repeat=r.repeat||y.repeat,this._repeatDelay=r.repeatDelay||y.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=r.yoyo||y.yoyo,this._reversed=!1,this}start(t){return this._resetStart&&(this.valuesStart=this._resetStart,A.call(this),Object.keys(v).forEach((t=>{Object.keys(v[t]).forEach((e=>{v[t][e].call(this,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((t=>{this.valuesRepeat[t]=this.valuesStart[t]})),super.start(t),this}stop(){return super.stop(),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this}close(){return super.close(),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this}resume(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),$.call(this),this._startTime+=e.Time()-this._pauseTime,C(this),u||h()),this}pause(){return!this.paused&&this.playing&&(O(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this}reverse(){Object.keys(this.valuesEnd).forEach((t=>{const e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}))}update(t){const n=void 0!==t?t:e.Time();let r;if(n1?1:r;const s=this._easing(r);return Object.keys(this.valuesEnd).forEach((t=>{e[t](this.element,this.valuesStart[t],this.valuesEnd[t],s)})),this._onUpdate&&this._onUpdate.call(this),1!==r||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=n,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((t=>t.start())),!1))}}L.tween=q;class H{constructor(t,e,n,r){this.tweens=[],"offset"in y||(y.offset=0);const s=r||{};s.delay=s.delay||y.delay;const a=[];return Array.from(t).forEach(((t,r)=>{const i=L.tween;if(a[r]=s||{},a[r].delay=r>0?s.delay+(s.offset||y.offset):s.delay,!(t instanceof Element))throw Error(`KUTE.js - ${t} not instanceof [Element]`);this.tweens.push(new i(t,e,n,a[r]))})),this.length=this.tweens.length,this}start(t){const n=void 0===t?e.Time():t;return this.tweens.map((t=>t.start(n))),this}stop(){return this.tweens.map((t=>t.stop())),this}pause(t){const n=void 0===t?e.Time():t;return this.tweens.map((t=>t.pause(n))),this}resume(t){const n=void 0===t?e.Time():t;return this.tweens.map((t=>t.resume(n))),this}chain(t){const e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof L.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this}playing(){return this.tweens.some((t=>t.playing))}removeTweens(){this.tweens=[]}getMaxDuration(){const t=[];return this.tweens.forEach((e=>{t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)}}class D{constructor(t){try{if(t.component in d)throw Error(`KUTE.js - ${t.component} already registered`);if(t.property in g)throw Error(`KUTE.js - ${t.property} already registered`);this.setComponent(t)}catch(t){throw Error(t)}}setComponent(t){const e=this,n=t.component,r={prepareProperty:m,prepareStart:b,onStart:i,onComplete:x,crossCheck:v},s=t.category,o=t.property,l=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return d[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(g[o]=t.defaultValue,e.supports=`${o} property`):t.defaultValues&&(Object.keys(t.defaultValues).forEach((e=>{g[e]=t.defaultValues[e]})),e.supports=`${l||o} ${o||s} properties`),t.defaultOptions&&Object.keys(t.defaultOptions).forEach((e=>{y[e]=t.defaultOptions[e]})),t.functions&&Object.keys(r).forEach((e=>{e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][s||o]||(r[e][n][s||o]=t.functions[e])):Object.keys(t.functions[e]).forEach((s=>{r[e][n]||(r[e][n]={}),r[e][n][s]||(r[e][n][s]=t.functions[e][s])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((e=>{const n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((t=>{"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),E[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((e=>{k[e]||(k[e]=t.Util[e])})),e}}function F(t,e){const n=parseInt(t,10)||0,r=["px","%","deg","rad","em","rem","vh","vw"];let s;for(let e=0;e{e.style[t]=(s>.99||s<.01?(10*Q(n,r,s)>>0)/10:Q(n,r,s)>>0)+"px"})}const R={};["top","left","width","height"].forEach((t=>{R[t]=U}));const X=["top","left","width","height"],B={};X.forEach((t=>{B[t]=U}));const Z={component:"essentialBoxModel",category:"boxModel",properties:X,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:Q},functions:{prepareStart:function(t){return I(this.element,t)||g[t]},prepareProperty:function(t,e){const n=F(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:B},Util:{trueDimension:F}};function z(t){let e;if(/rgb|rgba/.test(t)){const n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){const n=(t=>{const e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,((t,e,n,r)=>e+e+n+n+r+r)),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null})(t);e={r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){const n=document.getElementsByTagName("head")[0];n.style.color=t;let r=getComputedStyle(n,null).color;r=/rgb/.test(r)?r.replace(/[^\d,]/g,"").split(","):[0,0,0],n.style.color="",e={r:parseInt(r[0],10),g:parseInt(r[1],10),b:parseInt(r[2],10)}}return e}function Y(t,e,n){const r={},s=",";return Object.keys(e).forEach((s=>{"a"!==s?r[s]=Q(t[s],e[s],n)>>0||0:t[s]&&e[s]&&(r[s]=(100*Q(t[s],e[s],n)>>0)/100)})),r.a?"rgba("+r.r+s+r.g+s+r.b+s+r.a+")":"rgb("+r.r+s+r.g+s+r.b+")"}function K(t){this.valuesEnd[t]&&!e[t]&&(e[t]=(e,n,r,s)=>{e.style[t]=Y(n,r,s)})}const W={};["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"].forEach((t=>{W[t]=K}));const G=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],J={};G.forEach((t=>{J[t]="#000"}));const tt={};G.forEach((t=>{tt[t]=K}));const et={component:"colorProperties",category:"colors",properties:G,defaultValues:J,Interpolate:{numbers:Q,colors:Y},functions:{prepareStart:function(t){return I(this.element,t)||g[t]},prepareProperty:function(t,e){return z(e)},onStart:tt},Util:{trueColor:z}},nt={},rt=["fill","stroke","stop-color"];function st(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}const at={prepareStart:function(t,e){const n={};return Object.keys(e).forEach((t=>{const e=st(t).replace(/_+[a-z]+/,""),r=this.element.getAttribute(e);n[e]=rt.includes(e)?r||"rgba(0,0,0,0)":r||(/opacity/i.test(t)?1:0)})),n},prepareProperty:function(t,e){const n={};return Object.keys(e).forEach((r=>{const s=st(r),a=/(%|[a-z]+)$/,o=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(rt.includes(s))i.htmlAttributes[s]=e=>{this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=(t,e,n,r,s)=>{t.setAttribute(e,Y(n,r,s))})},n[s]=z(e[r])||g.htmlAttributes[r];else if(null!==o&&a.test(o)){const a=F(o).u||F(e[r]).u,l=/%/.test(a)?"_percent":`_${a}`;i.htmlAttributes[s+l]=e=>{this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=(t,e,n,r,s)=>{const a=e.replace(l,"");t.setAttribute(a,(1e3*Q(n.v,r.v,s)>>0)/1e3+r.u)})},n[s+l]=F(e[r])}else a.test(e[r])&&null!==o&&(null===o||a.test(o))||(i.htmlAttributes[s]=e=>{this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=(t,e,n,r,s)=>{t.setAttribute(e,(1e3*Q(n,r,s)>>0)/1e3)})},n[s]=parseFloat(e[r]))})),n},onStart:{attr(t){!e[t]&&this.valuesEnd[t]&&(e[t]=(t,n,r,s)=>{Object.keys(r).forEach((a=>{e.attributes[a](t,a,n[a],r[a],s)}))})},attributes(t){!e[t]&&this.valuesEnd.attr&&(e[t]=nt)}}},it={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:Q,colors:Y},functions:at,Util:{replaceUppercase:st,trueColor:z,trueDimension:F}};const ot={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=(e,n,r,s)=>{e.style[t]=(1e3*Q(n,r,s)>>0)/1e3})}},lt={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:Q},functions:ot},ct=String("abcdefghijklmnopqrstuvwxyz").split(""),ut=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ht=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),pt=String("0123456789").split(""),ft=ct.concat(ut,pt),dt=ft.concat(ht),gt={alpha:ct,upper:ut,symbols:ht,numeric:pt,alphanumeric:ft,all:dt},yt={text(t){if(!e[t]&&this.valuesEnd[t]){const n=this._textChars;let r=gt[y.textChars];n in gt?r=gt[n]:n&&n.length&&(r=n),e[t]=(t,e,n,s)=>{let a="",i="";const o=""===n?" ":n,l=e.substring(0),c=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(i=c.substring(Math.min(s*c.length,c.length)>>0,0),t.innerHTML=s<1?i+u:o):" "===n?(a=l.substring(0,Math.min((1-s)*l.length,l.length)>>0),t.innerHTML=s<1?a+u:o):(a=l.substring(l.length,Math.min(s*l.length,l.length)>>0),i=c.substring(0,Math.min(s*c.length,c.length)>>0),t.innerHTML=s<1?i+u+a:o)}}},number(t){t in this.valuesEnd&&!e[t]&&(e[t]=(t,e,n,r)=>{t.innerHTML=Q(e,n,r)>>0})}};function mt(t,e){let n,r;if("string"==typeof t)return r=document.createElement("SPAN"),r.innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){const r=t.innerHTML;n=document.createElement("SPAN"),n.className=e,n.innerHTML=r,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&([n]=t.children);return n}function bt(t,e){let n=[];const r=t.children.length;if(r){const s=[];let a,i=t.innerHTML;for(let n,o,l,c=0;c>0)/1e3}${n})`}function xt(t,e,n,r){const s=[];for(let a=0;a<3;a+=1)s[a]=(t[a]||e[a]?(1e3*(t[a]+(e[a]-t[a])*r)>>0)/1e3:0)+n;return`translate3d(${s.join(",")})`}function Et(t,e,n,r){let s="";return s+=t[0]||e[0]?`rotateX(${(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3}${n})`:"",s+=t[1]||e[1]?`rotateY(${(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3}${n})`:"",s+=t[2]||e[2]?`rotateZ(${(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3}${n})`:"",s}function wt(t,e,n){return`scale(${(1e3*(t+(e-t)*n)>>0)/1e3})`}function kt(t,e,n,r){const s=[];return s[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,s[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0",`skew(${s.join(",")})`}function Ct(t,e){return parseFloat(t)/100*e}function Ot(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function _t(t){const e=t.getAttribute("points").split(" ");let n=0;if(e.length>1){const r=t=>{const e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},s=(t,e)=>void 0!==t&&void 0!==e?Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2):0;if(e.length>2)for(let t=0;t{const s=(100*e.l>>0)/100,a=0-(100*Q(e.s,n.s,r)>>0)/100,i=(100*Q(e.e,n.e,r)>>0)/100+a;t.style.strokeDashoffset=`${a}px`,t.style.strokeDasharray=`${(100*(i<1?0:i)>>0)/100}px, ${s}px`})}},Lt=4;function Pt(t){return t.map((t=>Array.isArray(t)?Pt(t):Number.isNaN(+t)?t:+t))}function Nt(t,e){const n=Number.isNaN(+e)?Lt:+e;let r;return r=n?t.map((t=>t.map((t=>{const e=+t,r=10**n;return e?e%1==0?e:Math.round(e*r)/r:t})))):Pt(t),r}function $t(t,e,n){if(t[n].length>7){t[n].shift();const r=t[n];let s=n;for(;r.length;)e[n]="A",t.splice(s+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){return Array.isArray(t)&&t.every((t=>{const e=t[0].toLowerCase();return Vt[e]===t.length-1&&/[achlmrqstvz]/g.test(e)}))}function Ht(t){let e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;if("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Vt[n]&&(t.segments.push([e].concat(r.splice(0,Vt[n]))),Vt[n]););}function Dt(t){const e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void(t.index+=1)):49===e?(t.param=1,void(t.index+=1)):void(t.err=`Invalid path value: invalid Arc flag ${e}`)}function Ft(t){return t>=48&&t<=57}function Qt(t){const e=t.index,{max:n}=t;let r,s=e,a=!1,i=!1,o=!1,l=!1;if(s>=n)t.err=`Invalid path value: missing param ${t.pathValue[s]}`;else if(r=t.pathValue.charCodeAt(s),43!==r&&45!==r||(s+=1,r=s=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1;var e}function Rt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){const{max:e}=t,n=t.pathValue.charCodeAt(t.index),r=Vt[t.pathValue[t.index].toLowerCase()];if(t.segmentStart=t.index,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0;default:return!1}}(n))if(t.index+=1,Ut(t),t.data=[],r){for(;;){for(let s=r;s>0;s-=1){if(97!=(32|n)||3!==s&&4!==s?Qt(t):Dt(t),t.err.length)return;t.data.push(t.param),Ut(t),t.index=t.max)break;if(!Rt(t.pathValue.charCodeAt(t.index)))break}Ht(t)}else Ht(t);else t.err=`Invalid path value: ${t.pathValue[t.index]} not a path command`}function Bt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function Zt(t,e){if(function(t){return qt(t)&&t.every((t=>t[0]===t[0].toUpperCase()))}(t))return Pt(t);const n=function(t,e){if(qt(t))return Pt(t);const n=new Bt(t);for(Ut(n);n.index-1?{x1:2*t-n,y1:2*e-r}:{x1:t,y1:e}}(e.x1,e.y1,e.x2,e.y2,n);e.x1=t,e.y1=r,a=["C",t,r].concat(s)}else if("T"===r){const{qx:t,qy:r}=function(t,e,n,r,s){return"QT".indexOf(s)>-1?{qx:2*t-n,qy:2*e-r}:{qx:t,qy:e}}(e.x1,e.y1,e.qx,e.qy,n);e.qx=t,e.qy=r,a=["Q",t,r].concat(s)}else if("Q"===r){const[t,n]=s;e.qx=t,e.qy=n}return a}function Yt(t,e){if(function(t){return Array.isArray(t)&&t.every((t=>{const e=t[0].toLowerCase();return Vt[e]===t.length-1&&/[ACLMQZ]/.test(t[0])}))}(t))return Pt(t);const n=Zt(t,e),r={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},s=[],a=n.length;let i,o,l="";for(let t=0;t1&&(n=Math.sqrt(n),w*=n,k*=n);const r=w**2,s=k**2,o=(a===i?-1:1)*Math.sqrt(Math.abs((r*s-r*e*e-s*t*t)/(r*e*e+s*t*t)));g=o*w*e/k+(b+v)/2,y=o*-k*t/w+(x+E)/2,f=Math.asin(((x-y)/k*10**9>>0)/10**9),d=Math.asin(((E-y)/k*10**9>>0)/10**9),f=bd&&(f-=2*Math.PI),!i&&d>f&&(d-=2*Math.PI)}let C=d-f;if(Math.abs(C)>u){const t=d,e=v,n=E;d=f+u*(i&&d>f?1:-1),v=g+w*Math.cos(d),E=y+k*Math.sin(d),m=Wt(v,E,w,k,s,0,i,e,n,[d,t,g,y])}C=d-f;const O=Math.cos(f),_=Math.sin(f),M=Math.cos(d),T=Math.sin(d),I=Math.tan(C/4),S=4/3*w*I,A=4/3*k*I,j=[b,x],L=[b+S*_,x-A*O],P=[v+S*T,E-A*M],N=[v,E];return L[0]=2*j[0]-L[0],L[1]=2*j[1]-L[1],c?[L,P,N].concat(m):(m=[L,P,N].concat(m).join().split(","),m.map(((t,e)=>e%2?Kt(m[e-1],t,h).y:Kt(t,m[e+1],h).x)))}function Gt(t,e,n,r,s,a){const i=1/3,o=2/3;return[i*t+o*n,i*e+o*r,i*s+o*n,i*a+o*r,s,a]}function Jt(t,e,n,r,s,a,i,o,l){const c=1-l;return{x:c**3*t+c*c*3*l*n+3*c*l*l*s+l**3*i,y:c**3*e+c*c*3*l*r+3*c*l*l*a+l**3*o}}function te(t,e,n){const r=t[0],s=t[1];return[r+(e[0]-r)*n,s+(e[1]-s)*n]}function ee(t,e,n,r){const s=.5,a=[t,e],i=[n,r],o=te(a,i,s),l=te(i,o,s),c=te(o,l,s),u=te(l,c,s),h=te(c,u,s),p=Jt.apply(0,a.concat(o,c,h,s)),f=Jt.apply(0,h.concat(u,l,i,0));return[p.x,p.y,f.x,f.y,n,r]}function ne(t,e){"TQ".indexOf(t[0])<0&&(e.qx=null,e.qy=null);const[n,r]=t.slice(1);switch(t[0]){case"M":return e.x=n,e.y=r,t;case"A":return["C"].concat(Wt.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"Q":return e.qx=n,e.qy=r,["C"].concat(Gt.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"L":return["C"].concat(ee(e.x1,e.y1,t[1],t[2]));case"Z":return["C"].concat(ee(e.x1,e.y1,e.x,e.y))}return t}function re(t,e){if(function(t){return qt(t)&&t.slice(1).every((t=>"C"===t[0]))}(t))return Pt(t);const n=Yt(t,e),r={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},s=[];let a,i,o="",l=n.length;for(let t=0;tt[0].concat(t.slice(1).join(" ")))).join("")}function ae(t,e,n,r,s){return s*(s*(-3*t+9*e-9*n+3*r)+6*t-12*e+6*n)-3*t+3*e}function ie(t,e,n,r,s,a,i,o,l){let c;(null===l||Number.isNaN(+l))&&(c=1),c>1&&(c=1),c<0&&(c=0);const u=c/2;let h=0,p=0,f=0,d=0;const g=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach(((l,c)=>{h=u*l+u,p=ae(t,n,s,i,h),f=ae(e,r,a,o,h),d+=g[c]*Math.sqrt(p*p+f*f)})),u*d}function oe(t,e){let n=0;return re(t,e).forEach(((t,e,r)=>{n+="M"!==t[0]?ie.apply(0,r[e-1].slice(-2).concat(t.slice(1))):0})),n}function le(t,e){let n,r,s,a=0;return re(t,9).map(((t,i,o)=>(r=i?o[i-1].slice(-2).concat(t.slice(1)):t.slice(1),n=i?ie.apply(0,r):0,a+=n,s=0===i?{x:r[0],y:r[1]}:a>e&&e>a-n?Jt.apply(0,r.concat(1-(a-e)/n)):null,s))).filter((t=>t)).slice(-1)[0]}function ce(t,e,n,r,s,a,i,o){return 3*((o-e)*(n+s)-(i-t)*(r+a)+r*(t-s)-n*(e-a)+o*(s+t/3)-i*(a+e/3))/20}function ue(t,e){return function(t,e){let n=0,r=0,s=0,a=0,i=0;return re(t,e).map((t=>{switch(t[0]){case"M":case"Z":return s="M"===t[0]?t[1]:s,a="M"===t[0]?t[2]:a,n=s,r=a,0;default:return i=ce.apply(0,[n,r].concat(t.slice(1))),[n,r]=t.slice(-2),i}})).reduce(((t,e)=>t+e),0)}(re(t,e))>=0}function he(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function pe(t,e,n,r){const s=[];for(let a=0;a>0)/1e3)}return s}function fe(t){return t.reduce(((e,n,r)=>r?e+he(t[r-1],n):0),0)}function de(t,e){var n;const r=re((n=se(t),se(Zt(n,0)).replace(/(m|M)/g,"|$1").split("|").map((t=>t.trim())).filter((t=>t)))[0],4),s=oe(r),a=[];let i,o=3;e&&!Number.isNaN(e)&&+e>0&&(o=Math.max(o,Math.ceil(s/e)));for(let t=0;t-1))return!1;e.push([r[1],r[2]])}return a=fe(e),!!n&&{ring:e,pathLength:a}}(n)||de(n,e)}function ye(t,e){const n=t.length;let r,s,a,i,o=1/0,l=0;for(let s=0;se;)r=te(n,r,.5),t.splice(s+1,0,r)}function ve(t){return Array.isArray(t)&&t.every((t=>Array.isArray(t)&&2===t.length&&!Number.isNaN(t[0])&&!Number.isNaN(t[1])))}function xe(t,e){let n,r,s=t;if("string"==typeof s){const t=ge(s,e);s=t.ring,n=t.skipBisect,r=t.pathLength}else if(!Array.isArray(s))throw Error(`Invalid path value: ${s}`);const a=s.slice(0);if(a.pathLength=r,!ve(a))throw Error(`Invalid path value: ${a}`);return a.length>1&&he(a[0],a[a.length-1])<1e-9&&a.pop(),!n&&e&&!Number.isNaN(e)&&+e>0&&be(a,e),a}function Ee(t,e,n){const r=n||y.morphPrecision,s=xe(t,r),a=xe(e,r),i=s.length-a.length;return me(s,i<0?-1*i:0),me(a,i>0?i:0),ye(s,a),[Nt(s),Nt(a)]}const we={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){const n={},r=new RegExp("\\n","ig");let s=null;return e instanceof SVGElement?s=e:/^\.|^#/.test(e)&&(s=N(e)),"object"==typeof e&&e.pathArray?e:(s&&["path","glyph"].includes(s.tagName)?n.original=s.getAttribute("d").replace(r,""):s||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=(t,e,n,r)=>{const s=e.pathArray,a=n.pathArray,i=a.length;t.setAttribute("d",1===r?n.original:`M${pe(s,a,i,r).join("L")}Z`)})},crossCheck:function(t){if(this.valuesEnd[t]){const e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){const e=this.valuesStart[t].original,n=this.valuesEnd[t].original,r=this._morphPrecision?parseInt(this._morphPrecision,10):y.morphPrecision,[s,a]=Ee(e,n,r);this.valuesStart[t].pathArray=s,this.valuesEnd[t].pathArray=a}}}},ke={EssentialBoxModel:Z,ColorsProperties:et,HTMLAttributes:it,OpacityProperty:lt,TextWrite:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:Q},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:yt},Util:{charSet:gt,createTextTweens:function(t,e,n){if(t.playing)return!1;const r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);const s=L.tween,a=function(t,e){const n=bt(t,"text-part"),r=bt(mt(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((t=>(t.className+=" oldText",t.outerHTML))).join(""),t.innerHTML+=r.map((t=>(t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")))).join(""),[n,r]}(t,e),i=a[0],o=a[1],l=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText"));let u=[],h=0;return u=u.concat(l.map(((t,e)=>(r.duration="auto"===r.duration?75*i[e].innerHTML.length:r.duration,r.delay=h,r.onComplete=null,h+=r.duration,new s(t,{text:t.innerHTML},{text:""},r))))),u=u.concat(c.map(((n,a)=>(r.duration="auto"===r.duration?75*o[a].innerHTML.length:r.duration,r.delay=h,r.onComplete=a===o.length-1?function(){t.innerHTML=e,t.playing=!1}:null,h+=r.duration,new s(n,{text:""},{text:o[a].innerHTML},r))))),u.start=function(){t.playing||(u.forEach((t=>t.start())),t.playing=!0)},u}}},TransformFunctions:{component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t){const e=T(this.element);return e[t]?e[t]:g[t]},prepareProperty:function(t,e){const n=["X","Y","Z"],r={},s=[],a=[],i=[],o=["translate3d","translate","rotate3d","skew"];return Object.keys(e).forEach((t=>{const l="object"==typeof e[t]&&e[t].length?e[t].map((t=>parseInt(t,10))):parseInt(e[t],10);if(o.includes(t)){const e="translate"===t||"rotate"===t?`${t}3d`:t;r[e]="skew"===t?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===t?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(t)){const o=t.replace(/[XYZ]/,""),l="skew"===o?o:`${o}3d`,c="skew"===o?2:3;let u=[];"translate"===o?u=s:"rotate"===o?u=a:"skew"===o&&(u=i);for(let t=0;t{e.style[t]=(n.perspective||r.perspective?vt(n.perspective,r.perspective,"px",s):"")+(n.translate3d?xt(n.translate3d,r.translate3d,"px",s):"")+(n.rotate3d?Et(n.rotate3d,r.rotate3d,"deg",s):"")+(n.skew?kt(n.skew,r.skew,"deg",s):"")+(n.scale||r.scale?wt(n.scale,r.scale,s):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:vt,translate3d:xt,rotate3d:Et,translate:function(t,e,n,r){const s=[];return s[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,s[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0",`translate(${s.join(",")})`},rotate:function(t,e,n,r){return`rotate(${(1e3*(t+(e-t)*r)>>0)/1e3}${n})`},scale:wt,skew:kt}},SVGDraw:{component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:Q},functions:jt,Util:{getRectLength:Ot,getPolyLength:_t,getLineLength:Mt,getCircleLength:Tt,getEllipseLength:It,getTotalLength:St,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:At,percent:Ct}},SVGMorph:{component:"svgMorph",property:"path",defaultValue:[],Interpolate:pe,defaultOptions:{morphPrecision:10,morphIndex:0},functions:we,Util:{addPoints:me,bisect:be,normalizeRing:xe,validRing:ve,getInterpolationPoints:Ee,pathStringToRing:ge,distanceSquareRoot:he,midPoint:te,approximateRing:de,rotateRing:ye,pathToString:se,pathToCurve:re,getPathLength:oe,getPointAtLength:le,getDrawDirection:ue,roundPath:Nt}}};Object.keys(ke).forEach((t=>{const e=ke[t];ke[t]=new D(e)}));const Ce={Animation:D,Components:ke,Tween:q,fromTo:function(t,e,n,r){const s=r||{};return new(0,L.tween)(N(t),e,n,s)},to:function(t,e,n){const r=n||{},s=L.tween;return r.resetStart=e,new s(N(t),e,e,r)},TweenCollection:H,allFromTo:function(t,e,n,r){const s=r||{};return new H(N(t,!0),e,n,s)},allTo:function(t,e,n){const r=n||{};return n.resetStart=e,new H(N(t,!0),e,e,r)},Objects:w,Util:k,Easing:P,CubicBezier:t,Render:f,Interpolate:a,Process:j,Internals:M,Selector:N,Version:"2.1.3"};export{Ce as default}; +// KUTE.js Standard v2.2.0alpha2 | thednp © 2021 | MIT-License +class t{constructor(t,e,n,r,s){this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;const i=t=>this.sampleCurveY(this.solveCurveX(t));return Object.defineProperty(i,"name",{writable:!0}),i.name=s||`cubic-bezier(${[t,e,n,r]})`,i}sampleCurveX(t){return((this.ax*t+this.bx)*t+this.cx)*t}sampleCurveY(t){return((this.ay*t+this.by)*t+this.cy)*t}sampleCurveDerivativeX(t){return(3*this.ax*t+2*this.bx)*t+this.cx}solveCurveX(t){let e,n,r,s,i,a;const o=1e-5;for(r=t,a=0;a<32;a+=1){if(s=this.sampleCurveX(r)-t,Math.abs(s)n)return n;for(;es?e=r:n=r,r=.5*(n-e)+e}return r}}const e={},n=[];let r;r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{};const s=r,i={},a={};let o;o="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?()=>{const t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:()=>(new Date).getTime();const l=o,c={};c.now=l;let u=0;const h=t=>{let e=0;for(;e{!n.length&&u&&(cancelAnimationFrame(u),u=null,Object.keys(a).forEach((t=>{"function"==typeof a[t]?e[t]&&delete e[t]:Object.keys(a[t]).forEach((t=>{e[t]&&delete e[t]}))})),Object.keys(i).forEach((t=>{e[t]&&delete e[t]})))}),64)}const f={Tick:u,Ticker:h,Tweens:n,Time:c};Object.keys(f).forEach((t=>{e[t]||(e[t]="Time"===t?c.now:f[t])})),s._KUTE=e;const d={},g={},y={duration:700,delay:0,easing:"linear",repeat:0,repeatDelay:0,yoyo:!1,resetStart:!1,offset:0},m={},b={},v={},x={},E={},w={supportedProperties:d,defaultValues:g,defaultOptions:y,prepareProperty:m,prepareStart:b,crossCheck:v,onStart:a,onComplete:x,linkProperty:E},k={},_=t=>n.push(t),C=t=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)};function O(){Object.keys(E).forEach((t=>{const n=E[t],r=d[t];Object.keys(n).forEach((t=>{"function"==typeof n[t]&&Object.keys(this.valuesEnd).some((t=>r&&r.includes(t)||"attr"===t&&Object.keys(this.valuesEnd[t]).some((t=>r&&r.includes(t)))))?e[t]||(e[t]=n[t]):Object.keys(this.valuesEnd).forEach((r=>{const s=this.valuesEnd[r];s instanceof Object&&Object.keys(s).forEach((r=>{"function"==typeof n[r]?e[r]||(e[r]=n[r]):Object.keys(n[t]).forEach((t=>{n[r]&&"function"==typeof n[r][t]&&(e[t]||(e[t]=n[r][t]))}))}))}))}))}))}const M={add:_,remove:C,getAll:()=>n,removeAll:()=>{n.length=0},stop:p,linkInterpolation:O};function T(t){if(!t.style)return!1;const e=t.style.cssText.replace(/\s/g,"").split(";"),n={},r=["translate3d","translate","scale3d","skew"];return e.forEach((t=>{if(/transform/i.test(t)){t.split(":")[1].split(")").forEach((t=>{const e=t.split("("),s=e[0],i=e[1];/matrix/.test(s)||(n[s]=r.includes(s)?i.split(","):i)}))}})),n}function I(t,e){let n=g[e];const r=t.style,s=getComputedStyle(t)||t.currentStyle,i=r[e]&&!/auto|initial|none|unset/.test(r[e])?r[e]:s[e];return"transform"!==e&&(e in s||e in r)&&(n=i),n}function S(t,e){const n="start"===e?this.valuesStart:this.valuesEnd;Object.keys(m).forEach((e=>{const r=m[e],s=d[e];Object.keys(r).forEach((e=>{const i={};Object.keys(t).forEach((a=>{g[a]&&r[a]?n[a]=r[a].call(this,a,t[a]):!g[e]&&"transform"===e&&s.includes(a)?i[a]=t[a]:g[a]||"transform"!==a?!g[e]&&s&&s.includes(a)&&(n[a]=r[e].call(this,a,t[a])):n[a]=t[a]})),Object.keys(i).length&&(n[e]=r[e].call(this,e,i))}))}))}function A(){const t={},e=T(this.element);Object.keys(this.valuesStart).forEach((e=>{Object.keys(b).forEach((n=>{const r=b[n];Object.keys(r).forEach((s=>{(s===e&&r[e]||d[n]&&d[n].includes(e))&&(t[e]=r[s].call(this,e,this.valuesStart[e]))}))}))})),Object.keys(e).forEach((n=>{n in this.valuesStart||(t[n]=e[n]||g[n])})),this.valuesStart={},S.call(this,t,"start")}var j={getInlineStyle:T,getStyleForProperty:I,getStartValues:A,prepareObject:S};const P={tween:null,processEasing:null},$={linear:new t(0,0,1,1,"linear"),easingSinusoidalIn:new t(.47,0,.745,.715,"easingSinusoidalIn"),easingSinusoidalOut:new t(.39,.575,.565,1,"easingSinusoidalOut"),easingSinusoidalInOut:new t(.445,.05,.55,.95,"easingSinusoidalInOut"),easingQuadraticIn:new t(.55,.085,.68,.53,"easingQuadraticIn"),easingQuadraticOut:new t(.25,.46,.45,.94,"easingQuadraticOut"),easingQuadraticInOut:new t(.455,.03,.515,.955,"easingQuadraticInOut"),easingCubicIn:new t(.55,.055,.675,.19,"easingCubicIn"),easingCubicOut:new t(.215,.61,.355,1,"easingCubicOut"),easingCubicInOut:new t(.645,.045,.355,1,"easingCubicInOut"),easingQuarticIn:new t(.895,.03,.685,.22,"easingQuarticIn"),easingQuarticOut:new t(.165,.84,.44,1,"easingQuarticOut"),easingQuarticInOut:new t(.77,0,.175,1,"easingQuarticInOut"),easingQuinticIn:new t(.755,.05,.855,.06,"easingQuinticIn"),easingQuinticOut:new t(.23,1,.32,1,"easingQuinticOut"),easingQuinticInOut:new t(.86,0,.07,1,"easingQuinticInOut"),easingExponentialIn:new t(.95,.05,.795,.035,"easingExponentialIn"),easingExponentialOut:new t(.19,1,.22,1,"easingExponentialOut"),easingExponentialInOut:new t(1,0,0,1,"easingExponentialInOut"),easingCircularIn:new t(.6,.04,.98,.335,"easingCircularIn"),easingCircularOut:new t(.075,.82,.165,1,"easingCircularOut"),easingCircularInOut:new t(.785,.135,.15,.86,"easingCircularInOut"),easingBackIn:new t(.6,-.28,.735,.045,"easingBackIn"),easingBackOut:new t(.175,.885,.32,1.275,"easingBackOut"),easingBackInOut:new t(.68,-.55,.265,1.55,"easingBackInOut")};function L(t,e){try{let n,r;return e?(r=t instanceof Array&&t.every((t=>t instanceof Element)),n=t instanceof HTMLCollection||t instanceof NodeList||r?t:document.querySelectorAll(t)):n=t instanceof Element||t===window?t:document.querySelector(t),n}catch(e){throw TypeError(`KUTE.js - Element(s) not found: ${t}.`)}}function N(){Object.keys(a).forEach((t=>{"function"==typeof a[t]?a[t].call(this,t):Object.keys(a[t]).forEach((e=>{a[t][e].call(this,e)}))})),O.call(this)}P.processEasing=function(e){if("function"==typeof e)return e;if("function"==typeof $[e])return $[e];if(/bezier/.test(e)){const n=e.replace(/bezier|\s|\(|\)/g,"").split(",");return new t(1*n[0],1*n[1],1*n[2],1*n[3])}return $.linear};class q{constructor(t,n,r,s){this.element=t,this.playing=!1,this._startTime=null,this._startFired=!1,this.valuesEnd=r,this.valuesStart=n;const i=s||{};this._resetStart=i.resetStart||0,this._easing="function"==typeof i.easing?i.easing:P.processEasing(i.easing),this._duration=i.duration||y.duration,this._delay=i.delay||y.delay,Object.keys(i).forEach((t=>{const e=`_${t}`;e in this||(this[e]=i[t])}));const o=this._easing.name;return a[o]||(a[o]=function(t){e[t]||t!==this._easing.name||(e[t]=this._easing)}),this}start(t){return _(this),this.playing=!0,this._startTime=void 0!==t?t:e.Time(),this._startTime+=this._delay,this._startFired||(this._onStart&&this._onStart.call(this),N.call(this),this._startFired=!0),u||h(),this}stop(){return this.playing&&(C(this),this.playing=!1,this._onStop&&this._onStop.call(this),this.close()),this}close(){Object.keys(x).forEach((t=>{Object.keys(x[t]).forEach((e=>{x[t][e].call(this,e)}))})),this._startFired=!1,p.call(this)}chain(t){return this._chain=[],this._chain=t.length?t:this._chain.concat(t),this}stopChainedTweens(){this._chain&&this._chain.length&&this._chain.forEach((t=>t.stop()))}update(t){const n=void 0!==t?t:e.Time();let r;if(n1?1:r;const s=this._easing(r);return Object.keys(this.valuesEnd).forEach((t=>{e[t](this.element,this.valuesStart[t],this.valuesEnd[t],s)})),this._onUpdate&&this._onUpdate.call(this),1!==r||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((t=>t.start())),!1)}}P.tween=q;class H extends q{constructor(...t){super(...t),this.valuesStart={},this.valuesEnd={};const[e,n,r]=t.slice(1);return S.call(this,n,"end"),this._resetStart?this.valuesStart=e:S.call(this,e,"start"),this._resetStart||Object.keys(v).forEach((t=>{Object.keys(v[t]).forEach((e=>{v[t][e].call(this,e)}))})),this.paused=!1,this._pauseTime=null,this._repeat=r.repeat||y.repeat,this._repeatDelay=r.repeatDelay||y.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=r.yoyo||y.yoyo,this._reversed=!1,this}start(t){return this._resetStart&&(this.valuesStart=this._resetStart,A.call(this),Object.keys(v).forEach((t=>{Object.keys(v[t]).forEach((e=>{v[t][e].call(this,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((t=>{this.valuesRepeat[t]=this.valuesStart[t]})),super.start(t),this}stop(){return super.stop(),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this}close(){return super.close(),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this}resume(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),N.call(this),this._startTime+=e.Time()-this._pauseTime,_(this),u||h()),this}pause(){return!this.paused&&this.playing&&(C(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this}reverse(){Object.keys(this.valuesEnd).forEach((t=>{const e=this.valuesRepeat[t];this.valuesRepeat[t]=this.valuesEnd[t],this.valuesEnd[t]=e,this.valuesStart[t]=this.valuesRepeat[t]}))}update(t){const n=void 0!==t?t:e.Time();let r;if(n1?1:r;const s=this._easing(r);return Object.keys(this.valuesEnd).forEach((t=>{e[t](this.element,this.valuesStart[t],this.valuesEnd[t],s)})),this._onUpdate&&this._onUpdate.call(this),1!==r||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=n,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((t=>t.start())),!1))}}P.tween=H;class V{constructor(t,e,n,r){const s=P.tween;this.tweens=[];const i=r||{};i.delay=i.delay||y.delay;const a=[];return Array.from(t).forEach(((t,r)=>{if(a[r]=i||{},a[r].delay=r>0?i.delay+(i.offset||y.offset):i.delay,!(t instanceof Element))throw Error(`KUTE - ${t} is not instanceof Element`);this.tweens.push(new s(t,e,n,a[r]))})),this.length=this.tweens.length,this}start(t){const n=void 0===t?e.Time():t;return this.tweens.map((t=>t.start(n))),this}stop(){return this.tweens.map((t=>t.stop())),this}pause(){return this.tweens.map((t=>t.pause())),this}resume(){return this.tweens.map((t=>t.resume())),this}chain(t){const e=this.tweens[this.length-1];if(t instanceof V)e.chain(t.tweens);else{if(!(t instanceof P.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this}playing(){return this.tweens.some((t=>t.playing))}removeTweens(){this.tweens=[]}getMaxDuration(){const t=[];return this.tweens.forEach((e=>{t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)}}const{tween:D}=P;const{tween:F}=P;class Q{constructor(t){try{if(t.component in d)throw Error(`KUTE - ${t.component} already registered`);if(t.property in g)throw Error(`KUTE - ${t.property} already registered`)}catch(t){throw Error(t)}const e=this,n=t.component,r={prepareProperty:m,prepareStart:b,onStart:a,onComplete:x,crossCheck:v},s=t.category,o=t.property,l=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return d[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(g[o]=t.defaultValue,e.supports=`${o} property`):t.defaultValues&&(Object.keys(t.defaultValues).forEach((e=>{g[e]=t.defaultValues[e]})),e.supports=`${l||o} ${o||s} properties`),t.defaultOptions&&Object.assign(y,t.defaultOptions),t.functions&&Object.keys(r).forEach((e=>{e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][s||o]||(r[e][n][s||o]=t.functions[e])):Object.keys(t.functions[e]).forEach((s=>{r[e][n]||(r[e][n]={}),r[e][n][s]||(r[e][n][s]=t.functions[e][s])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((e=>{const n=t.Interpolate[e];"function"!=typeof n||i[e]?Object.keys(n).forEach((t=>{"function"!=typeof n[t]||i[e]||(i[e]=n[t])})):i[e]=n})),E[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((e=>{k[e]||(k[e]=t.Util[e])})),e}}const U=(t,e)=>{const n=parseInt(t,10)||0,r=["px","%","deg","rad","em","rem","vh","vw"];let s;for(let e=0;e{e.style[t]=(s>.99||s<.01?(10*X(n,r,s)>>0)/10:X(n,r,s)>>0)+"px"})}const Z={};["top","left","width","height"].forEach((t=>{Z[t]=B}));const R=["top","left","width","height"],Y={};R.forEach((t=>{Y[t]=B}));const z={component:"essentialBoxModel",category:"boxModel",properties:R,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:X},functions:{prepareStart:function(t){return I(this.element,t)||g[t]},prepareProperty:function(t,e){const n=U(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:Y},Util:{trueDimension:U}},K=t=>{let e;if(/rgb|rgba/.test(t)){const n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){const n=(t=>{const e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,((t,e,n,r)=>e+e+n+n+r+r)),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null})(t);e={r:n.r,g:n.g,b:n.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){const n=document.getElementsByTagName("head")[0];n.style.color=t;let r=getComputedStyle(n,null).color;r=/rgb/.test(r)?r.replace(/[^\d,]/g,"").split(","):[0,0,0],n.style.color="",e={r:parseInt(r[0],10),g:parseInt(r[1],10),b:parseInt(r[2],10)}}return e};function W(t,e,n){const r={},s=",";return Object.keys(e).forEach((s=>{"a"!==s?r[s]=X(t[s],e[s],n)>>0||0:t[s]&&e[s]&&(r[s]=(100*X(t[s],e[s],n)>>0)/100)})),r.a?"rgba("+r.r+s+r.g+s+r.b+s+r.a+")":"rgb("+r.r+s+r.g+s+r.b+")"}function G(t){this.valuesEnd[t]&&!e[t]&&(e[t]=(e,n,r,s)=>{e.style[t]=W(n,r,s)})}const J={};["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"].forEach((t=>{J[t]=G}));const tt=["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],et={};tt.forEach((t=>{et[t]="#000"}));const nt={};tt.forEach((t=>{nt[t]=G}));const rt={component:"colorProperties",category:"colors",properties:tt,defaultValues:et,Interpolate:{numbers:X,colors:W},functions:{prepareStart:function(t){return I(this.element,t)||g[t]},prepareProperty:function(t,e){return K(e)},onStart:nt},Util:{trueColor:K}},st={},it=["fill","stroke","stop-color"];function at(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}const ot={prepareStart:function(t,e){const n={};return Object.keys(e).forEach((t=>{const e=at(t).replace(/_+[a-z]+/,""),r=this.element.getAttribute(e);n[e]=it.includes(e)?r||"rgba(0,0,0,0)":r||(/opacity/i.test(t)?1:0)})),n},prepareProperty:function(t,e){const n={};return Object.keys(e).forEach((r=>{const s=at(r),i=/(%|[a-z]+)$/,o=this.element.getAttribute(s.replace(/_+[a-z]+/,""));if(it.includes(s))a.htmlAttributes[s]=e=>{this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in st)&&(st[e]=(t,e,n,r,s)=>{t.setAttribute(e,W(n,r,s))})},n[s]=K(e[r])||g.htmlAttributes[r];else if(null!==o&&i.test(o)){const i=U(o).u||U(e[r]).u,l=/%/.test(i)?"_percent":`_${i}`;a.htmlAttributes[s+l]=e=>{this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in st)&&(st[e]=(t,e,n,r,s)=>{const i=e.replace(l,"");t.setAttribute(i,(1e3*X(n.v,r.v,s)>>0)/1e3+r.u)})},n[s+l]=U(e[r])}else i.test(e[r])&&null!==o&&(null===o||i.test(o))||(a.htmlAttributes[s]=e=>{this.valuesEnd[t]&&this.valuesEnd[t][e]&&!(e in st)&&(st[e]=(t,e,n,r,s)=>{t.setAttribute(e,(1e3*X(n,r,s)>>0)/1e3)})},n[s]=parseFloat(e[r]))})),n},onStart:{attr(t){!e[t]&&this.valuesEnd[t]&&(e[t]=(t,n,r,s)=>{Object.keys(r).forEach((i=>{e.attributes[i](t,i,n[i],r[i],s)}))})},attributes(t){!e[t]&&this.valuesEnd.attr&&(e[t]=st)}}},lt={component:"htmlAttributes",property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:X,colors:W},functions:ot,Util:{replaceUppercase:at,trueColor:K,trueDimension:U}};const ct={prepareStart:function(t){return I(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=(e,n,r,s)=>{e.style[t]=(1e3*X(n,r,s)>>0)/1e3})}},ut={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:X},functions:ct},ht=String("abcdefghijklmnopqrstuvwxyz").split(""),pt=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ft=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),dt=String("0123456789").split(""),gt=ht.concat(pt,dt),yt=gt.concat(ft),mt={alpha:ht,upper:pt,symbols:ft,numeric:dt,alphanumeric:gt,all:yt},bt={text(t){if(!e[t]&&this.valuesEnd[t]){const n=this._textChars;let r=mt[y.textChars];n in mt?r=mt[n]:n&&n.length&&(r=n),e[t]=(t,e,n,s)=>{let i="",a="";const o=""===n?" ":n,l=e.substring(0),c=n.substring(0),u=r[Math.random()*r.length>>0];" "===e?(a=c.substring(Math.min(s*c.length,c.length)>>0,0),t.innerHTML=s<1?a+u:o):" "===n?(i=l.substring(0,Math.min((1-s)*l.length,l.length)>>0),t.innerHTML=s<1?i+u:o):(i=l.substring(l.length,Math.min(s*l.length,l.length)>>0),a=c.substring(0,Math.min(s*c.length,c.length)>>0),t.innerHTML=s<1?a+u+i:o)}}},number(t){t in this.valuesEnd&&!e[t]&&(e[t]=(t,e,n,r)=>{t.innerHTML=X(e,n,r)>>0})}};function vt(t,e){let n,r;if("string"==typeof t)return r=document.createElement("SPAN"),r.innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){const r=t.innerHTML;n=document.createElement("SPAN"),n.className=e,n.innerHTML=r,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&([n]=t.children);return n}function xt(t,e){let n=[];const r=t.children.length;if(r){const s=[];let i,a=t.innerHTML;for(let n,o,l,c=0;c>0)/1e3}${n})`}function wt(t,e,n,r){const s=[];for(let i=0;i<3;i+=1)s[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return`translate3d(${s.join(",")})`}function kt(t,e,n,r){let s="";return s+=t[0]||e[0]?`rotateX(${(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3}${n})`:"",s+=t[1]||e[1]?`rotateY(${(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3}${n})`:"",s+=t[2]||e[2]?`rotateZ(${(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3}${n})`:"",s}function _t(t,e,n){return`scale(${(1e3*(t+(e-t)*n)>>0)/1e3})`}function Ct(t,e,n,r){const s=[];return s[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,s[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0",`skew(${s.join(",")})`}function Ot(t,e){return parseFloat(t)/100*e}function Mt(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Tt(t){const e=t.getAttribute("points").split(" ");let n=0;if(e.length>1){const r=t=>{const e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},s=(t,e)=>void 0!==t&&void 0!==e?Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2):0;if(e.length>2)for(let t=0;t["s","e","l"].includes(t))))return e;if("string"==typeof e){const t=e.split(/,|\s/);r=/%/.test(t[0])?Ot(t[0].trim(),n):parseFloat(t[0]),s=/%/.test(t[1])?Ot(t[1].trim(),n):parseFloat(t[1])}else void 0===e&&(a=parseFloat(I(t,"stroke-dashoffset")),i=I(t,"stroke-dasharray").split(","),r=0-a,s=parseFloat(i[0])+r||n);return{s:r,e:s,l:n}}const $t={prepareStart:function(){return Pt(this.element)},prepareProperty:function(t,e){return Pt(this.element,e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=(t,e,n,r)=>{const s=(100*e.l>>0)/100,i=0-(100*X(e.s,n.s,r)>>0)/100,a=(100*X(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=`${i}px`,t.style.strokeDasharray=`${(100*(a<1?0:a)>>0)/100}px, ${s}px`})}};function Lt(t,e,n){if(t[n].length>7){t[n].shift();const r=t[n];let s=n;for(;r.length;)e[n]="A",t.splice(s+=1,0,["C",...r.splice(0,6)]);t.splice(n,1)}}const Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){let e=t.pathValue[t.segmentStart],n=e.toLowerCase(),{data:r}=t;for("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L");r.length>=Nt[n]&&(t.segments.push([e,...r.splice(0,Nt[n])]),Nt[n]););}function Ht(t){const{index:e}=t,n=t.pathValue.charCodeAt(e);return 48===n?(t.param=0,void(t.index+=1)):49===n?(t.param=1,void(t.index+=1)):void(t.err=`Invalid path value: invalid Arc flag "${n}", expecting 0 or 1 at index ${e}`)}function Vt(t){return t>=48&&t<=57}function Dt(t){const{max:e,pathValue:n,index:r}=t;let s,i=r,a=!1,o=!1,l=!1,c=!1;if(i>=e)t.err=`Invalid path value at ${i}: missing param ${n[i]}`;else if(s=n.charCodeAt(i),43!==s&&45!==s||(i+=1,s=i=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(r)>=0);)t.index+=1;var r}function Qt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Ut(t){const{max:e,pathValue:n,index:r}=t,s=n.charCodeAt(r),i=Nt[n[r].toLowerCase()];if(t.segmentStart=r,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:return!0;default:return!1}}(s))if(t.index+=1,Ft(t),t.data=[],i){for(;;){for(let r=i;r>0;r-=1){if(97!=(32|s)||3!==r&&4!==r?Dt(t):Ht(t),t.err.length)return;t.data.push(t.param),Ft(t),t.index=t.max)break;if(!Qt(n.charCodeAt(t.index)))break}qt(t)}else qt(t);else t.err=`Invalid path value: ${n[r]} not a path command`}function Xt(t){return t.map((t=>Array.isArray(t)?[...t]:t))}function Bt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function Zt(t){return Array.isArray(t)&&t.every((t=>{const e=t[0].toLowerCase();return Nt[e]===t.length-1&&"achlmqstvz".includes(e)}))}function Rt(t){if(Array.isArray(t)&&Zt(t))return Xt(t);const e=new Bt(t);for(Ft(e);e.indext[0]===t[0].toUpperCase()))}function zt(t){if(Array.isArray(t)&&Yt(t))return Xt(t);const e=Rt(t);let n=0,r=0,s=0,i=0;return e.map((t=>{const e=t.slice(1).map(Number),[a]=t,o=a.toUpperCase();if("M"===a)return[n,r]=e,s=n,i=r,["M",n,r];let l=[];if(a!==o)switch(o){case"A":l=[o,e[0],e[1],e[2],e[3],e[4],e[5]+n,e[6]+r];break;case"V":l=[o,e[0]+r];break;case"H":l=[o,e[0]+n];break;default:l=[o,...e.map(((t,e)=>t+(e%2?r:n)))]}else l=[o,...e];const c=l.length;switch(o){case"Z":n=s,r=i;break;case"H":[,n]=l;break;case"V":[,r]=l;break;default:n=l[c-2],r=l[c-1],"M"===o&&(s=n,i=r)}return l}))}function Kt(t,e,n){const[r]=t,{x1:s,y1:i,x2:a,y2:o}=e,l=t.slice(1).map(Number);let c=t;if("TQ".includes(r)||(e.qx=null,e.qy=null),"H"===r)c=["L",t[1],i];else if("V"===r)c=["L",s,t[1]];else if("S"===r){const{x1:t,y1:r}=function(t,e,n,r,s){return"CS".includes(s)?{x1:2*t-n,y1:2*e-r}:{x1:t,y1:e}}(s,i,a,o,n);e.x1=t,e.y1=r,c=["C",t,r,...l]}else if("T"===r){const{qx:t,qy:r}=function(t,e,n,r,s){return"QT".includes(s)?{qx:2*t-n,qy:2*e-r}:{qx:t,qy:e}}(s,i,e.qx,e.qy,n);e.qx=t,e.qy=r,c=["Q",t,r,...l]}else if("Q"===r){const[t,n]=l;e.qx=t,e.qy=n}return c}const Wt={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null};function Gt(t){if(function(t){return Yt(t)&&t.every((t=>"ACLMQZ".includes(t[0])))}(t))return Xt(t);const e=zt(t),n={...Wt},r=[],s=e.length;let i="",a="";for(let t=0;t1&&(n=Math.sqrt(n),p*=n,f*=n);const r=p*p,s=f*f,o=(i===a?-1:1)*Math.sqrt(Math.abs((r*s-r*e*e-s*t*t)/(r*e*e+s*t*t)));E=o*p*e/f+(u+d)/2,w=o*-f*t/p+(h+g)/2,v=(Math.asin((h-w)/f)*10**9>>0)/10**9,x=(Math.asin((g-w)/f)*10**9>>0)/10**9,v=ux&&(v-=2*Math.PI),!a&&x>v&&(x-=2*Math.PI)}let _=x-v;if(Math.abs(_)>y){const t=x,e=d,n=g;x=v+y*(a&&x>v?1:-1),d=E+p*Math.cos(x),g=w+f*Math.sin(x),k=te(d,g,p,f,s,0,a,e,n,[x,t,E,w])}_=x-v;const C=Math.cos(v),O=Math.sin(v),M=Math.cos(x),T=Math.sin(x),I=Math.tan(_/4),S=4/3*p*I,A=4/3*f*I,j=[u,h],P=[u+S*O,h-A*C],$=[d+S*T,g-A*M],L=[d,g];if(P[0]=2*j[0]-P[0],P[1]=2*j[1]-P[1],c)return[...P,...$,...L,...k];k=[...P,...$,...L,...k];const N=[];for(let t=0,e=k.length;t+t)),[s,i]=r;let a;const{x1:o,y1:l,x:c,y:u}=e;switch("TQ".includes(n)||(e.qx=null,e.qy=null),n){case"M":return e.x=s,e.y=i,t;case"A":return a=[o,l,...r],["C",...te(...a)];case"Q":return e.qx=s,e.qy=i,a=[o,l,...r],["C",...ee(...a)];case"L":return["C",...se(o,l,s,i)];case"Z":return["C",...se(o,l,c,u)]}return t}function ae(t){if(function(t){return Zt(t)&&t.every((t=>"MC".includes(t[0])))}(t))return Xt(t);const e=function(t){const e=Rt(t),n=Gt(e),{length:r}=e,s="Z"===n.slice(-1)[0][0],i=s?r-2:r-1,[a,o]=n[0].slice(1),[l,c]=n[i].slice(-2);return s&&a===l&&o===c?e.slice(0,-1):e}(Gt(t)),n={...Wt},r=[];let s="",i=e.length;for(let t=0;t=1?e:n;const r=n>=1?10**n:1;return t.map((t=>{const e=t.slice(1).map(Number).map((t=>t%1==0?t:Math.round(t*r)/r));return[t[0],...e]}))}function ce(t,e){return le(t,e).map((t=>t[0]+t.slice(1).join(" "))).join("")}function ue(t,e,n,r,s){return s*(s*(-3*t+9*e-9*n+3*r)+6*t-12*e+6*n)-3*t+3*e}function he(t,e,n,r,s,i,a,o,l){let c=l;(null===l||Number.isNaN(+l))&&(c=1),c>1&&(c=1),c<0&&(c=0);const u=c/2;let h=0,p=0,f=0,d=0;const g=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach(((l,c)=>{h=u*l+u,p=ue(t,n,s,a,h),f=ue(e,r,i,o,h),d+=g[c]*Math.sqrt(p*p+f*f)})),u*d}function pe(t){let e=0;return ae(t).forEach(((t,n,r)=>{const s="M"!==t[0]?[...r[n-1].slice(-2),...t.slice(1)]:[];e+="M"===t[0]?0:he(...s)})),e}function fe(t,e){let n,r,s,i=0;return ae(t).map(((t,a,o)=>{if(r=a?[...o[a-1].slice(-2),...t.slice(1)]:t.slice(1),n=a?he(...r):0,i+=n,0===a)s={x:r[0],y:r[1]};else if(i>e&&e>i-n){const t=[...r,1-(i-e)/n];s=ne(...t)}else s=null;return s})).filter((t=>t)).slice(-1)[0]}function de(t){return function(t){let e=0,n=0,r=0;return ae(t).map((t=>"M"===t[0]?([,e,n]=t,0):(r=function(t,e,n,r,s,i,a,o){return 3*((o-e)*(n+s)-(a-t)*(r+i)+r*(t-s)-n*(e-i)+o*(s+t/3)-a*(i+e/3))/20}(e,n,...t.slice(1)),[e,n]=t.slice(-2).map(Number),r))).reduce(((t,e)=>t+e),0)}(ae(t))>=0}function ge(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ye(t,e,n,r){const s=[];for(let i=0;i>0)/1e3)}return s}function me(t,e){var n;const r=ae((n=ce(t),ce(zt(n),0).replace(/(m|M)/g,"|$1").split("|").map((t=>t.trim())).filter((t=>t)))[0]),s=pe(r),i=[];let a,o=3;e&&!Number.isNaN(e)&&+e>0&&(o=Math.max(o,Math.ceil(s/e)));for(let t=0;tr?e+ge(t[r-1],n):0),0)}(t)/e;let s,i,a,o=0,l=0,c=r/2;for(;t.lengthe;)r=re(n,r,.5),t.splice(s+1,0,r)}function we(t){return Array.isArray(t)&&t.every((t=>Array.isArray(t)&&2===t.length&&!Number.isNaN(t[0])&&!Number.isNaN(t[1])))}function ke(t,e){let n,r;if("string"==typeof t){const s=be(t,e);({polygon:r,skipBisect:n}=s)}else if(!Array.isArray(t))throw Error(`Invalid path value: ${t}`);const s=[...r];if(!we(s))throw Error(`Invalid path value: ${s}`);return s.length>1&&ge(s[0],s[s.length-1])<1e-9&&s.pop(),!n&&e&&!Number.isNaN(e)&&+e>0&&Ee(s,e),s}function _e(t,e,n){const r=n||y.morphPrecision,s=ke(t,r),i=ke(e,r),a=s.length-i.length;return xe(s,a<0?-1*a:0),xe(i,a>0?a:0),ve(s,i),[le(s),le(i)]}const Ce={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){const n={},r=new RegExp("\\n","ig");let s=null;return e instanceof SVGPathElement?s=e:/^\.|^#/.test(e)&&(s=L(e)),"object"==typeof e&&e.polygon?e:(s&&["path","glyph"].includes(s.tagName)?n.original=s.getAttribute("d").replace(r,""):s||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=(t,e,n,r)=>{const s=e.polygon,i=n.polygon,a=i.length;t.setAttribute("d",1===r?n.original:`M${ye(s,i,a,r).join("L")}Z`)})},crossCheck:function(t){if(this.valuesEnd[t]){const e=this.valuesStart[t].polygon,n=this.valuesEnd[t].polygon;if(!e||!n||e&&n&&e.length!==n.length){const e=this.valuesStart[t].original,n=this.valuesEnd[t].original,r=this._morphPrecision?parseInt(this._morphPrecision,10):y.morphPrecision,[s,i]=_e(e,n,r);this.valuesStart[t].polygon=s,this.valuesEnd[t].polygon=i}}}},Oe={EssentialBoxModel:z,ColorsProperties:rt,HTMLAttributes:lt,OpacityProperty:ut,TextWriteProp:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:X},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:bt},Util:{charSet:mt,createTextTweens:function(t,e,n){if(t.playing)return!1;const r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);const s=P.tween,i=function(t,e){const n=xt(t,"text-part"),r=xt(vt(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((t=>(t.className+=" oldText",t.outerHTML))).join(""),t.innerHTML+=r.map((t=>(t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")))).join(""),[n,r]}(t,e),a=i[0],o=i[1],l=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText"));let u=[],h=0;return u=u.concat(l.map(((t,e)=>(r.duration="auto"===r.duration?75*a[e].innerHTML.length:r.duration,r.delay=h,r.onComplete=null,h+=r.duration,new s(t,{text:t.innerHTML},{text:""},r))))),u=u.concat(c.map(((n,i)=>(r.duration="auto"===r.duration?75*o[i].innerHTML.length:r.duration,r.delay=h,r.onComplete=i===o.length-1?function(){t.innerHTML=e,t.playing=!1}:null,h+=r.duration,new s(n,{text:""},{text:o[i].innerHTML},r))))),u.start=function(){t.playing||(u.forEach((t=>t.start())),t.playing=!0)},u}}},TransformFunctions:{component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t){const e=T(this.element);return e[t]?e[t]:g[t]},prepareProperty:function(t,e){const n=["X","Y","Z"],r={},s=[],i=[],a=[],o=["translate3d","translate","rotate3d","skew"];return Object.keys(e).forEach((t=>{const l="object"==typeof e[t]&&e[t].length?e[t].map((t=>parseInt(t,10))):parseInt(e[t],10);if(o.includes(t)){const e="translate"===t||"rotate"===t?`${t}3d`:t;r[e]="skew"===t?l.length?[l[0]||0,l[1]||0]:[l||0,0]:"translate"===t?l.length?[l[0]||0,l[1]||0,l[2]||0]:[l||0,0,0]:[l[0]||0,l[1]||0,l[2]||0]}else if(/[XYZ]/.test(t)){const o=t.replace(/[XYZ]/,""),l="skew"===o?o:`${o}3d`,c="skew"===o?2:3;let u=[];"translate"===o?u=s:"rotate"===o?u=i:"skew"===o&&(u=a);for(let t=0;t{e.style[t]=(n.perspective||r.perspective?Et(n.perspective,r.perspective,"px",s):"")+(n.translate3d?wt(n.translate3d,r.translate3d,"px",s):"")+(n.rotate3d?kt(n.rotate3d,r.rotate3d,"deg",s):"")+(n.skew?Ct(n.skew,r.skew,"deg",s):"")+(n.scale||r.scale?_t(n.scale,r.scale,s):"")})},crossCheck:function(t){this.valuesEnd[t]&&this.valuesEnd[t]&&this.valuesEnd[t].perspective&&!this.valuesStart[t].perspective&&(this.valuesStart[t].perspective=this.valuesEnd[t].perspective)}},Interpolate:{perspective:Et,translate3d:wt,rotate3d:kt,translate:function(t,e,n,r){const s=[];return s[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,s[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0",`translate(${s.join(",")})`},rotate:function(t,e,n,r){return`rotate(${(1e3*(t+(e-t)*r)>>0)/1e3}${n})`},scale:_t,skew:Ct}},SVGDraw:{component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:X},functions:$t,Util:{getRectLength:Mt,getPolyLength:Tt,getLineLength:It,getCircleLength:St,getEllipseLength:At,getTotalLength:jt,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:Pt,percent:Ot}},SVGMorph:{component:"svgMorph",property:"path",defaultValue:[],Interpolate:ye,defaultOptions:{morphPrecision:10},functions:Ce,Util:{addPoints:xe,bisect:Ee,getPolygon:ke,validPolygon:we,getInterpolationPoints:_e,pathStringToPolygon:be,distanceSquareRoot:ge,midPoint:re,approximatePolygon:me,rotatePolygon:ve,pathToString:ce,pathToCurve:ae,getPathLength:pe,getPointAtLength:fe,getDrawDirection:de,roundPath:le}}};Object.keys(Oe).forEach((t=>{const e=Oe[t];Oe[t]=new Q(e)}));const Me={Animation:Q,Components:Oe,Tween:H,fromTo:function(t,e,n,r){const s=r||{};return new F(L(t),e,n,s)},to:function(t,e,n){const r=n||{};return r.resetStart=e,new D(L(t),e,e,r)},TweenCollection:V,allFromTo:function(t,e,n,r){const s=r||{};return new V(L(t,!0),e,n,s)},allTo:function(t,e,n){const r=n||{};return r.resetStart=e,new V(L(t,!0),e,e,r)},Objects:w,Util:k,Easing:$,CubicBezier:t,Render:f,Interpolate:i,Process:j,Internals:M,Selector:L,Version:"2.2.0alpha2"};export{Me as default}; diff --git a/dist/kute.js b/dist/kute.js index 72abea0..5534bd1 100644 --- a/dist/kute.js +++ b/dist/kute.js @@ -1,5 +1,5 @@ /*! -* KUTE.js Standard v2.1.3 (http://thednp.github.io/kute.js) +* KUTE.js Standard v2.2.0alpha2 (http://thednp.github.io/kute.js) * Copyright 2015-2021 © thednp * Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE) */ @@ -9,19 +9,36 @@ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KUTE = factory()); })(this, (function () { 'use strict'; + /** + * Creates cubic-bezier easing functions. + * + * @class + */ var CubicBezier = function CubicBezier(p1x, p1y, p2x, p2y, functionName) { var this$1$1 = this; // pre-calculate the polynomial coefficients // First and last control points are implied to be (0,0) and (1.0, 1.0) + + /** @type {number} */ this.cx = 3.0 * p1x; + + /** @type {number} */ this.bx = 3.0 * (p2x - p1x) - this.cx; + + /** @type {number} */ this.ax = 1.0 - this.cx - this.bx; - + + /** @type {number} */ this.cy = 3.0 * p1y; + + /** @type {number} */ this.by = 3.0 * (p2y - p1y) - this.cy; + + /** @type {number} */ this.ay = 1.0 - this.cy - this.by; - + + /** @type {(t: number) => number} */ var BezierEasing = function (t) { return this$1$1.sampleCurveY(this$1$1.solveCurveX(t)); }; // this function needs a name @@ -31,18 +48,34 @@ return BezierEasing; }; + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled X value + */ CubicBezier.prototype.sampleCurveX = function sampleCurveX (t) { return ((this.ax * t + this.bx) * t + this.cx) * t; }; + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled Y value + */ CubicBezier.prototype.sampleCurveY = function sampleCurveY (t) { return ((this.ay * t + this.by) * t + this.cy) * t; }; + /** + * @param {number} t - progress [0-1] + * @return {number} - sampled curve derivative X value + */ CubicBezier.prototype.sampleCurveDerivativeX = function sampleCurveDerivativeX (t) { return (3.0 * this.ax * t + 2.0 * this.bx) * t + this.cx; }; + /** + * @param {number} x - progress [0-1] + * @return {number} - solved curve X value + */ CubicBezier.prototype.solveCurveX = function solveCurveX (x) { var t0; var t1; @@ -82,21 +115,24 @@ return t2; }; - var KUTE$1 = {}; + /** + * The KUTE.js Execution Context + */ + var KEC = {}; var Tweens = []; - var globalObject; + var gl0bal; - if (typeof global !== 'undefined') { globalObject = global; } - else if (typeof window !== 'undefined') { globalObject = window.self; } - else { globalObject = {}; } + if (typeof global !== 'undefined') { gl0bal = global; } + else if (typeof window !== 'undefined') { gl0bal = window.self; } + else { gl0bal = {}; } - var globalObject$1 = globalObject; + var globalObject = gl0bal; // KUTE.js INTERPOLATE FUNCTIONS // ============================= - var Interpolate = {}; + var interpolate = {}; // schedule property specific function on animation start // link property update function to KUTE.js execution context @@ -104,13 +140,13 @@ // Include a performance.now polyfill. // source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts - var now; + var performanceNow; // In node.js, use process.hrtime. // eslint-disable-next-line // @ts-ignore if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) { - now = function () { + performanceNow = function () { // eslint-disable-next-line // @ts-ignore var time = process.hrtime(); @@ -122,24 +158,27 @@ // In a browser, use self.performance.now if it is available. // This must be bound, because directly assigning this function // leads to an invocation exception in Chrome. - now = self.performance.now.bind(self.performance); + performanceNow = self.performance.now.bind(self.performance); } else if (typeof Date !== 'undefined' && Date.now) { // Use Date.now if it is available. - now = Date.now; + performanceNow = Date.now; } else { // Otherwise, use 'new Date().getTime()'. - now = function () { return new Date().getTime(); }; + performanceNow = function () { return new Date().getTime(); }; } - var now$1 = now; + var now = performanceNow; var Time = {}; - Time.now = now$1; - // const that = window.self || window || {}; - // Time.now = that.performance.now.bind(that.performance); + Time.now = now; + // eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy var Tick = 0; + /** + * + * @param {number | Date} time + */ var Ticker = function (time) { var i = 0; while (i < Tweens.length) { @@ -160,42 +199,48 @@ Tick = null; Object.keys(onStart).forEach(function (obj) { if (typeof (onStart[obj]) === 'function') { - if (KUTE$1[obj]) { delete KUTE$1[obj]; } + if (KEC[obj]) { delete KEC[obj]; } } else { Object.keys(onStart[obj]).forEach(function (prop) { - if (KUTE$1[prop]) { delete KUTE$1[prop]; } + if (KEC[prop]) { delete KEC[prop]; } }); } }); - Object.keys(Interpolate).forEach(function (i) { - if (KUTE$1[i]) { delete KUTE$1[i]; } + Object.keys(interpolate).forEach(function (i) { + if (KEC[i]) { delete KEC[i]; } }); } }, 64); } - // KUTE.js render update functions - // =============================== + // render update functions + // ======================= var Render = { Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time, }; Object.keys(Render).forEach(function (blob) { - if (!KUTE$1[blob]) { - KUTE$1[blob] = blob === 'Time' ? Time.now : Render[blob]; + if (!KEC[blob]) { + KEC[blob] = blob === 'Time' ? Time.now : Render[blob]; } }); - globalObject$1._KUTE = KUTE$1; + globalObject._KUTE = KEC; + // all supported properties var supportedProperties = {}; var defaultValues = {}; - var defaultOptions = { + var defaultOptions$1 = { duration: 700, delay: 0, easing: 'linear', + repeat: 0, + repeatDelay: 0, + yoyo: false, + resetStart: false, + offset: 0, }; // used in preparePropertiesObject @@ -219,7 +264,7 @@ var Objects = { supportedProperties: supportedProperties, defaultValues: defaultValues, - defaultOptions: defaultOptions, + defaultOptions: defaultOptions$1, prepareProperty: prepareProperty, prepareStart: prepareStart, crossCheck: crossCheck, @@ -231,17 +276,39 @@ // util - a general object for utils like rgbToHex, processEasing var Util = {}; - function add (tw) { return Tweens.push(tw); } + /** + * KUTE.add(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + var add = function (tw) { return Tweens.push(tw); }; - function remove (tw) { + /** + * KUTE.remove(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + var remove = function (tw) { var i = Tweens.indexOf(tw); if (i !== -1) { Tweens.splice(i, 1); } - } + }; - function getAll () { return Tweens; } + /** + * KUTE.add(Tween) + * + * @return {KUTE.Tween[]} tw a new tween to add + */ + var getAll = function () { return Tweens; }; - function removeAll () { Tweens.length = 0; } + /** + * KUTE.removeAll() + */ + var removeAll = function () { Tweens.length = 0; }; + /** + * linkInterpolation + * @this {KUTE.Tween} + */ function linkInterpolation() { var this$1$1 = this; // DON'T change @@ -253,18 +320,18 @@ if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius && Object.keys(this$1$1.valuesEnd).some(function (i) { return (componentProps && componentProps.includes(i)) || (i === 'attr' && Object.keys(this$1$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); })); })) { - if (!KUTE$1[fnObj]) { KUTE$1[fnObj] = componentLink[fnObj]; } + if (!KEC[fnObj]) { KEC[fnObj] = componentLink[fnObj]; } } else { Object.keys(this$1$1.valuesEnd).forEach(function (prop) { var propObject = this$1$1.valuesEnd[prop]; if (propObject instanceof Object) { Object.keys(propObject).forEach(function (i) { if (typeof (componentLink[i]) === 'function') { // transformCSS3 - if (!KUTE$1[i]) { KUTE$1[i] = componentLink[i]; } + if (!KEC[i]) { KEC[i] = componentLink[i]; } } else { Object.keys(componentLink[fnObj]).forEach(function (j) { if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix - if (!KUTE$1[j]) { KUTE$1[j] = componentLink[i][j]; } + if (!KEC[j]) { KEC[j] = componentLink[i][j]; } } }); } @@ -276,7 +343,7 @@ }); } - var Internals = { + var internals = { add: add, remove: remove, getAll: getAll, @@ -285,7 +352,14 @@ linkInterpolation: linkInterpolation, }; - // getInlineStyle - get transform style for element from cssText for .to() method + /** + * getInlineStyle + * Returns the transform style for element from + * cssText. Used by for the `.to()` static method. + * + * @param {Element} el target element + * @returns {object} + */ function getInlineStyle(el) { // if the scroll applies to `window` it returns as it has no styling if (!el.style) { return false; } @@ -313,14 +387,23 @@ return transformObject; } - // getStyleForProperty - get computed style property for element for .to() method + /** + * getStyleForProperty + * + * Returns the computed style property for element for .to() method. + * Used by for the `.to()` static method. + * + * @param {Element} elem + * @param {string} propertyName + * @returns {string} + */ function getStyleForProperty(elem, propertyName) { + var result = defaultValues[propertyName]; var styleAttribute = elem.style; var computedStyle = getComputedStyle(elem) || elem.currentStyle; var styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName]) ? styleAttribute[propertyName] : computedStyle[propertyName]; - var result = defaultValues[propertyName]; if (propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute)) { result = styleValue; @@ -329,7 +412,14 @@ return result; } - // prepareObject - returns all processed valuesStart / valuesEnd + /** + * prepareObject + * + * Returns all processed valuesStart / valuesEnd. + * + * @param {Element} obj the values start/end object + * @param {string} fn toggles between the two + */ function prepareObject(obj, fn) { var this$1$1 = this; // this, props object, type: start/end @@ -374,7 +464,14 @@ }); } - // getStartValues - returns the startValue for to() method + /** + * getStartValues + * + * Returns the start values for to() method. + * Used by for the `.to()` static method. + * + * @this {KUTE.Tween} the tween instance + */ function getStartValues() { var this$1$1 = this; @@ -420,6 +517,9 @@ }; var connect = {}; + /** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */ + connect.tween = null; + connect.processEasing = null; var Easing = { linear: new CubicBezier(0, 0, 1, 1, 'linear'), @@ -456,6 +556,12 @@ easingBackInOut: new CubicBezier(0.68, -0.55, 0.265, 1.55, 'easingBackInOut'), }; + /** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor name + * @returns {KUTE.easingFunction} a valid easingfunction + */ function processBezierEasing(fn) { if (typeof fn === 'function') { return fn; @@ -466,14 +572,22 @@ return new CubicBezier(bz[0] * 1, bz[1] * 1, bz[2] * 1, bz[3] * 1); // bezier easing } // if (/elastic|bounce/i.test(fn)) { - // throw TypeError(`KUTE.js - CubicBezier doesn't support ${fn} easing.`); + // throw TypeError(`KUTE - CubicBezier doesn't support ${fn} easing.`); // } return Easing.linear; } connect.processEasing = processBezierEasing; - // a public selector utility + /** + * selector + * + * A selector utility for KUTE.js. + * + * @param {KUTE.selectorType} el target(s) or string selector + * @param {boolean | number} multi when true returns an array/collection of elements + * @returns {Element | Element[] | null} + */ function selector(el, multi) { try { var requestedElem; @@ -510,21 +624,28 @@ linkInterpolation.call(this); } - // single Tween object construct - // TweenBase is meant to be use for pre-processed values + /** + * The `TweenBase` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * `TweenBase` is meant to be used with pre-processed values. + */ var TweenBase = function TweenBase(targetElement, startObject, endObject, opsObject) { var this$1$1 = this; // element animation is applied to this.element = targetElement; + /** @type {boolean} */ this.playing = false; - + /** @type {number?} */ this._startTime = null; + /** @type {boolean} */ this._startFired = false; - this.valuesEnd = endObject; // valuesEnd - this.valuesStart = startObject; // valuesStart + // type is set via KUTE.tweenProps + this.valuesEnd = endObject; + this.valuesStart = startObject; // OPTIONS var options = opsObject || {}; @@ -532,9 +653,12 @@ // used by to() method and expects object : {} / false this._resetStart = options.resetStart || 0; // you can only set a core easing function as default + /** @type {KUTE.easingOption} */ this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing); - this._duration = options.duration || defaultOptions.duration; // duration option | default - this._delay = options.delay || defaultOptions.delay; // delay option | default + /** @type {number} */ + this._duration = options.duration || defaultOptions$1.duration; // duration option | default + /** @type {number} */ + this._delay = options.delay || defaultOptions$1.delay; // delay option | default // set other options Object.keys(options).forEach(function (op) { @@ -552,22 +676,24 @@ var easingFnName = this._easing.name; if (!onStart[easingFnName]) { onStart[easingFnName] = function easingFn(prop) { - if (!KUTE$1[prop] && prop === this._easing.name) { KUTE$1[prop] = this._easing; } + if (!KEC[prop] && prop === this._easing.name) { KEC[prop] = this._easing; } }; } return this; }; - // tween prototype - // queue tween object to main frame update - // move functions that use the ticker outside the prototype to be in the same scope with it + /** + * Starts tweening + * @param {number?} time the tween start time + * @returns {TweenBase} this instance + */ TweenBase.prototype.start = function start (time) { // now it's a good time to start add(this); this.playing = true; - this._startTime = typeof time !== 'undefined' ? time : KUTE$1.Time(); + this._startTime = typeof time !== 'undefined' ? time : KEC.Time(); this._startTime += this._delay; if (!this._startFired) { @@ -584,6 +710,10 @@ return this; }; + /** + * Stops tweening + * @returns {TweenBase} this instance + */ TweenBase.prototype.stop = function stop () { if (this.playing) { remove(this); @@ -597,6 +727,9 @@ return this; }; + /** + * Trigger internal completion callbacks. + */ TweenBase.prototype.close = function close () { var this$1$1 = this; @@ -611,20 +744,33 @@ stop.call(this); }; + /** + * Schedule another tween instance to start once this one completes. + * @param {KUTE.chainOption} args the tween animation start time + * @returns {TweenBase} this instance + */ TweenBase.prototype.chain = function chain (args) { this._chain = []; this._chain = args.length ? args : this._chain.concat(args); return this; }; + /** + * Stop tweening the chained tween instances. + */ TweenBase.prototype.stopChainedTweens = function stopChainedTweens () { if (this._chain && this._chain.length) { this._chain.forEach(function (tw) { return tw.stop(); }); } }; + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ TweenBase.prototype.update = function update (time) { var this$1$1 = this; - var T = time !== undefined ? time : KUTE$1.Time(); + var T = time !== undefined ? time : KEC.Time(); var elapsed; @@ -638,7 +784,7 @@ // render the update Object.keys(this.valuesEnd).forEach(function (tweenProp) { - KUTE$1[tweenProp](this$1$1.element, + KEC[tweenProp](this$1$1.element, this$1$1.valuesStart[tweenProp], this$1$1.valuesEnd[tweenProp], progress); @@ -675,16 +821,13 @@ // Update Tween Interface connect.tween = TweenBase; - defaultOptions.repeat = 0; - defaultOptions.repeatDelay = 0; - defaultOptions.yoyo = false; - defaultOptions.resetStart = false; - - // no need to set defaults for callbacks - // defaultOptions.onPause = undefined - // defaultOptions.onResume = undefined - - // the constructor that supports to, allTo methods + /** + * The `KUTE.Tween()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor adds additional functionality and is the default + * Tween object constructor in KUTE.js. + */ var Tween = /*@__PURE__*/(function (TweenBase) { function Tween() { var this$1$1 = this; @@ -697,8 +840,12 @@ this.valuesStart = {}; this.valuesEnd = {}; - var startObject = args[1]; - var endObject = args[2]; + // const startObject = args[1]; + // const endObject = args[2]; + var ref = args.slice(1); + var startObject = ref[0]; + var endObject = ref[1]; + var options = ref[2]; // set valuesEnd prepareObject.call(this, endObject, 'end'); @@ -720,20 +867,26 @@ } // set paused state + /** @type {boolean} */ this.paused = false; + /** @type {number?} */ this._pauseTime = null; // additional properties and options - var options = args[3]; - - this._repeat = options.repeat || defaultOptions.repeat; - this._repeatDelay = options.repeatDelay || defaultOptions.repeatDelay; + /** @type {number?} */ + this._repeat = options.repeat || defaultOptions$1.repeat; + /** @type {number?} */ + this._repeatDelay = options.repeatDelay || defaultOptions$1.repeatDelay; // we cache the number of repeats to be able to put it back after all cycles finish + /** @type {number?} */ this._repeatOption = this._repeat; // yoyo needs at least repeat: 1 + /** @type {KUTE.tweenProps} */ this.valuesRepeat = {}; // valuesRepeat - this._yoyo = options.yoyo || defaultOptions.yoyo; + /** @type {boolean} */ + this._yoyo = options.yoyo || defaultOptions$1.yoyo; + /** @type {boolean} */ this._reversed = false; // don't load extra callbacks @@ -749,7 +902,11 @@ Tween.prototype = Object.create( TweenBase && TweenBase.prototype ); Tween.prototype.constructor = Tween; - // additions to start method + /** + * Starts tweening, extended method + * @param {number?} time the tween start time + * @returns {Tween} this instance + */ Tween.prototype.start = function start (time) { var this$1$1 = this; @@ -780,7 +937,10 @@ return this; }; - // updates to super methods + /** + * Stops tweening, extended method + * @returns {Tween} this instance + */ Tween.prototype.stop = function stop () { TweenBase.prototype.stop.call(this); if (!this.paused && this.playing) { @@ -790,6 +950,9 @@ return this; }; + /** + * Trigger internal completion callbacks. + */ Tween.prototype.close = function close () { TweenBase.prototype.close.call(this); @@ -804,7 +967,10 @@ return this; }; - // additions to prototype + /** + * Resume tweening + * @returns {Tween} this instance + */ Tween.prototype.resume = function resume () { if (this.paused && this.playing) { this.paused = false; @@ -814,7 +980,7 @@ // re-queue execution context queueStart.call(this); // update time and let it roll - this._startTime += KUTE$1.Time() - this._pauseTime; + this._startTime += KEC.Time() - this._pauseTime; add(this); // restart ticker if stopped if (!Tick) { Ticker(); } @@ -822,11 +988,15 @@ return this; }; + /** + * Pause tweening + * @returns {Tween} this instance + */ Tween.prototype.pause = function pause () { if (!this.paused && this.playing) { remove(this); this.paused = true; - this._pauseTime = KUTE$1.Time(); + this._pauseTime = KEC.Time(); if (this._onPause !== undefined) { this._onPause.call(this); } @@ -834,23 +1004,29 @@ return this; }; + /** + * Reverses start values with end values + */ Tween.prototype.reverse = function reverse () { var this$1$1 = this; - // if (this._yoyo) { Object.keys(this.valuesEnd).forEach(function (reverseProp) { var tmp = this$1$1.valuesRepeat[reverseProp]; this$1$1.valuesRepeat[reverseProp] = this$1$1.valuesEnd[reverseProp]; this$1$1.valuesEnd[reverseProp] = tmp; this$1$1.valuesStart[reverseProp] = this$1$1.valuesRepeat[reverseProp]; }); - // } }; + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ Tween.prototype.update = function update (time) { var this$1$1 = this; - var T = time !== undefined ? time : KUTE$1.Time(); + var T = time !== undefined ? time : KEC.Time(); var elapsed; @@ -864,7 +1040,7 @@ // render the update Object.keys(this.valuesEnd).forEach(function (tweenProp) { - KUTE$1[tweenProp](this$1$1.element, + KEC[tweenProp](this$1$1.element, this$1$1.valuesStart[tweenProp], this$1$1.valuesEnd[tweenProp], progress); @@ -920,61 +1096,83 @@ // Update Tween Interface Update connect.tween = Tween; - // KUTE.js Tween Collection - // ======================== - + /** + * The static method creates a new `Tween` object for each `HTMLElement` + * from and `Array`, `HTMLCollection` or `NodeList`. + */ var TweenCollection = function TweenCollection(els, vS, vE, Options) { var this$1$1 = this; + var TweenConstructor = connect.tween; + /** @type {KUTE.twCollection[]} */ this.tweens = []; - // set default offset - if (!('offset' in defaultOptions)) { defaultOptions.offset = 0; } - var Ops = Options || {}; - Ops.delay = Ops.delay || defaultOptions.delay; + /** @type {number?} */ + Ops.delay = Ops.delay || defaultOptions$1.delay; // set all options var options = []; Array.from(els).forEach(function (el, i) { - var TweenConstructor = connect.tween; options[i] = Ops || {}; - options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions.offset) : Ops.delay; + options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions$1.offset) : Ops.delay; if (el instanceof Element) { this$1$1.tweens.push(new TweenConstructor(el, vS, vE, options[i])); } else { - throw Error(("KUTE.js - " + el + " not instanceof [Element]")); + throw Error(("KUTE - " + el + " is not instanceof Element")); } }); + /** @type {number?} */ this.length = this.tweens.length; return this; }; + /** + * Starts tweening, all targets + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.start = function start (time) { - var T = time === undefined ? KUTE$1.Time() : time; + var T = time === undefined ? KEC.Time() : time; this.tweens.map(function (tween) { return tween.start(T); }); return this; }; + /** + * Stops tweening, all targets and their chains + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.stop = function stop () { this.tweens.map(function (tween) { return tween.stop(); }); return this; }; - TweenCollection.prototype.pause = function pause (time) { - var T = time === undefined ? KUTE$1.Time() : time; - this.tweens.map(function (tween) { return tween.pause(T); }); + /** + * Pause tweening, all targets + * @returns {TweenCollection} this instance + */ + TweenCollection.prototype.pause = function pause () { + this.tweens.map(function (tween) { return tween.pause(); }); return this; }; - TweenCollection.prototype.resume = function resume (time) { - var T = time === undefined ? KUTE$1.Time() : time; - this.tweens.map(function (tween) { return tween.resume(T); }); + /** + * Resume tweening, all targets + * @returns {TweenCollection} this instance + */ + TweenCollection.prototype.resume = function resume () { + this.tweens.map(function (tween) { return tween.resume(); }); return this; }; + /** + * Schedule another tween or collection to start after + * this one is complete. + * @param {number?} args the tween start time + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.chain = function chain (args) { var lastTween = this.tweens[this.length - 1]; if (args instanceof TweenCollection) { @@ -987,14 +1185,26 @@ return this; }; + /** + * Check if any tween instance is playing + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ TweenCollection.prototype.playing = function playing () { return this.tweens.some(function (tw) { return tw.playing; }); }; + /** + * Remove all tweens in the collection + */ TweenCollection.prototype.removeTweens = function removeTweens () { this.tweens = []; }; + /** + * Returns the maximum animation duration + * @returns {number} this instance + */ TweenCollection.prototype.getMaxDuration = function getMaxDuration () { var durations = []; this.tweens.forEach(function (tw) { @@ -1003,51 +1213,89 @@ return Math.max(durations); }; + var TweenConstructor$1 = connect.tween; + + /** + * The `KUTE.to()` static method returns a new Tween object + * for a single `HTMLElement` at its current state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function to(element, endObject, optionsObj) { var options = optionsObj || {}; - var TweenConstructor = connect.tween; options.resetStart = endObject; - return new TweenConstructor(selector(element), endObject, endObject, options); + return new TweenConstructor$1(selector(element), endObject, endObject, options); } + var TweenConstructor = connect.tween; + + /** + * The `KUTE.fromTo()` static method returns a new Tween object + * for a single `HTMLElement` at a given state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ function fromTo(element, startObject, endObject, optionsObj) { var options = optionsObj || {}; - var TweenConstructor = connect.tween; return new TweenConstructor(selector(element), startObject, endObject, options); } - // multiple elements tween objects + /** + * The `KUTE.allTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at their current state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenProps} optionsObj progress + * @returns {TweenCollection} the Tween object collection + */ function allTo(elements, endObject, optionsObj) { var options = optionsObj || {}; - optionsObj.resetStart = endObject; + options.resetStart = endObject; return new TweenCollection(selector(elements, true), endObject, endObject, options); } + /** + * The `KUTE.allFromTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at a given state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {TweenCollection} the Tween object collection + */ function allFromTo(elements, startObject, endObject, optionsObj) { var options = optionsObj || {}; return new TweenCollection(selector(elements, true), startObject, endObject, options); } - // Animation class - // * builds KUTE components - // * populate KUTE objects - // * AnimatonBase creates a KUTE.js build for pre-made Tween objects - // * AnimatonDevelopment can help you debug your new components + /** + * Animation Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + */ var Animation = function Animation(Component) { try { if (Component.component in supportedProperties) { - throw Error(("KUTE.js - " + (Component.component) + " already registered")); + throw Error(("KUTE - " + (Component.component) + " already registered")); } else if (Component.property in defaultValues) { - throw Error(("KUTE.js - " + (Component.property) + " already registered")); - } else { - this.setComponent(Component); + throw Error(("KUTE - " + (Component.property) + " already registered")); } } catch (e) { throw Error(e); } - }; - Animation.prototype.setComponent = function setComponent (Component) { var propertyInfo = this; var ComponentName = Component.component; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util } @@ -1092,9 +1340,10 @@ // set additional options if (Component.defaultOptions) { - Object.keys(Component.defaultOptions).forEach(function (op) { - defaultOptions[op] = Component.defaultOptions[op]; - }); + // Object.keys(Component.defaultOptions).forEach((op) => { + // defaultOptions[op] = Component.defaultOptions[op]; + // }); + Object.assign(defaultOptions$1, Component.defaultOptions); } // set functions @@ -1122,16 +1371,16 @@ }); } - // set component interpolate + // set component interpolation functions if (Component.Interpolate) { Object.keys(Component.Interpolate).forEach(function (fni) { var compIntObj = Component.Interpolate[fni]; - if (typeof (compIntObj) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj; + if (typeof (compIntObj) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj; } else { Object.keys(compIntObj).forEach(function (sfn) { - if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) { - Interpolate[fni] = compIntObj[sfn]; + if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) { + interpolate[fni] = compIntObj[sfn]; } }); } @@ -1150,8 +1399,17 @@ return propertyInfo; }; - // trueDimension - returns { v = value, u = unit } - function trueDimension(dimValue, isAngle) { + /** + * trueDimension + * + * Returns the string value of a specific CSS property converted into a nice + * { v = value, u = unit } object. + * + * @param {string} dimValue the property string value + * @param {boolean | number} isAngle sets the utility to investigate angles + * @returns {{v: number, u: string}} the true {value, unit} tuple + */ + var trueDimension = function (dimValue, isAngle) { var intValue = parseInt(dimValue, 10) || 0; var mUnits = ['px', '%', 'deg', 'rad', 'em', 'rem', 'vh', 'vw']; var theUnit; @@ -1166,9 +1424,17 @@ } return { v: intValue, u: theUnit }; - } + }; - function numbers(a, b, v) { // number1, number2, progress + /** + * Numbers Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {number} v progress + * @returns {number} the interpolated number + */ + function numbers(a, b, v) { var A = +a; var B = b - a; // a = +a; b -= a; @@ -1176,12 +1442,20 @@ } // Component Functions + /** + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ function boxModelOnStart(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ + /* eslint-disable no-bitwise -- impossible to satisfy */ elem.style[tweenProp] = (v > 0.99 || v < 0.01 ? ((numbers(a, b, v) * 10) >> 0) / 10 : (numbers(a, b, v)) >> 0) + "px"; + /* eslint-enable no-bitwise */ + /* eslint-enable no-param-reassign */ }; } } @@ -1192,9 +1466,21 @@ baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; }); // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getBoxModel(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } + + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property name + * @returns {number} the property tween object + */ function prepareBoxModel(tweenProp, value) { var boxValue = trueDimension(value); var offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; @@ -1218,7 +1504,7 @@ }; // Component Essential - var essentialBoxModel = { + var BoxModelEssential = { component: 'essentialBoxModel', category: 'boxModel', properties: essentialBoxProps, @@ -1228,10 +1514,19 @@ Util: { trueDimension: trueDimension }, }; - // hexToRGB - returns RGB color object {r,g,b} - function hexToRGB (hex) { - var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") - var HEX = hex.replace(hexShorthand, function (m, r, g, b) { return r + r + g + g + b + b; }); + /** + * hexToRGB + * + * Converts a #HEX color format into RGB + * and returns a color object {r,g,b}. + * + * @param {string} hex the degree angle + * @returns {KUTE.colorObject | null} the radian angle + */ + var hexToRGB = function (hex) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + var HEX = hex.replace(hexShorthand, function (_, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(HEX); return result ? { @@ -1239,10 +1534,17 @@ g: parseInt(result[2], 16), b: parseInt(result[3], 16), } : null; - } + }; - // trueColor - replace transparent and transform any color to rgba()/rgb() - function trueColor(colorString) { + /** + * trueColor + * + * Transform any color to rgba()/rgb() and return a nice RGB(a) object. + * + * @param {string} colorString the color input + * @returns {KUTE.colorObject} the {r,g,b,a} color object + */ + var trueColor = function (colorString) { var result; if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string var vrgb = colorString.replace(/\s|\)/, '').split('(')[1].split(','); @@ -1264,7 +1566,9 @@ r: 0, g: 0, b: 0, a: 0, }; } - if (!/^#|^rgb/.test(colorString)) { // maybe we can check for web safe colors + // maybe we can check for web safe colors + // only works in a browser + if (!/^#|^rgb/.test(colorString)) { var siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString; var webColor = getComputedStyle(siteHead, null).color; @@ -1277,8 +1581,16 @@ }; } return result; - } + }; + /** + * Color Interpolation Function. + * + * @param {KUTE.colorObject} a start color + * @param {KUTE.colorObject} b end color + * @param {number} v progress + * @returns {string} the resulting color + */ function colors(a, b, v) { var _c = {}; var ep = ')'; @@ -1287,12 +1599,10 @@ var rgba = 'rgba('; Object.keys(b).forEach(function (c) { - // _c[c] = c !== 'a' ? (numbers(a[c], b[c], v) >> 0 || 0) : (a[c] && b[c]) - // ? (numbers(a[c], b[c], v) * 100 >> 0) / 100 : null; if (c !== 'a') { - _c[c] = numbers(a[c], b[c], v) >> 0 || 0; + _c[c] = numbers(a[c], b[c], v) >> 0 || 0; // eslint-disable-line no-bitwise } else if (a[c] && b[c]) { - _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; + _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; // eslint-disable-line no-bitwise } }); @@ -1307,13 +1617,21 @@ // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) - var supportedColors$1 = ['color', 'backgroundColor', 'borderColor', - 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; + var supportedColors$1 = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', + 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor' ]; // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartColors(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = function (elem, a, b, v) { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = colors(a, b, v); }; } @@ -1322,11 +1640,13 @@ var colorsOnStart$1 = {}; supportedColors$1.forEach(function (x) { colorsOnStart$1[x] = onStartColors; }); - // Component Interpolation // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) - var supportedColors = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; + var supportedColors = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor' ]; var defaultColors = {}; supportedColors.forEach(function (tweenProp) { @@ -1339,10 +1659,22 @@ colorsOnStart[x] = onStartColors; }); + /** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} property computed style + */ function getColor(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } - function prepareColor(prop, value) { + + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.colorObject} the property tween object + */ + function prepareColor(/* prop, */_, value) { return trueColor(value); } @@ -1368,18 +1700,30 @@ var attributes = {}; var onStartAttr = { + /** + * onStartAttr.attr + * + * Sets the sub-property update function. + * @param {string} tweenProp the property name + */ attr: function attr(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE$1[tweenProp] = function (elem, vS, vE, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function (elem, vS, vE, v) { Object.keys(vE).forEach(function (oneAttr) { - KUTE$1.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); + KEC.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); }); }; } }, + /** + * onStartAttr.attributes + * + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ attributes: function attributes$1(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd.attr) { - KUTE$1[tweenProp] = attributes; + if (!KEC[tweenProp] && this.valuesEnd.attr) { + KEC[tweenProp] = attributes; } }, }; @@ -1391,15 +1735,27 @@ var svgColors = ['fill', 'stroke', 'stop-color']; // Component Util + /** + * Returns non-camelcase property name. + * @param {string} a the camelcase property name + * @returns {string} the non-camelcase property name + */ function replaceUppercase(a) { return a.replace(/[A-Z]/g, '-$&').toLowerCase(); } // Component Functions - function getAttr(tweenProp, value) { + /** + * Returns the current attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {{[x:string]: string}} attribute value + */ + function getAttr(/* tweenProp, */_, value) { var this$1$1 = this; var attrStartValues = {}; Object.keys(value).forEach(function (attr) { - // get the value for 'fill-opacity' not fillOpacity, also 'width' not the internal 'width_px' + // get the value for 'fill-opacity' not fillOpacity + // also 'width' not the internal 'width_px' var attribute = replaceUppercase(attr).replace(/_+[a-z]+/, ''); var currentValue = this$1$1.element.getAttribute(attribute); attrStartValues[attribute] = svgColors.includes(attribute) @@ -1410,6 +1766,12 @@ return attrStartValues; } + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} attrObj the property value + * @returns {number} the property tween object + */ function prepareAttr(tweenProp, attrObj) { var this$1$1 = this; // attr (string),attrObj (object) @@ -1431,6 +1793,7 @@ if (this$1$1.valuesEnd[tweenProp] && this$1$1.valuesEnd[tweenProp][tp] && !(tp in attributes)) { attributes[tp] = function (elem, oneAttr, a, b, v) { var _p = oneAttr.replace(suffix, ''); + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ elem.setAttribute(_p, ((numbers(a.v, b.v, v) * 1000 >> 0) / 1000) + b.u); }; } @@ -1499,28 +1862,38 @@ } */ // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartOpacity(tweenProp/* , value */) { // opacity could be 0 sometimes, we need to check regardless - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable */ elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000; + /* eslint-enable */ }; } } - /* opacityProperty = { - property: 'opacity', - defaultValue: 1, - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Functions + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getOpacity(tweenProp/* , value */) { return getStyleForProperty(this.element, tweenProp); } - function prepareOpacity(tweenProp, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareOpacity(/* tweenProp, */_, value) { return parseFloat(value); // opacity always FLOAT } @@ -1532,7 +1905,7 @@ }; // Full Component - var opacityProperty = { + var OpacityProperty = { component: 'opacityProperty', property: 'opacity', defaultValue: 1, @@ -1559,10 +1932,16 @@ // Component Functions var onStartWrite = { + /** + * onStartWrite.text + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ text: function text(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { var chars = this._textChars; - var charsets = charSet[defaultOptions.textChars]; + var charsets = charSet[defaultOptions$1.textChars]; if (chars in charSet) { charsets = charSet[chars]; @@ -1570,12 +1949,13 @@ charsets = chars; } - KUTE$1[tweenProp] = function (elem, a, b, v) { + KEC[tweenProp] = function (elem, a, b, v) { var initialText = ''; var endText = ''; var finalText = b === '' ? ' ' : b; var firstLetterA = a.substring(0); var firstLetterB = b.substring(0); + /* eslint-disable */ var pointer = charsets[(Math.random() * charsets.length) >> 0]; if (a === ' ') { @@ -1594,13 +1974,22 @@ .substring(0, Math.min(v * firstLetterB.length, firstLetterB.length) >> 0); elem.innerHTML = v < 1 ? ((endText + pointer + initialText)) : finalText; } + /* eslint-enable */ }; } }, + /** + * onStartWrite.number + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ number: function number(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { // numbers can be 0 - KUTE$1[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { // numbers can be 0 + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable */ elem.innerHTML = numbers(a, b, v) >> 0; + /* eslint-enable */ }; } }, @@ -1625,8 +2014,10 @@ textWriteWrapper = document.createElement('SPAN'); textWriteWrapper.className = classNAME; textWriteWrapper.innerHTML = elementInnerHTML; + /* eslint-disable no-param-reassign -- impossible to satisfy */ el.appendChild(textWriteWrapper); el.innerHTML = textWriteWrapper.outerHTML; + /* eslint-enable no-param-reassign -- impossible to satisfy */ } else if (el.children.length && el.children[0].className === classNAME) { (assign = el.children, textWriteWrapper = assign[0]); } @@ -1677,9 +2068,11 @@ var oldTargetSegs = getTextPartsArray(target, 'text-part'); var newTargetSegs = getTextPartsArray(wrapContentsSpan(newText), 'text-part'); + /* eslint-disable no-param-reassign */ target.innerHTML = ''; target.innerHTML += oldTargetSegs.map(function (s) { s.className += ' oldText'; return s.outerHTML; }).join(''); target.innerHTML += newTargetSegs.map(function (s) { s.className += ' newText'; return s.outerHTML.replace(s.innerHTML, ''); }).join(''); + /* eslint-enable no-param-reassign */ return [oldTargetSegs, newTargetSegs]; } @@ -1718,8 +2111,10 @@ })); textTween = textTween.concat(newTargets.map(function (el, i) { function onComplete() { + /* eslint-disable no-param-reassign */ target.innerHTML = newText; target.playing = false; + /* eslint-enable no-param-reassign */ } options.duration = options.duration === 'auto' ? newTargetSegs[i].innerHTML.length * 75 : options.duration; @@ -1733,6 +2128,7 @@ textTween.start = function startTweens() { if (!target.playing) { textTween.forEach(function (tw) { return tw.start(); }); + // eslint-disable-next-line no-param-reassign target.playing = true; } }; @@ -1741,10 +2137,20 @@ } // Component Functions + /** + * Returns the current element `innerHTML`. + * @returns {string} computed style for property + */ function getWrite(/* tweenProp, value */) { return this.element.innerHTML; } + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number | string} the property tween object + */ function prepareText(tweenProp, value) { if (tweenProp === 'number') { return parseFloat(value); @@ -1761,7 +2167,7 @@ }; // Full Component - var textWrite = { + var TextWrite = { component: 'textWriteProperties', category: 'textWrite', properties: ['text', 'number'], @@ -1773,62 +2179,132 @@ Util: { charSet: charSet, createTextTweens: createTextTweens }, }; + /** + * Perspective Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the perspective function in string format + */ function perspective(a, b, u, v) { + // eslint-disable-next-line no-bitwise return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")"); } + /** + * Translate 3D Interpolation Function. + * + * @param {number[]} a start [x,y,z] position + * @param {number[]} b end [x,y,z] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D translation string + */ function translate3d(a, b, u, v) { var translateArray = []; for (var ax = 0; ax < 3; ax += 1) { translateArray[ax] = (a[ax] || b[ax] + // eslint-disable-next-line no-bitwise ? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u; } return ("translate3d(" + (translateArray.join(',')) + ")"); } + /** + * 3D Rotation Interpolation Function. + * + * @param {number} a start [x,y,z] angles + * @param {number} b end [x,y,z] angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D rotation string + */ function rotate3d(a, b, u, v) { var rotateStr = ''; + // eslint-disable-next-line no-bitwise rotateStr += a[0] || b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u + ")") : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[1] || b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u + ")") : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[2] || b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000) + u + ")") : ''; return rotateStr; } + /** + * Translate 2D Interpolation Function. + * + * @param {number[]} a start [x,y] position + * @param {number[]} b end [x,y] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 2D translation string + */ function translate(a, b, u, v) { var translateArray = []; + // eslint-disable-next-line no-bitwise translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return ("translate(" + (translateArray.join(',')) + ")"); } + /** + * 2D Rotation Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated rotation + */ function rotate(a, b, u, v) { + // eslint-disable-next-line no-bitwise return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")"); } + /** + * Scale Interpolation Function. + * + * @param {number} a start scale + * @param {number} b end scale + * @param {number} v progress + * @returns {string} the interpolated scale + */ function scale(a, b, v) { + // eslint-disable-next-line no-bitwise return ("scale(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + ")"); } + /** + * Skew Interpolation Function. + * + * @param {number} a start {x,y} angles + * @param {number} b end {x,y} angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated string value of skew(s) + */ function skew(a, b, u, v) { var skewArray = []; + // eslint-disable-next-line no-bitwise skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return ("skew(" + (skewArray.join(',')) + ")"); } - /* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - - // same to svg transform, attr - // Component Functions + /** + * Sets the property update function. + * * same to svgTransform, htmlAttributes + * @param {string} tweenProp the property name + */ function onStartTransform(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE$1[tweenProp] = function (elem, a, b, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0 + (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z] + (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z] @@ -1838,23 +2314,27 @@ } } - /* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - // same to svg transform, attr // the component developed for modern browsers supporting non-prefixed transform // Component Functions - function getTransform(tweenProperty/* , value */) { + /** + * Returns the current property inline style. + * @param {string} tweenProp the property name + * @returns {string} inline style for property + */ + function getTransform(tweenProp/* , value */) { var currentStyle = getInlineStyle(this.element); - return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; + return currentStyle[tweenProp] ? currentStyle[tweenProp] : defaultValues[tweenProp]; } - function prepareTransform(prop, obj) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformFObject} the property tween object + */ + function prepareTransform(/* prop, */_, obj) { var prepAxis = ['X', 'Y', 'Z']; // coordinates var transformObject = {}; var translateArray = []; var rotateArray = []; var skewArray = []; @@ -1908,6 +2388,10 @@ return transformObject; } + /** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ function crossCheckTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp]) { @@ -1952,7 +2436,7 @@ }; // Full Component - var transformFunctionsComponent = { + var TransformFunctions = { component: 'transformFunctions', property: 'transform', subProperties: supportedTransformProperties, @@ -1969,51 +2453,58 @@ }, }; - /* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartDraw(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE$1[tweenProp]) { - KUTE$1[tweenProp] = function (elem, a, b, v) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + /* eslint-disable no-bitwise -- impossible to satisfy */ var pathLength = (a.l * 100 >> 0) / 100; var start = (numbers(a.s, b.s, v) * 100 >> 0) / 100; var end = (numbers(a.e, b.e, v) * 100 >> 0) / 100; var offset = 0 - start; var dashOne = end + offset; - + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDashoffset = offset + "px"; + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDasharray = (((dashOne < 1 ? 0 : dashOne) * 100 >> 0) / 100) + "px, " + pathLength + "px"; + /* eslint-disable no-bitwise -- impossible to satisfy */ }; } } - /* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } - } */ - // Component Util + /** + * Convert a `` length percent value to absolute. + * @param {string} v raw value + * @param {number} l length value + * @returns {number} the absolute value + */ function percent(v, l) { return (parseFloat(v) / 100) * l; } - // http://stackoverflow.com/a/30376660 - // returns the length of a Rect + /** + * Returns the `` length. + * It doesn't compute `rx` and / or `ry` of the element. + * @see http://stackoverflow.com/a/30376660 + * @param {SVGRectElement} el target element + * @returns {number} the `` length + */ function getRectLength(el) { var w = el.getAttribute('width'); var h = el.getAttribute('height'); return (w * 2) + (h * 2); } - // getPolygonLength / getPolylineLength - // returns the length of the Polygon / Polyline + /** + * Returns the `` / `` length. + * @param {SVGPolylineElement | SVGPolygonElement} el target element + * @returns {number} the element length + */ function getPolyLength(el) { var points = el.getAttribute('points').split(' '); @@ -2044,7 +2535,11 @@ return len; } - // return the length of the line + /** + * Returns the `` length. + * @param {SVGLineElement} el target element + * @returns {number} the element length + */ function getLineLength(el) { var x1 = el.getAttribute('x1'); var x2 = el.getAttribute('x2'); @@ -2053,13 +2548,22 @@ return Math.sqrt(Math.pow( (x2 - x1), 2 ) + Math.pow( (y2 - y1), 2 )); } - // return the length of the circle + /** + * Returns the `` length. + * @param {SVGCircleElement} el target element + * @returns {number} the element length + */ function getCircleLength(el) { var r = el.getAttribute('r'); return 2 * Math.PI * r; } // returns the length of an ellipse + /** + * Returns the `` length. + * @param {SVGEllipseElement} el target element + * @returns {number} the element length + */ function getEllipseLength(el) { var rx = el.getAttribute('rx'); var ry = el.getAttribute('ry'); @@ -2068,7 +2572,11 @@ return ((Math.sqrt(0.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2; } - // returns the result of any of the below functions + /** + * Returns the shape length. + * @param {SVGPathCommander.shapeTypes} el target element + * @returns {number} the element length + */ function getTotalLength(el) { if (el.tagName === 'rect') { return getRectLength(el); @@ -2085,6 +2593,12 @@ return 0; } + /** + * Returns the property tween object. + * @param {SVGPathCommander.shapeTypes} element the target element + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ function getDraw(element, value) { var length = /path|glyph/.test(element.tagName) ? element.getTotalLength() @@ -2094,7 +2608,7 @@ var dasharray; var offset; - if (value instanceof Object) { + if (value instanceof Object && Object.keys(value).every(function (v) { return ['s', 'e', 'l'].includes(v); })) { return value; } if (typeof value === 'string') { var v = value.split(/,|\s/); @@ -2110,17 +2624,33 @@ return { s: start, e: end, l: length }; } + /** + * Reset CSS properties associated with the `draw` property. + * @param {SVGPathCommander.shapeTypes} element target + */ function resetDraw(elem) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ elem.style.strokeDashoffset = ''; elem.style.strokeDasharray = ''; + /* eslint-disable no-param-reassign -- impossible to satisfy */ } // Component Functions + /** + * Returns the property tween object. + * @returns {KUTE.drawObject} the property tween object + */ function getDrawValue(/* prop, value */) { return getDraw(this.element); } - function prepareDraw(a, o) { - return getDraw(this.element, o); + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ + function prepareDraw(_, value) { + return getDraw(this.element, value); } // All Component Functions @@ -2131,7 +2661,7 @@ }; // Component Full - var svgDraw = { + var SvgDrawProperty = { component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', @@ -2151,125 +2681,114 @@ }, }; - var SVGPCO = { - origin: null, - decimals: 4, - round: 1, - }; + /** + * Splits an extended A (arc-to) segment into two cubic-bezier segments. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` this segment belongs to + * @param {string[]} allPathCommands all previous path commands + * @param {number} i the segment index + */ - function clonePath(pathArray) { - return pathArray.map(function (x) { - if (Array.isArray(x)) { - return clonePath(x); - } - return !Number.isNaN(+x) ? +x : x; - }); - } - - function roundPath(pathArray, round) { - var decimalsOption = !Number.isNaN(+round) ? +round : SVGPCO.decimals; - var result; - - if (decimalsOption) { - result = pathArray.map(function (seg) { return seg.map(function (c) { - var nr = +c; - var dc = Math.pow( 10, decimalsOption ); - if (nr) { - return nr % 1 === 0 ? nr : Math.round(nr * dc) / dc; - } - return c; - }); }); - } else { - result = clonePath(pathArray); - } - return result; - } - - function fixArc(pathArray, allPathCommands, i) { - if (pathArray[i].length > 7) { - pathArray[i].shift(); - var pi = pathArray[i]; - // const ni = i + 1; - var ni = i; - while (pi.length) { + function fixArc(path, allPathCommands, i) { + if (path[i].length > 7) { + path[i].shift(); + var segment = path[i]; + var ni = i; // ESLint + while (segment.length) { // if created multiple C:s, their original seg is saved allPathCommands[i] = 'A'; - pathArray.splice(ni += 1, 0, ['C'].concat(pi.splice(0, 6))); - // pathArray.splice(i += 1, 0, ['C'].concat(pi.splice(0, 6))); - // pathArray.splice(i++, 0, ['C'].concat(pi.splice(0, 6))); + // @ts-ignore + path.splice(ni += 1, 0, ['C' ].concat( segment.splice(0, 6))); } - pathArray.splice(i, 1); + path.splice(i, 1); } } + /** + * Segment params length + */ var paramsCount = { a: 7, c: 6, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, z: 0, }; - function isPathArray(pathArray) { - return Array.isArray(pathArray) && pathArray.every(function (seg) { - var pathCommand = seg[0].toLowerCase(); - return paramsCount[pathCommand] === seg.length - 1 && /[achlmrqstvz]/g.test(pathCommand); - }); - } - - function isCurveArray(pathArray) { - return isPathArray(pathArray) && pathArray.slice(1).every(function (seg) { return seg[0] === 'C'; }); - } - - function finalizeSegment(state) { - var pathCommand = state.pathValue[state.segmentStart]; - var pathComLK = pathCommand.toLowerCase(); - var params = state.data; + /** + * Breaks the parsing of a pathString once a segment is finalized. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function finalizeSegment(path) { + var pathCommand = path.pathValue[path.segmentStart]; + var LK = pathCommand.toLowerCase(); + var data = path.data; // Process duplicated commands (without comand name) - if (pathComLK === 'm' && params.length > 2) { - state.segments.push([pathCommand, params[0], params[1]]); - params = params.slice(2); - pathComLK = 'l'; - pathCommand = (pathCommand === 'm') ? 'l' : 'L'; + if (LK === 'm' && data.length > 2) { + // @ts-ignore + path.segments.push([pathCommand, data[0], data[1]]); + data = data.slice(2); + LK = 'l'; + pathCommand = pathCommand === 'm' ? 'l' : 'L'; } - if (pathComLK === 'r') { - state.segments.push([pathCommand].concat(params)); - } else { - while (params.length >= paramsCount[pathComLK]) { - state.segments.push([pathCommand].concat(params.splice(0, paramsCount[pathComLK]))); - if (!paramsCount[pathComLK]) { - break; - } + // @ts-ignore + while (data.length >= paramsCount[LK]) { + // path.segments.push([pathCommand].concat(data.splice(0, paramsCount[LK]))); + // @ts-ignore + path.segments.push([pathCommand ].concat( data.splice(0, paramsCount[LK]))); + // @ts-ignore + if (!paramsCount[LK]) { + break; } } } var invalidPathValue = 'Invalid path value'; - function scanFlag(state) { - var ch = state.pathValue.charCodeAt(state.index); + /** + * Validates an A (arc-to) specific path command value. + * Usually a `large-arc-flag` or `sweep-flag`. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function scanFlag(path) { + var index = path.index; + var ch = path.pathValue.charCodeAt(index); if (ch === 0x30/* 0 */) { - state.param = 0; - state.index += 1; + path.param = 0; + path.index += 1; return; } if (ch === 0x31/* 1 */) { - state.param = 1; - state.index += 1; + path.param = 1; + path.index += 1; return; } - // state.err = 'SvgPath: arc flag can be 0 or 1 only (at pos ' + state.index + ')'; - state.err = invalidPathValue + ": invalid Arc flag " + ch; + path.err = invalidPathValue + ": invalid Arc flag \"" + ch + "\", expecting 0 or 1 at index " + index; } + /** + * Checks if a character is a digit. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isDigit(code) { return (code >= 48 && code <= 57); // 0..9 } - function scanParam(state) { - var start = state.index; - var max = state.max; + /** + * Validates every character of the path string, + * every path command, negative numbers or floating point numbers. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function scanParam(path) { + var max = path.max; + var pathValue = path.pathValue; + var start = path.index; var index = start; var zeroFirst = false; var hasCeiling = false; @@ -2278,22 +2797,22 @@ var ch; if (index >= max) { - // state.err = 'SvgPath: missed param (at pos ' + index + ')'; - state.err = invalidPathValue + ": missing param " + (state.pathValue[index]); + // path.err = 'SvgPath: missed param (at pos ' + index + ')'; + path.err = invalidPathValue + " at " + index + ": missing param " + (pathValue[index]); return; } - ch = state.pathValue.charCodeAt(index); + ch = pathValue.charCodeAt(index); if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } // This logic is shamelessly borrowed from Esprima // https://github.com/ariya/esprimas if (!isDigit(ch) && ch !== 0x2E/* . */) { - // state.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; - state.err = invalidPathValue + " at index " + index + ": " + (state.pathValue[index]) + " is not a number"; + // path.err = 'SvgPath: param should start with 0..9 or `.` (at pos ' + index + ')'; + path.err = invalidPathValue + " at index " + index + ": " + (pathValue[index]) + " is not a number"; return; } @@ -2301,63 +2820,68 @@ zeroFirst = (ch === 0x30/* 0 */); index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; if (zeroFirst && index < max) { // decimal number starts with '0' such as '09' is illegal. if (ch && isDigit(ch)) { - // state.err = 'SvgPath: numbers started with `0` such as `09` + // path.err = 'SvgPath: numbers started with `0` such as `09` // are illegal (at pos ' + start + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[start]) + " illegal number"; + path.err = invalidPathValue + " at index " + start + ": " + (pathValue[start]) + " illegal number"; return; } } - while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + while (index < max && isDigit(pathValue.charCodeAt(index))) { index += 1; hasCeiling = true; } - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } if (ch === 0x2E/* . */) { hasDot = true; index += 1; - while (isDigit(state.pathValue.charCodeAt(index))) { + while (isDigit(pathValue.charCodeAt(index))) { index += 1; hasDecimal = true; } - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; } if (ch === 0x65/* e */ || ch === 0x45/* E */) { if (hasDot && !hasCeiling && !hasDecimal) { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[index]) + " invalid float exponent"; + path.err = invalidPathValue + " at index " + index + ": " + (pathValue[index]) + " invalid float exponent"; return; } index += 1; - ch = (index < max) ? state.pathValue.charCodeAt(index) : 0; + ch = (index < max) ? pathValue.charCodeAt(index) : 0; if (ch === 0x2B/* + */ || ch === 0x2D/* - */) { index += 1; } - if (index < max && isDigit(state.pathValue.charCodeAt(index))) { - while (index < max && isDigit(state.pathValue.charCodeAt(index))) { + if (index < max && isDigit(pathValue.charCodeAt(index))) { + while (index < max && isDigit(pathValue.charCodeAt(index))) { index += 1; } } else { - // state.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[index]) + " invalid float exponent"; + // path.err = 'SvgPath: invalid float exponent (at pos ' + index + ')'; + path.err = invalidPathValue + " at index " + index + ": " + (pathValue[index]) + " invalid float exponent"; return; } } - state.index = index; - state.param = +state.pathValue.slice(start, index); + path.index = index; + path.param = +path.pathValue.slice(start, index); } + /** + * Checks if the character is a space. + * + * @param {number} ch the character to check + * @returns {boolean} check result + */ function isSpace(ch) { var specialSpaces = [ 0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, @@ -2368,14 +2892,29 @@ || (ch >= 0x1680 && specialSpaces.indexOf(ch) >= 0); } - function skipSpaces(state) { - while (state.index < state.max && isSpace(state.pathValue.charCodeAt(state.index))) { - state.index += 1; + /** + * Points the parser to the next character in the + * path string every time it encounters any kind of + * space character. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function skipSpaces(path) { + var pathValue = path.pathValue; + var max = path.max; + while (path.index < max && isSpace(pathValue.charCodeAt(path.index))) { + path.index += 1; } } + /** + * Checks if the character is a path command. + * + * @param {any} code the character to check + * @returns {boolean} check result + */ function isPathCommand(code) { - // eslint-disable no-bitwise + // eslint-disable-next-line no-bitwise -- Impossible to satisfy switch (code | 0x20) { case 0x6D/* m */: case 0x7A/* z */: @@ -2387,13 +2926,20 @@ case 0x71/* q */: case 0x74/* t */: case 0x61/* a */: - case 0x72/* r */: + // case 0x72/* r */: return true; default: return false; } } + /** + * Checks if the character is or belongs to a number. + * [0-9]|+|-|. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isDigitStart(code) { return (code >= 48 && code <= 57) /* 0..9 */ || code === 0x2B /* + */ @@ -2401,184 +2947,238 @@ || code === 0x2E; /* . */ } + /** + * Checks if the character is an A (arc-to) path command. + * + * @param {number} code the character to check + * @returns {boolean} check result + */ function isArcCommand(code) { - // eslint disable no-bitwise + // eslint-disable-next-line no-bitwise -- Impossible to satisfy return (code | 0x20) === 0x61; } - function scanSegment(state) { - var max = state.max; - var cmdCode = state.pathValue.charCodeAt(state.index); - var reqParams = paramsCount[state.pathValue[state.index].toLowerCase()]; - // let hasComma; + /** + * Scans every character in the path string to determine + * where a segment starts and where it ends. + * + * @param {SVGPathCommander.PathParser} path the `PathParser` instance + */ + function scanSegment(path) { + var max = path.max; + var pathValue = path.pathValue; + var index = path.index; + var cmdCode = pathValue.charCodeAt(index); + // @ts-ignore + var reqParams = paramsCount[pathValue[index].toLowerCase()]; - state.segmentStart = state.index; + path.segmentStart = index; if (!isPathCommand(cmdCode)) { - // state.err = 'SvgPath: bad command ' - // + state.pathValue[state.index] - // + ' (at pos ' + state.index + ')'; - state.err = invalidPathValue + ": " + (state.pathValue[state.index]) + " not a path command"; + path.err = invalidPathValue + ": " + (pathValue[index]) + " not a path command"; return; } - state.index += 1; - skipSpaces(state); + path.index += 1; + skipSpaces(path); - state.data = []; + path.data = []; if (!reqParams) { // Z - finalizeSegment(state); + finalizeSegment(path); return; } - // hasComma = false; - for (;;) { for (var i = reqParams; i > 0; i -= 1) { - if (isArcCommand(cmdCode) && (i === 3 || i === 4)) { scanFlag(state); } - else { scanParam(state); } + if (isArcCommand(cmdCode) && (i === 3 || i === 4)) { scanFlag(path); } + else { scanParam(path); } - if (state.err.length) { + if (path.err.length) { return; } - state.data.push(state.param); + path.data.push(path.param); - skipSpaces(state); - // hasComma = false; + skipSpaces(path); - if (state.index < max && state.pathValue.charCodeAt(state.index) === 0x2C/* , */) { - state.index += 1; - skipSpaces(state); - // hasComma = true; + // after ',' param is mandatory + if (path.index < max && pathValue.charCodeAt(path.index) === 0x2C/* , */) { + path.index += 1; + skipSpaces(path); } } - // after ',' param is mandatory - // if (hasComma) { - // continue; - // } - - if (state.index >= state.max) { + if (path.index >= path.max) { break; } // Stop on next segment - if (!isDigitStart(state.pathValue.charCodeAt(state.index))) { + if (!isDigitStart(pathValue.charCodeAt(path.index))) { break; } } - finalizeSegment(state); + finalizeSegment(path); } - function SVGPathArray(pathString) { + /** + * Returns a clone of an existing `pathArray`. + * + * @param {SVGPathCommander.pathArray | SVGPathCommander.pathSegment} path the source `pathArray` + * @returns {any} the cloned `pathArray` + */ + function clonePath(path) { + return path.map(function (x) { return (Array.isArray(x) ? [].concat( x ) : x); }); + } + + /** + * The `PathParser` used by the parser. + * + * @param {string} pathString + */ + function PathParser(pathString) { + /** @type {SVGPathCommander.pathArray} */ + // @ts-ignore this.segments = []; + /** @type {string} */ this.pathValue = pathString; + /** @type {number} */ this.max = pathString.length; + /** @type {number} */ this.index = 0; + /** @type {number} */ this.param = 0.0; + /** @type {number} */ this.segmentStart = 0; + /** @type {any} */ this.data = []; + /** @type {string} */ this.err = ''; - // return this; } - // Returns array of segments: - function parsePathString(pathString, round) { - if (isPathArray(pathString)) { - return clonePath(pathString); - } - - var state = new SVGPathArray(pathString); - - skipSpaces(state); - - while (state.index < state.max && !state.err.length) { - scanSegment(state); - } - - if (state.err.length) { - state.segments = []; - } else if (state.segments.length) { - if ('mM'.indexOf(state.segments[0][0]) < 0) { - // state.err = 'Path string should start with `M` or `m`'; - state.err = invalidPathValue + ": missing M/m"; - state.segments = []; - } else { - state.segments[0][0] = 'M'; - } - } - - return roundPath(state.segments, round); + /** + * Iterates an array to check if it's an actual `pathArray`. + * + * @param {string | SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ + function isPathArray(path) { + return Array.isArray(path) && path.every(function (seg) { + var lk = seg[0].toLowerCase(); + return paramsCount[lk] === seg.length - 1 && 'achlmqstvz'.includes(lk); + }); } - function isAbsoluteArray(pathInput) { - return isPathArray(pathInput) && pathInput.every(function (x) { return x[0] === x[0].toUpperCase(); }); - } - - function pathToAbsolute(pathInput, round) { - if (isAbsoluteArray(pathInput)) { + /** + * Parses a path string value and returns an array + * of segments we like to call `pathArray`. + * + * @param {SVGPathCommander.pathArray | string} pathInput the string to be parsed + * @returns {SVGPathCommander.pathArray} the resulted `pathArray` + */ + function parsePathString(pathInput) { + if (Array.isArray(pathInput) && isPathArray(pathInput)) { return clonePath(pathInput); } - var pathArray = parsePathString(pathInput, round); - var ii = pathArray.length; - var resultArray = []; - var x = 0; - var y = 0; - var mx = 0; - var my = 0; - var start = 0; + // @ts-ignore + var path = new PathParser(pathInput); // TS expects string - if (pathArray[0][0] === 'M') { - x = +pathArray[0][1]; - y = +pathArray[0][2]; - mx = x; - my = y; - start += 1; - resultArray.push(['M', x, y]); + skipSpaces(path); + + while (path.index < path.max && !path.err.length) { + scanSegment(path); } - for (var i = start; i < ii; i += 1) { - var segment = pathArray[i]; + if (path.err.length) { + // @ts-ignore + path.segments = []; + } else if (path.segments.length) { + if (!'mM'.includes(path.segments[0][0])) { + path.err = invalidPathValue + ": missing M/m"; + // @ts-ignore + path.segments = []; + } else { + path.segments[0][0] = 'M'; + } + } + + return path.segments; + } + + /** + * Iterates an array to check if it's a `pathArray` + * with all absolute values. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ + function isAbsoluteArray(path) { + return isPathArray(path) + && path.every(function (x) { return x[0] === x[0].toUpperCase(); }); + } + + /** + * Parses a path string value or object and returns an array + * of segments, all converted to absolute values. + * + * @param {SVGPathCommander.pathArray | string} pathInput the path string | object + * @returns {SVGPathCommander.absoluteArray} the resulted `pathArray` with absolute values + */ + function pathToAbsolute(pathInput) { + if (Array.isArray(pathInput) && isAbsoluteArray(pathInput)) { + return clonePath(pathInput); + } + + var path = parsePathString(pathInput); + var x = 0; var y = 0; + var mx = 0; var my = 0; + + // @ts-ignore -- the `absoluteSegment[]` is for sure an `absolutePath` + return path.map(function (segment) { + var assign, assign$1, assign$2; + + var values = segment.slice(1).map(Number); var pathCommand = segment[0]; + /** @type {SVGPathCommander.absoluteCommand} */ + // @ts-ignore var absCommand = pathCommand.toUpperCase(); + + if (pathCommand === 'M') { + (assign = values, x = assign[0], y = assign[1]); + mx = x; + my = y; + return ['M', x, y]; + } + /** @type {SVGPathCommander.absoluteSegment} */ + // @ts-ignore var absoluteSegment = []; - var newSeg = []; - resultArray.push(absoluteSegment); if (pathCommand !== absCommand) { - absoluteSegment[0] = absCommand; - switch (absCommand) { case 'A': - newSeg = segment.slice(1, -2).concat([+segment[6] + x, +segment[7] + y]); - for (var j = 0; j < newSeg.length; j += 1) { - absoluteSegment.push(newSeg[j]); - } + absoluteSegment = [ + absCommand, values[0], values[1], values[2], + values[3], values[4], values[5] + x, values[6] + y]; break; case 'V': - absoluteSegment[1] = +segment[1] + y; + absoluteSegment = [absCommand, values[0] + y]; break; case 'H': - absoluteSegment[1] = +segment[1] + x; + absoluteSegment = [absCommand, values[0] + x]; break; - default: - if (absCommand === 'M') { - mx = +segment[1] + x; - my = +segment[2] + y; - } - // for is here to stay for eslint - for (var j$1 = 1; j$1 < segment.length; j$1 += 1) { - absoluteSegment.push(+segment[j$1] + (j$1 % 2 ? x : y)); - } + default: { + // use brakets for `eslint: no-case-declaration` + // https://stackoverflow.com/a/50753272/803358 + var absValues = values.map(function (n, j) { return n + (j % 2 ? y : x); }); + // @ts-ignore for n, l, c, s, q, t + absoluteSegment = [absCommand ].concat( absValues); + } } } else { - for (var j$2 = 0; j$2 < segment.length; j$2 += 1) { - absoluteSegment.push(segment[j$2]); - } + // @ts-ignore + absoluteSegment = [absCommand ].concat( values); } var segLength = absoluteSegment.length; @@ -2588,142 +3188,269 @@ y = my; break; case 'H': - x = +absoluteSegment[1]; + // @ts-ignore + (assign$1 = absoluteSegment, x = assign$1[1]); break; case 'V': - y = +absoluteSegment[1]; + // @ts-ignore + (assign$2 = absoluteSegment, y = assign$2[1]); break; default: - x = +absoluteSegment[segLength - 2]; - y = +absoluteSegment[segLength - 1]; + // @ts-ignore + x = absoluteSegment[segLength - 2]; + // @ts-ignore + y = absoluteSegment[segLength - 1]; if (absCommand === 'M') { mx = x; my = y; } } - } - - return roundPath(resultArray, round); + return absoluteSegment; + }); } - // returns {qx,qy} for shorthand quadratic bezier segments + /** + * Returns the missing control point from an + * T (shorthand quadratic bezier) segment. + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} qx control point x + * @param {number} qy control point y + * @param {string} prevCommand the previous path command + * @returns {{qx: number, qy: number}}} the missing control point + */ function shorthandToQuad(x1, y1, qx, qy, prevCommand) { - return 'QT'.indexOf(prevCommand) > -1 + return 'QT'.includes(prevCommand) ? { qx: x1 * 2 - qx, qy: y1 * 2 - qy } : { qx: x1, qy: y1 }; } - // returns {x1,x2} for shorthand cubic bezier segments + /** + * Returns the missing control point from an + * S (shorthand cubic bezier) segment. + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} x2 curve end x + * @param {number} y2 curve end y + * @param {string} prevCommand the previous path command + * @returns {{x1: number, y1: number}}} the missing control point + */ function shorthandToCubic(x1, y1, x2, y2, prevCommand) { - return 'CS'.indexOf(prevCommand) > -1 + return 'CS'.includes(prevCommand) ? { x1: x1 * 2 - x2, y1: y1 * 2 - y2 } : { x1: x1, y1: y1 }; } + /** + * Normalizes a single segment of a `pathArray` object. + * + * @param {SVGPathCommander.pathSegment} segment the segment object + * @param {any} params the coordinates of the previous segment + * @param {string} prevCommand the path command of the previous segment + * @returns {SVGPathCommander.normalSegment} the normalized segment + */ function normalizeSegment(segment, params, prevCommand) { var pathCommand = segment[0]; - var xy = segment.slice(1); + var px1 = params.x1; + var py1 = params.y1; + var px2 = params.x2; + var py2 = params.y2; + var values = segment.slice(1).map(Number); var result = segment; - if ('TQ'.indexOf(segment[0]) < 0) { + if (!'TQ'.includes(pathCommand)) { // optional but good to be cautious params.qx = null; params.qy = null; } if (pathCommand === 'H') { - result = ['L', segment[1], params.y1]; + result = ['L', segment[1], py1]; } else if (pathCommand === 'V') { - result = ['L', params.x1, segment[1]]; + result = ['L', px1, segment[1]]; } else if (pathCommand === 'S') { - var ref = shorthandToCubic(params.x1, params.y1, params.x2, params.y2, prevCommand); + var ref = shorthandToCubic(px1, py1, px2, py2, prevCommand); var x1 = ref.x1; var y1 = ref.y1; params.x1 = x1; params.y1 = y1; - result = ['C', x1, y1].concat(xy); + // @ts-ignore + result = ['C', x1, y1 ].concat( values); } else if (pathCommand === 'T') { - var ref$1 = shorthandToQuad(params.x1, params.y1, params.qx, params.qy, prevCommand); + var ref$1 = shorthandToQuad(px1, py1, params.qx, params.qy, prevCommand); var qx = ref$1.qx; var qy = ref$1.qy; params.qx = qx; params.qy = qy; - result = ['Q', qx, qy].concat(xy); + // @ts-ignore + result = ['Q', qx, qy ].concat( values); } else if (pathCommand === 'Q') { - var nqx = xy[0]; - var nqy = xy[1]; + var nqx = values[0]; + var nqy = values[1]; params.qx = nqx; params.qy = nqy; } + + // @ts-ignore -- we-re switching `pathSegment` type return result; } - function isNormalizedArray(pathArray) { - return Array.isArray(pathArray) && pathArray.every(function (seg) { - var pathCommand = seg[0].toLowerCase(); - return paramsCount[pathCommand] === seg.length - 1 && /[ACLMQZ]/.test(seg[0]); // achlmrqstvz - }); + /** + * Iterates an array to check if it's a `pathArray` + * with all segments are in non-shorthand notation + * with absolute values. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` to be checked + * @returns {boolean} iteration result + */ + function isNormalizedArray(path) { + return isAbsoluteArray(path) && path.every(function (seg) { return 'ACLMQZ'.includes(seg[0]); }); } - function normalizePath(pathInput, round) { // pathArray|pathString + /** + * @type {SVGPathCommander.parserParams} + */ + var paramsParser = { + x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, + }; + + /** + * Normalizes a `path` object for further processing: + * * convert segments to absolute values + * * convert shorthand path commands to their non-shorthand notation + * + * @param {SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray' + * @returns {SVGPathCommander.normalArray} the normalized `pathArray` + */ + function normalizePath(pathInput) { + var assign; + if (isNormalizedArray(pathInput)) { return clonePath(pathInput); } - var pathArray = pathToAbsolute(pathInput, round); - var params = { - x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, - }; + var path = pathToAbsolute(pathInput); + var params = Object.assign({}, paramsParser); var allPathCommands = []; - var ii = pathArray.length; + var ii = path.length; + var pathCommand = ''; var prevCommand = ''; - var segment; - var seglen; for (var i = 0; i < ii; i += 1) { - // save current path command - var ref = pathArray[i]; - var pathCommand = ref[0]; + (assign = path[i], pathCommand = assign[0]); // Save current path command allPathCommands[i] = pathCommand; // Get previous path command if (i) { prevCommand = allPathCommands[i - 1]; } - // Previous path command is inputted to processSegment - pathArray[i] = normalizeSegment(pathArray[i], params, prevCommand); + // Previous path command is used to normalizeSegment + // @ts-ignore -- expected on normalization + path[i] = normalizeSegment(path[i], params, prevCommand); - segment = pathArray[i]; - seglen = segment.length; + var segment = path[i]; + var seglen = segment.length; params.x1 = +segment[seglen - 2]; params.y1 = +segment[seglen - 1]; params.x2 = +(segment[seglen - 4]) || params.x1; params.y2 = +(segment[seglen - 3]) || params.y1; } - return roundPath(pathArray, round); + + // @ts-ignore -- a `normalArray` is absolutely an `absoluteArray` + return path; } + /** + * Checks a `pathArray` for an unnecessary `Z` segment + * and returns a new `pathArray` without it. + * + * The `pathInput` must be a single path, without + * sub-paths. For multi-path `` elements, + * use `splitPath` first and apply this utility on each + * sub-path separately. + * + * @param {SVGPathCommander.pathArray | string} pathInput the `pathArray` source + * @return {SVGPathCommander.pathArray} a fixed `pathArray` + */ + function fixPath(pathInput) { + var pathArray = parsePathString(pathInput); + var normalArray = normalizePath(pathArray); + var length = pathArray.length; + var isClosed = normalArray.slice(-1)[0][0] === 'Z'; + var segBeforeZ = isClosed ? length - 2 : length - 1; + + var ref = normalArray[0].slice(1); + var mx = ref[0]; + var my = ref[1]; + var ref$1 = normalArray[segBeforeZ].slice(-2); + var x = ref$1[0]; + var y = ref$1[1]; + + if (isClosed && mx === x && my === y) { + // @ts-ignore -- `pathSegment[]` is a `pathArray` + return pathArray.slice(0, -1); + } + return pathArray; + } + + /** + * Iterates an array to check if it's a `pathArray` + * with all C (cubic bezier) segments. + * + * @param {SVGPathCommander.pathArray} path the `Array` to be checked + * @returns {boolean} iteration result + */ + function isCurveArray(path) { + return isPathArray(path) && path.every(function (seg) { return 'MC'.includes(seg[0]); }); + } + + /** + * Returns an {x,y} vector rotated by a given + * angle in radian. + * + * @param {number} x the initial vector x + * @param {number} y the initial vector y + * @param {number} rad the radian vector angle + * @returns {{x: number, y: number}} the rotated vector + */ function rotateVector(x, y, rad) { var X = x * Math.cos(rad) - y * Math.sin(rad); var Y = x * Math.sin(rad) + y * Math.cos(rad); return { x: X, y: Y }; } - // for more information of where this math came from visit: - // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes - // LAF = largeArcFlag, SF = sweepFlag + /** + * Converts A (arc-to) segments to C (cubic-bezier-to). + * + * For more information of where this math came from visit: + * http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes + * + * @param {number} X1 the starting x position + * @param {number} Y1 the starting y position + * @param {number} RX x-radius of the arc + * @param {number} RY y-radius of the arc + * @param {number} angle x-axis-rotation of the arc + * @param {number} LAF large-arc-flag of the arc + * @param {number} SF sweep-flag of the arc + * @param {number} X2 the ending x position + * @param {number} Y2 the ending y position + * @param {number[]=} recursive the parameters needed to split arc into 2 segments + * @return {number[]} the resulting cubic-bezier segment(s) + */ + function arcToCubic(X1, Y1, RX, RY, angle, LAF, SF, X2, Y2, recursive) { + var assign; - function arcToCubic(x1, y1, rx, ry, angle, LAF, SF, x2, y2, recursive) { + var x1 = X1; var y1 = Y1; var rx = RX; var ry = RY; var x2 = X2; var y2 = Y2; + // for more information of where this Math came from visit: + // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes var d120 = (Math.PI * 120) / 180; - var rad = (Math.PI / 180) * (angle || 0); + + var rad = (Math.PI / 180) * (+angle || 0); + /** @type {number[]} */ var res = []; - var X1 = x1; - var X2 = x2; - var Y1 = y1; - var Y2 = y2; - var RX = rx; - var RY = ry; var xy; var f1; var f2; @@ -2731,41 +3458,39 @@ var cy; if (!recursive) { - xy = rotateVector(X1, Y1, -rad); - X1 = xy.x; - Y1 = xy.y; - xy = rotateVector(X2, Y2, -rad); - X2 = xy.x; - Y2 = xy.y; + xy = rotateVector(x1, y1, -rad); + x1 = xy.x; + y1 = xy.y; + xy = rotateVector(x2, y2, -rad); + x2 = xy.x; + y2 = xy.y; - var x = (X1 - X2) / 2; - var y = (Y1 - Y2) / 2; - var h = (x * x) / (RX * RY) + (Math.pow( y, 2 )) / (Math.pow( RY, 2 )); + var x = (x1 - x2) / 2; + var y = (y1 - y2) / 2; + var h = (x * x) / (rx * rx) + (y * y) / (ry * ry); if (h > 1) { h = Math.sqrt(h); - RX *= h; - RY *= h; + rx *= h; + ry *= h; } - var rx2 = Math.pow( RX, 2 ); - var ry2 = Math.pow( RY, 2 ); + var rx2 = rx * rx; + var ry2 = ry * ry; + var k = (LAF === SF ? -1 : 1) - * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) - / (rx2 * y * y + ry2 * x * x))); + * Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) + / (rx2 * y * y + ry2 * x * x))); - cx = ((k * RX * y) / RY) + ((X1 + X2) / 2); - cy = ((k * -RY * x) / RX) + ((Y1 + Y2) / 2); - - // f1 = Math.asin(((Y1 - cy) / RY).toFixed(9)); // keep toFIxed(9)! - // f2 = Math.asin(((Y2 - cy) / RY).toFixed(9)); - f1 = Math.asin((((Y1 - cy) / RY) * Math.pow( 10, 9 ) >> 0) / (Math.pow( 10, 9 ))); - f2 = Math.asin((((Y2 - cy) / RY) * Math.pow( 10, 9 ) >> 0) / (Math.pow( 10, 9 ))); - - f1 = X1 < cx ? Math.PI - f1 : f1; - f2 = X2 < cx ? Math.PI - f2 : f2; - - if (f1 < 0) { f1 = Math.PI * 2 + f1; } - if (f2 < 0) { f2 = Math.PI * 2 + f2; } + cx = ((k * rx * y) / ry) + ((x1 + x2) / 2); + cy = ((k * -ry * x) / rx) + ((y1 + y2) / 2); + // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise + f1 = (Math.asin((((y1 - cy) / ry))) * (Math.pow( 10, 9 )) >> 0) / (Math.pow( 10, 9 )); + // eslint-disable-next-line no-bitwise -- Impossible to satisfy no-bitwise + f2 = (Math.asin((((y2 - cy) / ry))) * (Math.pow( 10, 9 )) >> 0) / (Math.pow( 10, 9 )); + f1 = x1 < cx ? Math.PI - f1 : f1; + f2 = x2 < cx ? Math.PI - f2 : f2; + if (f1 < 0) { (f1 = Math.PI * 2 + f1); } + if (f2 < 0) { (f2 = Math.PI * 2 + f2); } if (SF && f1 > f2) { f1 -= Math.PI * 2; } @@ -2773,55 +3498,56 @@ f2 -= Math.PI * 2; } } else { - var r1 = recursive[0]; - var r2 = recursive[1]; - var r3 = recursive[2]; - var r4 = recursive[3]; - f1 = r1; - f2 = r2; - cx = r3; - cy = r4; + (assign = recursive, f1 = assign[0], f2 = assign[1], cx = assign[2], cy = assign[3]); } - var df = f2 - f1; - if (Math.abs(df) > d120) { - var f2old = f2; var x2old = X2; var - y2old = Y2; - + var f2old = f2; + var x2old = x2; + var y2old = y2; f2 = f1 + d120 * (SF && f2 > f1 ? 1 : -1); - X2 = cx + RX * Math.cos(f2); - Y2 = cy + RY * Math.sin(f2); - res = arcToCubic(X2, Y2, RX, RY, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]); + x2 = cx + rx * Math.cos(f2); + y2 = cy + ry * Math.sin(f2); + res = arcToCubic(x2, y2, rx, ry, angle, 0, SF, x2old, y2old, [f2, f2old, cx, cy]); } - df = f2 - f1; var c1 = Math.cos(f1); var s1 = Math.sin(f1); var c2 = Math.cos(f2); var s2 = Math.sin(f2); var t = Math.tan(df / 4); - var hx = (4 / 3) * RX * t; - var hy = (4 / 3) * RY * t; - var m1 = [X1, Y1]; - var m2 = [X1 + hx * s1, Y1 - hy * c1]; - var m3 = [X2 + hx * s2, Y2 - hy * c2]; - var m4 = [X2, Y2]; + var hx = (4 / 3) * rx * t; + var hy = (4 / 3) * ry * t; + var m1 = [x1, y1]; + var m2 = [x1 + hx * s1, y1 - hy * c1]; + var m3 = [x2 + hx * s2, y2 - hy * c2]; + var m4 = [x2, y2]; m2[0] = 2 * m1[0] - m2[0]; m2[1] = 2 * m1[1] - m2[1]; - if (recursive) { - return [m2, m3, m4].concat(res); + return m2.concat( m3, m4, res); } - res = [m2, m3, m4].concat(res).join().split(','); - return res.map(function (rz, i) { - if (i % 2) { - return rotateVector(res[i - 1], rz, rad).y; - } - return rotateVector(rz, res[i + 1], rad).x; - }); + res = m2.concat( m3, m4, res); + var newres = []; + for (var i = 0, ii = res.length; i < ii; i += 1) { + newres[i] = i % 2 + ? rotateVector(res[i - 1], res[i], rad).y + : rotateVector(res[i], res[i + 1], rad).x; + } + return newres; } + /** + * Converts a Q (quadratic-bezier) segment to C (cubic-bezier). + * + * @param {number} x1 curve start x + * @param {number} y1 curve start y + * @param {number} qx control point x + * @param {number} qy control point y + * @param {number} x2 curve end x + * @param {number} y2 curve end y + * @returns {number[]} the cubic-bezier segment + */ function quadToCubic(x1, y1, qx, qy, x2, y2) { var r13 = 1 / 3; var r23 = 2 / 3; @@ -2833,7 +3559,21 @@ x2, y2 ]; } - // t = [0-1] + /** + * Returns the {x,y} coordinates of a point at a + * given length of a cubic-bezier segment. + * + * @param {number} p1x the starting point X + * @param {number} p1y the starting point Y + * @param {number} c1x the first control point X + * @param {number} c1y the first control point Y + * @param {number} c2x the second control point X + * @param {number} c2y the second control point Y + * @param {number} p2x the ending point X + * @param {number} p2y the ending point Y + * @param {number} t a [0-1] ratio + * @returns {{x: number, y: number}} the requested {x,y} coordinates + */ function getPointAtSegLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) { var t1 = 1 - t; return { @@ -2848,116 +3588,241 @@ }; } + /** + * Returns the coordinates of a specified distance + * ratio between two points. + * + * @param {[number, number]} a the first point coordinates + * @param {[number, number]} b the second point coordinates + * @param {number} t the ratio + * @returns {[number, number]} the midpoint coordinates + */ function midPoint(a, b, t) { var ax = a[0]; - var ay = a[1]; - var bx = b[0]; + var ay = a[1]; var bx = b[0]; var by = b[1]; return [ax + (bx - ax) * t, ay + (by - ay) * t]; } + /** + * Converts an L (line-to) segment to C (cubic-bezier). + * + * @param {number} x1 line start x + * @param {number} y1 line start y + * @param {number} x2 line end x + * @param {number} y2 line end y + * @returns {number[]} the cubic-bezier segment + */ function lineToCubic(x1, y1, x2, y2) { var t = 0.5; + /** @type {[number, number]} */ var p0 = [x1, y1]; + /** @type {[number, number]} */ var p1 = [x2, y2]; var p2 = midPoint(p0, p1, t); var p3 = midPoint(p1, p2, t); var p4 = midPoint(p2, p3, t); var p5 = midPoint(p3, p4, t); var p6 = midPoint(p4, p5, t); - var cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t)); - var cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0)); + // const cp1 = getPointAtSegLength.apply(0, p0.concat(p2, p4, p6, t)); + var seg1 = p0.concat( p2, p4, p6, [t]); + // @ts-ignore + var cp1 = getPointAtSegLength.apply(void 0, seg1); + // const cp2 = getPointAtSegLength.apply(0, p6.concat(p5, p3, p1, 0)); + var seg2 = p6.concat( p5, p3, p1, [0]); + // @ts-ignore + var cp2 = getPointAtSegLength.apply(void 0, seg2); return [cp1.x, cp1.y, cp2.x, cp2.y, x2, y2]; } + /** + * Converts any segment to C (cubic-bezier). + * + * @param {SVGPathCommander.pathSegment} segment the source segment + * @param {SVGPathCommander.parserParams} params the source segment parameters + * @returns {SVGPathCommander.cubicSegment | SVGPathCommander.MSegment} the cubic-bezier segment + */ function segmentToCubic(segment, params) { - if ('TQ'.indexOf(segment[0]) < 0) { + var pathCommand = segment[0]; + var values = segment.slice(1).map(function (n) { return +n; }); + var x = values[0]; + var y = values[1]; + var args; + var px1 = params.x1; + var py1 = params.y1; + var px = params.x; + var py = params.y; + + if (!'TQ'.includes(pathCommand)) { params.qx = null; params.qy = null; } - var ref = segment.slice(1); - var s1 = ref[0]; - var s2 = ref[1]; - - switch (segment[0]) { + switch (pathCommand) { case 'M': - params.x = s1; - params.y = s2; + params.x = x; + params.y = y; return segment; case 'A': - return ['C'].concat(arcToCubic.apply(0, [params.x1, params.y1].concat(segment.slice(1)))); + args = [px1, py1 ].concat( values); + // @ts-ignore -- relax, the utility will return 6 numbers + return ['C' ].concat( arcToCubic.apply(void 0, args)); case 'Q': - params.qx = s1; - params.qy = s2; - return ['C'].concat(quadToCubic.apply(0, [params.x1, params.y1].concat(segment.slice(1)))); + params.qx = x; + params.qy = y; + args = [px1, py1 ].concat( values); + // @ts-ignore -- also returning 6 numbers + return ['C' ].concat( quadToCubic.apply(void 0, args)); case 'L': - return ['C'].concat(lineToCubic(params.x1, params.y1, segment[1], segment[2])); + // @ts-ignore -- also returning 6 numbers + return ['C' ].concat( lineToCubic(px1, py1, x, y)); case 'Z': - return ['C'].concat(lineToCubic(params.x1, params.y1, params.x, params.y)); + // @ts-ignore -- also returning 6 numbers + return ['C' ].concat( lineToCubic(px1, py1, px, py)); } + // @ts-ignore -- we're switching `pathSegment` type return segment; } - function pathToCurve(pathInput, round) { + /** + * Parses a path string value or 'pathArray' and returns a new one + * in which all segments are converted to cubic-bezier. + * + * In addition, un-necessary `Z` segment is removed if previous segment + * extends to the `M` segment. + * + * @param {SVGPathCommander.pathArray} pathInput the string to be parsed or 'pathArray' + * @returns {SVGPathCommander.curveArray} the resulted `pathArray` converted to cubic-bezier + */ + function pathToCurve(pathInput) { var assign; - // pathArray|pathString + if (isCurveArray(pathInput)) { return clonePath(pathInput); } - var pathArray = normalizePath(pathInput, round); - var params = { - x1: 0, y1: 0, x2: 0, y2: 0, x: 0, y: 0, qx: null, qy: null, - }; + var path = fixPath(normalizePath(pathInput)); + var params = Object.assign({}, paramsParser); var allPathCommands = []; - var pathCommand = ''; - var ii = pathArray.length; - var segment; - var seglen; + var pathCommand = ''; // ts-lint + var ii = path.length; for (var i = 0; i < ii; i += 1) { - if (pathArray[i]) { (assign = pathArray[i], pathCommand = assign[0]); } - + (assign = path[i], pathCommand = assign[0]); allPathCommands[i] = pathCommand; - pathArray[i] = segmentToCubic(pathArray[i], params); - fixArc(pathArray, allPathCommands, i); - ii = pathArray.length; // solves curveArrays ending in Z + path[i] = segmentToCubic(path[i], params); - segment = pathArray[i]; - seglen = segment.length; + fixArc(path, allPathCommands, i); + ii = path.length; + var segment = path[i]; + var seglen = segment.length; params.x1 = +segment[seglen - 2]; params.y1 = +segment[seglen - 1]; params.x2 = +(segment[seglen - 4]) || params.x1; params.y2 = +(segment[seglen - 3]) || params.y1; } - return roundPath(pathArray, round); + + // @ts-ignore + return path; } - function pathToString(pathArray) { - return pathArray.map(function (x) { return x[0].concat(x.slice(1).join(' ')); }).join(''); + /** + * SVGPathCommander default options + * @type {SVGPathCommander.options} + */ + var defaultOptions = { + origin: [0, 0, 0], + round: 4, + }; + + /** + * Rounds the values of a `pathArray` instance to + * a specified amount of decimals and returns it. + * + * @param {SVGPathCommander.pathArray} path the source `pathArray` + * @param {number | boolean} roundOption the amount of decimals to round numbers to + * @returns {SVGPathCommander.pathArray} the resulted `pathArray` with rounded values + */ + function roundPath(path, roundOption) { + var round = defaultOptions.round; + if (roundOption === false || round === false) { return clonePath(path); } + round = roundOption >= 1 ? roundOption : round; + // to round values to the power + // the `round` value must be integer + // @ts-ignore + var pow = round >= 1 ? (Math.pow( 10, round )) : 1; + + // @ts-ignore -- `pathSegment[]` is `pathArray` + return path.map(function (pi) { + var values = pi.slice(1).map(Number) + .map(function (n) { return (n % 1 === 0 ? n : Math.round(n * pow) / pow); }); + return [pi[0] ].concat( values); + }); } + /** + * Returns a valid `d` attribute string value created + * by rounding values and concatenating the `pathArray` segments. + * + * @param {SVGPathCommander.pathArray} path the `pathArray` object + * @param {any} round amount of decimals to round values to + * @returns {string} the concatenated path string + */ + function pathToString(path, round) { + return roundPath(path, round) + .map(function (x) { return x[0] + x.slice(1).join(' '); }).join(''); + } + + /** + * Split a path into an `Array` of sub-path strings. + * + * In the process, values are converted to absolute + * for visual consistency. + * + * @param {SVGPathCommander.pathArray | string} pathInput the source `pathArray` + * @return {string[]} an array with all sub-path strings + */ function splitPath(pathInput) { - return pathToString(pathToAbsolute(pathInput, 0)) + return pathToString(pathToAbsolute(pathInput), 0) .replace(/(m|M)/g, '|$1') .split('|') .map(function (s) { return s.trim(); }) .filter(function (s) { return s; }); } + /** + * @param {number} p1 + * @param {number} p2 + * @param {number} p3 + * @param {number} p4 + * @param {number} t a [0-1] ratio + * @returns {number} + */ function base3(p1, p2, p3, p4, t) { var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4; var t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3; return t * t2 - 3 * p1 + 3 * p2; } - // returns the cubic bezier segment length + /** + * Returns the C (cubic-bezier) segment length. + * + * @param {number} x1 the starting point X + * @param {number} y1 the starting point Y + * @param {number} x2 the first control point X + * @param {number} y2 the first control point Y + * @param {number} x3 the second control point X + * @param {number} y3 the second control point Y + * @param {number} x4 the ending point X + * @param {number} y4 the ending point Y + * @param {number} z a [0-1] ratio + * @returns {number} the cubic-bezier segment length + */ function getSegCubicLength(x1, y1, x2, y2, x3, y3, x4, y4, z) { - var Z; + var Z = z; if (z === null || Number.isNaN(+z)) { Z = 1; } // Z = Z > 1 ? 1 : Z < 0 ? 0 : Z; @@ -2981,34 +3846,50 @@ return z2 * sum; } - // calculates the shape total length - // equivalent to shape.getTotalLength() - // pathToCurve version - function getPathLength(pathArray, round) { + /** + * Returns the shape total length, + * or the equivalent to `shape.getTotalLength()` + * pathToCurve version + * + * @param {SVGPathCommander.pathArray} path the target `pathArray` + * @returns {number} the shape total length + */ + function getPathLength(path) { var totalLength = 0; - pathToCurve(pathArray, round).forEach(function (s, i, curveArray) { - totalLength += s[0] !== 'M' ? getSegCubicLength.apply(0, curveArray[i - 1].slice(-2).concat(s.slice(1))) : 0; + pathToCurve(path).forEach(function (s, i, curveArray) { + var args = s[0] !== 'M' ? curveArray[i - 1].slice(-2).concat( s.slice(1)) : []; + totalLength += s[0] === 'M' ? 0 + // @ts-ignore + : getSegCubicLength.apply(void 0, args); }); return totalLength; } - // calculates the shape total length - // almost equivalent to shape.getTotalLength() - function getPointAtLength(pathArray, length) { + /** + * Returns [x,y] coordinates of a point at a given length of a shape. + * + * @param {string | SVGPathCommander.pathArray} path the `pathArray` to look into + * @param {number} length the length of the shape to look at + * @returns {number[]} the requested [x,y] coordinates + */ + function getPointAtLength(path, length) { var totalLength = 0; var segLen; var data; var result; - - return pathToCurve(pathArray, 9).map(function (seg, i, curveArray) { // process data - data = i ? curveArray[i - 1].slice(-2).concat(seg.slice(1)) : seg.slice(1); - segLen = i ? getSegCubicLength.apply(0, data) : 0; + // @ts-ignore + return pathToCurve(path).map(function (seg, i, curveArray) { + data = i ? curveArray[i - 1].slice(-2).concat( seg.slice(1)) : seg.slice(1); + // @ts-ignore + segLen = i ? getSegCubicLength.apply(void 0, data) : 0; totalLength += segLen; if (i === 0) { result = { x: data[0], y: data[1] }; } else if (totalLength > length && length > totalLength - segLen) { - result = getPointAtSegLength.apply(0, data.concat(1 - (totalLength - length) / segLen)); + var args = data.concat( [1 - ((totalLength - length) / segLen)]); + // @ts-ignore + result = getPointAtSegLength.apply(void 0, args); } else { result = null; } @@ -3017,43 +3898,82 @@ }).filter(function (x) { return x; }).slice(-1)[0]; // isolate last segment } - // https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js - + /** + * Returns the area of a single segment shape. + * + * http://objectmix.com/graphics/133553-area-closed-bezier-curve.html + * + * @param {number} x0 the starting point X + * @param {number} y0 the starting point Y + * @param {number} x1 the first control point X + * @param {number} y1 the first control point Y + * @param {number} x2 the second control point X + * @param {number} y2 the second control point Y + * @param {number} x3 the ending point X + * @param {number} y3 the ending point Y + * @returns {number} the area of the cubic-bezier segment + */ function getCubicSegArea(x0, y0, x1, y1, x2, y2, x3, y3) { - // http://objectmix.com/graphics/133553-area-closed-bezier-curve.html return (3 * ((y3 - y0) * (x1 + x2) - (x3 - x0) * (y1 + y2) + (y1 * (x0 - x2)) - (x1 * (y0 - y2)) + (y3 * (x2 + x0 / 3)) - (x3 * (y2 + y0 / 3)))) / 20; } - function getPathArea(pathArray, round) { - var x = 0; var y = 0; var mx = 0; var my = 0; var - len = 0; - return pathToCurve(pathArray, round).map(function (seg) { - var assign; + /** + * Returns the area of a shape. + * @author Jürg Lehni & Jonathan Puckey + * + * => https://github.com/paperjs/paper.js/blob/develop/src/path/Path.js + * + * @param {SVGPathCommander.pathArray} path the shape `pathArray` + * @returns {number} the length of the cubic-bezier segment + */ + function getPathArea(path) { + var x = 0; var y = 0; + var len = 0; + return pathToCurve(path).map(function (seg) { + var assign, assign$1; switch (seg[0]) { case 'M': - case 'Z': - mx = seg[0] === 'M' ? seg[1] : mx; - my = seg[0] === 'M' ? seg[2] : my; - x = mx; - y = my; + (assign = seg, x = assign[1], y = assign[2]); return 0; default: - len = getCubicSegArea.apply(0, [x, y].concat(seg.slice(1))); - (assign = seg.slice(-2), x = assign[0], y = assign[1]); + // @ts-ignore -- the utility will have proper amount of params + len = getCubicSegArea.apply(void 0, [ x, y ].concat( seg.slice(1) )); + + (assign$1 = seg.slice(-2).map(Number), x = assign$1[0], y = assign$1[1]); return len; } }).reduce(function (a, b) { return a + b; }, 0); } - function getDrawDirection(pathArray, round) { - return getPathArea(pathToCurve(pathArray, round)) >= 0; + /** + * Check if a path is drawn clockwise and returns true if so, + * false otherwise. + * + * @param {SVGPathCommander.pathArray} path the path string or `pathArray` + * @returns {boolean} true when clockwise or false if not + */ + function getDrawDirection(path) { + return getPathArea(pathToCurve(path)) >= 0; } + /** + * A global namespace for epsilon. + * + * @type {number} + */ var epsilon = 1e-9; + /** + * Returns the square root of the distance + * between two given points. + * + * @param {[number, number]} a the first point coordinates + * @param {[number, number]} b the second point coordinates + * @returns {number} the distance value + */ function distanceSquareRoot(a, b) { return Math.sqrt( (a[0] - b[0]) * (a[0] - b[0]) @@ -3061,11 +3981,21 @@ ); } + /** + * Coordinates Interpolation Function. + * + * @param {number[][]} a start coordinates + * @param {number[][]} b end coordinates + * @param {string} l amount of coordinates + * @param {number} v progress + * @returns {number[][]} the interpolated coordinates + */ function coords(a, b, l, v) { var points = []; for (var i = 0; i < l; i += 1) { // for each point points[i] = []; for (var j = 0; j < 2; j += 1) { // each point coordinate + // eslint-disable-next-line no-bitwise points[i].push(((a[i][j] + (b[i][j] - a[i][j]) * v) * 1000 >> 0) / 1000); } } @@ -3080,44 +4010,47 @@ } */ // Component functions + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ function onStartSVGMorph(tweenProp) { - if (!KUTE$1[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE$1[tweenProp] = function (elem, a, b, v) { - var path1 = a.pathArray; var path2 = b.pathArray; var - len = path2.length; + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function (elem, a, b, v) { + var path1 = a.polygon; var path2 = b.polygon; + var len = path2.length; elem.setAttribute('d', (v === 1 ? b.original : ("M" + (coords(path1, path2, len, v).join('L')) + "Z"))); }; } } - /* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers,coords}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } - } */ - - // Component Interpolation - // function function(array1, array2, length, progress) - // Component Util // original script flubber // https://github.com/veltman/flubber - function polygonLength(ring) { - return ring.reduce(function (length, point, i) { return (i - ? length + distanceSquareRoot(ring[i - 1], point) + /** + * Returns polygon length. + * @param {KUTE.polygonMorph} polygon target polygon + * @returns {number} length + */ + function polygonLength(polygon) { + return polygon.reduce(function (length, point, i) { return (i + ? length + distanceSquareRoot(polygon[i - 1], point) : 0); }, 0); } + /** + * Returns an existing polygin and its length or false if not polygon. + * @param {SVGPathCommander.pathArray} pathArray target polygon + * @returns {KUTE.exactRing} length + */ function exactRing(pathArray) { var assign; - var ring = []; + var polygon = []; var pathlen = pathArray.length; var segment = []; var pathCommand = ''; - var pathLength = 0; if (!pathArray.length || pathArray[0][0] !== 'M') { return false; @@ -3129,54 +4062,68 @@ if ((pathCommand === 'M' && i) || pathCommand === 'Z') { break; // !! - } else if ('ML'.indexOf(pathCommand) > -1) { - ring.push([segment[1], segment[2]]); + } else if ('ML'.includes(pathCommand)) { + polygon.push([segment[1], segment[2]]); } else { return false; } } - pathLength = polygonLength(ring); - - return pathlen ? { ring: ring, pathLength: pathLength } : false; + return pathlen ? { polygon: polygon } : false; } - function approximateRing(parsed, maxSegmentLength) { + /** + * Returns polygon length. + * @param {SVGPathCommander.pathArray} parsed target polygon + * @param {number} maxLength the maximum segment length + * @returns {KUTE.exactRing} length + */ + function approximatePolygon(parsed, maxLength) { var ringPath = splitPath(pathToString(parsed))[0]; - var curvePath = pathToCurve(ringPath, 4); + var curvePath = pathToCurve(ringPath); var pathLength = getPathLength(curvePath); - var ring = []; + var polygon = []; var numPoints = 3; var point; - if (maxSegmentLength && !Number.isNaN(maxSegmentLength) && +maxSegmentLength > 0) { - numPoints = Math.max(numPoints, Math.ceil(pathLength / maxSegmentLength)); + if (maxLength && !Number.isNaN(maxLength) && +maxLength > 0) { + numPoints = Math.max(numPoints, Math.ceil(pathLength / maxLength)); } for (var i = 0; i < numPoints; i += 1) { point = getPointAtLength(curvePath, (pathLength * i) / numPoints); - ring.push([point.x, point.y]); + polygon.push([point.x, point.y]); } // Make all rings clockwise if (!getDrawDirection(curvePath)) { - ring.reverse(); + polygon.reverse(); } return { - pathLength: pathLength, - ring: ring, + polygon: polygon, skipBisect: true, }; } - function pathStringToRing(str, maxSegmentLength) { - var parsed = normalizePath(str, 0); - return exactRing(parsed) || approximateRing(parsed, maxSegmentLength); + /** + * Parses a path string and returns a polygon array. + * @param {string} str path string + * @param {number} maxLength maximum amount of points + * @returns {KUTE.exactRing} the polygon array we need + */ + function pathStringToPolygon(str, maxLength) { + var parsed = normalizePath(str); + return exactRing(parsed) || approximatePolygon(parsed, maxLength); } - function rotateRing(ring, vs) { - var len = ring.length; + /** + * Rotates a polygon to better match its pair. + * @param {KUTE.polygonMorph} polygon the target polygon + * @param {KUTE.polygonMorph} vs the reference polygon + */ + function rotatePolygon(polygon, vs) { + var len = polygon.length; var min = Infinity; var bestOffset; var sumOfSquares = 0; @@ -3187,13 +4134,9 @@ for (var offset = 0; offset < len; offset += 1) { sumOfSquares = 0; - // vs.forEach((p, i) => { - // const d = distanceSquareRoot(ring[(offset + i) % len], p); - // sumOfSquares += d * d; - // }); for (var i = 0; i < vs.length; i += 1) { p = vs[i]; - d = distanceSquareRoot(ring[(offset + i) % len], p); + d = distanceSquareRoot(polygon[(offset + i) % len], p); sumOfSquares += d * d; } @@ -3204,15 +4147,19 @@ } if (bestOffset) { - spliced = ring.splice(0, bestOffset); - ring.splice.apply(ring, [ ring.length, 0 ].concat( spliced )); + spliced = polygon.splice(0, bestOffset); + polygon.splice.apply(polygon, [ polygon.length, 0 ].concat( spliced )); } } - function addPoints(ring, numPoints) { - var desiredLength = ring.length + numPoints; - // const step = ring.pathLength / numPoints; - var step = polygonLength(ring) / numPoints; + /** + * Sample additional points for a polygon to better match its pair. + * @param {KUTE.polygonObject} polygon the target polygon + * @param {number} numPoints the amount of points needed + */ + function addPoints(polygon, numPoints) { + var desiredLength = polygon.length + numPoints; + var step = polygonLength(polygon) / numPoints; var i = 0; var cursor = 0; @@ -3221,14 +4168,14 @@ var b; var segment; - while (ring.length < desiredLength) { - a = ring[i]; - b = ring[(i + 1) % ring.length]; + while (polygon.length < desiredLength) { + a = polygon[i]; + b = polygon[(i + 1) % polygon.length]; segment = distanceSquareRoot(a, b); if (insertAt <= cursor + segment) { - ring.splice(i + 1, 0, segment + polygon.splice(i + 1, 0, segment ? midPoint(a, b, (insertAt - cursor) / segment) : a.slice(0)); insertAt += step; @@ -3239,50 +4186,66 @@ } } - function bisect(ring, maxSegmentLength) { + /** + * Split segments of a polygon until it reaches a certain + * amount of points. + * @param {number[][]} polygon the target polygon + * @param {number} maxSegmentLength the maximum amount of points + */ + function bisect(polygon, maxSegmentLength) { if ( maxSegmentLength === void 0 ) maxSegmentLength = Infinity; var a = []; var b = []; - for (var i = 0; i < ring.length; i += 1) { - a = ring[i]; - b = i === ring.length - 1 ? ring[0] : ring[i + 1]; + for (var i = 0; i < polygon.length; i += 1) { + a = polygon[i]; + b = i === polygon.length - 1 ? polygon[0] : polygon[i + 1]; // Could splice the whole set for a segment instead, but a bit messy while (distanceSquareRoot(a, b) > maxSegmentLength) { b = midPoint(a, b, 0.5); - ring.splice(i + 1, 0, b); + polygon.splice(i + 1, 0, b); } } } - function validRing(ring) { - return Array.isArray(ring) - && ring.every(function (point) { return Array.isArray(point) + /** + * Checks the validity of a polygon. + * @param {KUTE.polygonMorph} polygon the target polygon + * @returns {boolean} the result of the check + */ + function validPolygon(polygon) { + return Array.isArray(polygon) + && polygon.every(function (point) { return Array.isArray(point) && point.length === 2 && !Number.isNaN(point[0]) && !Number.isNaN(point[1]); }); } - function normalizeRing(input, maxSegmentLength) { - var skipBisect; - var pathLength; - var ring = input; + /** + * Returns a new polygon and its length from string or another `Array`. + * @param {KUTE.polygonMorph | string} input the target polygon + * @param {number} maxSegmentLength the maximum amount of points + * @returns {KUTE.polygonMorph} normalized polygon + */ + function getPolygon(input, maxSegmentLength) { + var assign; - if (typeof (ring) === 'string') { - var converted = pathStringToRing(ring, maxSegmentLength); - ring = converted.ring; - skipBisect = converted.skipBisect; - pathLength = converted.pathLength; - } else if (!Array.isArray(ring)) { - throw Error((invalidPathValue + ": " + ring)); + var skipBisect; + var polygon; + + if (typeof (input) === 'string') { + var converted = pathStringToPolygon(input, maxSegmentLength); + ((assign = converted, polygon = assign.polygon, skipBisect = assign.skipBisect)); + } else if (!Array.isArray(input)) { + throw Error((invalidPathValue + ": " + input)); } - var points = ring.slice(0); - points.pathLength = pathLength; + /** @type {KUTE.polygonMorph} */ + var points = [].concat( polygon ); - if (!validRing(points)) { + if (!validPolygon(points)) { throw Error((invalidPathValue + ": " + points)); } @@ -3300,39 +4263,56 @@ return points; } - function getInterpolationPoints(pathArray1, pathArray2, precision) { - var morphPrecision = precision || defaultOptions.morphPrecision; - var fromRing = normalizeRing(pathArray1, morphPrecision); - var toRing = normalizeRing(pathArray2, morphPrecision); + /** + * Returns two new polygons ready to tween. + * @param {string} path1 the first path string + * @param {string} path2 the second path string + * @param {number} precision the morphPrecision option value + * @returns {KUTE.polygonMorph[]} the two polygons + */ + function getInterpolationPoints(path1, path2, precision) { + var morphPrecision = precision || defaultOptions$1.morphPrecision; + var fromRing = getPolygon(path1, morphPrecision); + var toRing = getPolygon(path2, morphPrecision); var diff = fromRing.length - toRing.length; addPoints(fromRing, diff < 0 ? diff * -1 : 0); addPoints(toRing, diff > 0 ? diff : 0); - rotateRing(fromRing, toRing); + rotatePolygon(fromRing, toRing); return [roundPath(fromRing), roundPath(toRing)]; } // Component functions + /** + * Returns the current `d` attribute value. + * @returns {string} the `d` attribute value + */ function getSVGMorph(/* tweenProp */) { return this.element.getAttribute('d'); } - function prepareSVGMorph(tweenProp, value) { + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.polygonObject} value the property value + * @returns {KUTE.polygonObject} the property tween object + */ + function prepareSVGMorph(/* tweenProp */_, value) { var pathObject = {}; // remove newlines, they brake JSON strings sometimes var pathReg = new RegExp('\\n', 'ig'); var elem = null; - if (value instanceof SVGElement) { + if (value instanceof SVGPathElement) { elem = value; } else if (/^\.|^#/.test(value)) { elem = selector(value); } // first make sure we return pre-processed values - if (typeof (value) === 'object' && value.pathArray) { + if (typeof (value) === 'object' && value.polygon) { return value; } if (elem && ['path', 'glyph'].includes(elem.tagName)) { pathObject.original = elem.getAttribute('d').replace(pathReg, ''); @@ -3343,10 +4323,15 @@ return pathObject; } + + /** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} prop the `path` property name + */ function crossCheckSVGMorph(prop) { if (this.valuesEnd[prop]) { - var pathArray1 = this.valuesStart[prop].pathArray; - var pathArray2 = this.valuesEnd[prop].pathArray; + var pathArray1 = this.valuesStart[prop].polygon; + var pathArray2 = this.valuesEnd[prop].polygon; // skip already processed paths // allow the component to work with pre-processed values if (!pathArray1 || !pathArray2 @@ -3356,13 +4341,13 @@ // process morphPrecision var morphPrecision = this._morphPrecision ? parseInt(this._morphPrecision, 10) - : defaultOptions.morphPrecision; + : defaultOptions$1.morphPrecision; var ref = getInterpolationPoints(p1, p2, morphPrecision); var path1 = ref[0]; var path2 = ref[1]; - this.valuesStart[prop].pathArray = path1; - this.valuesEnd[prop].pathArray = path2; + this.valuesStart[prop].polygon = path1; + this.valuesEnd[prop].polygon = path2; } } } @@ -3376,27 +4361,29 @@ }; // Component Full - var svgMorph = { + var SVGMorph = { component: 'svgMorph', property: 'path', defaultValue: [], Interpolate: coords, - defaultOptions: { morphPrecision: 10, morphIndex: 0 }, + defaultOptions: { morphPrecision: 10 }, functions: svgMorphFunctions, // Export utils to global for faster execution Util: { + // component addPoints: addPoints, bisect: bisect, - normalizeRing: normalizeRing, - validRing: validRing, // component + getPolygon: getPolygon, + validPolygon: validPolygon, getInterpolationPoints: getInterpolationPoints, - pathStringToRing: pathStringToRing, + pathStringToPolygon: pathStringToPolygon, distanceSquareRoot: distanceSquareRoot, midPoint: midPoint, - approximateRing: approximateRing, - rotateRing: rotateRing, + approximatePolygon: approximatePolygon, + rotatePolygon: rotatePolygon, + // svg-path-commander pathToString: pathToString, - pathToCurve: pathToCurve, // svg-path-commander + pathToCurve: pathToCurve, getPathLength: getPathLength, getPointAtLength: getPointAtLength, getDrawDirection: getDrawDirection, @@ -3405,14 +4392,14 @@ }; var Components = { - EssentialBoxModel: essentialBoxModel, + EssentialBoxModel: BoxModelEssential, ColorsProperties: colorProperties, HTMLAttributes: htmlAttributes, - OpacityProperty: opacityProperty, - TextWrite: textWrite, - TransformFunctions: transformFunctionsComponent, - SVGDraw: svgDraw, - SVGMorph: svgMorph, + OpacityProperty: OpacityProperty, + TextWriteProp: TextWrite, + TransformFunctions: TransformFunctions, + SVGDraw: SvgDrawProperty, + SVGMorph: SVGMorph, }; // init components @@ -3421,7 +4408,17 @@ Components[component] = new Animation(compOps); }); - var version = "2.1.3"; + var version = "2.2.0alpha2"; + + // @ts-ignore + + /** + * A global namespace for library version. + * @type {string} + */ + var Version = version; + + // KUTE.js standard distribution version var KUTE = { Animation: Animation, @@ -3442,11 +4439,11 @@ Easing: Easing, CubicBezier: CubicBezier, Render: Render, - Interpolate: Interpolate, + Interpolate: interpolate, Process: Process, - Internals: Internals, + Internals: internals, Selector: selector, - Version: version, + Version: Version, }; return KUTE; diff --git a/dist/kute.min.js b/dist/kute.min.js index f3ae0b3..9701ab8 100644 --- a/dist/kute.min.js +++ b/dist/kute.min.js @@ -1,2 +1,2 @@ -// KUTE.js Standard v2.1.3 | thednp © 2021 | MIT-License -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t=function(t,e,n,r,a){var i=this;this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;var s=function(t){return i.sampleCurveY(i.solveCurveX(t))};return Object.defineProperty(s,"name",{writable:!0}),s.name=a||"cubic-bezier("+[t,e,n,r]+")",s};t.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},t.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},t.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},t.prototype.solveCurveX=function(t){var e,n,r,a,i,s,o=1e-5;for(r=t,s=0;s<32;s+=1){if(a=this.sampleCurveX(r)-t,Math.abs(a)(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var e={},n=[],r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},a={},i={},s="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},o={};o.now=s;var u=0,c=function(t){for(var e=0;e1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=N,d.repeat=0,d.repeatDelay=0,d.yoyo=!1,d.resetStart=!1;var V=function(t){function n(){for(var e=this,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),this.valuesStart={},this.valuesEnd={};var a=n[1],i=n[2];T.call(this,i,"end"),this._resetStart?this.valuesStart=a:T.call(this,a,"start"),this._resetStart||Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(n){g[t][n].call(e,n)}))})),this.paused=!1,this._pauseTime=null;var s=n[3];return this._repeat=s.repeat||d.repeat,this._repeatDelay=s.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=s.yoyo||d.yoyo,this._reversed=!1,this}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.start=function(e){var n=this;return this._resetStart&&(this.valuesStart=this._resetStart,S.call(this),Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(e){g[t][e].call(n,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((function(t){n.valuesRepeat[t]=n.valuesStart[t]})),t.prototype.start.call(this,e),this},n.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),P.call(this),this._startTime+=e.Time()-this._pauseTime,E(this),u||c()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){var t=this;Object.keys(this.valuesEnd).forEach((function(e){var n=t.valuesRepeat[e];t.valuesRepeat[e]=t.valuesEnd[e],t.valuesEnd[e]=n,t.valuesStart[e]=t.valuesRepeat[e]}))},n.prototype.update=function(t){var n,r=this,a=void 0!==t?t:e.Time();if(a1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=a,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.start()})),!1))},n}(N);A.tween=V;var q=function(t,e,n,r){var a=this;this.tweens=[],"offset"in d||(d.offset=0);var i=r||{};i.delay=i.delay||d.delay;var s=[];return Array.from(t).forEach((function(t,r){var o=A.tween;if(s[r]=i||{},s[r].delay=r>0?i.delay+(i.offset||d.offset):i.delay,!(t instanceof Element))throw Error("KUTE.js - "+t+" not instanceof [Element]");a.tweens.push(new o(t,e,n,s[r]))})),this.length=this.tweens.length,this};q.prototype.start=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.start(n)})),this},q.prototype.stop=function(){return this.tweens.map((function(t){return t.stop()})),this},q.prototype.pause=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.pause(n)})),this},q.prototype.resume=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.resume(n)})),this},q.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof q)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},q.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},q.prototype.removeTweens=function(){this.tweens=[]},q.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var H=function(t){try{if(t.component in p)throw Error("KUTE.js - "+t.component+" already registered");if(t.property in f)throw Error("KUTE.js - "+t.property+" already registered");this.setComponent(t)}catch(t){throw Error(t)}};function D(t,e){for(var n,r=parseInt(t,10)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i.99||a<.01?(10*F(n,r,a)>>0)/10:F(n,r,a)>>0)+"px"})}H.prototype.setComponent=function(t){var e=this,n=t.component,r={prepareProperty:v,prepareStart:y,onStart:i,onComplete:m,crossCheck:g},s=t.category,o=t.property,u=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return p[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(f[o]=t.defaultValue,e.supports=o+" property"):t.defaultValues&&(Object.keys(t.defaultValues).forEach((function(e){f[e]=t.defaultValues[e]})),e.supports=(u||o)+" "+(o||s)+" properties"),t.defaultOptions&&Object.keys(t.defaultOptions).forEach((function(e){d[e]=t.defaultOptions[e]})),t.functions&&Object.keys(r).forEach((function(e){e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][s||o]||(r[e][n][s||o]=t.functions[e])):Object.keys(t.functions[e]).forEach((function(a){r[e][n]||(r[e][n]={}),r[e][n][a]||(r[e][n][a]=t.functions[e][a])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),b[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){w[e]||(w[e]=t.Util[e])})),e};var U={};["top","left","width","height"].forEach((function(t){U[t]=Q}));var R=["top","left","width","height"],X={};R.forEach((function(t){X[t]=Q}));var B={component:"essentialBoxModel",category:"boxModel",properties:R,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:F},functions:{prepareStart:function(t){return C(this.element,t)||f[t]},prepareProperty:function(t,e){var n=D(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:X},Util:{trueDimension:D}};function Z(t){var e;if(/rgb|rgba/.test(t)){var n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){var a=function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r})),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);e={r:a.r,g:a.g,b:a.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var s=getComputedStyle(i,null).color;s=/rgb/.test(s)?s.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",e={r:parseInt(s[0],10),g:parseInt(s[1],10),b:parseInt(s[2],10)}}return e}function z(t,e,n){var r={},a=",";return Object.keys(e).forEach((function(a){"a"!==a?r[a]=F(t[a],e[a],n)>>0||0:t[a]&&e[a]&&(r[a]=(100*F(t[a],e[a],n)>>0)/100)})),r.a?"rgba("+r.r+a+r.g+a+r.b+a+r.a+")":"rgb("+r.r+a+r.g+a+r.b+")"}function Y(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=z(n,r,a)})}var K={};["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"].forEach((function(t){K[t]=Y}));var $=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],W={};$.forEach((function(t){W[t]="#000"}));var G={};$.forEach((function(t){G[t]=Y}));var J={component:"colorProperties",category:"colors",properties:$,defaultValues:W,Interpolate:{numbers:F,colors:z},functions:{prepareStart:function(t){return C(this.element,t)||f[t]},prepareProperty:function(t,e){return Z(e)},onStart:G},Util:{trueColor:Z}},tt={},et="htmlAttributes",nt=["fill","stroke","stop-color"];function rt(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var at={prepareStart:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(t){var e=rt(t).replace(/_+[a-z]+/,""),a=n.element.getAttribute(e);r[e]=nt.includes(e)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(t)?1:0)})),r},prepareProperty:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(a){var s=rt(a),o=/(%|[a-z]+)$/,u=n.element.getAttribute(s.replace(/_+[a-z]+/,""));if(nt.includes(s))i.htmlAttributes[s]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,a){t.setAttribute(e,z(n,r,a))})},r[s]=Z(e[a])||f.htmlAttributes[a];else if(null!==u&&o.test(u)){var c=D(u).u||D(e[a]).u,l=/%/.test(c)?"_percent":"_"+c;i.htmlAttributes[s+l]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*F(n.v,r.v,a)>>0)/1e3+r.u)})},r[s+l]=D(e[a])}else o.test(e[a])&&null!==u&&(null===u||o.test(u))||(i.htmlAttributes[s]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in tt)&&(tt[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*F(n,r,a)>>0)/1e3)})},r[s]=parseFloat(e[a]))})),r},onStart:{attr:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,n,r,a){Object.keys(r).forEach((function(i){e.attributes[i](t,i,n[i],r[i],a)}))})},attributes:function(t){!e[t]&&this.valuesEnd.attr&&(e[t]=tt)}}},it={component:et,property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:F,colors:z},functions:at,Util:{replaceUppercase:rt,trueColor:Z,trueDimension:D}};var st={prepareStart:function(t){return C(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(1e3*F(n,r,a)>>0)/1e3})}},ot={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:F},functions:st},ut=String("abcdefghijklmnopqrstuvwxyz").split(""),ct=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),lt=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ht=String("0123456789").split(""),pt=ut.concat(ct,ht),ft=pt.concat(lt),dt={alpha:ut,upper:ct,symbols:lt,numeric:ht,alphanumeric:pt,all:ft},vt={text:function(t){if(!e[t]&&this.valuesEnd[t]){var n=this._textChars,r=dt[d.textChars];n in dt?r=dt[n]:n&&n.length&&(r=n),e[t]=function(t,e,n,a){var i="",s="",o=""===n?" ":n,u=e.substring(0),c=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(s=c.substring(Math.min(a*c.length,c.length)>>0,0),t.innerHTML=a<1?s+l:o):" "===n?(i=u.substring(0,Math.min((1-a)*u.length,u.length)>>0),t.innerHTML=a<1?i+l:o):(i=u.substring(u.length,Math.min(a*u.length,u.length)>>0),s=c.substring(0,Math.min(a*c.length,c.length)>>0),t.innerHTML=a<1?s+l+i:o)}}},number:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(t,e,n,r){t.innerHTML=F(e,n,r)>>0})}};function yt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function gt(t,e){var n=[],r=t.children.length;if(r){for(var a,i=[],s=t.innerHTML,o=0,u=void 0,c=void 0,l=void 0;o>0)/1e3+n+")"}function bt(t,e,n,r){for(var a=[],i=0;i<3;i+=1)a[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+a.join(",")+")"}function xt(t,e,n,r){var a="";return a+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",a+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",a+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function wt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function Et(t,e,n,r){var a=[];return a[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+a.join(",")+")"}function Mt(t,e){return parseFloat(t)/100*e}function _t(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function kt(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!==t&&void 0!==e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*F(e.s,n.s,r)>>0)/100,s=(100*F(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(s<1?0:s)>>0)/100+"px, "+a+"px"})}},jt=4;function Lt(t){return t.map((function(t){return Array.isArray(t)?Lt(t):Number.isNaN(+t)?t:+t}))}function Pt(t,e){var n=Number.isNaN(+e)?jt:+e;return n?t.map((function(t){return t.map((function(t){var e=+t,r=Math.pow(10,n);return e?e%1==0?e:Math.round(e*r)/r:t}))})):Lt(t)}function Nt(t,e,n){if(t[n].length>7){t[n].shift();for(var r=t[n],a=n;r.length;)e[n]="A",t.splice(a+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}var Vt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Vt[e]===t.length-1&&/[achlmrqstvz]/g.test(e)}))}function Ht(t){var e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;if("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L"),"r"===n)t.segments.push([e].concat(r));else for(;r.length>=Vt[n]&&(t.segments.push([e].concat(r.splice(0,Vt[n]))),Vt[n]););}var Dt="Invalid path value";function Ft(t){var e=t.pathValue.charCodeAt(t.index);return 48===e?(t.param=0,void(t.index+=1)):49===e?(t.param=1,void(t.index+=1)):void(t.err=Dt+": invalid Arc flag "+e)}function Qt(t){return t>=48&&t<=57}function Ut(t){var e,n=t.index,r=t.max,a=n,i=!1,s=!1,o=!1,u=!1;if(a>=r)t.err=Dt+": missing param "+t.pathValue[a];else if(43!==(e=t.pathValue.charCodeAt(a))&&45!==e||(e=(a+=1)=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1;var e}function Xt(t){return t>=48&&t<=57||43===t||45===t||46===t}function Bt(t){var e=t.max,n=t.pathValue.charCodeAt(t.index),r=Vt[t.pathValue[t.index].toLowerCase()];if(t.segmentStart=t.index,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:case 114:return!0;default:return!1}}(n))if(t.index+=1,Rt(t),t.data=[],r){for(;;){for(var a=r;a>0;a-=1){if(97!=(32|n)||3!==a&&4!==a?Ut(t):Ft(t),t.err.length)return;t.data.push(t.param),Rt(t),t.index=t.max)break;if(!Xt(t.pathValue.charCodeAt(t.index)))break}Ht(t)}else Ht(t);else t.err=Dt+": "+t.pathValue[t.index]+" not a path command"}function Zt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function zt(t,e){if(function(t){return qt(t)&&t.every((function(t){return t[0]===t[0].toUpperCase()}))}(t))return Lt(t);var n=function(t,e){if(qt(t))return Lt(t);var n=new Zt(t);for(Rt(n);n.index-1?{x1:2*t-n,y1:2*e-r}:{x1:t,y1:e}}(e.x1,e.y1,e.x2,e.y2,n),o=s.x1,u=s.y1;e.x1=o,e.y1=u,i=["C",o,u].concat(a)}else if("T"===r){var c=function(t,e,n,r,a){return"QT".indexOf(a)>-1?{qx:2*t-n,qy:2*e-r}:{qx:t,qy:e}}(e.x1,e.y1,e.qx,e.qy,n),l=c.qx,h=c.qy;e.qx=l,e.qy=h,i=["Q",l,h].concat(a)}else if("Q"===r){var p=a[0],f=a[1];e.qx=p,e.qy=f}return i}function Kt(t,e){if(function(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Vt[e]===t.length-1&&/[ACLMQZ]/.test(t[0])}))}(t))return Lt(t);for(var n,r,a=zt(t,e),i={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},s=[],o=a.length,u="",c=0;c1&&(E*=O=Math.sqrt(O),M*=O);var C=Math.pow(E,2),T=Math.pow(M,2),S=(i===s?-1:1)*Math.sqrt(Math.abs((C*T-C*k*k-T*_*_)/(C*k*k+T*_*_)));f=S*E*k/M+(m+b)/2,d=S*-M*_/E+(x+w)/2,h=Math.asin(((x-d)/M*Math.pow(10,9)>>0)/Math.pow(10,9)),p=Math.asin(((w-d)/M*Math.pow(10,9)>>0)/Math.pow(10,9)),h=mp&&(h-=2*Math.PI),!s&&p>h&&(p-=2*Math.PI)}var I=p-h;if(Math.abs(I)>v){var A=p,j=b,L=w;p=h+v*(s&&p>h?1:-1),b=f+E*Math.cos(p),w=d+M*Math.sin(p),g=Wt(b,w,E,M,a,0,s,j,L,[p,A,f,d])}I=p-h;var P=Math.cos(h),N=Math.sin(h),V=Math.cos(p),q=Math.sin(p),H=Math.tan(I/4),D=4/3*E*H,F=4/3*M*H,Q=[m,x],U=[m+D*N,x-F*P],R=[b+D*q,w-F*V],X=[b,w];return U[0]=2*Q[0]-U[0],U[1]=2*Q[1]-U[1],c?[U,R,X].concat(g):(g=[U,R,X].concat(g).join().split(",")).map((function(t,e){return e%2?$t(g[e-1],t,y).y:$t(t,g[e+1],y).x}))}function Gt(t,e,n,r,a,i){var s=1/3,o=2/3;return[s*t+o*n,s*e+o*r,s*a+o*n,s*i+o*r,a,i]}function Jt(t,e,n,r,a,i,s,o,u){var c=1-u;return{x:Math.pow(c,3)*t+c*c*3*u*n+3*c*u*u*a+Math.pow(u,3)*s,y:Math.pow(c,3)*e+c*c*3*u*r+3*c*u*u*i+Math.pow(u,3)*o}}function te(t,e,n){var r=t[0],a=t[1];return[r+(e[0]-r)*n,a+(e[1]-a)*n]}function ee(t,e,n,r){var a=.5,i=[t,e],s=[n,r],o=te(i,s,a),u=te(s,o,a),c=te(o,u,a),l=te(u,c,a),h=te(c,l,a),p=Jt.apply(0,i.concat(o,c,h,a)),f=Jt.apply(0,h.concat(l,u,s,0));return[p.x,p.y,f.x,f.y,n,r]}function ne(t,e){"TQ".indexOf(t[0])<0&&(e.qx=null,e.qy=null);var n=t.slice(1),r=n[0],a=n[1];switch(t[0]){case"M":return e.x=r,e.y=a,t;case"A":return["C"].concat(Wt.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"Q":return e.qx=r,e.qy=a,["C"].concat(Gt.apply(0,[e.x1,e.y1].concat(t.slice(1))));case"L":return["C"].concat(ee(e.x1,e.y1,t[1],t[2]));case"Z":return["C"].concat(ee(e.x1,e.y1,e.x,e.y))}return t}function re(t,e){if(function(t){return qt(t)&&t.slice(1).every((function(t){return"C"===t[0]}))}(t))return Lt(t);for(var n,r,a=Kt(t,e),i={x1:0,y1:0,x2:0,y2:0,x:0,y:0,qx:null,qy:null},s=[],o="",u=a.length,c=0;c1&&(c=1),c<0&&(c=0);var l=c/2,h=0,p=0,f=0,d=0,v=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach((function(u,c){p=ie(t,n,a,s,h=l*u+l),f=ie(e,r,i,o,h),d+=v[c]*Math.sqrt(p*p+f*f)})),l*d}function oe(t,e){var n=0;return re(t,e).forEach((function(t,e,r){n+="M"!==t[0]?se.apply(0,r[e-1].slice(-2).concat(t.slice(1))):0})),n}function ue(t,e){var n,r,a=0;return re(t,9).map((function(t,i,s){return r=i?s[i-1].slice(-2).concat(t.slice(1)):t.slice(1),n=i?se.apply(0,r):0,a+=n,0===i?{x:r[0],y:r[1]}:a>e&&e>a-n?Jt.apply(0,r.concat(1-(a-e)/n)):null})).filter((function(t){return t})).slice(-1)[0]}function ce(t,e,n,r,a,i,s,o){return 3*((o-e)*(n+a)-(s-t)*(r+i)+r*(t-a)-n*(e-i)+o*(a+t/3)-s*(i+e/3))/20}function le(t,e){return function(t,e){var n=0,r=0,a=0,i=0,s=0;return re(t,e).map((function(t){var e;switch(t[0]){case"M":case"Z":return a="M"===t[0]?t[1]:a,i="M"===t[0]?t[2]:i,n=a,r=i,0;default:return s=ce.apply(0,[n,r].concat(t.slice(1))),e=t.slice(-2),n=e[0],r=e[1],s}})).reduce((function(t,e){return t+e}),0)}(re(t,e))>=0}function he(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function pe(t,e,n,r){for(var a=[],i=0;i>0)/1e3)}return a}function fe(t){return t.reduce((function(e,n,r){return r?e+he(t[r-1],n):0}),0)}function de(t,e){var n,r,a=re((n=ae(t),ae(zt(n,0)).replace(/(m|M)/g,"|$1").split("|").map((function(t){return t.trim()})).filter((function(t){return t})))[0],4),i=oe(a),s=[],o=3;e&&!Number.isNaN(e)&&+e>0&&(o=Math.max(o,Math.ceil(i/e)));for(var u=0;u-1))return!1;n.push([a[1],a[2]])}return e=fe(n),!!r&&{ring:n,pathLength:e}}(n)||de(n,e)}function ye(t,e){for(var n,r,a,i,s=t.length,o=1/0,u=0,c=0;ce;)r=te(n,r,.5),t.splice(a+1,0,r)}function be(t){return Array.isArray(t)&&t.every((function(t){return Array.isArray(t)&&2===t.length&&!Number.isNaN(t[0])&&!Number.isNaN(t[1])}))}function xe(t,e){var n,r,a=t;if("string"==typeof a){var i=ve(a,e);a=i.ring,n=i.skipBisect,r=i.pathLength}else if(!Array.isArray(a))throw Error(Dt+": "+a);var s=a.slice(0);if(s.pathLength=r,!be(s))throw Error(Dt+": "+s);return s.length>1&&he(s[0],s[s.length-1])<1e-9&&s.pop(),!n&&e&&!Number.isNaN(e)&&+e>0&&me(s,e),s}function we(t,e,n){var r=n||d.morphPrecision,a=xe(t,r),i=xe(e,r),s=a.length-i.length;return ge(a,s<0?-1*s:0),ge(i,s>0?s:0),ye(a,i),[Pt(a),Pt(i)]}var Ee={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=new RegExp("\\n","ig"),a=null;return e instanceof SVGElement?a=e:/^\.|^#/.test(e)&&(a=L(e)),"object"==typeof e&&e.pathArray?e:(a&&["path","glyph"].includes(a.tagName)?n.original=a.getAttribute("d").replace(r,""):a||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,e,n,r){var a=e.pathArray,i=n.pathArray,s=i.length;t.setAttribute("d",1===r?n.original:"M"+pe(a,i,s,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].pathArray,n=this.valuesEnd[t].pathArray;if(!e||!n||e&&n&&e.length!==n.length){var r=we(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision,10):d.morphPrecision),a=r[0],i=r[1];this.valuesStart[t].pathArray=a,this.valuesEnd[t].pathArray=i}}}},Me={EssentialBoxModel:B,ColorsProperties:J,HTMLAttributes:it,OpacityProperty:ot,TextWrite:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:F},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:vt},Util:{charSet:dt,createTextTweens:function(t,e,n){if(t.playing)return!1;var r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);var a=A.tween,i=function(t,e){var n=gt(t,"text-part"),r=gt(yt(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),s=i[0],o=i[1],u=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText")),l=[],h=0;return(l=(l=l.concat(u.map((function(t,e){return r.duration="auto"===r.duration?75*s[e].innerHTML.length:r.duration,r.delay=h,r.onComplete=null,h+=r.duration,new a(t,{text:t.innerHTML},{text:""},r)})))).concat(c.map((function(n,i){return r.duration="auto"===r.duration?75*o[i].innerHTML.length:r.duration,r.delay=h,r.onComplete=i===o.length-1?function(){t.innerHTML=e,t.playing=!1}:null,h+=r.duration,new a(n,{text:""},{text:o[i].innerHTML},r)})))).start=function(){t.playing||(l.forEach((function(t){return t.start()})),t.playing=!0)},l}}},TransformFunctions:{component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t){var e=O(this.element);return e[t]?e[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},a=[],i=[],s=[],o=["translate3d","translate","rotate3d","skew"];return Object.keys(e).forEach((function(t){var u="object"==typeof e[t]&&e[t].length?e[t].map((function(t){return parseInt(t,10)})):parseInt(e[t],10);if(o.includes(t)){var c="translate"===t||"rotate"===t?t+"3d":t;r[c]="skew"===t?u.length?[u[0]||0,u[1]||0]:[u||0,0]:"translate"===t?u.length?[u[0]||0,u[1]||0,u[2]||0]:[u||0,0,0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(t)){var l=t.replace(/[XYZ]/,""),h="skew"===l?l:l+"3d",p="skew"===l?2:3,f=[];"translate"===l?f=a:"rotate"===l?f=i:"skew"===l&&(f=s);for(var d=0;d>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+a.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:wt,skew:Et}},SVGDraw:{component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:F},functions:At,Util:{getRectLength:_t,getPolyLength:kt,getLineLength:Ot,getCircleLength:Ct,getEllipseLength:Tt,getTotalLength:St,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:It,percent:Mt}},SVGMorph:{component:"svgMorph",property:"path",defaultValue:[],Interpolate:pe,defaultOptions:{morphPrecision:10,morphIndex:0},functions:Ee,Util:{addPoints:ge,bisect:me,normalizeRing:xe,validRing:be,getInterpolationPoints:we,pathStringToRing:ve,distanceSquareRoot:he,midPoint:te,approximateRing:de,rotateRing:ye,pathToString:ae,pathToCurve:re,getPathLength:oe,getPointAtLength:ue,getDrawDirection:le,roundPath:Pt}}};Object.keys(Me).forEach((function(t){var e=Me[t];Me[t]=new H(e)}));return{Animation:H,Components:Me,Tween:V,fromTo:function(t,e,n,r){var a=r||{};return new(0,A.tween)(L(t),e,n,a)},to:function(t,e,n){var r=n||{},a=A.tween;return r.resetStart=e,new a(L(t),e,e,r)},TweenCollection:q,allFromTo:function(t,e,n,r){var a=r||{};return new q(L(t,!0),e,n,a)},allTo:function(t,e,n){var r=n||{};return n.resetStart=e,new q(L(t,!0),e,e,r)},Objects:x,Util:w,Easing:j,CubicBezier:t,Render:h,Interpolate:a,Process:I,Internals:k,Selector:L,Version:"2.1.3"}})); +// KUTE.js Standard v2.2.0alpha2 | thednp © 2021 | MIT-License +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).KUTE=e()}(this,(function(){"use strict";var t=function(t,e,n,r,a){var i=this;this.cx=3*t,this.bx=3*(n-t)-this.cx,this.ax=1-this.cx-this.bx,this.cy=3*e,this.by=3*(r-e)-this.cy,this.ay=1-this.cy-this.by;var o=function(t){return i.sampleCurveY(i.solveCurveX(t))};return Object.defineProperty(o,"name",{writable:!0}),o.name=a||"cubic-bezier("+[t,e,n,r]+")",o};t.prototype.sampleCurveX=function(t){return((this.ax*t+this.bx)*t+this.cx)*t},t.prototype.sampleCurveY=function(t){return((this.ay*t+this.by)*t+this.cy)*t},t.prototype.sampleCurveDerivativeX=function(t){return(3*this.ax*t+2*this.bx)*t+this.cx},t.prototype.solveCurveX=function(t){var e,n,r,a,i,o,s=1e-5;for(r=t,o=0;o<32;o+=1){if(a=this.sampleCurveX(r)-t,Math.abs(a)(n=1))return n;for(;ea?e=r:n=r,r=.5*(n-e)+e}return r};var e={},n=[],r="undefined"!=typeof global?global:"undefined"!=typeof window?window.self:{},a={},i={},o="undefined"==typeof self&&"undefined"!=typeof process&&process.hrtime?function(){var t=process.hrtime();return 1e3*t[0]+t[1]/1e6}:"undefined"!=typeof self&&void 0!==self.performance&&void 0!==self.performance.now?self.performance.now.bind(self.performance):"undefined"!=typeof Date&&Date.now?Date.now:function(){return(new Date).getTime()},s={};s.now=o;var u=0,c=function(t){for(var e=0;e1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.map((function(t){return t.start()})),!1)},A.tween=N;var q=function(t){function n(){for(var e=this,n=[],r=arguments.length;r--;)n[r]=arguments[r];t.apply(this,n),this.valuesStart={},this.valuesEnd={};var a=n.slice(1),i=a[0],o=a[1],s=a[2];return T.call(this,o,"end"),this._resetStart?this.valuesStart=i:T.call(this,i,"start"),this._resetStart||Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(n){g[t][n].call(e,n)}))})),this.paused=!1,this._pauseTime=null,this._repeat=s.repeat||d.repeat,this._repeatDelay=s.repeatDelay||d.repeatDelay,this._repeatOption=this._repeat,this.valuesRepeat={},this._yoyo=s.yoyo||d.yoyo,this._reversed=!1,this}return t&&(n.__proto__=t),n.prototype=Object.create(t&&t.prototype),n.prototype.constructor=n,n.prototype.start=function(e){var n=this;return this._resetStart&&(this.valuesStart=this._resetStart,S.call(this),Object.keys(g).forEach((function(t){Object.keys(g[t]).forEach((function(e){g[t][e].call(n,e)}))}))),this.paused=!1,this._yoyo&&Object.keys(this.valuesEnd).forEach((function(t){n.valuesRepeat[t]=n.valuesStart[t]})),t.prototype.start.call(this,e),this},n.prototype.stop=function(){return t.prototype.stop.call(this),!this.paused&&this.playing&&(this.paused=!1,this.stopChainedTweens()),this},n.prototype.close=function(){return t.prototype.close.call(this),this._repeatOption>0&&(this._repeat=this._repeatOption),this._yoyo&&!0===this._reversed&&(this.reverse(),this._reversed=!1),this},n.prototype.resume=function(){return this.paused&&this.playing&&(this.paused=!1,void 0!==this._onResume&&this._onResume.call(this),L.call(this),this._startTime+=e.Time()-this._pauseTime,E(this),u||c()),this},n.prototype.pause=function(){return!this.paused&&this.playing&&(M(this),this.paused=!0,this._pauseTime=e.Time(),void 0!==this._onPause&&this._onPause.call(this)),this},n.prototype.reverse=function(){var t=this;Object.keys(this.valuesEnd).forEach((function(e){var n=t.valuesRepeat[e];t.valuesRepeat[e]=t.valuesEnd[e],t.valuesEnd[e]=n,t.valuesStart[e]=t.valuesRepeat[e]}))},n.prototype.update=function(t){var n,r=this,a=void 0!==t?t:e.Time();if(a1?1:n;var i=this._easing(n);return Object.keys(this.valuesEnd).forEach((function(t){e[t](r.element,r.valuesStart[t],r.valuesEnd[t],i)})),this._onUpdate&&this._onUpdate.call(this),1!==n||(this._repeat>0?(Number.isFinite(this._repeat)&&(this._repeat-=1),this._startTime=a,Number.isFinite(this._repeat)&&this._yoyo&&!this._reversed&&(this._startTime+=this._repeatDelay),this._yoyo&&(this._reversed=!this._reversed,this.reverse()),!0):(this._onComplete&&this._onComplete.call(this),this.playing=!1,this.close(),void 0!==this._chain&&this._chain.length&&this._chain.forEach((function(t){return t.start()})),!1))},n}(N);A.tween=q;var H=function(t,e,n,r){var a=this,i=A.tween;this.tweens=[];var o=r||{};o.delay=o.delay||d.delay;var s=[];return Array.from(t).forEach((function(t,r){if(s[r]=o||{},s[r].delay=r>0?o.delay+(o.offset||d.offset):o.delay,!(t instanceof Element))throw Error("KUTE - "+t+" is not instanceof Element");a.tweens.push(new i(t,e,n,s[r]))})),this.length=this.tweens.length,this};H.prototype.start=function(t){var n=void 0===t?e.Time():t;return this.tweens.map((function(t){return t.start(n)})),this},H.prototype.stop=function(){return this.tweens.map((function(t){return t.stop()})),this},H.prototype.pause=function(){return this.tweens.map((function(t){return t.pause()})),this},H.prototype.resume=function(){return this.tweens.map((function(t){return t.resume()})),this},H.prototype.chain=function(t){var e=this.tweens[this.length-1];if(t instanceof H)e.chain(t.tweens);else{if(!(t instanceof A.tween))throw new TypeError("KUTE.js - invalid chain value");e.chain(t)}return this},H.prototype.playing=function(){return this.tweens.some((function(t){return t.playing}))},H.prototype.removeTweens=function(){this.tweens=[]},H.prototype.getMaxDuration=function(){var t=[];return this.tweens.forEach((function(e){t.push(e._duration+e._delay+e._repeat*e._repeatDelay)})),Math.max(t)};var V=A.tween;var D=A.tween;var F=function(t){try{if(t.component in h)throw Error("KUTE - "+t.component+" already registered");if(t.property in f)throw Error("KUTE - "+t.property+" already registered")}catch(t){throw Error(t)}var e=this,n=t.component,r={prepareProperty:v,prepareStart:y,onStart:i,onComplete:m,crossCheck:g},o=t.category,s=t.property,u=t.properties&&t.properties.length||t.subProperties&&t.subProperties.length;return h[n]=t.properties||t.subProperties||t.property,"defaultValue"in t?(f[s]=t.defaultValue,e.supports=s+" property"):t.defaultValues&&(Object.keys(t.defaultValues).forEach((function(e){f[e]=t.defaultValues[e]})),e.supports=(u||s)+" "+(s||o)+" properties"),t.defaultOptions&&Object.assign(d,t.defaultOptions),t.functions&&Object.keys(r).forEach((function(e){e in t.functions&&("function"==typeof t.functions[e]?(r[e][n]||(r[e][n]={}),r[e][n][o||s]||(r[e][n][o||s]=t.functions[e])):Object.keys(t.functions[e]).forEach((function(a){r[e][n]||(r[e][n]={}),r[e][n][a]||(r[e][n][a]=t.functions[e][a])})))})),t.Interpolate&&(Object.keys(t.Interpolate).forEach((function(e){var n=t.Interpolate[e];"function"!=typeof n||a[e]?Object.keys(n).forEach((function(t){"function"!=typeof n[t]||a[e]||(a[e]=n[t])})):a[e]=n})),b[n]=t.Interpolate),t.Util&&Object.keys(t.Util).forEach((function(e){x[e]||(x[e]=t.Util[e])})),e},Q=function(t,e){for(var n,r=parseInt(t,10)||0,a=["px","%","deg","rad","em","rem","vh","vw"],i=0;i.99||a<.01?(10*U(n,r,a)>>0)/10:U(n,r,a)>>0)+"px"})}var B={};["top","left","width","height"].forEach((function(t){B[t]=X}));var Z=["top","left","width","height"],R={};Z.forEach((function(t){R[t]=X}));var Y={component:"essentialBoxModel",category:"boxModel",properties:Z,defaultValues:{top:0,left:0,width:0,height:0},Interpolate:{numbers:U},functions:{prepareStart:function(t){return O(this.element,t)||f[t]},prepareProperty:function(t,e){var n=Q(e),r="height"===t?"offsetHeight":"offsetWidth";return"%"===n.u?n.v*this.element[r]/100:n.v},onStart:R},Util:{trueDimension:Q}},z=function(t){var e;if(/rgb|rgba/.test(t)){var n=t.replace(/\s|\)/,"").split("(")[1].split(","),r=n[3]?n[3]:null;r||(e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10)}),e={r:parseInt(n[0],10),g:parseInt(n[1],10),b:parseInt(n[2],10),a:parseFloat(r)}}if(/^#/.test(t)){var a=function(t){var e=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,e,n,r){return e+e+n+n+r+r})),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);e={r:a.r,g:a.g,b:a.b}}if(/transparent|none|initial|inherit/.test(t)&&(e={r:0,g:0,b:0,a:0}),!/^#|^rgb/.test(t)){var i=document.getElementsByTagName("head")[0];i.style.color=t;var o=getComputedStyle(i,null).color;o=/rgb/.test(o)?o.replace(/[^\d,]/g,"").split(","):[0,0,0],i.style.color="",e={r:parseInt(o[0],10),g:parseInt(o[1],10),b:parseInt(o[2],10)}}return e};function K(t,e,n){var r={},a=",";return Object.keys(e).forEach((function(a){"a"!==a?r[a]=U(t[a],e[a],n)>>0||0:t[a]&&e[a]&&(r[a]=(100*U(t[a],e[a],n)>>0)/100)})),r.a?"rgba("+r.r+a+r.g+a+r.b+a+r.a+")":"rgb("+r.r+a+r.g+a+r.b+")"}function $(t){this.valuesEnd[t]&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=K(n,r,a)})}var W={};["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"].forEach((function(t){W[t]=$}));var G=["color","backgroundColor","outlineColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor"],J={};G.forEach((function(t){J[t]="#000"}));var tt={};G.forEach((function(t){tt[t]=$}));var et={component:"colorProperties",category:"colors",properties:G,defaultValues:J,Interpolate:{numbers:U,colors:K},functions:{prepareStart:function(t){return O(this.element,t)||f[t]},prepareProperty:function(t,e){return z(e)},onStart:tt},Util:{trueColor:z}},nt={},rt="htmlAttributes",at=["fill","stroke","stop-color"];function it(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()}var ot={prepareStart:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(t){var e=it(t).replace(/_+[a-z]+/,""),a=n.element.getAttribute(e);r[e]=at.includes(e)?a||"rgba(0,0,0,0)":a||(/opacity/i.test(t)?1:0)})),r},prepareProperty:function(t,e){var n=this,r={};return Object.keys(e).forEach((function(a){var o=it(a),s=/(%|[a-z]+)$/,u=n.element.getAttribute(o.replace(/_+[a-z]+/,""));if(at.includes(o))i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=function(t,e,n,r,a){t.setAttribute(e,K(n,r,a))})},r[o]=z(e[a])||f.htmlAttributes[a];else if(null!==u&&s.test(u)){var c=Q(u).u||Q(e[a]).u,l=/%/.test(c)?"_percent":"_"+c;i.htmlAttributes[o+l]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=function(t,e,n,r,a){var i=e.replace(l,"");t.setAttribute(i,(1e3*U(n.v,r.v,a)>>0)/1e3+r.u)})},r[o+l]=Q(e[a])}else s.test(e[a])&&null!==u&&(null===u||s.test(u))||(i.htmlAttributes[o]=function(e){n.valuesEnd[t]&&n.valuesEnd[t][e]&&!(e in nt)&&(nt[e]=function(t,e,n,r,a){t.setAttribute(e,(1e3*U(n,r,a)>>0)/1e3)})},r[o]=parseFloat(e[a]))})),r},onStart:{attr:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,n,r,a){Object.keys(r).forEach((function(i){e.attributes[i](t,i,n[i],r[i],a)}))})},attributes:function(t){!e[t]&&this.valuesEnd.attr&&(e[t]=nt)}}},st={component:rt,property:"attr",subProperties:["fill","stroke","stop-color","fill-opacity","stroke-opacity"],defaultValue:{fill:"rgb(0,0,0)",stroke:"rgb(0,0,0)","stop-color":"rgb(0,0,0)",opacity:1,"stroke-opacity":1,"fill-opacity":1},Interpolate:{numbers:U,colors:K},functions:ot,Util:{replaceUppercase:it,trueColor:z,trueDimension:Q}};var ut={prepareStart:function(t){return O(this.element,t)},prepareProperty:function(t,e){return parseFloat(e)},onStart:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(e,n,r,a){e.style[t]=(1e3*U(n,r,a)>>0)/1e3})}},ct={component:"opacityProperty",property:"opacity",defaultValue:1,Interpolate:{numbers:U},functions:ut},lt=String("abcdefghijklmnopqrstuvwxyz").split(""),pt=String("abcdefghijklmnopqrstuvwxyz").toUpperCase().split(""),ht=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),ft=String("0123456789").split(""),dt=lt.concat(pt,ft),vt=dt.concat(ht),yt={alpha:lt,upper:pt,symbols:ht,numeric:ft,alphanumeric:dt,all:vt},gt={text:function(t){if(!e[t]&&this.valuesEnd[t]){var n=this._textChars,r=yt[d.textChars];n in yt?r=yt[n]:n&&n.length&&(r=n),e[t]=function(t,e,n,a){var i="",o="",s=""===n?" ":n,u=e.substring(0),c=n.substring(0),l=r[Math.random()*r.length>>0];" "===e?(o=c.substring(Math.min(a*c.length,c.length)>>0,0),t.innerHTML=a<1?o+l:s):" "===n?(i=u.substring(0,Math.min((1-a)*u.length,u.length)>>0),t.innerHTML=a<1?i+l:s):(i=u.substring(u.length,Math.min(a*u.length,u.length)>>0),o=c.substring(0,Math.min(a*c.length,c.length)>>0),t.innerHTML=a<1?o+l+i:s)}}},number:function(t){t in this.valuesEnd&&!e[t]&&(e[t]=function(t,e,n,r){t.innerHTML=U(e,n,r)>>0})}};function mt(t,e){var n,r;if("string"==typeof t)return(r=document.createElement("SPAN")).innerHTML=t,r.className=e,r;if(!t.children.length||t.children.length&&t.children[0].className!==e){var a=t.innerHTML;(n=document.createElement("SPAN")).className=e,n.innerHTML=a,t.appendChild(n),t.innerHTML=n.outerHTML}else t.children.length&&t.children[0].className===e&&(n=t.children[0]);return n}function bt(t,e){var n=[],r=t.children.length;if(r){for(var a,i=[],o=t.innerHTML,s=0,u=void 0,c=void 0,l=void 0;s>0)/1e3+n+")"}function xt(t,e,n,r){for(var a=[],i=0;i<3;i+=1)a[i]=(t[i]||e[i]?(1e3*(t[i]+(e[i]-t[i])*r)>>0)/1e3:0)+n;return"translate3d("+a.join(",")+")"}function Et(t,e,n,r){var a="";return a+=t[0]||e[0]?"rotateX("+(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3+n+")":"",a+=t[1]||e[1]?"rotateY("+(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3+n+")":"",a+=t[2]||e[2]?"rotateZ("+(1e3*(t[2]+(e[2]-t[2])*r)>>0)/1e3+n+")":""}function Mt(t,e,n){return"scale("+(1e3*(t+(e-t)*n)>>0)/1e3+")"}function _t(t,e,n,r){var a=[];return a[0]=(t[0]===e[0]?e[0]:(1e3*(t[0]+(e[0]-t[0])*r)>>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","skew("+a.join(",")+")"}function kt(t,e){return parseFloat(t)/100*e}function Ct(t){return 2*t.getAttribute("width")+2*t.getAttribute("height")}function Ot(t){var e=t.getAttribute("points").split(" "),n=0;if(e.length>1){var r=function(t){var e=t.split(",");return 2!==e.length||Number.isNaN(1*e[0])||Number.isNaN(1*e[1])?0:[parseFloat(e[0]),parseFloat(e[1])]},a=function(t,e){return void 0!==t&&void 0!==e?Math.sqrt(Math.pow(e[0]-t[0],2)+Math.pow(e[1]-t[1],2)):0};if(e.length>2)for(var i=0;i>0)/100,i=0-(100*U(e.s,n.s,r)>>0)/100,o=(100*U(e.e,n.e,r)>>0)/100+i;t.style.strokeDashoffset=i+"px",t.style.strokeDasharray=(100*(o<1?0:o)>>0)/100+"px, "+a+"px"})}};function Lt(t,e,n){if(t[n].length>7){t[n].shift();for(var r=t[n],a=n;r.length;)e[n]="A",t.splice(a+=1,0,["C"].concat(r.splice(0,6)));t.splice(n,1)}}var Nt={a:7,c:6,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,z:0};function qt(t){var e=t.pathValue[t.segmentStart],n=e.toLowerCase(),r=t.data;for("m"===n&&r.length>2&&(t.segments.push([e,r[0],r[1]]),r=r.slice(2),n="l",e="m"===e?"l":"L");r.length>=Nt[n]&&(t.segments.push([e].concat(r.splice(0,Nt[n]))),Nt[n]););}var Ht="Invalid path value";function Vt(t){var e=t.index,n=t.pathValue.charCodeAt(e);return 48===n?(t.param=0,void(t.index+=1)):49===n?(t.param=1,void(t.index+=1)):void(t.err=Ht+': invalid Arc flag "'+n+'", expecting 0 or 1 at index '+e)}function Dt(t){return t>=48&&t<=57}function Ft(t){var e,n=t.max,r=t.pathValue,a=t.index,i=a,o=!1,s=!1,u=!1,c=!1;if(i>=n)t.err=Ht+" at "+i+": missing param "+r[i];else if(43!==(e=r.charCodeAt(i))&&45!==e||(e=(i+=1)=5760&&[5760,6158,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8239,8287,12288,65279].indexOf(e)>=0);)t.index+=1}function Ut(t){return t>=48&&t<=57||43===t||45===t||46===t}function Xt(t){var e=t.max,n=t.pathValue,r=t.index,a=n.charCodeAt(r),i=Nt[n[r].toLowerCase()];if(t.segmentStart=r,function(t){switch(32|t){case 109:case 122:case 108:case 104:case 118:case 99:case 115:case 113:case 116:case 97:return!0;default:return!1}}(a))if(t.index+=1,Qt(t),t.data=[],i){for(;;){for(var o=i;o>0;o-=1){if(97!=(32|a)||3!==o&&4!==o?Ft(t):Vt(t),t.err.length)return;t.data.push(t.param),Qt(t),t.index=t.max)break;if(!Ut(n.charCodeAt(t.index)))break}qt(t)}else qt(t);else t.err=Ht+": "+n[r]+" not a path command"}function Bt(t){return t.map((function(t){return Array.isArray(t)?[].concat(t):t}))}function Zt(t){this.segments=[],this.pathValue=t,this.max=t.length,this.index=0,this.param=0,this.segmentStart=0,this.data=[],this.err=""}function Rt(t){return Array.isArray(t)&&t.every((function(t){var e=t[0].toLowerCase();return Nt[e]===t.length-1&&"achlmqstvz".includes(e)}))}function Yt(t){if(Array.isArray(t)&&Rt(t))return Bt(t);var e=new Zt(t);for(Qt(e);e.index1&&(m*=O=Math.sqrt(O),b*=O);var T=m*m,S=b*b,I=(i===o?-1:1)*Math.sqrt(Math.abs((T*S-T*C*C-S*k*k)/(T*C*C+S*k*k)));d=I*m*C/b+(y+w)/2,v=I*-b*k/m+(g+x)/2,h=(Math.asin((g-v)/b)*Math.pow(10,9)>>0)/Math.pow(10,9),f=(Math.asin((x-v)/b)*Math.pow(10,9)>>0)/Math.pow(10,9),h=yf&&(h-=2*Math.PI),!o&&f>h&&(f-=2*Math.PI)}var A=f-h;if(Math.abs(A)>E){var j=f,P=w,L=x;f=h+E*(o&&f>h?1:-1),_=te(w=d+m*Math.cos(f),x=v+b*Math.sin(f),m,b,a,0,o,P,L,[f,j,d,v])}A=f-h;var N=Math.cos(h),q=Math.sin(h),H=Math.cos(f),V=Math.sin(f),D=Math.tan(A/4),F=4/3*m*D,Q=4/3*b*D,U=[y,g],X=[y+F*q,g-Q*N],B=[w+F*V,x-Q*H],Z=[w,x];if(X[0]=2*U[0]-X[0],X[1]=2*U[1]-X[1],c)return X.concat(B,Z,_);for(var R=[],Y=0,z=(_=X.concat(B,Z,_)).length;Y=1?e:n)>=1?Math.pow(10,n):1;return t.map((function(t){var e=t.slice(1).map(Number).map((function(t){return t%1==0?t:Math.round(t*r)/r}));return[t[0]].concat(e)}))}function ce(t,e){return ue(t,e).map((function(t){return t[0]+t.slice(1).join(" ")})).join("")}function le(t,e,n,r,a){return a*(a*(-3*t+9*e-9*n+3*r)+6*t-12*e+6*n)-3*t+3*e}function pe(t,e,n,r,a,i,o,s,u){var c=u;(null===u||Number.isNaN(+u))&&(c=1),c>1&&(c=1),c<0&&(c=0);var l=c/2,p=0,h=0,f=0,d=0,v=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472];return[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816].forEach((function(u,c){h=le(t,n,a,o,p=l*u+l),f=le(e,r,i,s,p),d+=v[c]*Math.sqrt(h*h+f*f)})),l*d}function he(t){var e=0;return oe(t).forEach((function(t,n,r){var a="M"!==t[0]?r[n-1].slice(-2).concat(t.slice(1)):[];e+="M"===t[0]?0:pe.apply(void 0,a)})),e}function fe(t,e){var n,r,a,i=0;return oe(t).map((function(t,o,s){if(r=o?s[o-1].slice(-2).concat(t.slice(1)):t.slice(1),n=o?pe.apply(void 0,r):0,i+=n,0===o)a={x:r[0],y:r[1]};else if(i>e&&e>i-n){var u=r.concat([1-(i-e)/n]);a=ne.apply(void 0,u)}else a=null;return a})).filter((function(t){return t})).slice(-1)[0]}function de(t,e,n,r,a,i,o,s){return 3*((s-e)*(n+a)-(o-t)*(r+i)+r*(t-a)-n*(e-i)+s*(a+t/3)-o*(i+e/3))/20}function ve(t){return function(t){var e=0,n=0,r=0;return oe(t).map((function(t){var a,i;return"M"===t[0]?(e=(a=t)[1],n=a[2],0):(r=de.apply(void 0,[e,n].concat(t.slice(1))),i=t.slice(-2).map(Number),e=i[0],n=i[1],r)})).reduce((function(t,e){return t+e}),0)}(oe(t))>=0}function ye(t,e){return Math.sqrt((t[0]-e[0])*(t[0]-e[0])+(t[1]-e[1])*(t[1]-e[1]))}function ge(t,e,n,r){for(var a=[],i=0;i>0)/1e3)}return a}function me(t,e){var n,r,a=oe((n=ce(t),ce(Kt(n),0).replace(/(m|M)/g,"|$1").split("|").map((function(t){return t.trim()})).filter((function(t){return t})))[0]),i=he(a),o=[],s=3;e&&!Number.isNaN(e)&&+e>0&&(s=Math.max(s,Math.ceil(i/e)));for(var u=0;ue;)r=re(n,r,.5),t.splice(a+1,0,r)}function Me(t){return Array.isArray(t)&&t.every((function(t){return Array.isArray(t)&&2===t.length&&!Number.isNaN(t[0])&&!Number.isNaN(t[1])}))}function _e(t,e){var n,r,a;if("string"==typeof t)a=(n=be(t,e)).polygon,r=n.skipBisect;else if(!Array.isArray(t))throw Error(Ht+": "+t);var i=[].concat(a);if(!Me(i))throw Error(Ht+": "+i);return i.length>1&&ye(i[0],i[i.length-1])<1e-9&&i.pop(),!r&&e&&!Number.isNaN(e)&&+e>0&&Ee(i,e),i}function ke(t,e,n){var r=n||d.morphPrecision,a=_e(t,r),i=_e(e,r),o=a.length-i.length;return xe(a,o<0?-1*o:0),xe(i,o>0?o:0),we(a,i),[ue(a),ue(i)]}var Ce={prepareStart:function(){return this.element.getAttribute("d")},prepareProperty:function(t,e){var n={},r=new RegExp("\\n","ig"),a=null;return e instanceof SVGPathElement?a=e:/^\.|^#/.test(e)&&(a=P(e)),"object"==typeof e&&e.polygon?e:(a&&["path","glyph"].includes(a.tagName)?n.original=a.getAttribute("d").replace(r,""):a||"string"!=typeof e||(n.original=e.replace(r,"")),n)},onStart:function(t){!e[t]&&this.valuesEnd[t]&&(e[t]=function(t,e,n,r){var a=e.polygon,i=n.polygon,o=i.length;t.setAttribute("d",1===r?n.original:"M"+ge(a,i,o,r).join("L")+"Z")})},crossCheck:function(t){if(this.valuesEnd[t]){var e=this.valuesStart[t].polygon,n=this.valuesEnd[t].polygon;if(!e||!n||e&&n&&e.length!==n.length){var r=ke(this.valuesStart[t].original,this.valuesEnd[t].original,this._morphPrecision?parseInt(this._morphPrecision,10):d.morphPrecision),a=r[0],i=r[1];this.valuesStart[t].polygon=a,this.valuesEnd[t].polygon=i}}}},Oe={EssentialBoxModel:Y,ColorsProperties:et,HTMLAttributes:st,OpacityProperty:ct,TextWriteProp:{component:"textWriteProperties",category:"textWrite",properties:["text","number"],defaultValues:{text:" ",number:"0"},defaultOptions:{textChars:"alpha"},Interpolate:{numbers:U},functions:{prepareStart:function(){return this.element.innerHTML},prepareProperty:function(t,e){return"number"===t?parseFloat(e):""===e?" ":e},onStart:gt},Util:{charSet:yt,createTextTweens:function(t,e,n){if(t.playing)return!1;var r=n||{};r.duration=1e3,"auto"===n.duration?r.duration="auto":Number.isFinite(1*n.duration)&&(r.duration=1*n.duration);var a=A.tween,i=function(t,e){var n=bt(t,"text-part"),r=bt(mt(e),"text-part");return t.innerHTML="",t.innerHTML+=n.map((function(t){return t.className+=" oldText",t.outerHTML})).join(""),t.innerHTML+=r.map((function(t){return t.className+=" newText",t.outerHTML.replace(t.innerHTML,"")})).join(""),[n,r]}(t,e),o=i[0],s=i[1],u=[].slice.call(t.getElementsByClassName("oldText")).reverse(),c=[].slice.call(t.getElementsByClassName("newText")),l=[],p=0;return(l=(l=l.concat(u.map((function(t,e){return r.duration="auto"===r.duration?75*o[e].innerHTML.length:r.duration,r.delay=p,r.onComplete=null,p+=r.duration,new a(t,{text:t.innerHTML},{text:""},r)})))).concat(c.map((function(n,i){return r.duration="auto"===r.duration?75*s[i].innerHTML.length:r.duration,r.delay=p,r.onComplete=i===s.length-1?function(){t.innerHTML=e,t.playing=!1}:null,p+=r.duration,new a(n,{text:""},{text:s[i].innerHTML},r)})))).start=function(){t.playing||(l.forEach((function(t){return t.start()})),t.playing=!0)},l}}},TransformFunctions:{component:"transformFunctions",property:"transform",subProperties:["perspective","translate3d","translateX","translateY","translateZ","translate","rotate3d","rotateX","rotateY","rotateZ","rotate","skewX","skewY","skew","scale"],defaultValues:{perspective:400,translate3d:[0,0,0],translateX:0,translateY:0,translateZ:0,translate:[0,0],rotate3d:[0,0,0],rotateX:0,rotateY:0,rotateZ:0,rotate:0,skewX:0,skewY:0,skew:[0,0],scale:1},functions:{prepareStart:function(t){var e=C(this.element);return e[t]?e[t]:f[t]},prepareProperty:function(t,e){var n=["X","Y","Z"],r={},a=[],i=[],o=[],s=["translate3d","translate","rotate3d","skew"];return Object.keys(e).forEach((function(t){var u="object"==typeof e[t]&&e[t].length?e[t].map((function(t){return parseInt(t,10)})):parseInt(e[t],10);if(s.includes(t)){var c="translate"===t||"rotate"===t?t+"3d":t;r[c]="skew"===t?u.length?[u[0]||0,u[1]||0]:[u||0,0]:"translate"===t?u.length?[u[0]||0,u[1]||0,u[2]||0]:[u||0,0,0]:[u[0]||0,u[1]||0,u[2]||0]}else if(/[XYZ]/.test(t)){var l=t.replace(/[XYZ]/,""),p="skew"===l?l:l+"3d",h="skew"===l?2:3,f=[];"translate"===l?f=a:"rotate"===l?f=i:"skew"===l&&(f=o);for(var d=0;d>0)/1e3)+n,a[1]=t[1]||e[1]?(t[1]===e[1]?e[1]:(1e3*(t[1]+(e[1]-t[1])*r)>>0)/1e3)+n:"0","translate("+a.join(",")+")"},rotate:function(t,e,n,r){return"rotate("+(1e3*(t+(e-t)*r)>>0)/1e3+n+")"},scale:Mt,skew:_t}},SVGDraw:{component:"svgDraw",property:"draw",defaultValue:"0% 0%",Interpolate:{numbers:U},functions:Pt,Util:{getRectLength:Ct,getPolyLength:Ot,getLineLength:Tt,getCircleLength:St,getEllipseLength:It,getTotalLength:At,resetDraw:function(t){t.style.strokeDashoffset="",t.style.strokeDasharray=""},getDraw:jt,percent:kt}},SVGMorph:{component:"svgMorph",property:"path",defaultValue:[],Interpolate:ge,defaultOptions:{morphPrecision:10},functions:Ce,Util:{addPoints:xe,bisect:Ee,getPolygon:_e,validPolygon:Me,getInterpolationPoints:ke,pathStringToPolygon:be,distanceSquareRoot:ye,midPoint:re,approximatePolygon:me,rotatePolygon:we,pathToString:ce,pathToCurve:oe,getPathLength:he,getPointAtLength:fe,getDrawDirection:ve,roundPath:ue}}};Object.keys(Oe).forEach((function(t){var e=Oe[t];Oe[t]=new F(e)}));return{Animation:F,Components:Oe,Tween:q,fromTo:function(t,e,n,r){var a=r||{};return new D(P(t),e,n,a)},to:function(t,e,n){var r=n||{};return r.resetStart=e,new V(P(t),e,e,r)},TweenCollection:H,allFromTo:function(t,e,n,r){var a=r||{};return new H(P(t,!0),e,n,a)},allTo:function(t,e,n){var r=n||{};return r.resetStart=e,new H(P(t,!0),e,e,r)},Objects:w,Util:x,Easing:j,CubicBezier:t,Render:p,Interpolate:a,Process:I,Internals:k,Selector:P,Version:"2.2.0alpha2"}})); diff --git a/package.json b/package.json index e35cd3e..0d0d6cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kute.js", - "version": "2.1.3", + "version": "2.2.0alpha2", "description": "JavaScript animation engine", "main": "dist/kute.min.js", "module": "dist/kute.esm.js", @@ -23,7 +23,7 @@ "lint:js": "eslint src/ --config .eslintrc", "copy-build": "rollup --environment OUTPUTFILE:demo/src/kute.min.js,DIST:standard,MIN:true,FORMAT:umd -c", "build-standard": "rollup --environment DIST:standard,MIN:false,FORMAT:umd -c", - "build-ts": "tsc -d", + "build:ts": "tsc -d", "build-standard-min": "rollup --environment DIST:standard,MIN:true,FORMAT:umd -c", "build-standard-esm": "rollup --environment DIST:standard,MIN:false,FORMAT:esm -c", "build-standard-esm-min": "rollup --environment DIST:standard,MIN:true,FORMAT:esm -c", @@ -61,10 +61,10 @@ }, "homepage": "http://thednp.github.io/kute.js", "dependencies": { - "cubic-bezier-easing": "^1.0.8", + "cubic-bezier-easing": "^1.0.14", "minifill": "^0.0.16", - "shorter-js": "^0.2.1", - "svg-path-commander": "0.1.7" + "shorter-js": "^0.2.6", + "svg-path-commander": "0.1.17" }, "devDependencies": { "@rollup/plugin-buble": "^0.21.3", @@ -77,6 +77,6 @@ "npm-run-all": "^4.1.5", "rollup": "^2.38.4", "rollup-plugin-terser": "^7.0.2", - "typescript": "^4.4.4" + "typescript": "^4.5.2" } } diff --git a/rollup.config.js b/rollup.config.js index beb1dd6..7c71cce 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -36,7 +36,7 @@ const PLUGINS = [ ] if (FORMAT!=='esm'){ - PLUGINS.push(buble()); + PLUGINS.push(buble({objectAssign: 'Object.assign'})); } if (MIN){ diff --git a/src/animation/animation.js b/src/animation/animation.js index c97ba54..f221c76 100644 --- a/src/animation/animation.js +++ b/src/animation/animation.js @@ -1,36 +1,37 @@ -import supportedProperties from '../objects/supportedProperties.js'; -import defaultValues from '../objects/defaultValues.js'; -import defaultOptions from '../objects/defaultOptions.js'; -import prepareProperty from '../objects/prepareProperty.js'; -import prepareStart from '../objects/prepareStart.js'; -import onStart from '../objects/onStart.js'; -import onComplete from '../objects/onComplete.js'; -import crossCheck from '../objects/crossCheck.js'; -import linkProperty from '../objects/linkProperty.js'; -import Util from '../objects/util.js'; -import Interpolate from '../objects/interpolate.js'; +import supportedProperties from '../objects/supportedProperties'; +import defaultValues from '../objects/defaultValues'; +import defaultOptions from '../objects/defaultOptions'; +import prepareProperty from '../objects/prepareProperty'; +import prepareStart from '../objects/prepareStart'; +import onStart from '../objects/onStart'; +import onComplete from '../objects/onComplete'; +import crossCheck from '../objects/crossCheck'; +import linkProperty from '../objects/linkProperty'; +import Util from '../objects/util'; +import Interpolate from '../objects/interpolate'; -// Animation class -// * builds KUTE components -// * populate KUTE objects -// * AnimatonBase creates a KUTE.js build for pre-made Tween objects -// * AnimatonDevelopment can help you debug your new components +/** + * Animation Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + */ export default class Animation { + /** + * @constructor + * @param {KUTE.fullComponent} Component + */ constructor(Component) { try { if (Component.component in supportedProperties) { - throw Error(`KUTE.js - ${Component.component} already registered`); + throw Error(`KUTE - ${Component.component} already registered`); } else if (Component.property in defaultValues) { - throw Error(`KUTE.js - ${Component.property} already registered`); - } else { - this.setComponent(Component); + throw Error(`KUTE - ${Component.property} already registered`); } } catch (e) { throw Error(e); } - } - setComponent(Component) { const propertyInfo = this; const ComponentName = Component.component; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util } @@ -75,9 +76,10 @@ export default class Animation { // set additional options if (Component.defaultOptions) { - Object.keys(Component.defaultOptions).forEach((op) => { - defaultOptions[op] = Component.defaultOptions[op]; - }); + // Object.keys(Component.defaultOptions).forEach((op) => { + // defaultOptions[op] = Component.defaultOptions[op]; + // }); + Object.assign(defaultOptions, Component.defaultOptions); } // set functions @@ -105,7 +107,7 @@ export default class Animation { }); } - // set component interpolate + // set component interpolation functions if (Component.Interpolate) { Object.keys(Component.Interpolate).forEach((fni) => { const compIntObj = Component.Interpolate[fni]; diff --git a/src/animation/animationBase.js b/src/animation/animationBase.js index aa7a69d..ae3d763 100644 --- a/src/animation/animationBase.js +++ b/src/animation/animationBase.js @@ -1,18 +1,27 @@ -import supportedProperties from '../objects/supportedProperties.js'; -import defaultOptions from '../objects/defaultOptions.js'; -import onStart from '../objects/onStart.js'; -import onComplete from '../objects/onComplete.js'; -import linkProperty from '../objects/linkProperty.js'; -import Util from '../objects/util.js'; -import Interpolate from '../objects/interpolate.js'; +import supportedProperties from '../objects/supportedProperties'; +import defaultOptions from '../objects/defaultOptions'; +import onStart from '../objects/onStart'; +import onComplete from '../objects/onComplete'; +import linkProperty from '../objects/linkProperty'; +import Util from '../objects/util'; +import Interpolate from '../objects/interpolate'; -// Animation class +/** + * Animation Base Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + * + * This class only registers the minimal amount of component information + * required to enable components animation, which means value processing + * as well as `to()` and `allTo()` methods are not supported. + */ export default class AnimationBase { + /** + * @class + * @param {KUTE.baseComponent} Component + */ constructor(Component) { - return this.setComponent(Component); - } - - setComponent(Component) { const ComponentName = Component.component; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty } const Functions = { onStart, onComplete }; @@ -27,9 +36,10 @@ export default class AnimationBase { // set additional options if (Component.defaultOptions) { - Object.keys(Component.defaultOptions).forEach((op) => { - defaultOptions[op] = Component.defaultOptions[op]; - }); + // Object.keys(Component.defaultOptions).forEach((op) => { + // defaultOptions[op] = Component.defaultOptions[op]; + // }); + Object.assign(defaultOptions, Component.defaultOptions); } // set functions diff --git a/src/animation/animationDevelopment.js b/src/animation/animationDevelopment.js index 33d57ec..dc067d4 100644 --- a/src/animation/animationDevelopment.js +++ b/src/animation/animationDevelopment.js @@ -1,22 +1,28 @@ -import prepareProperty from '../objects/prepareProperty.js'; -import prepareStart from '../objects/prepareStart.js'; -import onStart from '../objects/onStart.js'; -import onComplete from '../objects/onComplete.js'; -import crossCheck from '../objects/crossCheck.js'; -import Interpolate from '../objects/interpolate.js'; +import prepareProperty from '../objects/prepareProperty'; +import prepareStart from '../objects/prepareStart'; +import onStart from '../objects/onStart'; +import onComplete from '../objects/onComplete'; +import crossCheck from '../objects/crossCheck'; +import Interpolate from '../objects/interpolate'; -import Animation from './animation.js'; +import Animation from './animation'; -// AnimationDevelopment class +/** + * Animation Development Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + * + * In addition to the default class, this one provides more component + * information to help you with custom component development. + */ export default class AnimationDevelopment extends Animation { - constructor(...args) { - super(...args); - - this.setComponent(...args); - } - - setComponent(Component) { - super.setComponent(Component); + /** + * + * @param {KUTE.fullComponent} args + */ + constructor(Component) { + super(Component); const propertyInfo = this; // const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty, Util } diff --git a/src/components/backgroundPosition.js b/src/components/backgroundPosition.js index 09eb7b0..d6cb99b 100644 --- a/src/components/backgroundPosition.js +++ b/src/components/backgroundPosition.js @@ -1,22 +1,27 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import numbers from '../interpolation/numbers.js'; -import trueDimension from '../util/trueDimension.js'; -import { onStartBgPos } from './backgroundPositionBase.js'; - -/* bgPosProp = { - property: 'backgroundPosition', - defaultValue: [0,0], - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } -} */ +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import numbers from '../interpolation/numbers'; +import trueDimension from '../util/trueDimension'; +import { onStartBgPos } from './backgroundPositionBase'; // Component Functions + +/** + * Returns the property computed style. + * @param {string} prop the property + * @returns {string} the property computed style + */ function getBgPos(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } -function prepareBgPos(prop, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number[]} the property tween object + */ +function prepareBgPos(/* prop, */_, value) { if (value instanceof Array) { const x = trueDimension(value[0]).v; const y = trueDimension(value[1]).v; diff --git a/src/components/backgroundPositionBase.js b/src/components/backgroundPositionBase.js index 2ccd4cb..5105372 100644 --- a/src/components/backgroundPositionBase.js +++ b/src/components/backgroundPositionBase.js @@ -1,27 +1,26 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; - -/* bgPosProp = { - property: 'backgroundPosition', - defaultValue: [0,0], - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } -} */ +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; // Component Functions +/** + * Sets the property update function. + * @param {string} prop the property name + */ export function onStartBgPos(prop) { - if (this.valuesEnd[prop] && !KUTE[prop]) { - KUTE[prop] = (elem, a, b, v) => { + if (this.valuesEnd[prop] && !KEC[prop]) { + KEC[prop] = (elem, a, b, v) => { + /* eslint-disable -- no-bitwise & no-param-reassign impossible to satisfy */ elem.style[prop] = `${(numbers(a[0], b[0], v) * 100 >> 0) / 100}% ${((numbers(a[1], b[1], v) * 100 >> 0) / 100)}%`; + /* eslint-enable -- no-bitwise & no-param-reassign impossible to satisfy */ }; } } // Component Base Object -const baseBgPosOps = { +const BackgroundPositionBase = { component: 'baseBackgroundPosition', property: 'backgroundPosition', Interpolate: { numbers }, functions: { onStart: onStartBgPos }, }; -export default baseBgPosOps; +export default BackgroundPositionBase; diff --git a/src/components/borderRadius.js b/src/components/borderRadius.js index 7a22687..17cef65 100644 --- a/src/components/borderRadius.js +++ b/src/components/borderRadius.js @@ -1,19 +1,14 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueDimension from '../util/trueDimension.js'; -import units from '../interpolation/units.js'; -import { radiusOnStartFn } from './borderRadiusBase.js'; - -/* borderRadius = { - category: 'borderRadius', - properties : [..], - defaultValues: {..}, - interpolation: {units} -} */ +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueDimension from '../util/trueDimension'; +import units from '../interpolation/units'; +import { radiusOnStartFn } from './borderRadiusBase'; // Component Properties -const radiusProps = ['borderRadius', - 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']; +const radiusProps = [ + 'borderRadius', + 'borderTopLeftRadius', 'borderTopRightRadius', + 'borderBottomLeftRadius', 'borderBottomRightRadius']; const radiusValues = {}; radiusProps.forEach((x) => { radiusValues[x] = 0; }); @@ -24,11 +19,21 @@ radiusProps.forEach((tweenProp) => { radiusOnStart[tweenProp] = radiusOnStartFn; }); +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} the property computed style + */ export function getRadius(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } -export function prepareRadius(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} value the property value + * @returns {{v: number, u: string}} the property tween object + */ +export function prepareRadius(/* tweenProp, */_, value) { return trueDimension(value); } diff --git a/src/components/borderRadiusBase.js b/src/components/borderRadiusBase.js index a28ff13..1a48e4e 100644 --- a/src/components/borderRadiusBase.js +++ b/src/components/borderRadiusBase.js @@ -1,5 +1,5 @@ -import KUTE from '../objects/kute.js'; -import units from '../interpolation/units.js'; +import KEC from '../objects/kute'; +import units from '../interpolation/units'; /* borderRadius = { category: 'borderRadius', @@ -9,13 +9,21 @@ import units from '../interpolation/units.js'; } */ // Component Properties -const radiusProps = ['borderRadius', - 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']; +const radiusProps = [ + 'borderRadius', + 'borderTopLeftRadius', 'borderTopRightRadius', + 'borderBottomLeftRadius', 'borderBottomRightRadius', +]; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function radiusOnStartFn(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style[tweenProp] = units(a.v, b.v, b.u, v); }; } @@ -26,10 +34,10 @@ radiusProps.forEach((tweenProp) => { }); // Base Component -const baseBorderRadius = { +const BorderRadiusBase = { component: 'baseBorderRadius', category: 'borderRadius', Interpolate: { units }, functions: { onStart: radiusOnStart }, }; -export default baseBorderRadius; +export default BorderRadiusBase; diff --git a/src/components/boxModel.js b/src/components/boxModel.js index cb6a93f..f40ac9e 100644 --- a/src/components/boxModel.js +++ b/src/components/boxModel.js @@ -1,8 +1,8 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueDimension from '../util/trueDimension.js'; -import numbers from '../interpolation/numbers.js'; -import { boxModelOnStart } from './boxModelBase.js'; +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueDimension from '../util/trueDimension'; +import numbers from '../interpolation/numbers'; +import { boxModelOnStart } from './boxModelBase'; // Component Properties const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', @@ -14,9 +14,21 @@ const boxModelValues = {}; boxModelProperties.forEach((x) => { boxModelValues[x] = 0; }); // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getBoxModel(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } + +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ function prepareBoxModel(tweenProp, value) { const boxValue = trueDimension(value); const offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; @@ -33,7 +45,7 @@ const boxModelFunctions = { }; // Component Full Component -const boxModel = { +const BoxModel = { component: 'boxModelProperties', category: 'boxModel', properties: boxModelProperties, @@ -42,4 +54,4 @@ const boxModel = { functions: boxModelFunctions, }; -export default boxModel; +export default BoxModel; diff --git a/src/components/boxModelBase.js b/src/components/boxModelBase.js index 7c4b62f..40b5ef6 100644 --- a/src/components/boxModelBase.js +++ b/src/components/boxModelBase.js @@ -1,13 +1,21 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; // Component Functions +/** + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ export function boxModelOnStart(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable no-param-reassign -- impossible to satisfy */ + /* eslint-disable no-bitwise -- impossible to satisfy */ elem.style[tweenProp] = `${v > 0.99 || v < 0.01 ? ((numbers(a, b, v) * 10) >> 0) / 10 : (numbers(a, b, v)) >> 0}px`; + /* eslint-enable no-bitwise */ + /* eslint-enable no-param-reassign */ }; } } @@ -18,7 +26,7 @@ const baseBoxOnStart = {}; baseBoxProps.forEach((x) => { baseBoxOnStart[x] = boxModelOnStart; }); // Component Base -const baseBoxModel = { +const BoxModelBase = { component: 'baseBoxModel', category: 'boxModel', properties: baseBoxProps, @@ -26,4 +34,4 @@ const baseBoxModel = { functions: { onStart: baseBoxOnStart }, }; -export default baseBoxModel; +export default BoxModelBase; diff --git a/src/components/boxModelEssential.js b/src/components/boxModelEssential.js index b997188..ff0fbed 100644 --- a/src/components/boxModelEssential.js +++ b/src/components/boxModelEssential.js @@ -1,13 +1,25 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueDimension from '../util/trueDimension.js'; -import numbers from '../interpolation/numbers.js'; -import { boxModelOnStart } from './boxModelBase.js'; +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueDimension from '../util/trueDimension'; +import numbers from '../interpolation/numbers'; +import { boxModelOnStart } from './boxModelBase'; // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getBoxModel(tweenProp) { return getStyleForProperty(this.element, tweenProp) || defaultValues[tweenProp]; } + +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property name + * @returns {number} the property tween object + */ function prepareBoxModel(tweenProp, value) { const boxValue = trueDimension(value); const offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth'; @@ -31,7 +43,7 @@ const essentialBoxModelFunctions = { }; // Component Essential -const essentialBoxModel = { +const BoxModelEssential = { component: 'essentialBoxModel', category: 'boxModel', properties: essentialBoxProps, @@ -41,4 +53,4 @@ const essentialBoxModel = { Util: { trueDimension }, }; -export default essentialBoxModel; +export default BoxModelEssential; diff --git a/src/components/clipProperty.js b/src/components/clipProperty.js index 80cc7ea..d833ad9 100644 --- a/src/components/clipProperty.js +++ b/src/components/clipProperty.js @@ -1,16 +1,29 @@ -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueDimension from '../util/trueDimension.js'; -import numbers from '../interpolation/numbers.js'; -import { onStartClip } from './clipPropertyBase.js'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueDimension from '../util/trueDimension'; +import numbers from '../interpolation/numbers'; +import { onStartClip } from './clipPropertyBase'; // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string | number[]} computed style for property + */ function getClip(tweenProp/* , value */) { - const currentClip = getStyleForProperty(this.element, tweenProp); - const width = getStyleForProperty(this.element, 'width'); - const height = getStyleForProperty(this.element, 'height'); + const { element } = this; + const currentClip = getStyleForProperty(element, tweenProp); + const width = getStyleForProperty(element, 'width'); + const height = getStyleForProperty(element, 'height'); return !/rect/.test(currentClip) ? [0, width, height, 0] : currentClip; } -function prepareClip(tweenProp, value) { + +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number[]} the property tween object + */ +function prepareClip(/* tweenProp, */_, value) { if (value instanceof Array) { return value.map((x) => trueDimension(x)); } @@ -27,7 +40,7 @@ const clipFunctions = { }; // Component Full -const clipProperty = { +const ClipProperty = { component: 'clipProperty', property: 'clip', defaultValue: [0, 0, 0, 0], @@ -36,4 +49,4 @@ const clipProperty = { Util: { trueDimension }, }; -export default clipProperty; +export default ClipProperty; diff --git a/src/components/clipPropertyBase.js b/src/components/clipPropertyBase.js index 6c94a1a..af1f807 100644 --- a/src/components/clipPropertyBase.js +++ b/src/components/clipPropertyBase.js @@ -1,24 +1,31 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartClip(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { let h = 0; const cl = []; for (h; h < 4; h += 1) { - const c1 = a[h].v; const c2 = b[h].v; const - cu = b[h].u || 'px'; + const c1 = a[h].v; + const c2 = b[h].v; + const cu = b[h].u || 'px'; + // eslint-disable-next-line no-bitwise -- impossible to satisfy cl[h] = ((numbers(c1, c2, v) * 100 >> 0) / 100) + cu; } + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.clip = `rect(${cl})`; }; } } // Component Base -const baseClip = { +const ClipPropertyBase = { component: 'baseClip', property: 'clip', // defaultValue: [0,0,0,0], @@ -26,4 +33,4 @@ const baseClip = { functions: { onStart: onStartClip }, }; -export default baseClip; +export default ClipPropertyBase; diff --git a/src/components/colorProperties.js b/src/components/colorProperties.js index bbccae7..7aed613 100644 --- a/src/components/colorProperties.js +++ b/src/components/colorProperties.js @@ -1,15 +1,18 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueColor from '../util/trueColor.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; -import { onStartColors } from './colorPropertiesBase.js'; +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueColor from '../util/trueColor'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; +import { onStartColors } from './colorPropertiesBase'; -// Component Interpolation // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) -const supportedColors = ['color', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; +const supportedColors = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor', +]; const defaultColors = {}; supportedColors.forEach((tweenProp) => { @@ -22,10 +25,22 @@ supportedColors.forEach((x) => { colorsOnStart[x] = onStartColors; }); +/** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} property computed style + */ function getColor(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } -function prepareColor(prop, value) { + +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.colorObject} the property tween object + */ +function prepareColor(/* prop, */_, value) { return trueColor(value); } diff --git a/src/components/colorPropertiesBase.js b/src/components/colorPropertiesBase.js index 93137b0..7b4d2e8 100644 --- a/src/components/colorPropertiesBase.js +++ b/src/components/colorPropertiesBase.js @@ -1,6 +1,6 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; // Component Interpolation // rgba1, rgba2, progress @@ -8,13 +8,22 @@ import colors from '../interpolation/colors.js'; // Component Properties // supported formats // 'hex', 'rgb', 'rgba' '#fff' 'rgb(0,0,0)' / 'rgba(0,0,0,0)' 'red' (IE9+) -const supportedColors = ['color', 'backgroundColor', 'borderColor', - 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor']; +const supportedColors = [ + 'color', 'backgroundColor', 'outlineColor', + 'borderColor', + 'borderTopColor', 'borderRightColor', + 'borderBottomColor', 'borderLeftColor', +]; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartColors(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = colors(a, b, v); }; } diff --git a/src/components/crossBrowserMove.js b/src/components/crossBrowserMove.js index f4c9378..dea762d 100644 --- a/src/components/crossBrowserMove.js +++ b/src/components/crossBrowserMove.js @@ -1,14 +1,17 @@ -import KUTE from '../objects/kute.js'; -import getInlineStyle from '../process/getInlineStyle.js'; -import defaultValues from '../objects/defaultValues.js'; -import trueProperty from '../util/trueProperty.js'; -import numbers from '../interpolation/numbers.js'; +import KEC from '../objects/kute'; +import getInlineStyle from '../process/getInlineStyle'; +import defaultValues from '../objects/defaultValues'; +import trueProperty from '../util/trueProperty'; +import numbers from '../interpolation/numbers'; // Component Const const transformProperty = trueProperty('transform'); const supportTransform = transformProperty in document.body.style ? 1 : 0; // Component Functions +/** + * Returns the property current style. + */ function getComponentCurrentValue(/* tweenProp, value */) { const currentTransform = getInlineStyle(this.element); const { left } = this.element.style; @@ -25,25 +28,38 @@ function getComponentCurrentValue(/* tweenProp, value */) { return [x, y]; } -function prepareComponentValue(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} _ property name + * @param {string} value property value + * @returns {number[]} the property tween object + */ +function prepareComponentValue(/* tweenProp */_, value) { const x = Number.isFinite(value * 1) ? parseInt(value, 10) : parseInt(value[0], 10) || 0; const y = parseInt(value[1], 10) || 0; return [x, y]; } +/** + * Sets the property update function. + * @param {string} tweenProp the `path` property + */ export function onStartComponent(tweenProp/* , value */) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { if (supportTransform) { - KUTE[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable-next-line no-param-reassign -- impossible to satisfy */ elem.style[transformProperty] = `translate(${numbers(a[0], b[0], v)}px,${numbers(a[1], b[1], v)}px)`; }; } else { - KUTE[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { if (a[0] || b[0]) { + /* eslint-disable-next-line no-param-reassign -- impossible to satisfy */ elem.style.left = `${numbers(a[0], b[0], v)}px`; } if (a[1] || b[1]) { + /* eslint-disable-next-line no-param-reassign -- impossible to satisfy */ elem.style.top = `${numbers(a[1], b[1], v)}px`; } }; diff --git a/src/components/filterEffects.js b/src/components/filterEffects.js index a0aac41..0294f59 100644 --- a/src/components/filterEffects.js +++ b/src/components/filterEffects.js @@ -1,9 +1,9 @@ -import getStyleForProperty from '../process/getStyleForProperty.js'; -import defaultValues from '../objects/defaultValues.js'; -import trueColor from '../util/trueColor.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; -import { dropShadow, onStartFilter } from './filterEffectsBase.js'; +import getStyleForProperty from '../process/getStyleForProperty'; +import defaultValues from '../objects/defaultValues'; +import trueColor from '../util/trueColor'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; +import { dropshadow, onStartFilter } from './filterEffectsBase'; /* filterEffects = { property: 'filter', @@ -14,10 +14,20 @@ import { dropShadow, onStartFilter } from './filterEffectsBase.js'; } */ // Component Util +/** + * Returns camelCase filter sub-property. + * @param {string} str source string + * @returns {string} camelCase property name + */ function replaceDashNamespace(str) { return str.replace('-r', 'R').replace('-s', 'S'); } +/** + * Returns `drop-shadow` sub-property object. + * @param {(string | number)[]} shadow and `Array` with `drop-shadow` parameters + * @returns {KUTE.filterList['dropShadow']} the expected `drop-shadow` values + */ function parseDropShadow(shadow) { let newShadow; @@ -36,6 +46,11 @@ function parseDropShadow(shadow) { return newShadow; } +/** + * Returns an array with current filter sub-properties values. + * @param {string} currentStyle the current filter computed style + * @returns {{[x: string]: number}} the filter tuple + */ function parseFilterString(currentStyle) { const result = {}; const fnReg = /(([a-z].*?)\(.*?\))(?=\s([a-z].*?)\(.*?\)|\s*$)/g; @@ -60,6 +75,12 @@ function parseFilterString(currentStyle) { } // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {string} computed style for property + */ function getFilter(tweenProp, value) { const currentStyle = getStyleForProperty(this.element, tweenProp); const filterObject = parseFilterString(currentStyle); @@ -74,7 +95,14 @@ function getFilter(tweenProp, value) { return filterObject; } -function prepareFilter(tweenProp, value) { + +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property name + * @returns {KUTE.filterList} the property tween object + */ +function prepareFilter(/* tweenProp, */_, value) { const filterObject = {}; let fnp; @@ -108,6 +136,10 @@ function prepareFilter(tweenProp, value) { return filterObject; } +/** + * Adds missing sub-properties in `valuesEnd` from `valuesStart`. + * @param {string} tweenProp the property name + */ function crossCheckFilter(tweenProp) { if (this.valuesEnd[tweenProp]) { Object.keys(this.valuesStart[tweenProp]).forEach((fn) => { @@ -158,7 +190,7 @@ const filterEffects = { sepia: numbers, invert: numbers, hueRotate: numbers, - dropShadow: { numbers, colors, dropShadow }, + dropShadow: { numbers, colors, dropshadow }, }, functions: filterFunctions, Util: { diff --git a/src/components/filterEffectsBase.js b/src/components/filterEffectsBase.js index b674227..884b1e1 100644 --- a/src/components/filterEffectsBase.js +++ b/src/components/filterEffectsBase.js @@ -1,30 +1,34 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; - -/* filterEffects = { - property: 'filter', - subProperties: {}, - defaultValue: {}, - interpolators: {}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; // Component Interpolation -export function dropShadow(a, b, v) { +/** + * Sets the `drop-shadow` sub-property update function. + * * disimbiguation `dropshadow` interpolation function and `dropShadow` property + * @param {string} tweenProp the property name + */ +export function dropshadow(a, b, v) { const params = []; const unit = 'px'; for (let i = 0; i < 3; i += 1) { + // eslint-disable-next-line no-bitwise params[i] = ((numbers(a[i], b[i], v) * 100 >> 0) / 100) + unit; } return `drop-shadow(${params.concat(colors(a[3], b[3], v)).join(' ')})`; } // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartFilter(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable-next-line no-param-reassign -- impossible to satisfy */ elem.style[tweenProp] = (b.url ? `url(${b.url})` : '') + /* eslint-disable no-bitwise -- impossible to satisfy */ + (a.opacity || b.opacity ? `opacity(${((numbers(a.opacity, b.opacity, v) * 100) >> 0) / 100}%)` : '') + (a.blur || b.blur ? `blur(${((numbers(a.blur, b.blur, v) * 100) >> 0) / 100}em)` : '') + (a.saturate || b.saturate ? `saturate(${((numbers(a.saturate, b.saturate, v) * 100) >> 0) / 100}%)` : '') @@ -34,7 +38,8 @@ export function onStartFilter(tweenProp) { + (a.sepia || b.sepia ? `sepia(${((numbers(a.sepia, b.sepia, v) * 100) >> 0) / 100}%)` : '') + (a.brightness || b.brightness ? `brightness(${((numbers(a.brightness, b.brightness, v) * 100) >> 0) / 100}%)` : '') + (a.contrast || b.contrast ? `contrast(${((numbers(a.contrast, b.contrast, v) * 100) >> 0) / 100}%)` : '') - + (a.dropShadow || b.dropShadow ? dropShadow(a.dropShadow, b.dropShadow, v) : ''); + + (a.dropShadow || b.dropShadow ? dropshadow(a.dropShadow, b.dropShadow, v) : ''); + /* eslint-enable no-bitwise -- impossible to satisfy */ }; } } @@ -61,7 +66,7 @@ const baseFilter = { sepia: numbers, invert: numbers, hueRotate: numbers, - dropShadow: { numbers, colors, dropShadow }, + dropShadow: { numbers, colors, dropshadow }, }, functions: { onStart: onStartFilter }, }; diff --git a/src/components/htmlAttributes.js b/src/components/htmlAttributes.js index eedcc9e..d72f861 100644 --- a/src/components/htmlAttributes.js +++ b/src/components/htmlAttributes.js @@ -1,10 +1,10 @@ -import defaultValues from '../objects/defaultValues.js'; -import onStart from '../objects/onStart.js'; -import trueColor from '../util/trueColor.js'; -import trueDimension from '../util/trueDimension.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; -import { attributes, onStartAttr } from './htmlAttributesBase.js'; +import defaultValues from '../objects/defaultValues'; +import onStart from '../objects/onStart'; +import trueColor from '../util/trueColor'; +import trueDimension from '../util/trueDimension'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; +import { attributes, onStartAttr } from './htmlAttributesBase'; // Component Name const ComponentName = 'htmlAttributes'; @@ -13,13 +13,25 @@ const ComponentName = 'htmlAttributes'; const svgColors = ['fill', 'stroke', 'stop-color']; // Component Util +/** + * Returns non-camelcase property name. + * @param {string} a the camelcase property name + * @returns {string} the non-camelcase property name + */ function replaceUppercase(a) { return a.replace(/[A-Z]/g, '-$&').toLowerCase(); } // Component Functions -export function getAttr(tweenProp, value) { +/** + * Returns the current attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {{[x:string]: string}} attribute value + */ +export function getAttr(/* tweenProp, */_, value) { const attrStartValues = {}; Object.keys(value).forEach((attr) => { - // get the value for 'fill-opacity' not fillOpacity, also 'width' not the internal 'width_px' + // get the value for 'fill-opacity' not fillOpacity + // also 'width' not the internal 'width_px' const attribute = replaceUppercase(attr).replace(/_+[a-z]+/, ''); const currentValue = this.element.getAttribute(attribute); attrStartValues[attribute] = svgColors.includes(attribute) @@ -30,6 +42,12 @@ export function getAttr(tweenProp, value) { return attrStartValues; } +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} attrObj the property value + * @returns {number} the property tween object + */ export function prepareAttr(tweenProp, attrObj) { // attr (string),attrObj (object) const attributesObject = {}; @@ -49,6 +67,7 @@ export function prepareAttr(tweenProp, attrObj) { // attr (string),attrObj (obje if (this.valuesEnd[tweenProp] && this.valuesEnd[tweenProp][tp] && !(tp in attributes)) { attributes[tp] = (elem, oneAttr, a, b, v) => { const _p = oneAttr.replace(suffix, ''); + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ elem.setAttribute(_p, ((numbers(a.v, b.v, v) * 1000 >> 0) / 1000) + b.u); }; } diff --git a/src/components/htmlAttributesBase.js b/src/components/htmlAttributesBase.js index 1b519e5..187abf6 100644 --- a/src/components/htmlAttributesBase.js +++ b/src/components/htmlAttributesBase.js @@ -1,6 +1,6 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; // Component Name const ComponentName = 'baseHTMLAttributes'; @@ -10,18 +10,30 @@ const attributes = {}; export { attributes }; export const onStartAttr = { + /** + * onStartAttr.attr + * + * Sets the sub-property update function. + * @param {string} tweenProp the property name + */ attr(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (elem, vS, vE, v) => { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (elem, vS, vE, v) => { Object.keys(vE).forEach((oneAttr) => { - KUTE.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); + KEC.attributes[oneAttr](elem, oneAttr, vS[oneAttr], vE[oneAttr], v); }); }; } }, + /** + * onStartAttr.attributes + * + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ attributes(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd.attr) { - KUTE[tweenProp] = attributes; + if (!KEC[tweenProp] && this.valuesEnd.attr) { + KEC[tweenProp] = attributes; } }, }; diff --git a/src/components/opacityProperty.js b/src/components/opacityProperty.js index 744ccfd..c54eae7 100644 --- a/src/components/opacityProperty.js +++ b/src/components/opacityProperty.js @@ -1,20 +1,24 @@ -import getStyleForProperty from '../process/getStyleForProperty.js'; -import numbers from '../interpolation/numbers.js'; -import { onStartOpacity } from './opacityPropertyBase.js'; - -/* opacityProperty = { - property: 'opacity', - defaultValue: 1, - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart } -} */ +import getStyleForProperty from '../process/getStyleForProperty'; +import numbers from '../interpolation/numbers'; +import { onStartOpacity } from './opacityPropertyBase'; // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ function getOpacity(tweenProp/* , value */) { return getStyleForProperty(this.element, tweenProp); } -function prepareOpacity(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ +function prepareOpacity(/* tweenProp, */_, value) { return parseFloat(value); // opacity always FLOAT } @@ -26,7 +30,7 @@ const opacityFunctions = { }; // Full Component -const opacityProperty = { +const OpacityProperty = { component: 'opacityProperty', property: 'opacity', defaultValue: 1, @@ -34,4 +38,4 @@ const opacityProperty = { functions: opacityFunctions, }; -export default opacityProperty; +export default OpacityProperty; diff --git a/src/components/opacityPropertyBase.js b/src/components/opacityPropertyBase.js index 122fcc2..6eaf1d2 100644 --- a/src/components/opacityPropertyBase.js +++ b/src/components/opacityPropertyBase.js @@ -1,5 +1,5 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; /* opacityProperty = { property: 'opacity', @@ -9,17 +9,23 @@ import numbers from '../interpolation/numbers.js'; } */ // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartOpacity(tweenProp/* , value */) { // opacity could be 0 sometimes, we need to check regardless - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable */ elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000; + /* eslint-enable */ }; } } // Base Component -const baseOpacity = { +const OpacityPropertyBase = { component: 'baseOpacity', property: 'opacity', // defaultValue: 1, @@ -27,4 +33,4 @@ const baseOpacity = { functions: { onStart: onStartOpacity }, }; -export default baseOpacity; +export default OpacityPropertyBase; diff --git a/src/components/scrollProperty.js b/src/components/scrollProperty.js index 2382fae..de3e66b 100644 --- a/src/components/scrollProperty.js +++ b/src/components/scrollProperty.js @@ -1,5 +1,4 @@ -import supportPassive from 'shorter-js/src/boolean/supportPassive.js'; -import numbers from '../interpolation/numbers.js'; +import numbers from '../interpolation/numbers'; import { scrollContainer, @@ -10,9 +9,13 @@ import { getScrollTargets, preventScroll, toggleScrollEvents, -} from './scrollPropertyBase.js'; +} from './scrollPropertyBase'; // Component Functions +/** + * Returns the current property computed style. + * @returns {number} computed style for property + */ function getScroll() { this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element; @@ -22,7 +25,13 @@ function getScroll() { : this.element.scrollTop; } -function prepareScroll(prop, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ +function prepareScroll(/* prop, */_, value) { return parseInt(value, 10); } @@ -35,7 +44,7 @@ const scrollFunctions = { }; // Full Component -const scrollProperty = { +const ScrollProperty = { component: 'scrollProperty', property: 'scroll', defaultValue: 0, @@ -43,8 +52,8 @@ const scrollProperty = { functions: scrollFunctions, // export stuff to global Util: { - preventScroll, scrollIn, scrollOut, getScrollTargets, toggleScrollEvents, supportPassive, + preventScroll, scrollIn, scrollOut, getScrollTargets, toggleScrollEvents, }, }; -export default scrollProperty; +export default ScrollProperty; diff --git a/src/components/scrollPropertyBase.js b/src/components/scrollPropertyBase.js index 86a0845..d15b3a7 100644 --- a/src/components/scrollPropertyBase.js +++ b/src/components/scrollPropertyBase.js @@ -1,8 +1,8 @@ -import supportPassive from 'shorter-js/src/boolean/supportPassive.js'; -import mouseHoverEvents from 'shorter-js/src/strings/mouseHoverEvents.js'; -import supportTouch from 'shorter-js/src/boolean/supportTouch.js'; -import numbers from '../interpolation/numbers.js'; -import KUTE from '../objects/kute.js'; +import passiveHandler from 'shorter-js/src/misc/passiveHandler'; +import mouseHoverEvents from 'shorter-js/src/strings/mouseHoverEvents'; +import supportTouch from 'shorter-js/src/boolean/supportTouch'; +import numbers from '../interpolation/numbers'; +import KEC from '../objects/kute'; // Component Util // events preventing scroll @@ -14,22 +14,36 @@ export const scrollContainer = navigator && /(EDGE|Mac)/i.test(navigator.userAge ? document.body : document.documentElement; -// scroll event options -// it's important to stop propagating when animating scroll -const passiveHandler = supportPassive ? { passive: false } : false; - -// prevent mousewheel or touch events while tweening scroll +/** + * Prevent further scroll events until scroll animation is over. + * @param {Event} e event object + */ export function preventScroll(e) { if (this.scrolling) e.preventDefault(); } + +/** + * Returns the scroll element / target. + * @returns {{el: Element, st: Element}} + */ export function getScrollTargets() { const el = this.element; return el === scrollContainer ? { el: document, st: document.body } : { el, st: el }; } + +/** + * Toggles scroll prevention callback on scroll events. + * @param {string} action addEventListener / removeEventListener + * @param {Element} element target + */ export function toggleScrollEvents(action, element) { element[action](mouseHoverEvents[0], preventScroll, passiveHandler); element[action](touchOrWheel, preventScroll, passiveHandler); } + +/** + * Action performed before scroll animation start. + */ export function scrollIn() { const targets = getScrollTargets.call(this); @@ -39,6 +53,9 @@ export function scrollIn() { targets.st.style.pointerEvents = 'none'; } } +/** + * Action performed when scroll animation ends. + */ export function scrollOut() { // prevent scroll when tweening scroll const targets = getScrollTargets.call(this); @@ -50,23 +67,35 @@ export function scrollOut() { // prevent scroll when tweening scroll } // Component Functions +/** + * * Sets the scroll target. + * * Adds the scroll prevention event listener. + * * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartScroll(tweenProp) { // checking 0 will NOT add the render function - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { this.element = ('scroll' in this.valuesEnd) && (!this.element || this.element === window) ? scrollContainer : this.element; scrollIn.call(this); - KUTE[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable */ elem.scrollTop = (numbers(a, b, v)) >> 0; + /* eslint-enable */ }; } } + +/** + * Removes the scroll prevention event listener. + */ export function onCompleteScroll(/* tweenProp */) { scrollOut.call(this); } // Base Component -const baseScroll = { +const ScrollPropertyBase = { component: 'baseScroll', property: 'scroll', // defaultValue: 0, @@ -77,8 +106,8 @@ const baseScroll = { }, // unfortunatelly scroll needs all them no matter the packaging Util: { - preventScroll, scrollIn, scrollOut, getScrollTargets, supportPassive, + preventScroll, scrollIn, scrollOut, getScrollTargets, }, }; -export default baseScroll; +export default ScrollPropertyBase; diff --git a/src/components/shadowProperties.js b/src/components/shadowProperties.js index 9d26349..952ec1c 100644 --- a/src/components/shadowProperties.js +++ b/src/components/shadowProperties.js @@ -1,19 +1,25 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueColor from '../util/trueColor.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; -import { onStartShadow } from './shadowPropertiesBase.js'; +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueColor from '../util/trueColor'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; +import { onStartShadow } from './shadowPropertiesBase'; // Component Properties const shadowProps = ['boxShadow', 'textShadow']; // Component Util -// box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit -// text-shadow: none | offset-x offset-y blur-radius color |initial|inherit -// utility function to process values accordingly -// numbers must be floats and color must be rgb object +/** + * Return the box-shadow / text-shadow tween object. + * * box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit + * * text-shadow: none | offset-x offset-y blur-radius color |initial|inherit + * * numbers must be floats and color must be rgb object + * + * @param {(number | string)[]} shadow an `Array` with shadow parameters + * @param {string} tweenProp the property name + * @returns {KUTE.shadowObject} the property tween object + */ function processShadowArray(shadow, tweenProp) { let newShadow; @@ -45,12 +51,17 @@ function processShadowArray(shadow, tweenProp) { newShadow = tweenProp === 'boxShadow' ? newShadow - : newShadow.filter((x, i) => [0, 1, 2, 4].includes(i)); + : newShadow.filter((_, i) => [0, 1, 2, 4].includes(i)); return newShadow; } // Component Functions +/** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ export function getShadow(tweenProp/* , value */) { const cssShadow = getStyleForProperty(this.element, tweenProp); // '0px 0px 0px 0px rgb(0,0,0)' @@ -59,6 +70,12 @@ export function getShadow(tweenProp/* , value */) { : cssShadow; } +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} propValue the property value + * @returns {KUTE.shadowObject} the property tween object + */ export function prepareShadow(tweenProp, propValue) { // [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset] // parseProperty for boxShadow, builds basic structure with ready to tween values @@ -95,7 +112,7 @@ const shadowFunctions = { }; // Component Full -const shadowProperties = { +const ShadowProperties = { component: 'shadowProperties', properties: shadowProps, defaultValues: { @@ -107,4 +124,4 @@ const shadowProperties = { Util: { processShadowArray, trueColor }, }; -export default shadowProperties; +export default ShadowProperties; diff --git a/src/components/shadowPropertiesBase.js b/src/components/shadowPropertiesBase.js index 54745e7..40167c2 100644 --- a/src/components/shadowPropertiesBase.js +++ b/src/components/shadowPropertiesBase.js @@ -1,14 +1,18 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; -import colors from '../interpolation/colors.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; +import colors from '../interpolation/colors'; // Component Properties const shadowProps = ['boxShadow', 'textShadow']; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartShadow(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { // let's start with the numbers | set unit | also determine inset const params = []; const unit = 'px'; @@ -18,9 +22,11 @@ export function onStartShadow(tweenProp) { const inset = (a[5] && a[5] !== 'none') || (b[5] && b[5] !== 'none') ? ' inset' : false; for (let i = 0; i < sl; i += 1) { + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ params.push(((numbers(a[i], b[i], v) * 1000 >> 0) / 1000) + unit); } // the final piece of the puzzle, the DOM update + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style[tweenProp] = inset ? colors(colA, colB, v) + params.join(' ') + inset : colors(colA, colB, v) + params.join(' '); @@ -31,15 +37,10 @@ const shadowPropOnStart = {}; shadowProps.forEach((x) => { shadowPropOnStart[x] = onStartShadow; }); // Component Base -const baseShadow = { +const ShadowPropertiesBase = { component: 'baseShadow', - // properties: shadowProps, - // defaultValues: { - // boxShadow :'0px 0px 0px 0px rgb(0,0,0)', - // textShadow: '0px 0px 0px 0px rgb(0,0,0)' - // }, Interpolate: { numbers, colors }, functions: { onStart: shadowPropOnStart }, }; -export default baseShadow; +export default ShadowPropertiesBase; diff --git a/src/components/svgCubicMorph.js b/src/components/svgCubicMorph.js index 7b06974..49963a3 100644 --- a/src/components/svgCubicMorph.js +++ b/src/components/svgCubicMorph.js @@ -1,31 +1,31 @@ -import parsePathString from 'svg-path-commander/src/process/parsePathString.js'; -import pathToAbsolute from 'svg-path-commander/src/convert/pathToAbsolute.js'; -import pathToCurve from 'svg-path-commander/src/convert/pathToCurve.js'; -import pathToString from 'svg-path-commander/src/convert/pathToString.js'; -import reverseCurve from 'svg-path-commander/src/process/reverseCurve.js'; -import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection.js'; -import clonePath from 'svg-path-commander/src/process/clonePath.js'; -import splitCubic from 'svg-path-commander/src/process/splitCubic.js'; -import splitPath from 'svg-path-commander/src/process/splitPath.js'; -import getSegCubicLength from 'svg-path-commander/src/util/getSegCubicLength.js'; -import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot.js'; -import { onStartCubicMorph } from './svgCubicMorphBase.js'; -import numbers from '../interpolation/numbers.js'; -import selector from '../util/selector.js'; +import parsePathString from 'svg-path-commander/src/parser/parsePathString'; +import pathToAbsolute from 'svg-path-commander/src/convert/pathToAbsolute'; +import pathToCurve from 'svg-path-commander/src/convert/pathToCurve'; +import pathToString from 'svg-path-commander/src/convert/pathToString'; +import reverseCurve from 'svg-path-commander/src/process/reverseCurve'; +import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection'; +import clonePath from 'svg-path-commander/src/process/clonePath'; +import splitCubic from 'svg-path-commander/src/process/splitCubic'; +import splitPath from 'svg-path-commander/src/process/splitPath'; +import fixPath from 'svg-path-commander/src/process/fixPath'; +import getSegCubicLength from 'svg-path-commander/src/util/getSegCubicLength'; +import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot'; -/* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ +import { onStartCubicMorph } from './svgCubicMorphBase'; +import numbers from '../interpolation/numbers'; +import selector from '../util/selector'; // Component Util -function getCurveArray(pathString) { - return pathToCurve(splitPath(pathToString(pathToAbsolute(pathString)))[0]) +/** + * Returns first `pathArray` from multi-paths path. + * @param {SVGPathCommander.pathArray | string} source the source `pathArray` or string + * @returns {KUTE.curveSpecs[]} an `Array` with a custom tuple for `equalizeSegments` + */ +function getCurveArray(source) { + return pathToCurve(splitPath(source)[0]) .map((segment, i, pathArray) => { - const segmentData = i && pathArray[i - 1].slice(-2).concat(segment.slice(1)); - const curveLength = i ? getSegCubicLength.apply(0, segmentData) : 0; + const segmentData = i && [...pathArray[i - 1].slice(-2), ...segment.slice(1)]; + const curveLength = i ? getSegCubicLength(...segmentData) : 0; let subsegs; if (i) { @@ -43,6 +43,13 @@ function getCurveArray(pathString) { }); } +/** + * Returns two `curveArray` with same amount of segments. + * @param {SVGPathCommander.curveArray} path1 the first `curveArray` + * @param {SVGPathCommander.curveArray} path2 the second `curveArray` + * @param {number} TL the maximum `curveArray` length + * @returns {SVGPathCommander.curveArray[]} equalized segments + */ function equalizeSegments(path1, path2, TL) { const c1 = getCurveArray(path1); const c2 = getCurveArray(path2); @@ -70,23 +77,34 @@ function equalizeSegments(path1, path2, TL) { : equalizeSegments(result[0], result[1], tl); } +/** + * Returns all possible path rotations for `curveArray`. + * @param {SVGPathCommander.curveArray} a the source `curveArray` + * @returns {SVGPathCommander.curveArray[]} all rotations for source + */ function getRotations(a) { const segCount = a.length; const pointCount = segCount - 1; - return a.map((f, idx) => a.map((p, i) => { + return a.map((_, idx) => a.map((__, i) => { let oldSegIdx = idx + i; let seg; if (i === 0 || (a[oldSegIdx] && a[oldSegIdx][0] === 'M')) { seg = a[oldSegIdx]; - return ['M'].concat(seg.slice(-2)); + return ['M', ...seg.slice(-2)]; } if (oldSegIdx >= segCount) oldSegIdx -= pointCount; return a[oldSegIdx]; })); } +/** + * Returns the `curveArray` rotation for the best morphing animation. + * @param {SVGPathCommander.curveArray} a the target `curveArray` + * @param {SVGPathCommander.curveArray} b the reference `curveArray` + * @returns {SVGPathCommander.curveArray} the best `a` rotation + */ function getRotatedCurve(a, b) { const segCount = a.length - 1; const lineLengths = []; @@ -94,8 +112,8 @@ function getRotatedCurve(a, b) { let sumLensSqrd = 0; const rotations = getRotations(a); - rotations.forEach((r, i) => { - a.slice(1).forEach((s, j) => { + rotations.forEach((_, i) => { + a.slice(1).forEach((__, j) => { sumLensSqrd += distanceSquareRoot(a[(i + j) % segCount].slice(-2), b[j % segCount].slice(-2)); }); lineLengths[i] = sumLensSqrd; @@ -108,10 +126,23 @@ function getRotatedCurve(a, b) { } // Component Functions +/** + * Returns the current `d` attribute value. + * @returns {string} + */ function getCubicMorph(/* tweenProp, value */) { return this.element.getAttribute('d'); } -function prepareCubicMorph(tweenProp, value) { + +/** + * Returns the property tween object. + * @see KUTE.curveObject + * + * @param {string} _ is the `path` property name, not needed + * @param {string | KUTE.curveObject} value the `path` property value + * @returns {KUTE.curveObject} + */ +function prepareCubicMorph(/* tweenProp, */_, value) { // get path d attribute or create a path from string value const pathObject = {}; // remove newlines, they break some JSON strings @@ -135,7 +166,12 @@ function prepareCubicMorph(tweenProp, value) { } return pathObject; } -function crossCheckCubicMorph(tweenProp) { + +/** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} tweenProp is `path` tween property, but it's not needed + */ +function crossCheckCubicMorph(tweenProp/** , value */) { if (this.valuesEnd[tweenProp]) { const pathCurve1 = this.valuesStart[tweenProp].curve; const pathCurve2 = this.valuesEnd[tweenProp].curve; @@ -183,6 +219,8 @@ const svgCubicMorph = { clonePath, getDrawDirection, splitCubic, + splitPath, + fixPath, getCurveArray, }, }; diff --git a/src/components/svgCubicMorphBase.js b/src/components/svgCubicMorphBase.js index 143389c..eca424f 100644 --- a/src/components/svgCubicMorphBase.js +++ b/src/components/svgCubicMorphBase.js @@ -1,24 +1,23 @@ -import pathToString from 'svg-path-commander/src/convert/pathToString.js'; -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; - -/* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers} }, - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ +import pathToString from 'svg-path-commander/src/convert/pathToString'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; // Component Functions + +/** + * Sets the property update function. + * @param {string} tweenProp the `path` property + */ export function onStartCubicMorph(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = function updateMorph(elem, a, b, v) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = function updateMorph(elem, a, b, v) { const curve = []; const path1 = a.curve; const path2 = b.curve; for (let i = 0, l = path2.length; i < l; i += 1) { // each path command curve.push([path1[i][0]]); for (let j = 1, l2 = path1[i].length; j < l2; j += 1) { // each command coordinate + /* eslint-disable-next-line no-bitwise -- impossible to satisfy */ curve[i].push((numbers(path1[i][j], path2[i][j], v) * 1000 >> 0) / 1000); } } diff --git a/src/components/svgDraw.js b/src/components/svgDraw.js index 1acd119..346e09d 100644 --- a/src/components/svgDraw.js +++ b/src/components/svgDraw.js @@ -1,29 +1,36 @@ -import getStyleForProperty from '../process/getStyleForProperty.js'; -import numbers from '../interpolation/numbers.js'; -import { onStartDraw } from './svgDrawBase.js'; - -/* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } -} */ +import getStyleForProperty from '../process/getStyleForProperty'; +import numbers from '../interpolation/numbers'; +import { onStartDraw } from './svgDrawBase'; // Component Util +/** + * Convert a `` length percent value to absolute. + * @param {string} v raw value + * @param {number} l length value + * @returns {number} the absolute value + */ function percent(v, l) { return (parseFloat(v) / 100) * l; } -// http://stackoverflow.com/a/30376660 -// returns the length of a Rect +/** + * Returns the `` length. + * It doesn't compute `rx` and / or `ry` of the element. + * @see http://stackoverflow.com/a/30376660 + * @param {SVGRectElement} el target element + * @returns {number} the `` length + */ function getRectLength(el) { const w = el.getAttribute('width'); const h = el.getAttribute('height'); return (w * 2) + (h * 2); } -// getPolygonLength / getPolylineLength -// returns the length of the Polygon / Polyline +/** + * Returns the `` / `` length. + * @param {SVGPolylineElement | SVGPolygonElement} el target element + * @returns {number} the element length + */ function getPolyLength(el) { const points = el.getAttribute('points').split(' '); @@ -54,7 +61,11 @@ function getPolyLength(el) { return len; } -// return the length of the line +/** + * Returns the `` length. + * @param {SVGLineElement} el target element + * @returns {number} the element length + */ function getLineLength(el) { const x1 = el.getAttribute('x1'); const x2 = el.getAttribute('x2'); @@ -63,13 +74,22 @@ function getLineLength(el) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); } -// return the length of the circle +/** + * Returns the `` length. + * @param {SVGCircleElement} el target element + * @returns {number} the element length + */ function getCircleLength(el) { const r = el.getAttribute('r'); return 2 * Math.PI * r; } // returns the length of an ellipse +/** + * Returns the `` length. + * @param {SVGEllipseElement} el target element + * @returns {number} the element length + */ function getEllipseLength(el) { const rx = el.getAttribute('rx'); const ry = el.getAttribute('ry'); @@ -78,7 +98,11 @@ function getEllipseLength(el) { return ((Math.sqrt(0.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2; } -// returns the result of any of the below functions +/** + * Returns the shape length. + * @param {SVGPathCommander.shapeTypes} el target element + * @returns {number} the element length + */ function getTotalLength(el) { if (el.tagName === 'rect') { return getRectLength(el); @@ -95,6 +119,12 @@ function getTotalLength(el) { return 0; } +/** + * Returns the property tween object. + * @param {SVGPathCommander.shapeTypes} element the target element + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ function getDraw(element, value) { const length = /path|glyph/.test(element.tagName) ? element.getTotalLength() @@ -104,7 +134,7 @@ function getDraw(element, value) { let dasharray; let offset; - if (value instanceof Object) { + if (value instanceof Object && Object.keys(value).every((v) => ['s', 'e', 'l'].includes(v))) { return value; } if (typeof value === 'string') { const v = value.split(/,|\s/); @@ -120,17 +150,33 @@ function getDraw(element, value) { return { s: start, e: end, l: length }; } +/** + * Reset CSS properties associated with the `draw` property. + * @param {SVGPathCommander.shapeTypes} element target + */ function resetDraw(elem) { + /* eslint-disable no-param-reassign -- impossible to satisfy */ elem.style.strokeDashoffset = ''; elem.style.strokeDasharray = ''; + /* eslint-disable no-param-reassign -- impossible to satisfy */ } // Component Functions +/** + * Returns the property tween object. + * @returns {KUTE.drawObject} the property tween object + */ function getDrawValue(/* prop, value */) { return getDraw(this.element); } -function prepareDraw(a, o) { - return getDraw(this.element, o); +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ +function prepareDraw(_, value) { + return getDraw(this.element, value); } // All Component Functions @@ -141,7 +187,7 @@ const svgDrawFunctions = { }; // Component Full -const svgDraw = { +const SvgDrawProperty = { component: 'svgDraw', property: 'draw', defaultValue: '0% 0%', @@ -161,4 +207,4 @@ const svgDraw = { }, }; -export default svgDraw; +export default SvgDrawProperty; diff --git a/src/components/svgDrawBase.js b/src/components/svgDrawBase.js index 0850d0d..5ad6680 100644 --- a/src/components/svgDrawBase.js +++ b/src/components/svgDrawBase.js @@ -1,35 +1,35 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; - -/* svgDraw = { - property: 'draw', - defaultValue, - Interpolate: {numbers} }, - functions = { prepareStart, prepareProperty, onStart } -} */ +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartDraw(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable no-bitwise -- impossible to satisfy */ const pathLength = (a.l * 100 >> 0) / 100; const start = (numbers(a.s, b.s, v) * 100 >> 0) / 100; const end = (numbers(a.e, b.e, v) * 100 >> 0) / 100; const offset = 0 - start; const dashOne = end + offset; - + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDashoffset = `${offset}px`; + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style.strokeDasharray = `${((dashOne < 1 ? 0 : dashOne) * 100 >> 0) / 100}px, ${pathLength}px`; + /* eslint-disable no-bitwise -- impossible to satisfy */ }; } } // Component Base -const baseSVGDraw = { +const SvgDrawBase = { component: 'baseSVGDraw', property: 'draw', Interpolate: { numbers }, functions: { onStart: onStartDraw }, }; -export default baseSVGDraw; +export default SvgDrawBase; diff --git a/src/components/svgMorph.js b/src/components/svgMorph.js index 032c089..d261608 100644 --- a/src/components/svgMorph.js +++ b/src/components/svgMorph.js @@ -1,46 +1,45 @@ -import pathToCurve from 'svg-path-commander/src/convert/pathToCurve.js'; -import pathToString from 'svg-path-commander/src/convert/pathToString.js'; -import normalizePath from 'svg-path-commander/src/process/normalizePath.js'; -import splitPath from 'svg-path-commander/src/process/splitPath.js'; -import roundPath from 'svg-path-commander/src/process/roundPath.js'; -import invalidPathValue from 'svg-path-commander/src/util/invalidPathValue.js'; -import getPathLength from 'svg-path-commander/src/util/getPathLength.js'; -import getPointAtLength from 'svg-path-commander/src/util/getPointAtLength.js'; -import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection.js'; -import epsilon from 'svg-path-commander/src/math/epsilon.js'; -import midPoint from 'svg-path-commander/src/math/midPoint.js'; -import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot.js'; -import { onStartSVGMorph } from './svgMorphBase.js'; -import coords from '../interpolation/coords.js'; -import defaultOptions from '../objects/defaultOptions.js'; -import selector from '../util/selector.js'; - -/* SVGMorph = { - property: 'path', - defaultValue: [], - interpolators: {numbers,coords}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ - -// Component Interpolation -// function function(array1, array2, length, progress) +import pathToCurve from 'svg-path-commander/src/convert/pathToCurve'; +import pathToString from 'svg-path-commander/src/convert/pathToString'; +import normalizePath from 'svg-path-commander/src/process/normalizePath'; +import splitPath from 'svg-path-commander/src/process/splitPath'; +import roundPath from 'svg-path-commander/src/process/roundPath'; +import invalidPathValue from 'svg-path-commander/src/parser/invalidPathValue'; +import getPathLength from 'svg-path-commander/src/util/getPathLength'; +import getPointAtLength from 'svg-path-commander/src/util/getPointAtLength'; +import getDrawDirection from 'svg-path-commander/src/util/getDrawDirection'; +import epsilon from 'svg-path-commander/src/math/epsilon'; +import midPoint from 'svg-path-commander/src/math/midPoint'; +import distanceSquareRoot from 'svg-path-commander/src/math/distanceSquareRoot'; +import { onStartSVGMorph } from './svgMorphBase'; +import coords from '../interpolation/coords'; +import defaultOptions from '../objects/defaultOptions'; +import selector from '../util/selector'; // Component Util // original script flubber // https://github.com/veltman/flubber -function polygonLength(ring) { - return ring.reduce((length, point, i) => (i - ? length + distanceSquareRoot(ring[i - 1], point) +/** + * Returns polygon length. + * @param {KUTE.polygonMorph} polygon target polygon + * @returns {number} length + */ +function polygonLength(polygon) { + return polygon.reduce((length, point, i) => (i + ? length + distanceSquareRoot(polygon[i - 1], point) : 0), 0); } +/** + * Returns an existing polygin and its length or false if not polygon. + * @param {SVGPathCommander.pathArray} pathArray target polygon + * @returns {KUTE.exactRing} length + */ function exactRing(pathArray) { - const ring = []; + const polygon = []; const pathlen = pathArray.length; let segment = []; let pathCommand = ''; - let pathLength = 0; if (!pathArray.length || pathArray[0][0] !== 'M') { return false; @@ -52,54 +51,68 @@ function exactRing(pathArray) { if ((pathCommand === 'M' && i) || pathCommand === 'Z') { break; // !! - } else if ('ML'.indexOf(pathCommand) > -1) { - ring.push([segment[1], segment[2]]); + } else if ('ML'.includes(pathCommand)) { + polygon.push([segment[1], segment[2]]); } else { return false; } } - pathLength = polygonLength(ring); - - return pathlen ? { ring, pathLength } : false; + return pathlen ? { polygon } : false; } -function approximateRing(parsed, maxSegmentLength) { +/** + * Returns polygon length. + * @param {SVGPathCommander.pathArray} parsed target polygon + * @param {number} maxLength the maximum segment length + * @returns {KUTE.exactRing} length + */ +function approximatePolygon(parsed, maxLength) { const ringPath = splitPath(pathToString(parsed))[0]; - const curvePath = pathToCurve(ringPath, 4); + const curvePath = pathToCurve(ringPath); const pathLength = getPathLength(curvePath); - const ring = []; + const polygon = []; let numPoints = 3; let point; - if (maxSegmentLength && !Number.isNaN(maxSegmentLength) && +maxSegmentLength > 0) { - numPoints = Math.max(numPoints, Math.ceil(pathLength / maxSegmentLength)); + if (maxLength && !Number.isNaN(maxLength) && +maxLength > 0) { + numPoints = Math.max(numPoints, Math.ceil(pathLength / maxLength)); } for (let i = 0; i < numPoints; i += 1) { point = getPointAtLength(curvePath, (pathLength * i) / numPoints); - ring.push([point.x, point.y]); + polygon.push([point.x, point.y]); } // Make all rings clockwise if (!getDrawDirection(curvePath)) { - ring.reverse(); + polygon.reverse(); } return { - pathLength, - ring, + polygon, skipBisect: true, }; } -function pathStringToRing(str, maxSegmentLength) { - const parsed = normalizePath(str, 0); - return exactRing(parsed) || approximateRing(parsed, maxSegmentLength); +/** + * Parses a path string and returns a polygon array. + * @param {string} str path string + * @param {number} maxLength maximum amount of points + * @returns {KUTE.exactRing} the polygon array we need + */ +function pathStringToPolygon(str, maxLength) { + const parsed = normalizePath(str); + return exactRing(parsed) || approximatePolygon(parsed, maxLength); } -function rotateRing(ring, vs) { - const len = ring.length; +/** + * Rotates a polygon to better match its pair. + * @param {KUTE.polygonMorph} polygon the target polygon + * @param {KUTE.polygonMorph} vs the reference polygon + */ +function rotatePolygon(polygon, vs) { + const len = polygon.length; let min = Infinity; let bestOffset; let sumOfSquares = 0; @@ -110,13 +123,9 @@ function rotateRing(ring, vs) { for (let offset = 0; offset < len; offset += 1) { sumOfSquares = 0; - // vs.forEach((p, i) => { - // const d = distanceSquareRoot(ring[(offset + i) % len], p); - // sumOfSquares += d * d; - // }); for (let i = 0; i < vs.length; i += 1) { p = vs[i]; - d = distanceSquareRoot(ring[(offset + i) % len], p); + d = distanceSquareRoot(polygon[(offset + i) % len], p); sumOfSquares += d * d; } @@ -127,15 +136,19 @@ function rotateRing(ring, vs) { } if (bestOffset) { - spliced = ring.splice(0, bestOffset); - ring.splice(ring.length, 0, ...spliced); + spliced = polygon.splice(0, bestOffset); + polygon.splice(polygon.length, 0, ...spliced); } } -function addPoints(ring, numPoints) { - const desiredLength = ring.length + numPoints; - // const step = ring.pathLength / numPoints; - const step = polygonLength(ring) / numPoints; +/** + * Sample additional points for a polygon to better match its pair. + * @param {KUTE.polygonObject} polygon the target polygon + * @param {number} numPoints the amount of points needed + */ +function addPoints(polygon, numPoints) { + const desiredLength = polygon.length + numPoints; + const step = polygonLength(polygon) / numPoints; let i = 0; let cursor = 0; @@ -144,14 +157,14 @@ function addPoints(ring, numPoints) { let b; let segment; - while (ring.length < desiredLength) { - a = ring[i]; - b = ring[(i + 1) % ring.length]; + while (polygon.length < desiredLength) { + a = polygon[i]; + b = polygon[(i + 1) % polygon.length]; segment = distanceSquareRoot(a, b); if (insertAt <= cursor + segment) { - ring.splice(i + 1, 0, segment + polygon.splice(i + 1, 0, segment ? midPoint(a, b, (insertAt - cursor) / segment) : a.slice(0)); insertAt += step; @@ -162,48 +175,62 @@ function addPoints(ring, numPoints) { } } -function bisect(ring, maxSegmentLength = Infinity) { +/** + * Split segments of a polygon until it reaches a certain + * amount of points. + * @param {number[][]} polygon the target polygon + * @param {number} maxSegmentLength the maximum amount of points + */ +function bisect(polygon, maxSegmentLength = Infinity) { let a = []; let b = []; - for (let i = 0; i < ring.length; i += 1) { - a = ring[i]; - b = i === ring.length - 1 ? ring[0] : ring[i + 1]; + for (let i = 0; i < polygon.length; i += 1) { + a = polygon[i]; + b = i === polygon.length - 1 ? polygon[0] : polygon[i + 1]; // Could splice the whole set for a segment instead, but a bit messy while (distanceSquareRoot(a, b) > maxSegmentLength) { b = midPoint(a, b, 0.5); - ring.splice(i + 1, 0, b); + polygon.splice(i + 1, 0, b); } } } -function validRing(ring) { - return Array.isArray(ring) - && ring.every((point) => Array.isArray(point) +/** + * Checks the validity of a polygon. + * @param {KUTE.polygonMorph} polygon the target polygon + * @returns {boolean} the result of the check + */ +function validPolygon(polygon) { + return Array.isArray(polygon) + && polygon.every((point) => Array.isArray(point) && point.length === 2 && !Number.isNaN(point[0]) && !Number.isNaN(point[1])); } -function normalizeRing(input, maxSegmentLength) { +/** + * Returns a new polygon and its length from string or another `Array`. + * @param {KUTE.polygonMorph | string} input the target polygon + * @param {number} maxSegmentLength the maximum amount of points + * @returns {KUTE.polygonMorph} normalized polygon + */ +function getPolygon(input, maxSegmentLength) { let skipBisect; - let pathLength; - let ring = input; + let polygon; - if (typeof (ring) === 'string') { - const converted = pathStringToRing(ring, maxSegmentLength); - ring = converted.ring; - skipBisect = converted.skipBisect; - pathLength = converted.pathLength; - } else if (!Array.isArray(ring)) { - throw Error(`${invalidPathValue}: ${ring}`); + if (typeof (input) === 'string') { + const converted = pathStringToPolygon(input, maxSegmentLength); + ({ polygon, skipBisect } = converted); + } else if (!Array.isArray(input)) { + throw Error(`${invalidPathValue}: ${input}`); } - const points = ring.slice(0); - points.pathLength = pathLength; + /** @type {KUTE.polygonMorph} */ + const points = [...polygon]; - if (!validRing(points)) { + if (!validPolygon(points)) { throw Error(`${invalidPathValue}: ${points}`); } @@ -221,39 +248,56 @@ function normalizeRing(input, maxSegmentLength) { return points; } -function getInterpolationPoints(pathArray1, pathArray2, precision) { +/** + * Returns two new polygons ready to tween. + * @param {string} path1 the first path string + * @param {string} path2 the second path string + * @param {number} precision the morphPrecision option value + * @returns {KUTE.polygonMorph[]} the two polygons + */ +function getInterpolationPoints(path1, path2, precision) { const morphPrecision = precision || defaultOptions.morphPrecision; - const fromRing = normalizeRing(pathArray1, morphPrecision); - const toRing = normalizeRing(pathArray2, morphPrecision); + const fromRing = getPolygon(path1, morphPrecision); + const toRing = getPolygon(path2, morphPrecision); const diff = fromRing.length - toRing.length; addPoints(fromRing, diff < 0 ? diff * -1 : 0); addPoints(toRing, diff > 0 ? diff : 0); - rotateRing(fromRing, toRing); + rotatePolygon(fromRing, toRing); return [roundPath(fromRing), roundPath(toRing)]; } // Component functions +/** + * Returns the current `d` attribute value. + * @returns {string} the `d` attribute value + */ function getSVGMorph(/* tweenProp */) { return this.element.getAttribute('d'); } -function prepareSVGMorph(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.polygonObject} value the property value + * @returns {KUTE.polygonObject} the property tween object + */ +function prepareSVGMorph(/* tweenProp */_, value) { const pathObject = {}; // remove newlines, they brake JSON strings sometimes const pathReg = new RegExp('\\n', 'ig'); let elem = null; - if (value instanceof SVGElement) { + if (value instanceof SVGPathElement) { elem = value; } else if (/^\.|^#/.test(value)) { elem = selector(value); } // first make sure we return pre-processed values - if (typeof (value) === 'object' && value.pathArray) { + if (typeof (value) === 'object' && value.polygon) { return value; } if (elem && ['path', 'glyph'].includes(elem.tagName)) { pathObject.original = elem.getAttribute('d').replace(pathReg, ''); @@ -264,10 +308,15 @@ function prepareSVGMorph(tweenProp, value) { return pathObject; } + +/** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} prop the `path` property name + */ function crossCheckSVGMorph(prop) { if (this.valuesEnd[prop]) { - const pathArray1 = this.valuesStart[prop].pathArray; - const pathArray2 = this.valuesEnd[prop].pathArray; + const pathArray1 = this.valuesStart[prop].polygon; + const pathArray2 = this.valuesEnd[prop].polygon; // skip already processed paths // allow the component to work with pre-processed values if (!pathArray1 || !pathArray2 @@ -280,8 +329,8 @@ function crossCheckSVGMorph(prop) { : defaultOptions.morphPrecision; const [path1, path2] = getInterpolationPoints(p1, p2, morphPrecision); - this.valuesStart[prop].pathArray = path1; - this.valuesEnd[prop].pathArray = path2; + this.valuesStart[prop].polygon = path1; + this.valuesEnd[prop].polygon = path2; } } } @@ -295,27 +344,29 @@ const svgMorphFunctions = { }; // Component Full -const svgMorph = { +const SVGMorph = { component: 'svgMorph', property: 'path', defaultValue: [], Interpolate: coords, - defaultOptions: { morphPrecision: 10, morphIndex: 0 }, + defaultOptions: { morphPrecision: 10 }, functions: svgMorphFunctions, // Export utils to global for faster execution Util: { + // component addPoints, bisect, - normalizeRing, - validRing, // component + getPolygon, + validPolygon, getInterpolationPoints, - pathStringToRing, + pathStringToPolygon, distanceSquareRoot, midPoint, - approximateRing, - rotateRing, + approximatePolygon, + rotatePolygon, + // svg-path-commander pathToString, - pathToCurve, // svg-path-commander + pathToCurve, getPathLength, getPointAtLength, getDrawDirection, @@ -323,4 +374,4 @@ const svgMorph = { }, }; -export default svgMorph; +export default SVGMorph; diff --git a/src/components/svgMorphBase.js b/src/components/svgMorphBase.js index 72829e7..6c63d81 100644 --- a/src/components/svgMorphBase.js +++ b/src/components/svgMorphBase.js @@ -1,5 +1,5 @@ -import KUTE from '../objects/kute.js'; -import coords from '../interpolation/coords.js'; +import KEC from '../objects/kute'; +import coords from '../interpolation/coords'; /* SVGMorph = { property: 'path', @@ -9,22 +9,26 @@ import coords from '../interpolation/coords.js'; } */ // Component functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartSVGMorph(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { - const path1 = a.pathArray; const path2 = b.pathArray; const - len = path2.length; + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + const path1 = a.polygon; const path2 = b.polygon; + const len = path2.length; elem.setAttribute('d', (v === 1 ? b.original : `M${coords(path1, path2, len, v).join('L')}Z`)); }; } } // Component Base -const baseSVGMorph = { +const SVGMorphBase = { component: 'baseSVGMorph', property: 'path', Interpolate: coords, functions: { onStart: onStartSVGMorph }, }; -export default baseSVGMorph; +export default SVGMorphBase; diff --git a/src/components/svgTransform.js b/src/components/svgTransform.js index 88d0463..82c2599 100644 --- a/src/components/svgTransform.js +++ b/src/components/svgTransform.js @@ -1,17 +1,16 @@ -import numbers from '../interpolation/numbers.js'; -import { svgTransformOnStart } from './svgTransformBase.js'; - -/* const svgTransform = { - property: 'svgTransform', - subProperties, - defaultValue, - Interpolate: {numbers}, - functions -} */ +import numbers from '../interpolation/numbers'; +import { svgTransformOnStart } from './svgTransformBase'; // Component Util -function parseStringOrigin(origin, { x, width }) { +/** + * Returns a correct transform origin consistent with the shape bounding box. + * @param {string} origin transform origin string + * @param {SVGPathCommander.pathBBox} bbox path bounding box + * @returns {number} + */ +function parseStringOrigin(origin, bbox) { let result; + const { x, width } = bbox; if (/[a-z]/i.test(origin) && !/px/.test(origin)) { result = origin.replace(/top|left/, 0) .replace(/right|bottom/, 100) @@ -22,7 +21,11 @@ function parseStringOrigin(origin, { x, width }) { return result; } -// helper function that turns transform value from string to object +/** + * Parse SVG transform string and return an object. + * @param {string} a transform string + * @returns {Object} + */ function parseTransformString(a) { const c = {}; const d = a && /\)/.test(a) @@ -38,7 +41,14 @@ function parseTransformString(a) { return c; } -function parseTransformSVG(p, v) { +/** + * Returns the SVG transform tween object. + * @param {string} _ property name + * @param {Object} v property value object + * @returns {KUTE.transformSVGObject} the SVG transform tween object + */ +function parseTransformSVG(/* prop */_, v) { + /** @type {KUTE.transformSVGObject} */ const svgTransformObject = {}; // by default the transformOrigin is "50% 50%" of the shape box @@ -90,12 +100,23 @@ function parseTransformSVG(p, v) { } // Component Functions -function prepareSvgTransform(p, v) { - return parseTransformSVG.call(this, p, v); +/** + * Returns the property tween object. + * @param {string} prop the property name + * @param {string} value the property value + * @returns {KUTE.transformSVGObject} the property tween object + */ +function prepareSvgTransform(prop, value) { + return parseTransformSVG.call(this, prop, value); } -// returns an obect with current transform attribute value -function getStartSvgTransform(tweenProp, value) { +/** + * Returns an object with the current transform attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {string} current transform object + */ +function getStartSvgTransform(/* tweenProp */_, value) { const transformObject = {}; const currentTransform = parseTransformString(this.element.getAttribute('transform')); diff --git a/src/components/svgTransformBase.js b/src/components/svgTransformBase.js index f3f23cf..290ddd5 100644 --- a/src/components/svgTransformBase.js +++ b/src/components/svgTransformBase.js @@ -1,18 +1,14 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; - -/* svgTransform = { - property: 'svgTransform', - subProperties, - defaultValue, - Interpolate: {numbers}, - functions -} */ +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function svgTransformOnStart(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (l, a, b, v) => { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (l, a, b, v) => { let x = 0; let y = 0; const deg = Math.PI / 180; @@ -43,6 +39,7 @@ export function svgTransformOnStart(tweenProp) { x += complex ? b.origin[0] : 0; y += complex ? b.origin[1] : 0; // finally we apply the transform attribute value + /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ l.setAttribute('transform', (x || y ? (`translate(${(x * 1000 >> 0) / 1000}${y ? (`,${(y * 1000 >> 0) / 1000}`) : ''})`) : '') + (rotate ? `rotate(${(rotate * 1000 >> 0) / 1000})` : '') + (skewX ? `skewX(${(skewX * 1000 >> 0) / 1000})` : '') diff --git a/src/components/textProperties.js b/src/components/textProperties.js index 1504c12..4f831ab 100644 --- a/src/components/textProperties.js +++ b/src/components/textProperties.js @@ -1,15 +1,8 @@ -import defaultValues from '../objects/defaultValues.js'; -import getStyleForProperty from '../process/getStyleForProperty.js'; -import trueDimension from '../util/trueDimension.js'; -import units from '../interpolation/units.js'; -import { textPropOnStart } from './textPropertiesBase.js'; - -/* textProperties = { - category: 'textProperties', - defaultValues: [], - interpolators: {units} - functions = { prepareStart, prepareProperty, onStart } -} */ +import defaultValues from '../objects/defaultValues'; +import getStyleForProperty from '../process/getStyleForProperty'; +import trueDimension from '../util/trueDimension'; +import units from '../interpolation/units'; +import { textPropOnStart } from './textPropertiesBase'; // Component Properties const textProps = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing']; @@ -20,11 +13,22 @@ textProps.forEach((tweenProp) => { textOnStart[tweenProp] = textPropOnStart; }); +/** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} computed style for property + */ export function getTextProp(prop/* , value */) { return getStyleForProperty(this.element, prop) || defaultValues[prop]; } -export function prepareTextProp(prop, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ +export function prepareTextProp(/* prop */_, value) { return trueDimension(value); } @@ -36,7 +40,7 @@ const textPropFunctions = { }; // Component Full -const textProperties = { +const TextProperties = { component: 'textProperties', category: 'textProperties', properties: textProps, @@ -48,4 +52,4 @@ const textProperties = { Util: { trueDimension }, }; -export default textProperties; +export default TextProperties; diff --git a/src/components/textPropertiesBase.js b/src/components/textPropertiesBase.js index 2d6477e..58dfa14 100644 --- a/src/components/textPropertiesBase.js +++ b/src/components/textPropertiesBase.js @@ -1,20 +1,18 @@ -import KUTE from '../objects/kute.js'; -import units from '../interpolation/units.js'; - -/* textProperties = { - category: 'textProperties', - defaultValues: [], - interpolators: {units}, - functions = { prepareStart, prepareProperty, onStart:{} -} */ +import KEC from '../objects/kute'; +import units from '../interpolation/units'; // Component Properties const textProperties = ['fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing']; const textOnStart = {}; +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function textPropOnStart(tweenProp) { - if (this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign -- impossible to satisfy elem.style[tweenProp] = units(a.v, b.v, b.u, v); }; } @@ -25,7 +23,7 @@ textProperties.forEach((tweenProp) => { }); // Component Base -const baseTextProperties = { +const TextPropertiesBase = { component: 'baseTextProperties', category: 'textProps', // properties: textProperties, @@ -34,4 +32,4 @@ const baseTextProperties = { functions: { onStart: textOnStart }, }; -export default baseTextProperties; +export default TextPropertiesBase; diff --git a/src/components/textWrite.js b/src/components/textWrite.js index de338ec..e3d9363 100644 --- a/src/components/textWrite.js +++ b/src/components/textWrite.js @@ -1,7 +1,7 @@ -import connect from '../objects/connect.js'; -import numbers from '../interpolation/numbers.js'; +import connect from '../objects/connect'; +import numbers from '../interpolation/numbers'; -import { onStartWrite, charSet } from './textWriteBase.js'; +import { onStartWrite, charSet } from './textWriteBase'; // Component Util // utility for multi-child targets @@ -20,8 +20,10 @@ function wrapContentsSpan(el, classNAME) { textWriteWrapper = document.createElement('SPAN'); textWriteWrapper.className = classNAME; textWriteWrapper.innerHTML = elementInnerHTML; + /* eslint-disable no-param-reassign -- impossible to satisfy */ el.appendChild(textWriteWrapper); el.innerHTML = textWriteWrapper.outerHTML; + /* eslint-enable no-param-reassign -- impossible to satisfy */ } else if (el.children.length && el.children[0].className === classNAME) { [textWriteWrapper] = el.children; } @@ -72,9 +74,11 @@ function setSegments(target, newText) { const oldTargetSegs = getTextPartsArray(target, 'text-part'); const newTargetSegs = getTextPartsArray(wrapContentsSpan(newText), 'text-part'); + /* eslint-disable no-param-reassign */ target.innerHTML = ''; target.innerHTML += oldTargetSegs.map((s) => { s.className += ' oldText'; return s.outerHTML; }).join(''); target.innerHTML += newTargetSegs.map((s) => { s.className += ' newText'; return s.outerHTML.replace(s.innerHTML, ''); }).join(''); + /* eslint-enable no-param-reassign */ return [oldTargetSegs, newTargetSegs]; } @@ -113,8 +117,10 @@ export function createTextTweens(target, newText, ops) { })); textTween = textTween.concat(newTargets.map((el, i) => { function onComplete() { + /* eslint-disable no-param-reassign */ target.innerHTML = newText; target.playing = false; + /* eslint-enable no-param-reassign */ } options.duration = options.duration === 'auto' ? newTargetSegs[i].innerHTML.length * 75 : options.duration; @@ -128,6 +134,7 @@ export function createTextTweens(target, newText, ops) { textTween.start = function startTweens() { if (!target.playing) { textTween.forEach((tw) => tw.start()); + // eslint-disable-next-line no-param-reassign target.playing = true; } }; @@ -136,10 +143,20 @@ export function createTextTweens(target, newText, ops) { } // Component Functions +/** + * Returns the current element `innerHTML`. + * @returns {string} computed style for property + */ function getWrite(/* tweenProp, value */) { return this.element.innerHTML; } +/** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number | string} the property tween object + */ function prepareText(tweenProp, value) { if (tweenProp === 'number') { return parseFloat(value); @@ -156,7 +173,7 @@ export const textWriteFunctions = { }; // Full Component -export const textWrite = { +export const TextWrite = { component: 'textWriteProperties', category: 'textWrite', properties: ['text', 'number'], @@ -168,4 +185,4 @@ export const textWrite = { Util: { charSet, createTextTweens }, }; -export default textWrite; +export default TextWrite; diff --git a/src/components/textWriteBase.js b/src/components/textWriteBase.js index 2aa722c..329c3e6 100644 --- a/src/components/textWriteBase.js +++ b/src/components/textWriteBase.js @@ -1,6 +1,6 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; -import defaultOptions from '../objects/defaultOptions.js'; +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; +import defaultOptions from '../objects/defaultOptions'; // Component Values const lowerCaseAlpha = String('abcdefghijklmnopqrstuvwxyz').split(''); // lowercase @@ -23,8 +23,14 @@ export { charSet }; // Component Functions export const onStartWrite = { + /** + * onStartWrite.text + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ text(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { const chars = this._textChars; let charsets = charSet[defaultOptions.textChars]; @@ -34,12 +40,13 @@ export const onStartWrite = { charsets = chars; } - KUTE[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { let initialText = ''; let endText = ''; const finalText = b === '' ? ' ' : b; const firstLetterA = a.substring(0); const firstLetterB = b.substring(0); + /* eslint-disable */ const pointer = charsets[(Math.random() * charsets.length) >> 0]; if (a === ' ') { @@ -58,20 +65,29 @@ export const onStartWrite = { .substring(0, Math.min(v * firstLetterB.length, firstLetterB.length) >> 0); elem.innerHTML = v < 1 ? ((endText + pointer + initialText)) : finalText; } + /* eslint-enable */ }; } }, + /** + * onStartWrite.number + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ number(tweenProp) { - if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) { // numbers can be 0 - KUTE[tweenProp] = (elem, a, b, v) => { + if (tweenProp in this.valuesEnd && !KEC[tweenProp]) { // numbers can be 0 + KEC[tweenProp] = (elem, a, b, v) => { + /* eslint-disable */ elem.innerHTML = numbers(a, b, v) >> 0; + /* eslint-enable */ }; } }, }; // Base Component -export const baseTextWrite = { +export const TextWriteBase = { component: 'baseTextWrite', category: 'textWrite', // properties: ['text','number'], @@ -83,4 +99,4 @@ export const baseTextWrite = { Util: { charSet }, }; -export default baseTextWrite; +export default TextWriteBase; diff --git a/src/components/transformFunctions.js b/src/components/transformFunctions.js index e7e16e6..0c912cf 100644 --- a/src/components/transformFunctions.js +++ b/src/components/transformFunctions.js @@ -1,31 +1,35 @@ -import defaultValues from '../objects/defaultValues.js'; -import getInlineStyle from '../process/getInlineStyle.js'; -import perspective from '../interpolation/perspective.js'; -import translate3d from '../interpolation/translate3d.js'; -import rotate3d from '../interpolation/rotate3d.js'; -import translate from '../interpolation/translate.js'; -import rotate from '../interpolation/rotate.js'; -import scale from '../interpolation/scale.js'; -import skew from '../interpolation/skew.js'; -import { onStartTransform } from './transformFunctionsBase.js'; - -/* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ +import defaultValues from '../objects/defaultValues'; +import getInlineStyle from '../process/getInlineStyle'; +import perspective from '../interpolation/perspective'; +import translate3d from '../interpolation/translate3d'; +import rotate3d from '../interpolation/rotate3d'; +import translate from '../interpolation/translate'; +import rotate from '../interpolation/rotate'; +import scale from '../interpolation/scale'; +import skew from '../interpolation/skew'; +import { onStartTransform } from './transformFunctionsBase'; // same to svg transform, attr // the component developed for modern browsers supporting non-prefixed transform // Component Functions -function getTransform(tweenProperty/* , value */) { +/** + * Returns the current property inline style. + * @param {string} tweenProp the property name + * @returns {string} inline style for property + */ +function getTransform(tweenProp/* , value */) { const currentStyle = getInlineStyle(this.element); - return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; + return currentStyle[tweenProp] ? currentStyle[tweenProp] : defaultValues[tweenProp]; } -function prepareTransform(prop, obj) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformFObject} the property tween object + */ +function prepareTransform(/* prop, */_, obj) { const prepAxis = ['X', 'Y', 'Z']; // coordinates const transformObject = {}; const translateArray = []; const rotateArray = []; const skewArray = []; @@ -79,6 +83,10 @@ function prepareTransform(prop, obj) { return transformObject; } +/** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ function crossCheckTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp]) { @@ -124,7 +132,7 @@ const defaultTransformValues = { }; // Full Component -const transformFunctionsComponent = { +const TransformFunctions = { component: 'transformFunctions', property: 'transform', subProperties: supportedTransformProperties, @@ -141,4 +149,4 @@ const transformFunctionsComponent = { }, }; -export default transformFunctionsComponent; +export default TransformFunctions; diff --git a/src/components/transformFunctionsBase.js b/src/components/transformFunctionsBase.js index 63c7a08..c1e9290 100644 --- a/src/components/transformFunctionsBase.js +++ b/src/components/transformFunctionsBase.js @@ -1,25 +1,22 @@ -import KUTE from '../objects/kute.js'; -import perspective from '../interpolation/perspective.js'; -import translate3d from '../interpolation/translate3d.js'; -import rotate3d from '../interpolation/rotate3d.js'; -import translate from '../interpolation/translate.js'; -import rotate from '../interpolation/rotate.js'; -import scale from '../interpolation/scale.js'; -import skew from '../interpolation/skew.js'; - -/* transformFunctions = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - -// same to svg transform, attr +import KEC from '../objects/kute'; +import perspective from '../interpolation/perspective'; +import translate3d from '../interpolation/translate3d'; +import rotate3d from '../interpolation/rotate3d'; +import translate from '../interpolation/translate'; +import rotate from '../interpolation/rotate'; +import scale from '../interpolation/scale'; +import skew from '../interpolation/skew'; // Component Functions +/** + * Sets the property update function. + * * same to svgTransform, htmlAttributes + * @param {string} tweenProp the property name + */ export function onStartTransform(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0 + (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z] + (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z] @@ -30,7 +27,7 @@ export function onStartTransform(tweenProp) { } // Base Component -const BaseTransform = { +const TransformFunctionsBase = { component: 'baseTransform', property: 'transform', functions: { onStart: onStartTransform }, @@ -45,4 +42,4 @@ const BaseTransform = { }, }; -export default BaseTransform; +export default TransformFunctionsBase; diff --git a/src/components/transformLegacy.js b/src/components/transformLegacy.js index 8a0d0d9..6a3453f 100644 --- a/src/components/transformLegacy.js +++ b/src/components/transformLegacy.js @@ -1,35 +1,40 @@ -import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js'; -import defaultValues from '../objects/defaultValues.js'; -import getInlineStyleLegacy from '../process/getInlineStyleLegacy.js'; -import perspective from '../interpolation/perspective.js'; -import translate3d from '../interpolation/translate3d.js'; -import rotate3d from '../interpolation/rotate3d.js'; -import translate from '../interpolation/translate.js'; -import rotate from '../interpolation/rotate.js'; -import scale from '../interpolation/scale.js'; -import skew from '../interpolation/skew.js'; +import support3DTransform from 'shorter-js/src/boolean/support3DTransform'; +import defaultValues from '../objects/defaultValues'; +import getInlineStyleLegacy from '../process/getInlineStyleLegacy'; +import perspective from '../interpolation/perspective'; +import translate3d from '../interpolation/translate3d'; +import rotate3d from '../interpolation/rotate3d'; +import translate from '../interpolation/translate'; +import rotate from '../interpolation/rotate'; +import scale from '../interpolation/scale'; +import skew from '../interpolation/skew'; -import { onStartLegacyTransform } from './transformLegacyBase.js'; -import transformProperty from '../util/transformProperty.js'; -import supportTransform from '../util/supportLegacyTransform.js'; - -/* transformFunctions = { - property : 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ +import { onStartLegacyTransform } from './transformLegacyBase'; +import transformProperty from '../util/transformProperty'; +import supportTransform from '../util/supportLegacyTransform'; // same to svg transform, attr // the component to handle all kinds of input values and process according to browser supported API, // the component that handles all browsers IE9+ // Component Functions +/** + * Returns the current property inline style. + * @param {string} tweenProperty the property name + * @returns {string} inline style for property + */ function getLegacyTransform(tweenProperty/* , value */) { const currentStyle = getInlineStyleLegacy(this.element); return currentStyle[tweenProperty] ? currentStyle[tweenProperty] : defaultValues[tweenProperty]; } -function prepareLegacyTransform(prop, obj) { + +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformFObject} the property tween object + */ +function prepareLegacyTransform(/* prop */_, obj) { const prepAxis = ['X', 'Y', 'Z']; // coordinates const translateArray = []; const rotateArray = []; const skewArray = []; const transformObject = {}; @@ -97,6 +102,10 @@ function prepareLegacyTransform(prop, obj) { return transformObject; } +/** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ function crossCheckLegacyTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp] && support3DTransform) { diff --git a/src/components/transformLegacyBase.js b/src/components/transformLegacyBase.js index 133a88f..e26315f 100644 --- a/src/components/transformLegacyBase.js +++ b/src/components/transformLegacyBase.js @@ -1,31 +1,29 @@ -import support3DTransform from 'shorter-js/src/boolean/support3DTransform.js'; -import KUTE from '../objects/kute.js'; -import perspective from '../interpolation/perspective.js'; -import translate3d from '../interpolation/translate3d.js'; -import rotate3d from '../interpolation/rotate3d.js'; -import translate from '../interpolation/translate.js'; -import rotate from '../interpolation/rotate.js'; -import scale from '../interpolation/scale.js'; -import skew from '../interpolation/skew.js'; +import support3DTransform from 'shorter-js/src/boolean/support3DTransform'; +import KEC from '../objects/kute'; +import perspective from '../interpolation/perspective'; +import translate3d from '../interpolation/translate3d'; +import rotate3d from '../interpolation/rotate3d'; +import translate from '../interpolation/translate'; +import rotate from '../interpolation/rotate'; +import scale from '../interpolation/scale'; +import skew from '../interpolation/skew'; -import supportTransform from '../util/supportLegacyTransform.js'; -import transformProperty from '../util/transformProperty.js'; +import supportTransform from '../util/supportLegacyTransform'; +import transformProperty from '../util/transformProperty'; -/* baseLegacyTransform = { - property: 'transform', - subProperties, - defaultValues, - Interpolate: {translate,rotate,skew,scale}, - functions } */ - -// same to svg transform, attr +// same as svgTransform, htmlAttributes // the component that handles all browsers IE9+ // Component Functions +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ export function onStartLegacyTransform(tweenProp) { - if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) { + if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) { if (support3DTransform) { - KUTE[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign elem.style[transformProperty] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0 + (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z] + (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z] @@ -33,7 +31,8 @@ export function onStartLegacyTransform(tweenProp) { + (a.scale || b.scale ? scale(a.scale, b.scale, v) : ''); // one side might be 0 }; } else if (supportTransform) { - KUTE[tweenProp] = (elem, a, b, v) => { + KEC[tweenProp] = (elem, a, b, v) => { + // eslint-disable-next-line no-param-reassign elem.style[transformProperty] = (a.translate ? translate(a.translate, b.translate, 'px', v) : '') // array [x,y] + ((a.rotate || b.rotate) ? rotate(a.rotate, b.rotate, 'deg', v) : '') // one side might be 0 + (a.skew ? skew(a.skew, b.skew, 'deg', v) : '') // array [x,y] diff --git a/src/components/transformMatrix.js b/src/components/transformMatrix.js index 43628ab..1a03f8e 100644 --- a/src/components/transformMatrix.js +++ b/src/components/transformMatrix.js @@ -1,20 +1,19 @@ -import defaultValues from '../objects/defaultValues.js'; -import numbers from '../interpolation/numbers.js'; -import arrays from '../interpolation/arrays.js'; -import { onStartTransform } from './transformMatrixBase.js'; - -/* transformMatrix = { - property : 'transform', - defaultValue: {}, - interpolators: {} - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ +import defaultValues from '../objects/defaultValues'; +import numbers from '../interpolation/numbers'; +import arrays from '../interpolation/arrays'; +import { onStartTransform } from './transformMatrixBase'; // Component name const matrixComponent = 'transformMatrix'; // Component Functions -function getTransform(tweenProp, value) { +/** + * Returns the current transform object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.transformMObject} transform object + */ +function getTransform(/* tweenProp, */_, value) { const transformObject = {}; const currentValue = this.element[matrixComponent]; @@ -30,7 +29,13 @@ function getTransform(tweenProp, value) { return transformObject; } -function prepareTransform(tweenProp, value) { +/** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformMObject} the property tween object + */ +function prepareTransform(/* tweenProp, */_, value) { if (typeof (value) === 'object' && !value.length) { let pv; const transformObject = {}; @@ -89,14 +94,20 @@ function prepareTransform(tweenProp, value) { throw Error(`KUTE.js - "${value}" is not valid/supported transform function`); } +/** + * Sets the end values for the next `to()` method call. + * @param {string} tweenProp the property name + */ function onCompleteTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { - this.element[matrixComponent] = {}; - Object.keys(this.valuesEnd[tweenProp]).forEach((tf) => { - this.element[matrixComponent][tf] = this.valuesEnd[tweenProp][tf]; - }); + this.element[matrixComponent] = { ...this.valuesEnd[tweenProp] }; } } + +/** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ function crossCheckTransform(tweenProp) { if (this.valuesEnd[tweenProp]) { if (this.valuesEnd[tweenProp].perspective && !this.valuesStart[tweenProp].perspective) { diff --git a/src/components/transformMatrixBase.js b/src/components/transformMatrixBase.js index 13ef259..e4c483c 100644 --- a/src/components/transformMatrixBase.js +++ b/src/components/transformMatrixBase.js @@ -1,13 +1,6 @@ -import KUTE from '../objects/kute.js'; -import numbers from '../interpolation/numbers.js'; -import arrays from '../interpolation/arrays.js'; - -/* transformMatrix = { - property : 'transform', - defaultValue: {}, - interpolators: {}, - functions = { prepareStart, prepareProperty, onStart, crossCheck } -} */ +import KEC from '../objects/kute'; +import numbers from '../interpolation/numbers'; +import arrays from '../interpolation/arrays'; // Component name const matrixComponent = 'transformMatrixBase'; @@ -18,9 +11,13 @@ const CSS3Matrix = typeof (DOMMatrix) !== 'undefined' ? DOMMatrix : null; // Component Functions export const onStartTransform = { +/** + * Sets the property update function. + * @param {string} tweenProp the property name + */ transform(tweenProp) { - if (CSS3Matrix && this.valuesEnd[tweenProp] && !KUTE[tweenProp]) { - KUTE[tweenProp] = (elem, a, b, v) => { + if (CSS3Matrix && this.valuesEnd[tweenProp] && !KEC[tweenProp]) { + KEC[tweenProp] = (elem, a, b, v) => { let matrix = new CSS3Matrix(); const tObject = {}; @@ -53,19 +50,26 @@ export const onStartTransform = { : matrix; // set element style + // eslint-disable-next-line no-param-reassign elem.style[tweenProp] = matrix.toString(); }; } }, + /** + * onStartTransform.CSS3Matrix + * + * Sets the update function for the property. + * @param {string} prop the property name + */ CSS3Matrix(prop) { if (CSS3Matrix && this.valuesEnd.transform) { - if (!KUTE[prop]) KUTE[prop] = CSS3Matrix; + if (!KEC[prop]) KEC[prop] = CSS3Matrix; } }, }; // Component Base Object -export const baseMatrixTransform = { +export const TransformMatrixBase = { component: matrixComponent, property: 'transform', functions: { onStart: onStartTransform }, @@ -78,4 +82,4 @@ export const baseMatrixTransform = { }, }; -export default baseMatrixTransform; +export default TransformMatrixBase; diff --git a/src/core/add.js b/src/core/add.js index 7600c8f..5541819 100644 --- a/src/core/add.js +++ b/src/core/add.js @@ -1,3 +1,10 @@ -import Tweens from '../objects/tweens.js'; +import Tweens from '../objects/tweens'; -export default (tw) => Tweens.push(tw); +/** + * KUTE.add(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ +const add = (tw) => Tweens.push(tw); + +export default add; diff --git a/src/core/getAll.js b/src/core/getAll.js index 6b0c7c6..11804ef 100644 --- a/src/core/getAll.js +++ b/src/core/getAll.js @@ -1,3 +1,10 @@ -import Tweens from '../objects/tweens.js'; +import Tweens from '../objects/tweens'; -export default () => Tweens; +/** + * KUTE.add(Tween) + * + * @return {KUTE.Tween[]} tw a new tween to add + */ +const getAll = () => Tweens; + +export default getAll; diff --git a/src/core/internals.js b/src/core/internals.js index c7b3eb7..5acd67b 100644 --- a/src/core/internals.js +++ b/src/core/internals.js @@ -1,11 +1,11 @@ -import add from './add.js'; -import remove from './remove.js'; -import getAll from './getAll.js'; -import removeAll from './removeAll.js'; -import { stop } from './render.js'; -import linkInterpolation from './linkInterpolation.js'; +import add from './add'; +import remove from './remove'; +import getAll from './getAll'; +import removeAll from './removeAll'; +import { stop } from './render'; +import linkInterpolation from './linkInterpolation'; -export default { +const internals = { add, remove, getAll, @@ -13,3 +13,5 @@ export default { stop, linkInterpolation, }; + +export default internals; diff --git a/src/core/linkInterpolation.js b/src/core/linkInterpolation.js index 0807350..a4313de 100644 --- a/src/core/linkInterpolation.js +++ b/src/core/linkInterpolation.js @@ -1,7 +1,11 @@ -import KUTE from '../objects/kute.js'; -import linkProperty from '../objects/linkProperty.js'; -import supportedProperties from '../objects/supportedProperties.js'; +import KEC from '../objects/kute'; +import linkProperty from '../objects/linkProperty'; +import supportedProperties from '../objects/supportedProperties'; +/** + * linkInterpolation + * @this {KUTE.Tween} + */ export default function linkInterpolation() { // DON'T change Object.keys(linkProperty).forEach((component) => { const componentLink = linkProperty[component]; @@ -11,18 +15,18 @@ export default function linkInterpolation() { // DON'T change if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius && Object.keys(this.valuesEnd).some((i) => (componentProps && componentProps.includes(i)) || (i === 'attr' && Object.keys(this.valuesEnd[i]).some((j) => componentProps && componentProps.includes(j))))) { - if (!KUTE[fnObj]) KUTE[fnObj] = componentLink[fnObj]; + if (!KEC[fnObj]) KEC[fnObj] = componentLink[fnObj]; } else { Object.keys(this.valuesEnd).forEach((prop) => { const propObject = this.valuesEnd[prop]; if (propObject instanceof Object) { Object.keys(propObject).forEach((i) => { if (typeof (componentLink[i]) === 'function') { // transformCSS3 - if (!KUTE[i]) KUTE[i] = componentLink[i]; + if (!KEC[i]) KEC[i] = componentLink[i]; } else { Object.keys(componentLink[fnObj]).forEach((j) => { if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix - if (!KUTE[j]) KUTE[j] = componentLink[i][j]; + if (!KEC[j]) KEC[j] = componentLink[i][j]; } }); } diff --git a/src/core/queueStart.js b/src/core/queueStart.js index 50e028c..8facc72 100644 --- a/src/core/queueStart.js +++ b/src/core/queueStart.js @@ -1,5 +1,5 @@ -import onStart from '../objects/onStart.js'; -import linkInterpolation from './linkInterpolation.js'; +import onStart from '../objects/onStart'; +import linkInterpolation from './linkInterpolation'; export default function queueStart() { // fire onStart actions diff --git a/src/core/remove.js b/src/core/remove.js index 4b63984..3839303 100644 --- a/src/core/remove.js +++ b/src/core/remove.js @@ -1,6 +1,13 @@ -import Tweens from '../objects/tweens.js'; +import Tweens from '../objects/tweens'; -export default (tw) => { +/** + * KUTE.remove(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ +const remove = (tw) => { const i = Tweens.indexOf(tw); if (i !== -1) Tweens.splice(i, 1); }; + +export default remove; diff --git a/src/core/removeAll.js b/src/core/removeAll.js index 6581fd7..7760fd0 100644 --- a/src/core/removeAll.js +++ b/src/core/removeAll.js @@ -1,3 +1,8 @@ -import Tweens from '../objects/tweens.js'; +import Tweens from '../objects/tweens'; -export default () => { Tweens.length = 0; }; +/** + * KUTE.removeAll() + */ +const removeAll = () => { Tweens.length = 0; }; + +export default removeAll; diff --git a/src/core/render.js b/src/core/render.js index 4280c17..c810476 100644 --- a/src/core/render.js +++ b/src/core/render.js @@ -1,18 +1,21 @@ -import KUTE from '../objects/kute.js'; -import Tweens from '../objects/tweens.js'; -import globalObject from '../objects/globalObject.js'; -import Interpolate from '../objects/interpolate.js'; -import onStart from '../objects/onStart.js'; -import now from '../util/now.js'; +import KEC from '../objects/kute'; +import Tweens from '../objects/tweens'; +import globalObject from '../objects/globalObject'; +import Interpolate from '../objects/interpolate'; +import onStart from '../objects/onStart'; +import now from '../util/now'; const Time = {}; Time.now = now; -// const that = window.self || window || {}; -// Time.now = that.performance.now.bind(that.performance); +// eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy let Tick = 0; export { Tick }; +/** + * + * @param {number | Date} time + */ const Ticker = (time) => { let i = 0; while (i < Tweens.length) { @@ -34,31 +37,31 @@ export function stop() { Tick = null; Object.keys(onStart).forEach((obj) => { if (typeof (onStart[obj]) === 'function') { - if (KUTE[obj]) delete KUTE[obj]; + if (KEC[obj]) delete KEC[obj]; } else { Object.keys(onStart[obj]).forEach((prop) => { - if (KUTE[prop]) delete KUTE[prop]; + if (KEC[prop]) delete KEC[prop]; }); } }); Object.keys(Interpolate).forEach((i) => { - if (KUTE[i]) delete KUTE[i]; + if (KEC[i]) delete KEC[i]; }); } }, 64); } -// KUTE.js render update functions -// =============================== +// render update functions +// ======================= const Render = { Tick, Ticker, Tweens, Time, }; Object.keys(Render).forEach((blob) => { - if (!KUTE[blob]) { - KUTE[blob] = blob === 'Time' ? Time.now : Render[blob]; + if (!KEC[blob]) { + KEC[blob] = blob === 'Time' ? Time.now : Render[blob]; } }); -globalObject._KUTE = KUTE; +globalObject._KUTE = KEC; export default Render; diff --git a/src/easing/easing-base.js b/src/easing/easing-base.js index dea7826..752a682 100644 --- a/src/easing/easing-base.js +++ b/src/easing/easing-base.js @@ -1,28 +1,41 @@ -import connect from '../objects/connect.js'; +import connect from '../objects/connect'; // Select Robert Penner's Easing Functions // updated for ESLint const Easing = { + /** @type {KUTE.easingFunction} */ linear: (t) => t, + /** @type {KUTE.easingFunction} */ easingQuadraticIn: (t) => t * t, + /** @type {KUTE.easingFunction} */ easingQuadraticOut: (t) => t * (2 - t), + /** @type {KUTE.easingFunction} */ easingQuadraticInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t), + /** @type {KUTE.easingFunction} */ easingCubicIn: (t) => t * t * t, + /** @type {KUTE.easingFunction} */ easingCubicOut: (t0) => { const t = t0 - 1; return t * t * t + 1; }, + /** @type {KUTE.easingFunction} */ easingCubicInOut: (t) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1), + /** @type {KUTE.easingFunction} */ easingCircularIn: (t) => -(Math.sqrt(1 - (t * t)) - 1), + /** @type {KUTE.easingFunction} */ easingCircularOut: (t0) => { const t = t0 - 1; return Math.sqrt(1 - t * t); }, + /** @type {KUTE.easingFunction} */ easingCircularInOut: (t0) => { let t = t0 * 2; if (t < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1); t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1); }, + /** @type {KUTE.easingFunction} */ easingBackIn: (t) => { const s = 1.70158; return t * t * ((s + 1) * t - s); }, + /** @type {KUTE.easingFunction} */ easingBackOut: (t0) => { const s = 1.70158; const t = t0 - 1; return t * t * ((s + 1) * t + s) + 1; }, + /** @type {KUTE.easingFunction} */ easingBackInOut: (t0) => { const s = 1.70158 * 1.525; let t = t0 * 2; @@ -31,6 +44,12 @@ const Easing = { }, }; +/** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor name + * @returns {KUTE.easingFunction} a valid easing function + */ function processEasing(fn) { if (typeof fn === 'function') { return fn; diff --git a/src/easing/easing-bezier.js b/src/easing/easing-bezier.js index 7ab74a7..47a511b 100644 --- a/src/easing/easing-bezier.js +++ b/src/easing/easing-bezier.js @@ -1,5 +1,5 @@ import CubicBezier from 'cubic-bezier-easing'; -import connect from '../objects/connect.js'; +import connect from '../objects/connect'; const Easing = { linear: new CubicBezier(0, 0, 1, 1, 'linear'), @@ -36,6 +36,12 @@ const Easing = { easingBackInOut: new CubicBezier(0.68, -0.55, 0.265, 1.55, 'easingBackInOut'), }; +/** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor name + * @returns {KUTE.easingFunction} a valid easingfunction + */ function processBezierEasing(fn) { if (typeof fn === 'function') { return fn; @@ -46,7 +52,7 @@ function processBezierEasing(fn) { return new CubicBezier(bz[0] * 1, bz[1] * 1, bz[2] * 1, bz[3] * 1); // bezier easing } // if (/elastic|bounce/i.test(fn)) { - // throw TypeError(`KUTE.js - CubicBezier doesn't support ${fn} easing.`); + // throw TypeError(`KUTE - CubicBezier doesn't support ${fn} easing.`); // } return Easing.linear; } diff --git a/src/easing/easing.js b/src/easing/easing.js index a8766ec..2c58d86 100644 --- a/src/easing/easing.js +++ b/src/easing/easing.js @@ -1,58 +1,84 @@ -import connect from '../objects/connect.js'; +import connect from '../objects/connect'; // Robert Penner's Easing Functions // updated for ESLint const Easing = { + /** @type {KUTE.easingFunction} */ linear: (t) => t, + /** @type {KUTE.easingFunction} */ easingSinusoidalIn: (t) => -Math.cos((t * Math.PI) / 2) + 1, + /** @type {KUTE.easingFunction} */ easingSinusoidalOut: (t) => Math.sin((t * Math.PI) / 2), + /** @type {KUTE.easingFunction} */ easingSinusoidalInOut: (t) => -0.5 * (Math.cos(Math.PI * t) - 1), + /** @type {KUTE.easingFunction} */ easingQuadraticIn: (t) => t * t, + /** @type {KUTE.easingFunction} */ easingQuadraticOut: (t) => t * (2 - t), + /** @type {KUTE.easingFunction} */ easingQuadraticInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t), + /** @type {KUTE.easingFunction} */ easingCubicIn: (t) => t * t * t, + /** @type {KUTE.easingFunction} */ easingCubicOut: (t0) => { const t = t0 - 1; return t * t * t + 1; }, + /** @type {KUTE.easingFunction} */ easingCubicInOut: (t) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1), + /** @type {KUTE.easingFunction} */ easingQuarticIn: (t) => t * t * t * t, + /** @type {KUTE.easingFunction} */ easingQuarticOut: (t0) => { const t = t0 - 1; return 1 - t * t * t * t; }, + /** @type {KUTE.easingFunction} */ easingQuarticInOut: (t0) => { let t = t0; if (t < 0.5) return 8 * t * t * t * t; t -= 1; return 1 - 8 * t * t * t * t; }, + /** @type {KUTE.easingFunction} */ easingQuinticIn: (t) => t * t * t * t * t, + /** @type {KUTE.easingFunction} */ easingQuinticOut: (t0) => { const t = t0 - 1; return 1 + t * t * t * t * t; }, + /** @type {KUTE.easingFunction} */ easingQuinticInOut: (t0) => { let t = t0; if (t < 0.5) return 16 * t * t * t * t * t; t -= 1; return 1 + 16 * t * t * t * t * t; }, + /** @type {KUTE.easingFunction} */ easingCircularIn: (t) => -(Math.sqrt(1 - (t * t)) - 1), + /** @type {KUTE.easingFunction} */ easingCircularOut: (t0) => { const t = t0 - 1; return Math.sqrt(1 - t * t); }, + /** @type {KUTE.easingFunction} */ easingCircularInOut: (t0) => { let t = t0 * 2; if (t < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1); t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1); }, + /** @type {KUTE.easingFunction} */ easingExponentialIn: (t) => 2 ** (10 * (t - 1)) - 0.001, + /** @type {KUTE.easingFunction} */ easingExponentialOut: (t) => 1 - 2 ** (-10 * t), + /** @type {KUTE.easingFunction} */ easingExponentialInOut: (t0) => { const t = t0 * 2; if (t < 1) return 0.5 * (2 ** (10 * (t - 1))); return 0.5 * (2 - 2 ** (-10 * (t - 1))); }, + /** @type {KUTE.easingFunction} */ easingBackIn: (t) => { const s = 1.70158; return t * t * ((s + 1) * t - s); }, + /** @type {KUTE.easingFunction} */ easingBackOut: (t0) => { const s = 1.70158; const t = t0 - 1; return t * t * ((s + 1) * t + s) + 1; }, + /** @type {KUTE.easingFunction} */ easingBackInOut: (t0) => { const s = 1.70158 * 1.525; let t = t0 * 2; if (t < 1) return 0.5 * (t * t * ((s + 1) * t - s)); t -= 2; return 0.5 * (t * t * ((s + 1) * t + s) + 2); }, + /** @type {KUTE.easingFunction} */ easingElasticIn: (t0) => { let s; let k1 = 0.1; @@ -68,6 +94,7 @@ const Easing = { t -= 1; return -(k1 * (2 ** (10 * t)) * Math.sin(((t - s) * Math.PI * 2) / k2)); }, + /** @type {KUTE.easingFunction} */ easingElasticOut: (t) => { let s; let k1 = 0.1; @@ -82,6 +109,7 @@ const Easing = { } return k1 * (2 ** (-10 * t)) * Math.sin(((t - s) * Math.PI * 2) / k2) + 1; }, + /** @type {KUTE.easingFunction} */ easingElasticInOut: (t0) => { let t = t0; let s; @@ -97,12 +125,14 @@ const Easing = { t *= 2; if (t < 1) { return -0.5 * (k1 * (2 ** (10 * (t - 1))) - * Math.sin(((t - 1 - s) * Math.PI * 2) / k2)); + * Math.sin(((t - 1 - s) * Math.PI * 2) / k2)); } t -= 1; return k1 * (2 ** (-10 * t)) * Math.sin(((t - s) * Math.PI * 2) / k2) * 0.5 + 1; }, + /** @type {KUTE.easingFunction} */ easingBounceIn: (t) => 1 - Easing.easingBounceOut(1 - t), + /** @type {KUTE.easingFunction} */ easingBounceOut: (t0) => { let t = t0; if (t < (1 / 2.75)) { return 7.5625 * t * t; } @@ -111,12 +141,19 @@ const Easing = { t -= (2.625 / 2.75); return 7.5625 * t * t + 0.984375; }, + /** @type {KUTE.easingFunction} */ easingBounceInOut: (t) => { if (t < 0.5) return Easing.easingBounceIn(t * 2) * 0.5; return Easing.easingBounceOut(t * 2 - 1) * 0.5 + 0.5; }, }; +/** + * Returns a valid `easingFunction`. + * + * @param {KUTE.easingFunction | string} fn function name or constructor + * @returns {KUTE.easingFunction} a valid easing function + */ function processEasing(fn) { if (typeof fn === 'function') { return fn; diff --git a/src/index-base.js b/src/index-base.js index c2e33ec..dde2f09 100644 --- a/src/index-base.js +++ b/src/index-base.js @@ -1,22 +1,22 @@ -import Render from './core/render.js'; -import Interpolate from './objects/interpolate.js'; -import Objects from './objects/objectsBase.js'; -import Util from './objects/util.js'; -import Easing from './easing/easing-base.js'; -import Internals from './core/internals.js'; -import Selector from './util/selector.js'; +import Render from './core/render'; +import Interpolate from './objects/interpolate'; +import Objects from './objects/objectsBase'; +import Util from './objects/util'; +import Easing from './easing/easing-base'; +import Internals from './core/internals'; +import Selector from './util/selector'; // Animation -import Animation from './animation/animationBase.js'; +import Animation from './animation/animationBase'; // Base Components -import Components from './objects/componentsBase.js'; +import Components from './objects/componentsBase'; // TweenConstructor -import Tween from './tween/tweenBase.js'; +import Tween from './tween/tweenBase'; // Interface only fromTo -import fromTo from './interface/fromTo.js'; +import fromTo from './interface/fromTo'; -import Version from './util/version.js'; +import Version from './util/version'; export default { Animation, diff --git a/src/index-extra.js b/src/index-extra.js index 3261ebd..dd6759c 100644 --- a/src/index-extra.js +++ b/src/index-extra.js @@ -1,30 +1,30 @@ import CubicBezier from 'cubic-bezier-easing'; -import Render from './core/render.js'; -import Interpolate from './objects/interpolate.js'; -import Objects from './objects/objects.js'; -import Util from './objects/util.js'; -import Internals from './core/internals.js'; -import Process from './process/process.js'; -import Easing from './easing/easing-bezier.js'; -import Selector from './util/selector.js'; +import Render from './core/render'; +import Interpolate from './objects/interpolate'; +import Objects from './objects/objects'; +import Util from './objects/util'; +import Internals from './core/internals'; +import Process from './process/process'; +import Easing from './easing/easing-bezier'; +import Selector from './util/selector'; // TweenConstructor -import Tween from './tween/tweenExtra.js'; -import TweenCollection from './tween/tweenCollection.js'; -import ProgressBar from './util/progressBar.js'; +import Tween from './tween/tweenExtra'; +import TweenCollection from './tween/tweenCollection'; +import ProgressBar from './util/progressBar'; // interface -import to from './interface/to.js'; -import fromTo from './interface/fromTo.js'; -import allTo from './interface/allTo.js'; -import allFromTo from './interface/allFromTo.js'; +import to from './interface/to'; +import fromTo from './interface/fromTo'; +import allTo from './interface/allTo'; +import allFromTo from './interface/allFromTo'; // Animation -import Animation from './animation/animationDevelopment.js'; +import Animation from './animation/animationDevelopment'; // Components Extra -import Components from './objects/componentsExtra.js'; +import Components from './objects/componentsExtra'; -import Version from './util/version.js'; +import Version from './util/version'; export default { Animation, diff --git a/src/index-legacy.js b/src/index-legacy.js index 76fe1b2..b472c71 100644 --- a/src/index-legacy.js +++ b/src/index-legacy.js @@ -1,40 +1,40 @@ -import Render from './core/render.js'; -import Interpolate from './objects/interpolate.js'; -import Objects from './objects/objects.js'; -import Util from './objects/util.js'; -import Internals from './core/internals.js'; -import Process from './process/process.js'; -import Easing from './easing/easing.js'; -import Selector from './util/selector.js'; +import Render from './core/render'; +import Interpolate from './objects/interpolate'; +import Objects from './objects/objects'; +import Util from './objects/util'; +import Internals from './core/internals'; +import Process from './process/process'; +import Easing from './easing/easing'; +import Selector from './util/selector'; // TweenConstructor -import Tween from './tween/tween.js'; -import TweenCollection from './tween/tweenCollection.js'; +import Tween from './tween/tween'; +import TweenCollection from './tween/tweenCollection'; // interface -import to from './interface/to.js'; -import fromTo from './interface/fromTo.js'; -import allTo from './interface/allTo.js'; -import allFromTo from './interface/allFromTo.js'; -import Animation from './animation/animation.js'; +import to from './interface/to'; +import fromTo from './interface/fromTo'; +import allTo from './interface/allTo'; +import allFromTo from './interface/allFromTo'; +import Animation from './animation/animation'; // components -import BoxModel from './components/boxModelEssential.js'; -import ColorProperties from './components/colorProperties.js'; -import HTMLAttributes from './components/htmlAttributes.js'; -import OpacityProperty from './components/opacityProperty.js'; -import TextWrite from './components/textWrite.js'; -import TransformLegacy from './components/transformLegacy.js'; -import SVGDraw from './components/svgDraw.js'; -import SVGMorph from './components/svgMorph.js'; +import BoxModel from './components/boxModelEssential'; +import ColorProperties from './components/colorProperties'; +import HTMLAttributes from './components/htmlAttributes'; +import OpacityProperty from './components/opacityProperty'; +import TextWriteProp from './components/textWrite'; +import TransformLegacy from './components/transformLegacy'; +import SVGDraw from './components/svgDraw'; +import SVGMorph from './components/svgMorph'; -import Version from './util/version.js'; +import Version from './util/version'; const Components = { BoxModel, ColorProperties, HTMLAttributes, OpacityProperty, - TextWrite, + TextWriteProp, TransformLegacy, SVGDraw, SVGMorph, diff --git a/src/index.js b/src/index.js index d16e0e8..8cffa97 100644 --- a/src/index.js +++ b/src/index.js @@ -1,29 +1,30 @@ +// KUTE.js standard distribution version import CubicBezier from 'cubic-bezier-easing'; -import Render from './core/render.js'; -import Interpolate from './objects/interpolate.js'; -import Objects from './objects/objects.js'; -import Util from './objects/util.js'; -import Internals from './core/internals.js'; -import Process from './process/process.js'; -import Easing from './easing/easing-bezier.js'; -import Selector from './util/selector.js'; +import Render from './core/render'; +import Interpolate from './objects/interpolate'; +import Objects from './objects/objects'; +import Util from './objects/util'; +import Internals from './core/internals'; +import Process from './process/process'; +import Easing from './easing/easing-bezier'; +import Selector from './util/selector'; // TweenConstructor -import Tween from './tween/tween.js'; -import TweenCollection from './tween/tweenCollection.js'; +import Tween from './tween/tween'; +import TweenCollection from './tween/tweenCollection'; // interface -import to from './interface/to.js'; -import fromTo from './interface/fromTo.js'; -import allTo from './interface/allTo.js'; -import allFromTo from './interface/allFromTo.js'; +import to from './interface/to'; +import fromTo from './interface/fromTo'; +import allTo from './interface/allTo'; +import allFromTo from './interface/allFromTo'; // Animation -import Animation from './animation/animation.js'; +import Animation from './animation/animation'; // Default Components -import Components from './objects/componentsDefault.js'; +import Components from './objects/componentsDefault'; -import Version from './util/version.js'; +import Version from './util/version'; const KUTE = { Animation, diff --git a/src/interface/allFromTo.js b/src/interface/allFromTo.js index 588e587..b40ea35 100644 --- a/src/interface/allFromTo.js +++ b/src/interface/allFromTo.js @@ -1,6 +1,17 @@ -import selector from '../util/selector.js'; -import TweenCollection from '../tween/tweenCollection.js'; +import selector from '../util/selector'; +import TweenCollection from '../tween/tweenCollection'; +/** + * The `KUTE.allFromTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at a given state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {TweenCollection} the Tween object collection + */ export default function allFromTo(elements, startObject, endObject, optionsObj) { const options = optionsObj || {}; return new TweenCollection(selector(elements, true), startObject, endObject, options); diff --git a/src/interface/allTo.js b/src/interface/allTo.js index 28b3544..6b450f7 100644 --- a/src/interface/allTo.js +++ b/src/interface/allTo.js @@ -1,9 +1,18 @@ -import selector from '../util/selector.js'; -import TweenCollection from '../tween/tweenCollection.js'; +import selector from '../util/selector'; +import TweenCollection from '../tween/tweenCollection'; -// multiple elements tween objects +/** + * The `KUTE.allTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at their current state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenProps} optionsObj progress + * @returns {TweenCollection} the Tween object collection + */ export default function allTo(elements, endObject, optionsObj) { const options = optionsObj || {}; - optionsObj.resetStart = endObject; + options.resetStart = endObject; return new TweenCollection(selector(elements, true), endObject, endObject, options); } diff --git a/src/interface/fromTo.js b/src/interface/fromTo.js index 86437bb..56cb09c 100644 --- a/src/interface/fromTo.js +++ b/src/interface/fromTo.js @@ -1,8 +1,19 @@ -import selector from '../util/selector.js'; -import connect from '../objects/connect.js'; +import selector from '../util/selector'; +import connect from '../objects/connect'; +const { tween: TweenConstructor } = connect; + +/** + * The `KUTE.fromTo()` static method returns a new Tween object + * for a single `HTMLElement` at a given state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ export default function fromTo(element, startObject, endObject, optionsObj) { const options = optionsObj || {}; - const TweenConstructor = connect.tween; return new TweenConstructor(selector(element), startObject, endObject, options); } diff --git a/src/interface/to.js b/src/interface/to.js index 1b08186..d2cf5ab 100644 --- a/src/interface/to.js +++ b/src/interface/to.js @@ -1,9 +1,19 @@ -import selector from '../util/selector.js'; -import connect from '../objects/connect.js'; +import selector from '../util/selector'; +import connect from '../objects/connect'; +const { tween: TweenConstructor } = connect; + +/** + * The `KUTE.to()` static method returns a new Tween object + * for a single `HTMLElement` at its current state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ export default function to(element, endObject, optionsObj) { const options = optionsObj || {}; - const TweenConstructor = connect.tween; options.resetStart = endObject; return new TweenConstructor(selector(element), endObject, endObject, options); } diff --git a/src/interpolation/arrays.js b/src/interpolation/arrays.js index c7cbb54..a959b0a 100644 --- a/src/interpolation/arrays.js +++ b/src/interpolation/arrays.js @@ -1,6 +1,15 @@ +/** + * Array Interpolation Function. + * + * @param {number[]} a start array + * @param {number[]} b end array + * @param {number} v progress + * @returns {number[]} the resulting array + */ export default function arrays(a, b, v) { - const result = []; - for (let i = 0, l = b.length; i < l; i += 1) { + const result = []; const { length } = b; + for (let i = 0; i < length; i += 1) { + // eslint-disable-next-line no-bitwise result[i] = ((a[i] + (b[i] - a[i]) * v) * 1000 >> 0) / 1000; } return result; diff --git a/src/interpolation/colors.js b/src/interpolation/colors.js index 93fa419..b9359aa 100644 --- a/src/interpolation/colors.js +++ b/src/interpolation/colors.js @@ -1,5 +1,12 @@ -import numbers from './numbers.js'; - +import numbers from './numbers'; +/** + * Color Interpolation Function. + * + * @param {KUTE.colorObject} a start color + * @param {KUTE.colorObject} b end color + * @param {number} v progress + * @returns {string} the resulting color + */ export default function colors(a, b, v) { const _c = {}; const ep = ')'; @@ -8,12 +15,10 @@ export default function colors(a, b, v) { const rgba = 'rgba('; Object.keys(b).forEach((c) => { - // _c[c] = c !== 'a' ? (numbers(a[c], b[c], v) >> 0 || 0) : (a[c] && b[c]) - // ? (numbers(a[c], b[c], v) * 100 >> 0) / 100 : null; if (c !== 'a') { - _c[c] = numbers(a[c], b[c], v) >> 0 || 0; + _c[c] = numbers(a[c], b[c], v) >> 0 || 0; // eslint-disable-line no-bitwise } else if (a[c] && b[c]) { - _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; + _c[c] = (numbers(a[c], b[c], v) * 100 >> 0) / 100; // eslint-disable-line no-bitwise } }); diff --git a/src/interpolation/coords.js b/src/interpolation/coords.js index ef5ed6e..35d3298 100644 --- a/src/interpolation/coords.js +++ b/src/interpolation/coords.js @@ -1,8 +1,18 @@ +/** + * Coordinates Interpolation Function. + * + * @param {number[][]} a start coordinates + * @param {number[][]} b end coordinates + * @param {string} l amount of coordinates + * @param {number} v progress + * @returns {number[][]} the interpolated coordinates + */ export default function coords(a, b, l, v) { const points = []; for (let i = 0; i < l; i += 1) { // for each point points[i] = []; for (let j = 0; j < 2; j += 1) { // each point coordinate + // eslint-disable-next-line no-bitwise points[i].push(((a[i][j] + (b[i][j] - a[i][j]) * v) * 1000 >> 0) / 1000); } } diff --git a/src/interpolation/numbers.js b/src/interpolation/numbers.js index 6d67867..175fdda 100644 --- a/src/interpolation/numbers.js +++ b/src/interpolation/numbers.js @@ -1,4 +1,12 @@ -export default function numbers(a, b, v) { // number1, number2, progress +/** + * Numbers Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {number} v progress + * @returns {number} the interpolated number + */ +export default function numbers(a, b, v) { const A = +a; const B = b - a; // a = +a; b -= a; diff --git a/src/interpolation/perspective.js b/src/interpolation/perspective.js index fbc3fd5..cb108b9 100644 --- a/src/interpolation/perspective.js +++ b/src/interpolation/perspective.js @@ -1,3 +1,13 @@ +/** + * Perspective Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the perspective function in string format + */ export default function perspective(a, b, u, v) { + // eslint-disable-next-line no-bitwise return `perspective(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`; } diff --git a/src/interpolation/rotate.js b/src/interpolation/rotate.js index 0321c99..d0fca7c 100644 --- a/src/interpolation/rotate.js +++ b/src/interpolation/rotate.js @@ -1,3 +1,13 @@ +/** + * 2D Rotation Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated rotation + */ export default function rotate(a, b, u, v) { + // eslint-disable-next-line no-bitwise return `rotate(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`; } diff --git a/src/interpolation/rotate3d.js b/src/interpolation/rotate3d.js index 2a96260..c69907f 100644 --- a/src/interpolation/rotate3d.js +++ b/src/interpolation/rotate3d.js @@ -1,7 +1,19 @@ +/** + * 3D Rotation Interpolation Function. + * + * @param {number} a start [x,y,z] angles + * @param {number} b end [x,y,z] angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D rotation string + */ export default function rotate3d(a, b, u, v) { let rotateStr = ''; + // eslint-disable-next-line no-bitwise rotateStr += a[0] || b[0] ? `rotateX(${((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000}${u})` : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[1] || b[1] ? `rotateY(${((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000}${u})` : ''; + // eslint-disable-next-line no-bitwise rotateStr += a[2] || b[2] ? `rotateZ(${((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000}${u})` : ''; return rotateStr; } diff --git a/src/interpolation/scale.js b/src/interpolation/scale.js index 21f929e..e4da74a 100644 --- a/src/interpolation/scale.js +++ b/src/interpolation/scale.js @@ -1,3 +1,12 @@ +/** + * Scale Interpolation Function. + * + * @param {number} a start scale + * @param {number} b end scale + * @param {number} v progress + * @returns {string} the interpolated scale + */ export default function scale(a, b, v) { + // eslint-disable-next-line no-bitwise return `scale(${((a + (b - a) * v) * 1000 >> 0) / 1000})`; } diff --git a/src/interpolation/skew.js b/src/interpolation/skew.js index 995a735..46bbe56 100644 --- a/src/interpolation/skew.js +++ b/src/interpolation/skew.js @@ -1,6 +1,17 @@ +/** + * Skew Interpolation Function. + * + * @param {number} a start {x,y} angles + * @param {number} b end {x,y} angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated string value of skew(s) + */ export default function skew(a, b, u, v) { const skewArray = []; + // eslint-disable-next-line no-bitwise skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return `skew(${skewArray.join(',')})`; } diff --git a/src/interpolation/skewX.js b/src/interpolation/skewX.js index 0b5c408..172334d 100644 --- a/src/interpolation/skewX.js +++ b/src/interpolation/skewX.js @@ -1,3 +1,13 @@ +/** + * SkewX Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated skewX + */ export default function skewX(a, b, u, v) { + // eslint-disable-next-line no-bitwise return `skewX(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`; } diff --git a/src/interpolation/skewY.js b/src/interpolation/skewY.js index df0a067..e7f3fc5 100644 --- a/src/interpolation/skewY.js +++ b/src/interpolation/skewY.js @@ -1,3 +1,13 @@ +/** + * SkewY Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated skewY + */ export default function skewY(a, b, u, v) { + // eslint-disable-next-line no-bitwise return `skewY(${((a + (b - a) * v) * 1000 >> 0) / 1000}${u})`; } diff --git a/src/interpolation/translate.js b/src/interpolation/translate.js index 2bd537a..dacc327 100644 --- a/src/interpolation/translate.js +++ b/src/interpolation/translate.js @@ -1,6 +1,17 @@ +/** + * Translate 2D Interpolation Function. + * + * @param {number[]} a start [x,y] position + * @param {number[]} b end [x,y] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 2D translation string + */ export default function translate(a, b, u, v) { const translateArray = []; + // eslint-disable-next-line no-bitwise translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u; + // eslint-disable-next-line no-bitwise translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0'; return `translate(${translateArray.join(',')})`; } diff --git a/src/interpolation/translate3d.js b/src/interpolation/translate3d.js index e45eddb..c71ffff 100644 --- a/src/interpolation/translate3d.js +++ b/src/interpolation/translate3d.js @@ -1,7 +1,17 @@ +/** + * Translate 3D Interpolation Function. + * + * @param {number[]} a start [x,y,z] position + * @param {number[]} b end [x,y,z] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D translation string + */ export default function translate3d(a, b, u, v) { const translateArray = []; for (let ax = 0; ax < 3; ax += 1) { translateArray[ax] = (a[ax] || b[ax] + // eslint-disable-next-line no-bitwise ? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u; } return `translate3d(${translateArray.join(',')})`; diff --git a/src/interpolation/units.js b/src/interpolation/units.js index 5688812..8e37df5 100644 --- a/src/interpolation/units.js +++ b/src/interpolation/units.js @@ -1,3 +1,12 @@ +/** + * Units Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the interpolated value + unit string + */ export default function units(a, b, u, v) { // number1, number2, unit, progress const A = +a; const B = b - a; diff --git a/src/objects/componentsBase.js b/src/objects/componentsBase.js index 8947213..a4b2175 100644 --- a/src/objects/componentsBase.js +++ b/src/objects/componentsBase.js @@ -1,11 +1,11 @@ -import Animation from '../animation/animationBase.js'; +import Animation from '../animation/animationBase'; -// kute-base.js supported components -import baseTransform from '../components/transformFunctionsBase.js'; -import baseBoxModel from '../components/boxModelBase.js'; -import baseOpacity from '../components/opacityPropertyBase.js'; -// import {baseCrossBrowserMove} from '../components/crossBrowserMove.js' -// support for kute-base.js ends here +// kute-base supported components +import baseTransform from '../components/transformFunctionsBase'; +import baseBoxModel from '../components/boxModelBase'; +import baseOpacity from '../components/opacityPropertyBase'; +// import {baseCrossBrowserMove} from '../components/crossBrowserMove' +// support for kute-base ends here const Components = { Transform: new Animation(baseTransform), diff --git a/src/objects/componentsDefault.js b/src/objects/componentsDefault.js index 8ebb790..32ef35b 100644 --- a/src/objects/componentsDefault.js +++ b/src/objects/componentsDefault.js @@ -1,20 +1,20 @@ -import Animation from '../animation/animation.js'; +import Animation from '../animation/animation'; -import EssentialBoxModel from '../components/boxModelEssential.js'; -import ColorsProperties from '../components/colorProperties.js'; -import HTMLAttributes from '../components/htmlAttributes.js'; -import OpacityProperty from '../components/opacityProperty.js'; -import TextWrite from '../components/textWrite.js'; -import TransformFunctions from '../components/transformFunctions.js'; -import SVGDraw from '../components/svgDraw.js'; -import SVGMorph from '../components/svgMorph.js'; +import EssentialBoxModel from '../components/boxModelEssential'; +import ColorsProperties from '../components/colorProperties'; +import HTMLAttributes from '../components/htmlAttributes'; +import OpacityProperty from '../components/opacityProperty'; +import TextWriteProp from '../components/textWrite'; +import TransformFunctions from '../components/transformFunctions'; +import SVGDraw from '../components/svgDraw'; +import SVGMorph from '../components/svgMorph'; const Components = { EssentialBoxModel, ColorsProperties, HTMLAttributes, OpacityProperty, - TextWrite, + TextWriteProp, TransformFunctions, SVGDraw, SVGMorph, diff --git a/src/objects/componentsExtra.js b/src/objects/componentsExtra.js index 3d7507b..6345540 100644 --- a/src/objects/componentsExtra.js +++ b/src/objects/componentsExtra.js @@ -1,21 +1,21 @@ -import Animation from '../animation/animationDevelopment.js'; +import Animation from '../animation/animationDevelopment'; -import BackgroundPosition from '../components/backgroundPosition.js'; -import BorderRadius from '../components/borderRadius.js'; -import BoxModel from '../components/boxModel.js'; -import ClipProperty from '../components/clipProperty.js'; -import ColorProperties from '../components/colorProperties.js'; +import BackgroundPosition from '../components/backgroundPosition'; +import BorderRadius from '../components/borderRadius'; +import BoxModel from '../components/boxModel'; +import ClipProperty from '../components/clipProperty'; +import ColorProperties from '../components/colorProperties'; import FilterEffects from '../components/filterEffects'; -import HTMLAttributes from '../components/htmlAttributes.js'; -import OpacityProperty from '../components/opacityProperty.js'; -import SVGDraw from '../components/svgDraw.js'; -import SVGCubicMorph from '../components/svgCubicMorph.js'; -import SVGTransform from '../components/svgTransform.js'; -import ScrollProperty from '../components/scrollProperty.js'; -import ShadowProperties from '../components/shadowProperties.js'; -import TextProperties from '../components/textProperties.js'; -import TextWriteProperties from '../components/textWrite.js'; -import MatrixTransform from '../components/transformMatrix.js'; +import HTMLAttributes from '../components/htmlAttributes'; +import OpacityProperty from '../components/opacityProperty'; +import SVGDraw from '../components/svgDraw'; +import SVGCubicMorph from '../components/svgCubicMorph'; +import SVGTransform from '../components/svgTransform'; +import ScrollProperty from '../components/scrollProperty'; +import ShadowProperties from '../components/shadowProperties'; +import TextProperties from '../components/textProperties'; +import TextWriteProperties from '../components/textWrite'; +import MatrixTransform from '../components/transformMatrix'; const Components = { BackgroundPosition, diff --git a/src/objects/connect.js b/src/objects/connect.js index ff8b4c5..2d5f778 100644 --- a/src/objects/connect.js +++ b/src/objects/connect.js @@ -1 +1,6 @@ -export default {}; +const connect = {}; +/** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */ +connect.tween = null; +connect.processEasing = null; + +export default connect; diff --git a/src/objects/crossCheck.js b/src/objects/crossCheck.js index c7c8299..e58a764 100644 --- a/src/objects/crossCheck.js +++ b/src/objects/crossCheck.js @@ -2,4 +2,5 @@ // can be set to make sure start unit and end unit are same, // stack transforms, process SVG paths, // any type of post processing the component needs -export default {}; +const crossCheck = {}; +export default crossCheck; diff --git a/src/objects/defaultOptions.js b/src/objects/defaultOptions.js index 54fc437..bfb341f 100644 --- a/src/objects/defaultOptions.js +++ b/src/objects/defaultOptions.js @@ -2,5 +2,13 @@ const defaultOptions = { duration: 700, delay: 0, easing: 'linear', + repeat: 0, + repeatDelay: 0, + yoyo: false, + resetStart: false, + offset: 0, }; +// no need to set defaults for callbacks +// defaultOptions.onPause = undefined +// defaultOptions.onResume = undefined export default defaultOptions; diff --git a/src/objects/defaultValues.js b/src/objects/defaultValues.js index ff8b4c5..aec2050 100644 --- a/src/objects/defaultValues.js +++ b/src/objects/defaultValues.js @@ -1 +1,2 @@ -export default {}; +const defaultValues = {}; +export default defaultValues; diff --git a/src/objects/globalObject.js b/src/objects/globalObject.js index 42ffdf6..8961257 100644 --- a/src/objects/globalObject.js +++ b/src/objects/globalObject.js @@ -1,7 +1,8 @@ -let globalObject; +let gl0bal; -if (typeof global !== 'undefined') globalObject = global; -else if (typeof window !== 'undefined') globalObject = window.self; -else globalObject = {}; +if (typeof global !== 'undefined') gl0bal = global; +else if (typeof window !== 'undefined') gl0bal = window.self; +else gl0bal = {}; +const globalObject = gl0bal; export default globalObject; diff --git a/src/objects/interpolate.js b/src/objects/interpolate.js index b10114d..0f0a5e5 100644 --- a/src/objects/interpolate.js +++ b/src/objects/interpolate.js @@ -1,3 +1,4 @@ // KUTE.js INTERPOLATE FUNCTIONS // ============================= -export default {}; +const interpolate = {}; +export default interpolate; diff --git a/src/objects/kute.js b/src/objects/kute.js index ff8b4c5..7ed1d44 100644 --- a/src/objects/kute.js +++ b/src/objects/kute.js @@ -1 +1,5 @@ -export default {}; +/** + * The KUTE.js Execution Context + */ +const KEC = {}; +export default KEC; diff --git a/src/objects/linkProperty.js b/src/objects/linkProperty.js index 2bb62b5..e3586e1 100644 --- a/src/objects/linkProperty.js +++ b/src/objects/linkProperty.js @@ -1,2 +1,3 @@ // link properties to interpolate functions -export default {}; +const linkProperty = {}; +export default linkProperty; diff --git a/src/objects/objects.js b/src/objects/objects.js index ee8f967..88fef2a 100644 --- a/src/objects/objects.js +++ b/src/objects/objects.js @@ -1,14 +1,14 @@ -import supportedProperties from './supportedProperties.js'; -import defaultValues from './defaultValues.js'; -import defaultOptions from './defaultOptions.js'; -import prepareProperty from './prepareProperty.js'; -import prepareStart from './prepareStart.js'; -import crossCheck from './crossCheck.js'; -import onStart from './onStart.js'; -import onComplete from './onComplete.js'; -import linkProperty from './linkProperty.js'; +import supportedProperties from './supportedProperties'; +import defaultValues from './defaultValues'; +import defaultOptions from './defaultOptions'; +import prepareProperty from './prepareProperty'; +import prepareStart from './prepareStart'; +import crossCheck from './crossCheck'; +import onStart from './onStart'; +import onComplete from './onComplete'; +import linkProperty from './linkProperty'; -export default { +const Objects = { supportedProperties, defaultValues, defaultOptions, @@ -19,3 +19,5 @@ export default { onComplete, linkProperty, }; + +export default Objects; diff --git a/src/objects/objectsBase.js b/src/objects/objectsBase.js index 2f73394..b504275 100644 --- a/src/objects/objectsBase.js +++ b/src/objects/objectsBase.js @@ -1,11 +1,13 @@ -import defaultOptions from './defaultOptions.js'; -import linkProperty from './linkProperty.js'; -import onStart from './onStart.js'; -import onComplete from './onComplete.js'; +import defaultOptions from './defaultOptions'; +import linkProperty from './linkProperty'; +import onStart from './onStart'; +import onComplete from './onComplete'; -export default { +const Objects = { defaultOptions, linkProperty, onStart, onComplete, }; + +export default Objects; diff --git a/src/objects/onComplete.js b/src/objects/onComplete.js index b53b0ff..dbead27 100644 --- a/src/objects/onComplete.js +++ b/src/objects/onComplete.js @@ -1,2 +1,3 @@ // schedule property specific function on animation complete -export default {}; +const onComplete = {}; +export default onComplete; diff --git a/src/objects/onStart.js b/src/objects/onStart.js index b50cad9..b6a4ef7 100644 --- a/src/objects/onStart.js +++ b/src/objects/onStart.js @@ -1,3 +1,4 @@ // schedule property specific function on animation start // link property update function to KUTE.js execution context -export default {}; +const onStart = {}; +export default onStart; diff --git a/src/objects/prepareProperty.js b/src/objects/prepareProperty.js index 56ad61d..8e86ee1 100644 --- a/src/objects/prepareProperty.js +++ b/src/objects/prepareProperty.js @@ -1,2 +1,3 @@ // used in preparePropertiesObject -export default {}; +const prepareProperty = {}; +export default prepareProperty; diff --git a/src/objects/prepareStart.js b/src/objects/prepareStart.js index 29acfdf..a946308 100644 --- a/src/objects/prepareStart.js +++ b/src/objects/prepareStart.js @@ -1,2 +1,3 @@ // check current property value when .to() method is used -export default {}; +const prepareStart = {}; +export default prepareStart; diff --git a/src/objects/supportedProperties.js b/src/objects/supportedProperties.js index ff8b4c5..b3d41c3 100644 --- a/src/objects/supportedProperties.js +++ b/src/objects/supportedProperties.js @@ -1 +1,3 @@ -export default {}; +// all supported properties +const supportedProperties = {}; +export default supportedProperties; diff --git a/src/objects/tweens.js b/src/objects/tweens.js index d6d1738..5a2f8ff 100644 --- a/src/objects/tweens.js +++ b/src/objects/tweens.js @@ -1 +1,2 @@ -export default []; +const Tweens = []; +export default Tweens; diff --git a/src/objects/util.js b/src/objects/util.js index 058bb44..bffef7f 100644 --- a/src/objects/util.js +++ b/src/objects/util.js @@ -1,2 +1,3 @@ // util - a general object for utils like rgbToHex, processEasing -export default {}; +const Util = {}; +export default Util; diff --git a/src/process/getInlineStyle.js b/src/process/getInlineStyle.js index 311b2a8..8079267 100644 --- a/src/process/getInlineStyle.js +++ b/src/process/getInlineStyle.js @@ -1,4 +1,11 @@ -// getInlineStyle - get transform style for element from cssText for .to() method +/** + * getInlineStyle + * Returns the transform style for element from + * cssText. Used by for the `.to()` static method. + * + * @param {Element} el target element + * @returns {object} + */ export default function getInlineStyle(el) { // if the scroll applies to `window` it returns as it has no styling if (!el.style) return false; diff --git a/src/process/getInlineStyleLegacy.js b/src/process/getInlineStyleLegacy.js index 9b8f310..83e176b 100644 --- a/src/process/getInlineStyleLegacy.js +++ b/src/process/getInlineStyleLegacy.js @@ -1,5 +1,14 @@ -import transformProperty from '../util/transformProperty.js'; +import transformProperty from '../util/transformProperty'; +/** + * getInlineStyle + * + * Returns the transform style for element from cssText. + * Used by for the `.to()` static method on legacy browsers. + * + * @param {Element} el target element + * @returns {object} a transform object + */ export default function getInlineStyleLegacy(el) { if (!el.style) return false; // if the scroll applies to `window` it returns as it has no styling const css = el.style.cssText.replace(/\s/g, '').split(';'); // the cssText | the resulting transform object diff --git a/src/process/getStartValues.js b/src/process/getStartValues.js index 03c229a..230dcd6 100644 --- a/src/process/getStartValues.js +++ b/src/process/getStartValues.js @@ -1,10 +1,17 @@ -import getInlineStyle from './getInlineStyle.js'; -import prepareObject from './prepareObject.js'; -import defaultValues from '../objects/defaultValues.js'; -import prepareStart from '../objects/prepareStart.js'; -import supportedProperties from '../objects/supportedProperties.js'; +import getInlineStyle from './getInlineStyle'; +import prepareObject from './prepareObject'; +import defaultValues from '../objects/defaultValues'; +import prepareStart from '../objects/prepareStart'; +import supportedProperties from '../objects/supportedProperties'; -// getStartValues - returns the startValue for to() method +/** + * getStartValues + * + * Returns the start values for to() method. + * Used by for the `.to()` static method. + * + * @this {KUTE.Tween} the tween instance + */ export default function getStartValues() { const startValues = {}; const currentStyle = getInlineStyle(this.element); diff --git a/src/process/getStyleForProperty.js b/src/process/getStyleForProperty.js index 62f8979..b8e8b74 100644 --- a/src/process/getStyleForProperty.js +++ b/src/process/getStyleForProperty.js @@ -1,13 +1,22 @@ -import defaultValues from '../objects/defaultValues.js'; +import defaultValues from '../objects/defaultValues'; -// getStyleForProperty - get computed style property for element for .to() method +/** + * getStyleForProperty + * + * Returns the computed style property for element for .to() method. + * Used by for the `.to()` static method. + * + * @param {Element} elem + * @param {string} propertyName + * @returns {string} + */ export default function getStyleForProperty(elem, propertyName) { + let result = defaultValues[propertyName]; const styleAttribute = elem.style; const computedStyle = getComputedStyle(elem) || elem.currentStyle; const styleValue = styleAttribute[propertyName] && !/auto|initial|none|unset/.test(styleAttribute[propertyName]) ? styleAttribute[propertyName] : computedStyle[propertyName]; - let result = defaultValues[propertyName]; if (propertyName !== 'transform' && (propertyName in computedStyle || propertyName in styleAttribute)) { result = styleValue; diff --git a/src/process/prepareObject.js b/src/process/prepareObject.js index 6a6e699..ead2490 100644 --- a/src/process/prepareObject.js +++ b/src/process/prepareObject.js @@ -1,8 +1,15 @@ -import prepareProperty from '../objects/prepareProperty.js'; -import supportedProperties from '../objects/supportedProperties.js'; -import defaultValues from '../objects/defaultValues.js'; +import prepareProperty from '../objects/prepareProperty'; +import supportedProperties from '../objects/supportedProperties'; +import defaultValues from '../objects/defaultValues'; -// prepareObject - returns all processed valuesStart / valuesEnd +/** + * prepareObject + * + * Returns all processed valuesStart / valuesEnd. + * + * @param {Element} obj the values start/end object + * @param {string} fn toggles between the two + */ export default function prepareObject(obj, fn) { // this, props object, type: start/end const propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd; diff --git a/src/process/process.js b/src/process/process.js index 7eb4fd8..d92656d 100644 --- a/src/process/process.js +++ b/src/process/process.js @@ -1,7 +1,7 @@ -import getInlineStyle from './getInlineStyle.js'; -import getStyleForProperty from './getStyleForProperty.js'; -import getStartValues from './getStartValues.js'; -import prepareObject from './prepareObject.js'; +import getInlineStyle from './getInlineStyle'; +import getStyleForProperty from './getStyleForProperty'; +import getStartValues from './getStartValues'; +import prepareObject from './prepareObject'; export default { getInlineStyle, diff --git a/src/tween/tween.js b/src/tween/tween.js index 5802390..7ca6c34 100644 --- a/src/tween/tween.js +++ b/src/tween/tween.js @@ -1,26 +1,27 @@ -import KUTE from '../objects/kute.js'; -import TweenBase from './tweenBase.js'; -import connect from '../objects/connect.js'; -import add from '../core/add.js'; -import remove from '../core/remove.js'; -import defaultOptions from '../objects/defaultOptions.js'; -import crossCheck from '../objects/crossCheck.js'; -import prepareObject from '../process/prepareObject.js'; -import getStartValues from '../process/getStartValues.js'; -import { Tick, Ticker } from '../core/render.js'; -import queueStart from '../core/queueStart.js'; +import KEC from '../objects/kute'; +import TweenBase from './tweenBase'; +import connect from '../objects/connect'; +import add from '../core/add'; +import remove from '../core/remove'; +import defaultOptions from '../objects/defaultOptions'; +import crossCheck from '../objects/crossCheck'; +import prepareObject from '../process/prepareObject'; +import getStartValues from '../process/getStartValues'; +import { Tick, Ticker } from '../core/render'; +import queueStart from '../core/queueStart'; -defaultOptions.repeat = 0; -defaultOptions.repeatDelay = 0; -defaultOptions.yoyo = false; -defaultOptions.resetStart = false; - -// no need to set defaults for callbacks -// defaultOptions.onPause = undefined -// defaultOptions.onResume = undefined - -// the constructor that supports to, allTo methods +/** + * The `KUTE.Tween()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor adds additional functionality and is the default + * Tween object constructor in KUTE.js. + */ export default class Tween extends TweenBase { + /** + * @param {KUTE.tweenParams} args (*target*, *startValues*, *endValues*, *options*) + * @returns {Tween} the resulting Tween object + */ constructor(...args) { super(...args); // this calls the constructor of TweenBase @@ -28,8 +29,9 @@ export default class Tween extends TweenBase { this.valuesStart = {}; this.valuesEnd = {}; - const startObject = args[1]; - const endObject = args[2]; + // const startObject = args[1]; + // const endObject = args[2]; + const [startObject, endObject, options] = args.slice(1); // set valuesEnd prepareObject.call(this, endObject, 'end'); @@ -51,20 +53,26 @@ export default class Tween extends TweenBase { } // set paused state + /** @type {boolean} */ this.paused = false; + /** @type {number?} */ this._pauseTime = null; // additional properties and options - const options = args[3]; - + /** @type {number?} */ this._repeat = options.repeat || defaultOptions.repeat; + /** @type {number?} */ this._repeatDelay = options.repeatDelay || defaultOptions.repeatDelay; // we cache the number of repeats to be able to put it back after all cycles finish + /** @type {number?} */ this._repeatOption = this._repeat; // yoyo needs at least repeat: 1 + /** @type {KUTE.tweenProps} */ this.valuesRepeat = {}; // valuesRepeat + /** @type {boolean} */ this._yoyo = options.yoyo || defaultOptions.yoyo; + /** @type {boolean} */ this._reversed = false; // don't load extra callbacks @@ -76,7 +84,11 @@ export default class Tween extends TweenBase { return this; } - // additions to start method + /** + * Starts tweening, extended method + * @param {number?} time the tween start time + * @returns {Tween} this instance + */ start(time) { // on start we reprocess the valuesStart for TO() method if (this._resetStart) { @@ -105,7 +117,10 @@ export default class Tween extends TweenBase { return this; } - // updates to super methods + /** + * Stops tweening, extended method + * @returns {Tween} this instance + */ stop() { super.stop(); if (!this.paused && this.playing) { @@ -115,6 +130,9 @@ export default class Tween extends TweenBase { return this; } + /** + * Trigger internal completion callbacks. + */ close() { super.close(); @@ -129,7 +147,10 @@ export default class Tween extends TweenBase { return this; } - // additions to prototype + /** + * Resume tweening + * @returns {Tween} this instance + */ resume() { if (this.paused && this.playing) { this.paused = false; @@ -139,7 +160,7 @@ export default class Tween extends TweenBase { // re-queue execution context queueStart.call(this); // update time and let it roll - this._startTime += KUTE.Time() - this._pauseTime; + this._startTime += KEC.Time() - this._pauseTime; add(this); // restart ticker if stopped if (!Tick) Ticker(); @@ -147,11 +168,15 @@ export default class Tween extends TweenBase { return this; } + /** + * Pause tweening + * @returns {Tween} this instance + */ pause() { if (!this.paused && this.playing) { remove(this); this.paused = true; - this._pauseTime = KUTE.Time(); + this._pauseTime = KEC.Time(); if (this._onPause !== undefined) { this._onPause.call(this); } @@ -159,19 +184,25 @@ export default class Tween extends TweenBase { return this; } + /** + * Reverses start values with end values + */ reverse() { - // if (this._yoyo) { Object.keys(this.valuesEnd).forEach((reverseProp) => { const tmp = this.valuesRepeat[reverseProp]; this.valuesRepeat[reverseProp] = this.valuesEnd[reverseProp]; this.valuesEnd[reverseProp] = tmp; this.valuesStart[reverseProp] = this.valuesRepeat[reverseProp]; }); - // } } + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ update(time) { - const T = time !== undefined ? time : KUTE.Time(); + const T = time !== undefined ? time : KEC.Time(); let elapsed; @@ -185,7 +216,7 @@ export default class Tween extends TweenBase { // render the update Object.keys(this.valuesEnd).forEach((tweenProp) => { - KUTE[tweenProp](this.element, + KEC[tweenProp](this.element, this.valuesStart[tweenProp], this.valuesEnd[tweenProp], progress); diff --git a/src/tween/tweenBase.js b/src/tween/tweenBase.js index 1d2eed0..8d070e5 100644 --- a/src/tween/tweenBase.js +++ b/src/tween/tweenBase.js @@ -1,29 +1,43 @@ -import KUTE from '../objects/kute.js'; -import connect from '../objects/connect.js'; -import onStart from '../objects/onStart.js'; -import onComplete from '../objects/onComplete.js'; -import defaultOptions from '../objects/defaultOptions.js'; +import KEC from '../objects/kute'; +import connect from '../objects/connect'; +import onStart from '../objects/onStart'; +import onComplete from '../objects/onComplete'; +import defaultOptions from '../objects/defaultOptions'; -import { Tick, Ticker, stop } from '../core/render.js'; +import { Tick, Ticker, stop } from '../core/render'; -import add from '../core/add.js'; -import remove from '../core/remove.js'; -import queueStart from '../core/queueStart.js'; +import add from '../core/add'; +import remove from '../core/remove'; +import queueStart from '../core/queueStart'; -// single Tween object construct -// TweenBase is meant to be use for pre-processed values +/** + * The `TweenBase` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * `TweenBase` is meant to be used with pre-processed values. + */ export default class TweenBase { + /** + * @param {Element} targetElement the target element + * @param {KUTE.tweenProps} startObject the start values + * @param {KUTE.tweenProps} endObject the end values + * @param {KUTE.tweenOptions} opsObject the end values + * @returns {TweenBase} the resulting Tween object + */ constructor(targetElement, startObject, endObject, opsObject) { // element animation is applied to this.element = targetElement; + /** @type {boolean} */ this.playing = false; - + /** @type {number?} */ this._startTime = null; + /** @type {boolean} */ this._startFired = false; - this.valuesEnd = endObject; // valuesEnd - this.valuesStart = startObject; // valuesStart + // type is set via KUTE.tweenProps + this.valuesEnd = endObject; + this.valuesStart = startObject; // OPTIONS const options = opsObject || {}; @@ -31,8 +45,11 @@ export default class TweenBase { // used by to() method and expects object : {} / false this._resetStart = options.resetStart || 0; // you can only set a core easing function as default + /** @type {KUTE.easingOption} */ this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing); + /** @type {number} */ this._duration = options.duration || defaultOptions.duration; // duration option | default + /** @type {number} */ this._delay = options.delay || defaultOptions.delay; // delay option | default // set other options @@ -51,22 +68,24 @@ export default class TweenBase { const easingFnName = this._easing.name; if (!onStart[easingFnName]) { onStart[easingFnName] = function easingFn(prop) { - if (!KUTE[prop] && prop === this._easing.name) KUTE[prop] = this._easing; + if (!KEC[prop] && prop === this._easing.name) KEC[prop] = this._easing; }; } return this; } - // tween prototype - // queue tween object to main frame update - // move functions that use the ticker outside the prototype to be in the same scope with it + /** + * Starts tweening + * @param {number?} time the tween start time + * @returns {TweenBase} this instance + */ start(time) { // now it's a good time to start add(this); this.playing = true; - this._startTime = typeof time !== 'undefined' ? time : KUTE.Time(); + this._startTime = typeof time !== 'undefined' ? time : KEC.Time(); this._startTime += this._delay; if (!this._startFired) { @@ -83,6 +102,10 @@ export default class TweenBase { return this; } + /** + * Stops tweening + * @returns {TweenBase} this instance + */ stop() { if (this.playing) { remove(this); @@ -96,6 +119,9 @@ export default class TweenBase { return this; } + /** + * Trigger internal completion callbacks. + */ close() { // scroll|transformMatrix need this Object.keys(onComplete).forEach((component) => { @@ -108,18 +134,31 @@ export default class TweenBase { stop.call(this); } + /** + * Schedule another tween instance to start once this one completes. + * @param {KUTE.chainOption} args the tween animation start time + * @returns {TweenBase} this instance + */ chain(args) { this._chain = []; this._chain = args.length ? args : this._chain.concat(args); return this; } + /** + * Stop tweening the chained tween instances. + */ stopChainedTweens() { if (this._chain && this._chain.length) this._chain.forEach((tw) => tw.stop()); } + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ update(time) { - const T = time !== undefined ? time : KUTE.Time(); + const T = time !== undefined ? time : KEC.Time(); let elapsed; @@ -133,7 +172,7 @@ export default class TweenBase { // render the update Object.keys(this.valuesEnd).forEach((tweenProp) => { - KUTE[tweenProp](this.element, + KEC[tweenProp](this.element, this.valuesStart[tweenProp], this.valuesEnd[tweenProp], progress); diff --git a/src/tween/tweenCollection.js b/src/tween/tweenCollection.js index 30b0c0c..88f94b3 100644 --- a/src/tween/tweenCollection.js +++ b/src/tween/tweenCollection.js @@ -1,61 +1,91 @@ -import KUTE from '../objects/kute.js'; -import defaultOptions from '../objects/defaultOptions.js'; -import connect from '../objects/connect.js'; - -// KUTE.js Tween Collection -// ======================== +import KEC from '../objects/kute'; +import defaultOptions from '../objects/defaultOptions'; +import connect from '../objects/connect'; +/** + * The static method creates a new `Tween` object for each `HTMLElement` + * from and `Array`, `HTMLCollection` or `NodeList`. + */ export default class TweenCollection { + /** + * + * @param {Element[] | HTMLCollection | NodeList} els target elements + * @param {KUTE.tweenProps} vS the start values + * @param {KUTE.tweenProps} vE the end values + * @param {KUTE.tweenOptions} Options tween options + * @returns {TweenCollection} the Tween object collection + */ constructor(els, vS, vE, Options) { + const TweenConstructor = connect.tween; + /** @type {KUTE.twCollection[]} */ this.tweens = []; - // set default offset - if (!('offset' in defaultOptions)) defaultOptions.offset = 0; - const Ops = Options || {}; + /** @type {number?} */ Ops.delay = Ops.delay || defaultOptions.delay; // set all options const options = []; Array.from(els).forEach((el, i) => { - const TweenConstructor = connect.tween; options[i] = Ops || {}; options[i].delay = i > 0 ? Ops.delay + (Ops.offset || defaultOptions.offset) : Ops.delay; if (el instanceof Element) { this.tweens.push(new TweenConstructor(el, vS, vE, options[i])); } else { - throw Error(`KUTE.js - ${el} not instanceof [Element]`); + throw Error(`KUTE - ${el} is not instanceof Element`); } }); + /** @type {number?} */ this.length = this.tweens.length; return this; } + /** + * Starts tweening, all targets + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ start(time) { - const T = time === undefined ? KUTE.Time() : time; + const T = time === undefined ? KEC.Time() : time; this.tweens.map((tween) => tween.start(T)); return this; } + /** + * Stops tweening, all targets and their chains + * @returns {TweenCollection} this instance + */ stop() { this.tweens.map((tween) => tween.stop()); return this; } - pause(time) { - const T = time === undefined ? KUTE.Time() : time; - this.tweens.map((tween) => tween.pause(T)); + /** + * Pause tweening, all targets + * @returns {TweenCollection} this instance + */ + pause() { + this.tweens.map((tween) => tween.pause()); return this; } - resume(time) { - const T = time === undefined ? KUTE.Time() : time; - this.tweens.map((tween) => tween.resume(T)); + /** + * Resume tweening, all targets + * @returns {TweenCollection} this instance + */ + resume() { + this.tweens.map((tween) => tween.resume()); return this; } + /** + * Schedule another tween or collection to start after + * this one is complete. + * @param {number?} args the tween start time + * @returns {TweenCollection} this instance + */ chain(args) { const lastTween = this.tweens[this.length - 1]; if (args instanceof TweenCollection) { @@ -68,14 +98,26 @@ export default class TweenCollection { return this; } + /** + * Check if any tween instance is playing + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ playing() { return this.tweens.some((tw) => tw.playing); } + /** + * Remove all tweens in the collection + */ removeTweens() { this.tweens = []; } + /** + * Returns the maximum animation duration + * @returns {number} this instance + */ getMaxDuration() { const durations = []; this.tweens.forEach((tw) => { diff --git a/src/tween/tweenExtra.js b/src/tween/tweenExtra.js index 239126a..7bd71f4 100644 --- a/src/tween/tweenExtra.js +++ b/src/tween/tweenExtra.js @@ -1,5 +1,5 @@ -import connect from '../objects/connect.js'; -import Tween from './tween.js'; +import connect from '../objects/connect'; +import Tween from './tween'; // to do // * per property easing @@ -9,7 +9,17 @@ import Tween from './tween.js'; // * new update method to work with the above // * other cool ideas +/** + * The `KUTE.TweenExtra()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor is intended for experiments or testing of new features. + */ export default class TweenExtra extends Tween { + /** + * @param {KUTE.tweenParams} args (*target*, *startValues*, *endValues*, *options*) + * @returns {TweenExtra} the resulting Tween object + */ constructor(...args) { super(...args); // import constructor of TweenBase -> Tween @@ -32,16 +42,30 @@ export default class TweenExtra extends Tween { // to do // } - // set callbacks + /** + * Method to add callbacks on the fly. + * @param {string} name callback name + * @param {Function} fn callback function + * @returns {TweenExtra} + */ on(name, fn) { if (['start', 'stop', 'update', 'complete', 'pause', 'resume'].indexOf(name) > -1) { this[`_on${name.charAt(0).toUpperCase() + name.slice(1)}`] = fn; } + return this; } - // set options accepting [repeat,yoyo,delay,repeatDelay,easing] - option(o, v) { - this[`_${o}`] = v; + /** + * Method to set options on the fly. + * * accepting [repeat,yoyo,delay,repeatDelay,easing] + * + * @param {string} option the tick time + * @param {string | number | number[]} value the tick time + * @returns {TweenExtra} + */ + option(option, value) { + this[`_${option}`] = value; + return this; } } diff --git a/src/util/degToRad.js b/src/util/degToRad.js index c880c45..263b0c3 100644 --- a/src/util/degToRad.js +++ b/src/util/degToRad.js @@ -1 +1,10 @@ -export default function degToRad(a) { return (a * Math.PI) / 180; } +/** + * degToRad + * + * Returns the value of a degree angle in radian. + * + * @param {number} a the degree angle + * @returns {number} the radian angle + */ +const degToRad = (a) => (a * Math.PI) / 180; +export default degToRad; diff --git a/src/util/fromJSON.js b/src/util/fromJSON.js index 00713c2..c91bce2 100644 --- a/src/util/fromJSON.js +++ b/src/util/fromJSON.js @@ -1,8 +1,17 @@ -// toJSON - returns {valuesStart,valuesEnd} object from JSON STRING -export default (str) => { +/** + * fromJSON + * + * Returns the {valuesStart, valuesEnd} objects + * from a Tween instance. + * + * @param {string} str the JSON string + * @returns {JSON} the JSON object + */ +const fromJSON = (str) => { const obj = JSON.parse(str); return { valuesStart: obj.valuesStart, valuesEnd: obj.valuesEnd, }; }; +export default fromJSON; diff --git a/src/util/getPrefix.js b/src/util/getPrefix.js index 1664e6f..cca35d3 100644 --- a/src/util/getPrefix.js +++ b/src/util/getPrefix.js @@ -1,11 +1,19 @@ -// getPrefix - returns browser prefix -export default function getPrefix() { - let thePrefix; const - prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms']; +/** + * getPrefix + * + * Returns browser CSS3 prefix. Keep `for()` + * for wider browser support. + * + * @returns {?string} the browser prefix + */ +const getPrefix = () => { + let thePrefix = null; + const prefixes = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms']; for (let i = 0, pfl = prefixes.length; i < pfl; i += 1) { if (`${prefixes[i]}Transform` in document.body.style) { thePrefix = prefixes[i]; break; // !! BREAK } } return thePrefix; -} +}; +export default getPrefix; diff --git a/src/util/hexToRGB.js b/src/util/hexToRGB.js index 093f636..8ce596c 100644 --- a/src/util/hexToRGB.js +++ b/src/util/hexToRGB.js @@ -1,7 +1,16 @@ -// hexToRGB - returns RGB color object {r,g,b} -export default (hex) => { - const hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") - const HEX = hex.replace(hexShorthand, (m, r, g, b) => r + r + g + g + b + b); +/** + * hexToRGB + * + * Converts a #HEX color format into RGB + * and returns a color object {r,g,b}. + * + * @param {string} hex the degree angle + * @returns {KUTE.colorObject | null} the radian angle + */ +const hexToRGB = (hex) => { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + const hexShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + const HEX = hex.replace(hexShorthand, (_, r, g, b) => r + r + g + g + b + b); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(HEX); return result ? { @@ -10,3 +19,4 @@ export default (hex) => { b: parseInt(result[3], 16), } : null; }; +export default hexToRGB; diff --git a/src/util/now.js b/src/util/now.js index 25e3553..27759c0 100644 --- a/src/util/now.js +++ b/src/util/now.js @@ -1,12 +1,12 @@ // Include a performance.now polyfill. // source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts -let now; +let performanceNow; // In node.js, use process.hrtime. // eslint-disable-next-line // @ts-ignore if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) { - now = () => { + performanceNow = () => { // eslint-disable-next-line // @ts-ignore const time = process.hrtime(); @@ -18,13 +18,15 @@ if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrt // In a browser, use self.performance.now if it is available. // This must be bound, because directly assigning this function // leads to an invocation exception in Chrome. - now = self.performance.now.bind(self.performance); + performanceNow = self.performance.now.bind(self.performance); } else if (typeof Date !== 'undefined' && Date.now) { // Use Date.now if it is available. - now = Date.now; + performanceNow = Date.now; } else { // Otherwise, use 'new Date().getTime()'. - now = () => new Date().getTime(); + performanceNow = () => new Date().getTime(); } +const now = performanceNow; + export default now; diff --git a/src/util/polyfill-legacy.js b/src/util/polyfill-legacy.js index 6c79b33..7833696 100644 --- a/src/util/polyfill-legacy.js +++ b/src/util/polyfill-legacy.js @@ -1,21 +1,23 @@ -// build this polyfill for IE9+ browser support -// import 'minifill/src/this.Window.js' -// import 'minifill/src/this.Document.js' -// import 'minifill/src/window.HTMLElement.js' +/* + * build this polyfill for IE9+ browser support + */ +// import 'minifill/src/this.Window' +// import 'minifill/src/this.Document' +// import 'minifill/src/window.HTMLElement' -// import 'minifill/src/Object.defineProperty.js' -// import 'minifill/src/Object.create.js' -import 'minifill/src/Function.prototype.bind.js'; +// import 'minifill/src/Object.defineProperty' +// import 'minifill/src/Object.create' +import 'minifill/src/Function.prototype.bind'; -import 'minifill/src/Array.from.js'; -import 'minifill/src/Array.prototype.map.js'; -import 'minifill/src/Array.prototype.some.js'; -import 'minifill/src/Array.prototype.every.js'; -import 'minifill/src/Array.prototype.includes.js'; -import 'minifill/src/Array.prototype.flat.js'; -import 'minifill/src/String.prototype.includes.js'; +import 'minifill/src/Array.from'; +import 'minifill/src/Array.prototype.map'; +import 'minifill/src/Array.prototype.some'; +import 'minifill/src/Array.prototype.every'; +import 'minifill/src/Array.prototype.includes'; +import 'minifill/src/Array.prototype.flat'; +import 'minifill/src/String.prototype.includes'; // IE9+ -import 'minifill/src/Date.now.js'; -import 'minifill/src/window.performance.now.js'; -import 'minifill/src/window.requestAnimationFrame.js'; +import 'minifill/src/Date.now'; +import 'minifill/src/window.performance.now'; +import 'minifill/src/window.requestAnimationFrame'; diff --git a/src/util/polyfill.js b/src/util/polyfill.js index 32b498c..2e2514a 100644 --- a/src/util/polyfill.js +++ b/src/util/polyfill.js @@ -1,8 +1,8 @@ // IE10+ -import 'minifill/src/Array.from.js'; -import 'minifill/src/Array.prototype.flat.js'; -import 'minifill/src/Array.prototype.includes.js'; -import 'minifill/src/String.prototype.includes.js'; -import 'minifill/src/Number.isFinite.js'; -import 'minifill/src/Number.isInteger.js'; -import 'minifill/src/Number.isNaN.js'; +import 'minifill/src/Array.from'; +import 'minifill/src/Array.prototype.flat'; +import 'minifill/src/Array.prototype.includes'; +import 'minifill/src/String.prototype.includes'; +import 'minifill/src/Number.isFinite'; +import 'minifill/src/Number.isInteger'; +import 'minifill/src/Number.isNaN'; diff --git a/src/util/progressBar.js b/src/util/progressBar.js index ff6363c..65fa8d0 100644 --- a/src/util/progressBar.js +++ b/src/util/progressBar.js @@ -1,8 +1,21 @@ -import KUTE from '../objects/kute.js'; -import connect from '../objects/connect.js'; -import selector from './selector.js'; +import KEC from '../objects/kute'; +import connect from '../objects/connect'; +import selector from './selector'; +/** + * ProgressBar + * + * @class + * A progress bar utility for KUTE.js that will connect + * a target ``. with a Tween instance + * allowing it to control the progress of the Tween. + */ export default class ProgressBar { + /** + * @constructor + * @param {HTMLElement} el target or string selector + * @param {KUTE.Tween} multi when true returns an array of elements + */ constructor(element, tween) { this.element = selector(element); this.element.tween = tween; @@ -30,14 +43,14 @@ export default class ProgressBar { const { output } = this.toolbar; // let progress = this.paused ? this.toolbar.value - // : (KUTE.Time() - this._startTime) / this._duration; + // : (KEC.Time() - this._startTime) / this._duration; // progress = progress > 1 - tick ? 1 : progress < 0.01 ? 0 : progress; let progress; if (this.paused) { progress = this.toolbar.value; } else { - progress = (KUTE.Time() - this._startTime) / this._duration; + progress = (KEC.Time() - this._startTime) / this._duration; } // progress = progress > 1 - tick ? 1 : progress < 0.01 ? 0 : progress; @@ -46,6 +59,7 @@ export default class ProgressBar { const value = !this._reversed ? progress : 1 - progress; this.toolbar.value = value; + // eslint-disable-next-line no-bitwise if (output) output.value = `${(value * 10000 >> 0) / 100}%`; } @@ -77,7 +91,7 @@ export default class ProgressBar { this.tween.pause(); this.toolbar.toggleEvents('add'); - KUTE.Tick = cancelAnimationFrame(KUTE.Ticker); + KEC.Tick = cancelAnimationFrame(KEC.Ticker); } } @@ -85,11 +99,11 @@ export default class ProgressBar { if (this.tween.paused) { if (this.tween.paused) this.tween.resume(); - this.tween._startTime = KUTE.Time() + this.tween._startTime = KEC.Time() - (!this.tween._reversed ? this.value : 1 - this.value) * this.tween._duration; this.toolbar.toggleEvents('remove'); - KUTE.Tick = requestAnimationFrame(KUTE.Ticker); + KEC.Tick = requestAnimationFrame(KEC.Ticker); } } } diff --git a/src/util/radToDeg.js b/src/util/radToDeg.js index 719a773..d5de40c 100644 --- a/src/util/radToDeg.js +++ b/src/util/radToDeg.js @@ -1 +1,10 @@ -export default (a) => (a * 180) / Math.PI; +/** + * radToDeg + * + * Returns the value of a radian in degrees. + * + * @param {number} a the value in radian + * @returns {number} the value in degrees + */ +const radToDeg = (a) => (a * 180) / Math.PI; +export default radToDeg; diff --git a/src/util/rgbToHex.js b/src/util/rgbToHex.js index b08298f..66333e0 100644 --- a/src/util/rgbToHex.js +++ b/src/util/rgbToHex.js @@ -1,2 +1,14 @@ -// rgbToHex - transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA -export default (r, g, b) => `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; +/** + * rgbToHex + * + * Converts an {r,g,b} color `Object` into #HEX string color format. + * Webkit browsers ignore HEX, always use RGB/RGBA. + * + * @param {number} r the red value + * @param {number} g the green value + * @param {number} b the blue value + * @returns {string} the #HEX string + */ +// eslint-disable-next-line no-bitwise +const rgbToHex = (r, g, b) => `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; +export default rgbToHex; diff --git a/src/util/selector.js b/src/util/selector.js index e4215a0..8c4d917 100644 --- a/src/util/selector.js +++ b/src/util/selector.js @@ -1,4 +1,12 @@ -// a public selector utility +/** + * selector + * + * A selector utility for KUTE.js. + * + * @param {KUTE.selectorType} el target(s) or string selector + * @param {boolean | number} multi when true returns an array/collection of elements + * @returns {Element | Element[] | null} + */ export default function selector(el, multi) { try { let requestedElem; diff --git a/src/util/supportLegacyTransform.js b/src/util/supportLegacyTransform.js index e7775c6..f9a0c56 100644 --- a/src/util/supportLegacyTransform.js +++ b/src/util/supportLegacyTransform.js @@ -1,3 +1,5 @@ -import transformProperty from './transformProperty.js'; +import transformProperty from './transformProperty'; -export default transformProperty in document.head.style; +/** check if transform is supported via prefixed property */ +const supportTransform = transformProperty in document.head.style; +export default supportTransform; diff --git a/src/util/toJSON.js b/src/util/toJSON.js index 428fcc6..f350234 100644 --- a/src/util/toJSON.js +++ b/src/util/toJSON.js @@ -1,8 +1,17 @@ -// toJSON - returns {valuesStart,valuesEnd} from target Tween in JSON string format -export default (tween) => { +/** + * toJSON + * + * Returns the {valuesStart, valuesEnd} objects + * from a Tween instance in JSON string format. + * + * @param {KUTE.Tween} tween the Tween instance + * @returns {string} the JSON string + */ +const toJSON = (tween) => { const obj = { valuesStart: tween.valuesStart, valuesEnd: tween.valuesEnd, }; return JSON.stringify(obj); }; +export default toJSON; diff --git a/src/util/transformProperty.js b/src/util/transformProperty.js index 0867964..ccf07e2 100644 --- a/src/util/transformProperty.js +++ b/src/util/transformProperty.js @@ -1,3 +1,5 @@ -import trueProperty from './trueProperty.js'; +import trueProperty from './trueProperty'; -export default trueProperty('transform'); +/** the `transform` string for legacy browsers */ +const transformProperty = trueProperty('transform'); +export default transformProperty; diff --git a/src/util/trueColor.js b/src/util/trueColor.js index 8a02e17..03c2887 100644 --- a/src/util/trueColor.js +++ b/src/util/trueColor.js @@ -1,7 +1,14 @@ -import hexToRGB from './hexToRGB.js'; +import hexToRGB from './hexToRGB'; -// trueColor - replace transparent and transform any color to rgba()/rgb() -export default function trueColor(colorString) { +/** + * trueColor + * + * Transform any color to rgba()/rgb() and return a nice RGB(a) object. + * + * @param {string} colorString the color input + * @returns {KUTE.colorObject} the {r,g,b,a} color object + */ +const trueColor = (colorString) => { let result; if (/rgb|rgba/.test(colorString)) { // first check if it's a rgb string const vrgb = colorString.replace(/\s|\)/, '').split('(')[1].split(','); @@ -23,7 +30,9 @@ export default function trueColor(colorString) { r: 0, g: 0, b: 0, a: 0, }; } - if (!/^#|^rgb/.test(colorString)) { // maybe we can check for web safe colors + // maybe we can check for web safe colors + // only works in a browser + if (!/^#|^rgb/.test(colorString)) { const siteHead = document.getElementsByTagName('head')[0]; siteHead.style.color = colorString; let webColor = getComputedStyle(siteHead, null).color; @@ -36,4 +45,5 @@ export default function trueColor(colorString) { }; } return result; -} +}; +export default trueColor; diff --git a/src/util/trueDimension.js b/src/util/trueDimension.js index f725cd4..4301b08 100644 --- a/src/util/trueDimension.js +++ b/src/util/trueDimension.js @@ -1,5 +1,14 @@ -// trueDimension - returns { v = value, u = unit } -export default function trueDimension(dimValue, isAngle) { +/** + * trueDimension + * + * Returns the string value of a specific CSS property converted into a nice + * { v = value, u = unit } object. + * + * @param {string} dimValue the property string value + * @param {boolean | number} isAngle sets the utility to investigate angles + * @returns {{v: number, u: string}} the true {value, unit} tuple + */ +const trueDimension = (dimValue, isAngle) => { const intValue = parseInt(dimValue, 10) || 0; const mUnits = ['px', '%', 'deg', 'rad', 'em', 'rem', 'vh', 'vw']; let theUnit; @@ -14,4 +23,5 @@ export default function trueDimension(dimValue, isAngle) { } return { v: intValue, u: theUnit }; -} +}; +export default trueDimension; diff --git a/src/util/trueProperty.js b/src/util/trueProperty.js index 5628976..7bff726 100644 --- a/src/util/trueProperty.js +++ b/src/util/trueProperty.js @@ -1,8 +1,19 @@ -import getPrefix from './getPrefix.js'; +import getPrefix from './getPrefix'; -// trueProperty - returns prefixed property | property -export default function trueProperty(property) { - return !(property in document.head.style) +/** + * trueProperty + * + * Returns prefixed property name in a legacy browser + * or the regular name in modern browsers. + * + * @param {string} property the property name + * @returns {string} the right property name for every browser + */ +const trueProperty = (property) => { + const prop = !(property in document.head.style) ? getPrefix() + (property.charAt(0).toUpperCase() + property.slice(1)) : property; -} + return prop; +}; + +export default trueProperty; diff --git a/src/util/version.js b/src/util/version.js index 43f3725..369fd70 100644 --- a/src/util/version.js +++ b/src/util/version.js @@ -1,3 +1,9 @@ -import { version as Version } from '../../package.json'; +// @ts-ignore +import { version } from '../../package.json'; +/** + * A global namespace for library version. + * @type {string} + */ +const Version = version; export default Version; diff --git a/tsconfig.json b/tsconfig.json index 04fef98..5d4e92c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,15 +1,22 @@ { "compilerOptions": { + "module": "ESNext", + "target": "ESNext", + "moduleResolution": "Node", "declaration": true, - // "resolveJsonModule": true, + "resolveJsonModule": true, "emitDeclarationOnly": true, - "maxNodeModuleJsDepth": 2, + "maxNodeModuleJsDepth": 3, // allows to incorporate dependency utils "strict": true, "allowJs": true, - "rootDir": "src/", - "outDir": "types" + "rootDir": "../", + // "outFile": "types/kute.d.ts", // UN-comment to generate + "outDir": "types", }, - "include": ["src/**/*"], - // "exclude": ["node_modules", "dist", "types", "demo"] - "exclude": ["dist", "types", "demo"] + "files": [ + "types/index.d.ts", + "types/kute.d.ts", // comment to re-generate, delete file + "types/more/kute.ts", + "types/more/types.d.ts", + ], } diff --git a/types/animation/animation.d.ts b/types/animation/animation.d.ts deleted file mode 100644 index c06a2e4..0000000 --- a/types/animation/animation.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default class Animation { - constructor(Component: any); - setComponent(Component: any): Animation; -} diff --git a/types/animation/animationBase.d.ts b/types/animation/animationBase.d.ts deleted file mode 100644 index d996925..0000000 --- a/types/animation/animationBase.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default class AnimationBase { - constructor(Component: any); - setComponent(Component: any): { - name: any; - }; - _: number | undefined; -} diff --git a/types/animation/animationDevelopment.d.ts b/types/animation/animationDevelopment.d.ts deleted file mode 100644 index 0790634..0000000 --- a/types/animation/animationDevelopment.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default class AnimationDevelopment extends Animation { - constructor(...args: any[]); -} -import Animation from "./animation.js"; diff --git a/types/components/backgroundPosition.d.ts b/types/components/backgroundPosition.d.ts deleted file mode 100644 index 8e3c5c8..0000000 --- a/types/components/backgroundPosition.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -export default BackgroundPosition; -declare namespace BackgroundPosition { - export const component: string; - export const property: string; - export const defaultValue: number[]; - export namespace Interpolate { - export { numbers }; - } - export { bgPositionFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace bgPositionFunctions { - export { getBgPos as prepareStart }; - export { prepareBgPos as prepareProperty }; - export { onStartBgPos as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare function getBgPos(prop: any): any; -declare function prepareBgPos(prop: any, value: any): number[]; -import { onStartBgPos } from "./backgroundPositionBase.js"; diff --git a/types/components/backgroundPositionBase.d.ts b/types/components/backgroundPositionBase.d.ts deleted file mode 100644 index e1398b2..0000000 --- a/types/components/backgroundPositionBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartBgPos(prop: any): void; -export default baseBgPosOps; -declare namespace baseBgPosOps { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartBgPos as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/components/borderRadius.d.ts b/types/components/borderRadius.d.ts deleted file mode 100644 index 61740b8..0000000 --- a/types/components/borderRadius.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -export function getRadius(tweenProp: any): any; -export function prepareRadius(tweenProp: any, value: any): { - v: number; - u: string; -}; -export namespace radiusFunctions { - export { getRadius as prepareStart }; - export { prepareRadius as prepareProperty }; - export { radiusOnStart as onStart }; -} -export default BorderRadius; -declare const radiusOnStart: {}; -declare namespace BorderRadius { - export const component: string; - export const category: string; - export { radiusProps as properties }; - export { radiusValues as defaultValues }; - export namespace Interpolate { - export { units }; - } - export { radiusFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -declare const radiusProps: string[]; -declare const radiusValues: {}; -import units from "../interpolation/units.js"; -import trueDimension from "../util/trueDimension.js"; diff --git a/types/components/borderRadiusBase.d.ts b/types/components/borderRadiusBase.d.ts deleted file mode 100644 index ec79191..0000000 --- a/types/components/borderRadiusBase.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export function radiusOnStartFn(tweenProp: any): void; -export default baseBorderRadius; -declare namespace baseBorderRadius { - const component: string; - const category: string; - namespace Interpolate { - export { units }; - } - namespace functions { - export { radiusOnStart as onStart }; - } -} -import units from "../interpolation/units.js"; -declare const radiusOnStart: {}; diff --git a/types/components/boxModel.d.ts b/types/components/boxModel.d.ts deleted file mode 100644 index 7fc837d..0000000 --- a/types/components/boxModel.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -export default boxModel; -declare namespace boxModel { - export const component: string; - export const category: string; - export { boxModelProperties as properties }; - export { boxModelValues as defaultValues }; - export namespace Interpolate { - export { numbers }; - } - export { boxModelFunctions as functions }; -} -declare const boxModelProperties: string[]; -declare const boxModelValues: {}; -import numbers from "../interpolation/numbers.js"; -declare namespace boxModelFunctions { - export { getBoxModel as prepareStart }; - export { prepareBoxModel as prepareProperty }; - export { boxPropsOnStart as onStart }; -} -declare function getBoxModel(tweenProp: any): any; -declare function prepareBoxModel(tweenProp: any, value: any): number; -declare const boxPropsOnStart: {}; diff --git a/types/components/boxModelBase.d.ts b/types/components/boxModelBase.d.ts deleted file mode 100644 index be0a171..0000000 --- a/types/components/boxModelBase.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function boxModelOnStart(tweenProp: any): void; -export default baseBoxModel; -declare namespace baseBoxModel { - export const component: string; - export const category: string; - export { baseBoxProps as properties }; - export namespace Interpolate { - export { numbers }; - } - export namespace functions { - export { baseBoxOnStart as onStart }; - } -} -declare const baseBoxProps: string[]; -import numbers from "../interpolation/numbers.js"; -declare const baseBoxOnStart: {}; diff --git a/types/components/boxModelEssential.d.ts b/types/components/boxModelEssential.d.ts deleted file mode 100644 index a193138..0000000 --- a/types/components/boxModelEssential.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -export default essentialBoxModel; -declare namespace essentialBoxModel { - export const component: string; - export const category: string; - export { essentialBoxProps as properties }; - export { essentialBoxPropsValues as defaultValues }; - export namespace Interpolate { - export { numbers }; - } - export { essentialBoxModelFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -declare const essentialBoxProps: string[]; -declare namespace essentialBoxPropsValues { - const top: number; - const left: number; - const width: number; - const height: number; -} -import numbers from "../interpolation/numbers.js"; -declare namespace essentialBoxModelFunctions { - export { getBoxModel as prepareStart }; - export { prepareBoxModel as prepareProperty }; - export { essentialBoxOnStart as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare function getBoxModel(tweenProp: any): any; -declare function prepareBoxModel(tweenProp: any, value: any): number; -declare const essentialBoxOnStart: {}; diff --git a/types/components/clipProperty.d.ts b/types/components/clipProperty.d.ts deleted file mode 100644 index a6b03bb..0000000 --- a/types/components/clipProperty.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -export default clipProperty; -declare namespace clipProperty { - export const component: string; - export const property: string; - export const defaultValue: number[]; - export namespace Interpolate { - export { numbers }; - } - export { clipFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace clipFunctions { - export { getClip as prepareStart }; - export { prepareClip as prepareProperty }; - export { onStartClip as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare function getClip(tweenProp: any): any; -declare function prepareClip(tweenProp: any, value: any): any; -import { onStartClip } from "./clipPropertyBase.js"; diff --git a/types/components/clipPropertyBase.d.ts b/types/components/clipPropertyBase.d.ts deleted file mode 100644 index 9a46168..0000000 --- a/types/components/clipPropertyBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartClip(tweenProp: any): void; -export default baseClip; -declare namespace baseClip { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartClip as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/components/colorProperties.d.ts b/types/components/colorProperties.d.ts deleted file mode 100644 index 35d3153..0000000 --- a/types/components/colorProperties.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export default colorProperties; -declare namespace colorProperties { - export const component: string; - export const category: string; - export { supportedColors as properties }; - export { defaultColors as defaultValues }; - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export { colorFunctions as functions }; - export namespace Util { - export { trueColor }; - } -} -declare const supportedColors: string[]; -declare const defaultColors: {}; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare namespace colorFunctions { - export { getColor as prepareStart }; - export { prepareColor as prepareProperty }; - export { colorsOnStart as onStart }; -} -import trueColor from "../util/trueColor.js"; -declare function getColor(prop: any): any; -declare function prepareColor(prop: any, value: any): { - r: number; - g: number; - b: number; - a?: undefined; -} | { - r: number; - g: number; - b: number; - a: number; -} | undefined; -declare const colorsOnStart: {}; diff --git a/types/components/colorPropertiesBase.d.ts b/types/components/colorPropertiesBase.d.ts deleted file mode 100644 index c4d3d3e..0000000 --- a/types/components/colorPropertiesBase.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function onStartColors(tweenProp: any): void; -export namespace baseColors { - const component: string; - const category: string; - namespace Interpolate { - export { numbers }; - export { colors }; - } - namespace functions { - export { colorsOnStart as onStart }; - } -} -export default baseColors; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare const colorsOnStart: {}; diff --git a/types/components/crossBrowserMove.d.ts b/types/components/crossBrowserMove.d.ts deleted file mode 100644 index ccd45c9..0000000 --- a/types/components/crossBrowserMove.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -export function onStartComponent(tweenProp: any): void; -export namespace baseCrossBrowserMove { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartComponent as onStart }; - } -} -export default crossBrowserMove; -import numbers from "../interpolation/numbers.js"; -declare namespace crossBrowserMove { - const component_1: string; - export { component_1 as component }; - const property_1: string; - export { property_1 as property }; - export const defaultValue: number[]; - export namespace Interpolate_1 { - export { numbers }; - } - export { Interpolate_1 as Interpolate }; - export { componentFunctions as functions }; - export namespace Util { - export { trueProperty }; - } -} -declare namespace componentFunctions { - export { getComponentCurrentValue as prepareStart }; - export { prepareComponentValue as prepareProperty }; - export { onStartComponent as onStart }; -} -import trueProperty from "../util/trueProperty.js"; -declare function getComponentCurrentValue(): number[]; -declare function prepareComponentValue(tweenProp: any, value: any): number[]; diff --git a/types/components/filterEffects.d.ts b/types/components/filterEffects.d.ts deleted file mode 100644 index 02f56a2..0000000 --- a/types/components/filterEffects.d.ts +++ /dev/null @@ -1,63 +0,0 @@ -export default filterEffects; -declare namespace filterEffects { - export const component: string; - export const property: string; - export namespace defaultValue { - const opacity: number; - const blur: number; - const saturate: number; - const grayscale: number; - const brightness: number; - const contrast: number; - const sepia: number; - const invert: number; - const hueRotate: number; - const dropShadow: (number | { - r: number; - g: number; - b: number; - })[]; - const url: string; - } - export namespace Interpolate { - export { numbers as opacity }; - export { numbers as blur }; - export { numbers as saturate }; - export { numbers as grayscale }; - export { numbers as brightness }; - export { numbers as contrast }; - export { numbers as sepia }; - export { numbers as invert }; - export { numbers as hueRotate }; - export namespace dropShadow_1 { - export { numbers }; - export { colors }; - export { dropShadow }; - } - export { dropShadow_1 as dropShadow }; - } - export { filterFunctions as functions }; - export namespace Util { - export { parseDropShadow }; - export { parseFilterString }; - export { replaceDashNamespace }; - export { trueColor }; - } -} -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -import { dropShadow as dropShadow_2 } from "./filterEffectsBase.js"; -declare namespace filterFunctions { - export { getFilter as prepareStart }; - export { prepareFilter as prepareProperty }; - export { onStartFilter as onStart }; - export { crossCheckFilter as crossCheck }; -} -declare function parseDropShadow(shadow: any): any[] | undefined; -declare function parseFilterString(currentStyle: any): {}; -declare function replaceDashNamespace(str: any): any; -import trueColor from "../util/trueColor.js"; -declare function getFilter(tweenProp: any, value: any): {}; -declare function prepareFilter(tweenProp: any, value: any): {}; -import { onStartFilter } from "./filterEffectsBase.js"; -declare function crossCheckFilter(tweenProp: any): void; diff --git a/types/components/filterEffectsBase.d.ts b/types/components/filterEffectsBase.d.ts deleted file mode 100644 index 8bc328b..0000000 --- a/types/components/filterEffectsBase.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -export function dropShadow(a: any, b: any, v: any): string; -export function onStartFilter(tweenProp: any): void; -export default baseFilter; -declare namespace baseFilter { - const component: string; - const property: string; - namespace Interpolate { - export { numbers as opacity }; - export { numbers as blur }; - export { numbers as saturate }; - export { numbers as grayscale }; - export { numbers as brightness }; - export { numbers as contrast }; - export { numbers as sepia }; - export { numbers as invert }; - export { numbers as hueRotate }; - export namespace dropShadow { - export { numbers }; - export { colors }; - export { dropShadow }; - } - } - namespace functions { - export { onStartFilter as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; diff --git a/types/components/htmlAttributes.d.ts b/types/components/htmlAttributes.d.ts deleted file mode 100644 index 49ee1f7..0000000 --- a/types/components/htmlAttributes.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export function getAttr(tweenProp: any, value: any): {}; -export function prepareAttr(tweenProp: any, attrObj: any): {}; -export default htmlAttributes; -declare namespace htmlAttributes { - export { ComponentName as component }; - export const property: string; - export const subProperties: string[]; - export const defaultValue: { - fill: string; - stroke: string; - 'stop-color': string; - opacity: number; - 'stroke-opacity': number; - 'fill-opacity': number; - }; - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export { attrFunctions as functions }; - export namespace Util { - export { replaceUppercase }; - export { trueColor }; - export { trueDimension }; - } -} -declare const ComponentName: "htmlAttributes"; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare namespace attrFunctions { - export { getAttr as prepareStart }; - export { prepareAttr as prepareProperty }; - export { onStartAttr as onStart }; -} -declare function replaceUppercase(a: any): any; -import trueColor from "../util/trueColor.js"; -import trueDimension from "../util/trueDimension.js"; -import { onStartAttr } from "./htmlAttributesBase.js"; diff --git a/types/components/htmlAttributesBase.d.ts b/types/components/htmlAttributesBase.d.ts deleted file mode 100644 index 6c85754..0000000 --- a/types/components/htmlAttributesBase.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -export namespace onStartAttr { - function attr(tweenProp: any): void; - function attr(tweenProp: any): void; - function attributes(tweenProp: any): void; - function attributes(tweenProp: any): void; -} -export default baseAttributes; -export const attributes: {}; -declare namespace baseAttributes { - export { ComponentName as component }; - export const property: string; - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export namespace functions { - export { onStartAttr as onStart }; - } -} -declare const ComponentName: "baseHTMLAttributes"; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; diff --git a/types/components/opacityProperty.d.ts b/types/components/opacityProperty.d.ts deleted file mode 100644 index 24f571b..0000000 --- a/types/components/opacityProperty.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -export default opacityProperty; -declare namespace opacityProperty { - export const component: string; - export const property: string; - export const defaultValue: number; - export namespace Interpolate { - export { numbers }; - } - export { opacityFunctions as functions }; -} -import numbers from "../interpolation/numbers.js"; -declare namespace opacityFunctions { - export { getOpacity as prepareStart }; - export { prepareOpacity as prepareProperty }; - export { onStartOpacity as onStart }; -} -declare function getOpacity(tweenProp: any): any; -declare function prepareOpacity(tweenProp: any, value: any): number; -import { onStartOpacity } from "./opacityPropertyBase.js"; diff --git a/types/components/opacityPropertyBase.d.ts b/types/components/opacityPropertyBase.d.ts deleted file mode 100644 index f94b41f..0000000 --- a/types/components/opacityPropertyBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartOpacity(tweenProp: any): void; -export default baseOpacity; -declare namespace baseOpacity { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartOpacity as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/components/scrollProperty.d.ts b/types/components/scrollProperty.d.ts deleted file mode 100644 index abe049c..0000000 --- a/types/components/scrollProperty.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export default scrollProperty; -declare namespace scrollProperty { - export const component: string; - export const property: string; - export const defaultValue: number; - export namespace Interpolate { - export { numbers }; - } - export { scrollFunctions as functions }; - export namespace Util { - export { preventScroll }; - export { scrollIn }; - export { scrollOut }; - export { getScrollTargets }; - export { toggleScrollEvents }; - export { supportPassive }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace scrollFunctions { - export { getScroll as prepareStart }; - export { prepareScroll as prepareProperty }; - export { onStartScroll as onStart }; - export { onCompleteScroll as onComplete }; -} -import { preventScroll } from "./scrollPropertyBase.js"; -import { scrollIn } from "./scrollPropertyBase.js"; -import { scrollOut } from "./scrollPropertyBase.js"; -import { getScrollTargets } from "./scrollPropertyBase.js"; -import { toggleScrollEvents } from "./scrollPropertyBase.js"; -import supportPassive from "shorter-js/src/boolean/supportPassive.js"; -declare function getScroll(): number; -declare class getScroll { - element: HTMLElement | undefined; -} -declare function prepareScroll(prop: any, value: any): number; -import { onStartScroll } from "./scrollPropertyBase.js"; -import { onCompleteScroll } from "./scrollPropertyBase.js"; diff --git a/types/components/scrollPropertyBase.d.ts b/types/components/scrollPropertyBase.d.ts deleted file mode 100644 index 7f7717b..0000000 --- a/types/components/scrollPropertyBase.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -export function preventScroll(e: any): void; -export function getScrollTargets(): { - el: any; - st: any; -}; -export function toggleScrollEvents(action: any, element: any): void; -export function scrollIn(): void; -export function scrollOut(): void; -export function onStartScroll(tweenProp: any): void; -export class onStartScroll { - constructor(tweenProp: any); - element: HTMLElement | undefined; -} -export function onCompleteScroll(): void; -export const scrollContainer: HTMLElement; -export default baseScroll; -declare namespace baseScroll { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartScroll as onStart }; - export { onCompleteScroll as onComplete }; - } - namespace Util { - export { preventScroll }; - export { scrollIn }; - export { scrollOut }; - export { getScrollTargets }; - export { supportPassive }; - } -} -import numbers from "../interpolation/numbers.js"; -import supportPassive from "shorter-js/src/boolean/supportPassive.js"; diff --git a/types/components/shadowProperties.d.ts b/types/components/shadowProperties.d.ts deleted file mode 100644 index 8ccb83b..0000000 --- a/types/components/shadowProperties.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -export function getShadow(tweenProp: any): any; -export function prepareShadow(tweenProp: any, propValue: any): any; -export default shadowProperties; -declare namespace shadowProperties { - export const component: string; - export { shadowProps as properties }; - export namespace defaultValues { - const boxShadow: string; - const textShadow: string; - } - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export { shadowFunctions as functions }; - export namespace Util { - export { processShadowArray }; - export { trueColor }; - } -} -declare const shadowProps: string[]; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare namespace shadowFunctions { - export { getShadow as prepareStart }; - export { prepareShadow as prepareProperty }; - export { shadowPropOnStart as onStart }; -} -declare function processShadowArray(shadow: any, tweenProp: any): any; -import trueColor from "../util/trueColor.js"; -declare const shadowPropOnStart: {}; diff --git a/types/components/shadowPropertiesBase.d.ts b/types/components/shadowPropertiesBase.d.ts deleted file mode 100644 index 3ba8bbc..0000000 --- a/types/components/shadowPropertiesBase.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function onStartShadow(tweenProp: any): void; -export default baseShadow; -declare namespace baseShadow { - const component: string; - namespace Interpolate { - export { numbers }; - export { colors }; - } - namespace functions { - export { shadowPropOnStart as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare const shadowPropOnStart: {}; diff --git a/types/components/svgCubicMorph.d.ts b/types/components/svgCubicMorph.d.ts deleted file mode 100644 index 45b984b..0000000 --- a/types/components/svgCubicMorph.d.ts +++ /dev/null @@ -1,48 +0,0 @@ -export default svgCubicMorph; -declare namespace svgCubicMorph { - export const component: string; - export const property: string; - export const defaultValue: never[]; - export namespace Interpolate { - export { numbers }; - export { pathToString }; - } - export { svgCubicMorphFunctions as functions }; - export namespace Util { - export { pathToCurve }; - export { pathToAbsolute }; - export { pathToString }; - export { parsePathString }; - export { getRotatedCurve }; - export { getRotations }; - export { equalizeSegments }; - export { reverseCurve }; - export { clonePath }; - export { getDrawDirection }; - export { splitCubic }; - export { getCurveArray }; - } -} -import numbers from "../interpolation/numbers.js"; -import pathToString from "svg-path-commander/src/convert/pathToString.js"; -declare namespace svgCubicMorphFunctions { - export { getCubicMorph as prepareStart }; - export { prepareCubicMorph as prepareProperty }; - export { onStartCubicMorph as onStart }; - export { crossCheckCubicMorph as crossCheck }; -} -import pathToCurve from "svg-path-commander/src/convert/pathToCurve.js"; -import pathToAbsolute from "svg-path-commander/src/convert/pathToAbsolute.js"; -import parsePathString from "svg-path-commander/src/process/parsePathString.js"; -declare function getRotatedCurve(a: any, b: any): any; -declare function getRotations(a: any): any; -declare function equalizeSegments(path1: any, path2: any, TL: any): any; -import reverseCurve from "svg-path-commander/src/process/reverseCurve.js"; -import clonePath from "svg-path-commander/src/process/clonePath.js"; -import getDrawDirection from "svg-path-commander/src/util/getDrawDirection.js"; -import splitCubic from "svg-path-commander/src/process/splitCubic.js"; -declare function getCurveArray(pathString: any): any; -declare function getCubicMorph(): any; -declare function prepareCubicMorph(tweenProp: any, value: any): any; -import { onStartCubicMorph } from "./svgCubicMorphBase.js"; -declare function crossCheckCubicMorph(tweenProp: any): void; diff --git a/types/components/svgCubicMorphBase.d.ts b/types/components/svgCubicMorphBase.d.ts deleted file mode 100644 index 65b94ec..0000000 --- a/types/components/svgCubicMorphBase.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function onStartCubicMorph(tweenProp: any): void; -export default baseSvgCubicMorph; -declare namespace baseSvgCubicMorph { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - export { pathToString }; - } - namespace functions { - export { onStartCubicMorph as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; -import pathToString from "svg-path-commander/src/convert/pathToString.js"; diff --git a/types/components/svgDraw.d.ts b/types/components/svgDraw.d.ts deleted file mode 100644 index 50144a9..0000000 --- a/types/components/svgDraw.d.ts +++ /dev/null @@ -1,39 +0,0 @@ -export default svgDraw; -declare namespace svgDraw { - export const component: string; - export const property: string; - export const defaultValue: string; - export namespace Interpolate { - export { numbers }; - } - export { svgDrawFunctions as functions }; - export namespace Util { - export { getRectLength }; - export { getPolyLength }; - export { getLineLength }; - export { getCircleLength }; - export { getEllipseLength }; - export { getTotalLength }; - export { resetDraw }; - export { getDraw }; - export { percent }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace svgDrawFunctions { - export { getDrawValue as prepareStart }; - export { prepareDraw as prepareProperty }; - export { onStartDraw as onStart }; -} -declare function getRectLength(el: any): number; -declare function getPolyLength(el: any): number; -declare function getLineLength(el: any): number; -declare function getCircleLength(el: any): number; -declare function getEllipseLength(el: any): number; -declare function getTotalLength(el: any): number; -declare function resetDraw(elem: any): void; -declare function getDraw(element: any, value: any): any; -declare function percent(v: any, l: any): number; -declare function getDrawValue(): any; -declare function prepareDraw(a: any, o: any): any; -import { onStartDraw } from "./svgDrawBase.js"; diff --git a/types/components/svgDrawBase.d.ts b/types/components/svgDrawBase.d.ts deleted file mode 100644 index 4a1a002..0000000 --- a/types/components/svgDrawBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartDraw(tweenProp: any): void; -export default baseSVGDraw; -declare namespace baseSVGDraw { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartDraw as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/components/svgMorph.d.ts b/types/components/svgMorph.d.ts deleted file mode 100644 index 163b2b2..0000000 --- a/types/components/svgMorph.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -export default svgMorph; -declare namespace svgMorph { - export const component: string; - export const property: string; - export const defaultValue: never[]; - export { coords as Interpolate }; - export namespace defaultOptions { - const morphPrecision: number; - const morphIndex: number; - } - export { svgMorphFunctions as functions }; - export namespace Util { - export { addPoints }; - export { bisect }; - export { normalizeRing }; - export { validRing }; - export { getInterpolationPoints }; - export { pathStringToRing }; - export { distanceSquareRoot }; - export { midPoint }; - export { approximateRing }; - export { rotateRing }; - export { pathToString }; - export { pathToCurve }; - export { getPathLength }; - export { getPointAtLength }; - export { getDrawDirection }; - export { roundPath }; - } -} -import coords from "../interpolation/coords.js"; -declare namespace svgMorphFunctions { - export { getSVGMorph as prepareStart }; - export { prepareSVGMorph as prepareProperty }; - export { onStartSVGMorph as onStart }; - export { crossCheckSVGMorph as crossCheck }; -} -declare function addPoints(ring: any, numPoints: any): void; -declare function bisect(ring: any, maxSegmentLength?: number): void; -declare function normalizeRing(input: any, maxSegmentLength: any): any; -declare function validRing(ring: any): boolean; -declare function getInterpolationPoints(pathArray1: any, pathArray2: any, precision: any): any[]; -declare function pathStringToRing(str: any, maxSegmentLength: any): { - ring: any[][]; - pathLength: number; -}; -import distanceSquareRoot from "svg-path-commander/src/math/distanceSquareRoot.js"; -import midPoint from "svg-path-commander/src/math/midPoint.js"; -declare function approximateRing(parsed: any, maxSegmentLength: any): { - pathLength: number; - ring: any[][]; - skipBisect: boolean; -}; -declare function rotateRing(ring: any, vs: any): void; -import pathToString from "svg-path-commander/src/convert/pathToString.js"; -import pathToCurve from "svg-path-commander/src/convert/pathToCurve.js"; -import getPathLength from "svg-path-commander/src/util/getPathLength.js"; -import getPointAtLength from "svg-path-commander/src/util/getPointAtLength.js"; -import getDrawDirection from "svg-path-commander/src/util/getDrawDirection.js"; -import roundPath from "svg-path-commander/src/process/roundPath.js"; -declare function getSVGMorph(): any; -declare function prepareSVGMorph(tweenProp: any, value: any): any; -import { onStartSVGMorph } from "./svgMorphBase.js"; -declare function crossCheckSVGMorph(prop: any): void; diff --git a/types/components/svgMorphBase.d.ts b/types/components/svgMorphBase.d.ts deleted file mode 100644 index d1c12ca..0000000 --- a/types/components/svgMorphBase.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -export function onStartSVGMorph(tweenProp: any): void; -export default baseSVGMorph; -declare namespace baseSVGMorph { - export const component: string; - export const property: string; - export { coords as Interpolate }; - export namespace functions { - export { onStartSVGMorph as onStart }; - } -} -import coords from "../interpolation/coords.js"; diff --git a/types/components/svgTransform.d.ts b/types/components/svgTransform.d.ts deleted file mode 100644 index 0014a31..0000000 --- a/types/components/svgTransform.d.ts +++ /dev/null @@ -1,45 +0,0 @@ -export namespace svgTransformFunctions { - export { getStartSvgTransform as prepareStart }; - export { prepareSvgTransform as prepareProperty }; - export { svgTransformOnStart as onStart }; - export { svgTransformCrossCheck as crossCheck }; -} -export namespace svgTransform { - export const component: string; - export const property: string; - export namespace defaultOptions { - const transformOrigin: string; - } - export namespace defaultValue { - const translate: number; - const rotate: number; - const skewX: number; - const skewY: number; - const scale: number; - } - export namespace Interpolate { - export { numbers }; - } - export { svgTransformFunctions as functions }; - export namespace Util { - export { parseStringOrigin }; - export { parseTransformString }; - export { parseTransformSVG }; - } -} -export default svgTransform; -declare function getStartSvgTransform(tweenProp: any, value: any): {}; -declare function prepareSvgTransform(p: any, v: any): { - origin: any; -}; -import { svgTransformOnStart } from "./svgTransformBase.js"; -declare function svgTransformCrossCheck(prop: any): void; -import numbers from "../interpolation/numbers.js"; -declare function parseStringOrigin(origin: any, { x, width }: { - x: any; - width: any; -}): any; -declare function parseTransformString(a: any): {}; -declare function parseTransformSVG(p: any, v: any): { - origin: any; -}; diff --git a/types/components/svgTransformBase.d.ts b/types/components/svgTransformBase.d.ts deleted file mode 100644 index 28be88b..0000000 --- a/types/components/svgTransformBase.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function svgTransformOnStart(tweenProp: any): void; -export default baseSVGTransform; -declare namespace baseSVGTransform { - const component: string; - const property: string; - namespace defaultOptions { - const transformOrigin: string; - } - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { svgTransformOnStart as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/components/textProperties.d.ts b/types/components/textProperties.d.ts deleted file mode 100644 index 5e7820c..0000000 --- a/types/components/textProperties.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -export function getTextProp(prop: any): any; -export function prepareTextProp(prop: any, value: any): { - v: number; - u: string; -}; -export default textProperties; -declare namespace textProperties { - export const component: string; - export const category: string; - export { textProps as properties }; - export namespace defaultValues { - const fontSize: number; - const lineHeight: number; - const letterSpacing: number; - const wordSpacing: number; - } - export namespace Interpolate { - export { units }; - } - export { textPropFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -declare const textProps: string[]; -import units from "../interpolation/units.js"; -declare namespace textPropFunctions { - export { getTextProp as prepareStart }; - export { prepareTextProp as prepareProperty }; - export { textOnStart as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare const textOnStart: {}; diff --git a/types/components/textPropertiesBase.d.ts b/types/components/textPropertiesBase.d.ts deleted file mode 100644 index 28f5871..0000000 --- a/types/components/textPropertiesBase.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export function textPropOnStart(tweenProp: any): void; -export default baseTextProperties; -declare namespace baseTextProperties { - const component: string; - const category: string; - namespace Interpolate { - export { units }; - } - namespace functions { - export { textOnStart as onStart }; - } -} -import units from "../interpolation/units.js"; -declare const textOnStart: {}; diff --git a/types/components/textWrite.d.ts b/types/components/textWrite.d.ts deleted file mode 100644 index ee2c0c8..0000000 --- a/types/components/textWrite.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -export function createTextTweens(target: any, newText: any, ops: any): false | any[]; -export namespace textWriteFunctions { - export { getWrite as prepareStart }; - export { prepareText as prepareProperty }; - export { onStartWrite as onStart }; -} -export namespace textWrite { - export const component: string; - export const category: string; - export const properties: string[]; - export namespace defaultValues { - const text: string; - const number: string; - } - export namespace defaultOptions { - const textChars: string; - } - export namespace Interpolate { - export { numbers }; - } - export { textWriteFunctions as functions }; - export namespace Util { - export { charSet }; - export { createTextTweens }; - } -} -export default textWrite; -declare function getWrite(): any; -declare function prepareText(tweenProp: any, value: any): any; -import { onStartWrite } from "./textWriteBase.js"; -import numbers from "../interpolation/numbers.js"; -import { charSet } from "./textWriteBase.js"; diff --git a/types/components/textWriteBase.d.ts b/types/components/textWriteBase.d.ts deleted file mode 100644 index 455bf17..0000000 --- a/types/components/textWriteBase.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export namespace onStartWrite { - function text(tweenProp: any): void; - function text(tweenProp: any): void; - function number(tweenProp: any): void; - function number(tweenProp: any): void; -} -export namespace baseTextWrite { - const component: string; - const category: string; - namespace defaultOptions { - const textChars: string; - } - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartWrite as onStart }; - } - namespace Util { - export { charSet }; - } -} -export default baseTextWrite; -export namespace charSet { - export { lowerCaseAlpha as alpha }; - export { upperCaseAlpha as upper }; - export { nonAlpha as symbols }; - export { numeric }; - export { alphaNumeric as alphanumeric }; - export { allTypes as all }; -} -import numbers from "../interpolation/numbers.js"; -declare const lowerCaseAlpha: string[]; -declare const upperCaseAlpha: string[]; -declare const nonAlpha: string[]; -declare const numeric: string[]; -declare const alphaNumeric: string[]; -declare const allTypes: string[]; diff --git a/types/components/transformFunctions.d.ts b/types/components/transformFunctions.d.ts deleted file mode 100644 index 7cba996..0000000 --- a/types/components/transformFunctions.d.ts +++ /dev/null @@ -1,59 +0,0 @@ -export default transformFunctionsComponent; -declare namespace transformFunctionsComponent { - export const component: string; - export const property: string; - export { supportedTransformProperties as subProperties }; - export { defaultTransformValues as defaultValues }; - export { transformFunctions as functions }; - export namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } -} -declare const supportedTransformProperties: string[]; -declare namespace defaultTransformValues { - const perspective_1: number; - export { perspective_1 as perspective }; - const translate3d_1: number[]; - export { translate3d_1 as translate3d }; - export const translateX: number; - export const translateY: number; - export const translateZ: number; - const translate_1: number[]; - export { translate_1 as translate }; - const rotate3d_1: number[]; - export { rotate3d_1 as rotate3d }; - export const rotateX: number; - export const rotateY: number; - export const rotateZ: number; - const rotate_1: number; - export { rotate_1 as rotate }; - export const skewX: number; - export const skewY: number; - const skew_1: number[]; - export { skew_1 as skew }; - const scale_1: number; - export { scale_1 as scale }; -} -declare namespace transformFunctions { - export { getTransform as prepareStart }; - export { prepareTransform as prepareProperty }; - export { onStartTransform as onStart }; - export { crossCheckTransform as crossCheck }; -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; -declare function getTransform(tweenProperty: any): any; -declare function prepareTransform(prop: any, obj: any): {}; -import { onStartTransform } from "./transformFunctionsBase.js"; -declare function crossCheckTransform(tweenProp: any): void; diff --git a/types/components/transformFunctionsBase.d.ts b/types/components/transformFunctionsBase.d.ts deleted file mode 100644 index b3f9080..0000000 --- a/types/components/transformFunctionsBase.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -export function onStartTransform(tweenProp: any): void; -export default BaseTransform; -declare namespace BaseTransform { - const component: string; - const property: string; - namespace functions { - export { onStartTransform as onStart }; - } - namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; diff --git a/types/components/transformLegacy.d.ts b/types/components/transformLegacy.d.ts deleted file mode 100644 index 6106e1e..0000000 --- a/types/components/transformLegacy.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -export default transformLegacyComponent; -declare namespace transformLegacyComponent { - export const component: string; - export const property: string; - export { legacyTransformProperties as subProperties }; - export { legacyTransformValues as defaultValues }; - export { transformLegacyFunctions as functions }; - export namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } - export const Util: any[]; -} -declare const legacyTransformProperties: string[]; -declare namespace legacyTransformValues { - const perspective_1: number; - export { perspective_1 as perspective }; - const translate3d_1: number[]; - export { translate3d_1 as translate3d }; - export const translateX: number; - export const translateY: number; - export const translateZ: number; - const translate_1: number[]; - export { translate_1 as translate }; - const rotate3d_1: number[]; - export { rotate3d_1 as rotate3d }; - export const rotateX: number; - export const rotateY: number; - export const rotateZ: number; - const rotate_1: number; - export { rotate_1 as rotate }; - export const skewX: number; - export const skewY: number; - const skew_1: number[]; - export { skew_1 as skew }; - const scale_1: number; - export { scale_1 as scale }; -} -declare namespace transformLegacyFunctions { - export { getLegacyTransform as prepareStart }; - export { prepareLegacyTransform as prepareProperty }; - export { onStartLegacyTransform as onStart }; - export { crossCheckLegacyTransform as crossCheck }; -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; -declare function getLegacyTransform(tweenProperty: any): any; -declare function prepareLegacyTransform(prop: any, obj: any): {}; -import { onStartLegacyTransform } from "./transformLegacyBase.js"; -declare function crossCheckLegacyTransform(tweenProp: any): void; diff --git a/types/components/transformLegacyBase.d.ts b/types/components/transformLegacyBase.d.ts deleted file mode 100644 index 63de18e..0000000 --- a/types/components/transformLegacyBase.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -export function onStartLegacyTransform(tweenProp: any): void; -export default BaseLegacyTransform; -declare namespace BaseLegacyTransform { - const component: string; - const property: string; - namespace functions { - export { onStartLegacyTransform as onStart }; - } - namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } - namespace Util { - export { transformProperty }; - } -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; -import transformProperty from "../util/transformProperty.js"; diff --git a/types/components/transformMatrix.d.ts b/types/components/transformMatrix.d.ts deleted file mode 100644 index f39ed2d..0000000 --- a/types/components/transformMatrix.d.ts +++ /dev/null @@ -1,46 +0,0 @@ -export default matrixTransform; -declare namespace matrixTransform { - export { matrixComponent as component }; - export const property: string; - export namespace defaultValue { - const perspective: number; - const translate3d: number[]; - const translateX: number; - const translateY: number; - const translateZ: number; - const rotate3d: number[]; - const rotateX: number; - const rotateY: number; - const rotateZ: number; - const skew: number[]; - const skewX: number; - const skewY: number; - const scale3d: number[]; - const scaleX: number; - const scaleY: number; - const scaleZ: number; - } - export { matrixFunctions as functions }; - export namespace Interpolate { - export { numbers as perspective }; - export { arrays as translate3d }; - export { arrays as rotate3d }; - export { arrays as skew }; - export { arrays as scale3d }; - } -} -declare const matrixComponent: "transformMatrix"; -declare namespace matrixFunctions { - export { getTransform as prepareStart }; - export { prepareTransform as prepareProperty }; - export { onStartTransform as onStart }; - export { onCompleteTransform as onComplete }; - export { crossCheckTransform as crossCheck }; -} -import numbers from "../interpolation/numbers.js"; -import arrays from "../interpolation/arrays.js"; -declare function getTransform(tweenProp: any, value: any): {}; -declare function prepareTransform(tweenProp: any, value: any): {}; -import { onStartTransform } from "./transformMatrixBase.js"; -declare function onCompleteTransform(tweenProp: any): void; -declare function crossCheckTransform(tweenProp: any): void; diff --git a/types/components/transformMatrixBase.d.ts b/types/components/transformMatrixBase.d.ts deleted file mode 100644 index 911c469..0000000 --- a/types/components/transformMatrixBase.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -export namespace onStartTransform { - function transform(tweenProp: any): void; - function transform(tweenProp: any): void; - function CSS3Matrix(prop: any): void; - function CSS3Matrix(prop: any): void; -} -export namespace baseMatrixTransform { - export { matrixComponent as component }; - export const property: string; - export namespace functions { - export { onStartTransform as onStart }; - } - export namespace Interpolate { - export { numbers as perspective }; - export { arrays as translate3d }; - export { arrays as rotate3d }; - export { arrays as skew }; - export { arrays as scale3d }; - } -} -export default baseMatrixTransform; -declare const matrixComponent: "transformMatrixBase"; -import numbers from "../interpolation/numbers.js"; -import arrays from "../interpolation/arrays.js"; diff --git a/types/core/add.d.ts b/types/core/add.d.ts deleted file mode 100644 index bfdb8c7..0000000 --- a/types/core/add.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(tw: any): number; -export default _default; diff --git a/types/core/getAll.d.ts b/types/core/getAll.d.ts deleted file mode 100644 index 748dcf1..0000000 --- a/types/core/getAll.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(): never[]; -export default _default; diff --git a/types/core/internals.d.ts b/types/core/internals.d.ts deleted file mode 100644 index 260f982..0000000 --- a/types/core/internals.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -declare namespace _default { - export { add }; - export { remove }; - export { getAll }; - export { removeAll }; - export { stop }; - export { linkInterpolation }; -} -export default _default; -import add from "./add.js"; -import remove from "./remove.js"; -import getAll from "./getAll.js"; -import removeAll from "./removeAll.js"; -import { stop } from "./render.js"; -import linkInterpolation from "./linkInterpolation.js"; diff --git a/types/core/linkInterpolation.d.ts b/types/core/linkInterpolation.d.ts deleted file mode 100644 index 681707e..0000000 --- a/types/core/linkInterpolation.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function linkInterpolation(): void; diff --git a/types/core/queueStart.d.ts b/types/core/queueStart.d.ts deleted file mode 100644 index e28e758..0000000 --- a/types/core/queueStart.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function queueStart(): void; diff --git a/types/core/remove.d.ts b/types/core/remove.d.ts deleted file mode 100644 index faa732d..0000000 --- a/types/core/remove.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(tw: any): void; -export default _default; diff --git a/types/core/removeAll.d.ts b/types/core/removeAll.d.ts deleted file mode 100644 index 9b8fba0..0000000 --- a/types/core/removeAll.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(): void; -export default _default; diff --git a/types/core/render.d.ts b/types/core/render.d.ts deleted file mode 100644 index b985745..0000000 --- a/types/core/render.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function stop(): void; -export default Render; -export let Tick: number; -export function Ticker(time: any): void; -declare namespace Render { - export { Tick }; - export { Ticker }; - export { Tweens }; - export { Time }; -} -import Tweens from "../objects/tweens.js"; -declare namespace Time { - export { now }; -} -import now from "../util/now.js"; diff --git a/types/easing/easing-base.d.ts b/types/easing/easing-base.d.ts deleted file mode 100644 index 1eab2d2..0000000 --- a/types/easing/easing-base.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export default Easing; -declare namespace Easing { - function linear(t: any): any; - function easingQuadraticIn(t: any): number; - function easingQuadraticOut(t: any): number; - function easingQuadraticInOut(t: any): number; - function easingCubicIn(t: any): number; - function easingCubicOut(t0: any): number; - function easingCubicInOut(t: any): number; - function easingCircularIn(t: any): number; - function easingCircularOut(t0: any): number; - function easingCircularInOut(t0: any): number; - function easingBackIn(t: any): number; - function easingBackOut(t0: any): number; - function easingBackInOut(t0: any): number; -} diff --git a/types/easing/easing-bezier.d.ts b/types/easing/easing-bezier.d.ts deleted file mode 100644 index 103f137..0000000 --- a/types/easing/easing-bezier.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -export default Easing; -declare namespace Easing { - const linear: CubicBezier; - const easingSinusoidalIn: CubicBezier; - const easingSinusoidalOut: CubicBezier; - const easingSinusoidalInOut: CubicBezier; - const easingQuadraticIn: CubicBezier; - const easingQuadraticOut: CubicBezier; - const easingQuadraticInOut: CubicBezier; - const easingCubicIn: CubicBezier; - const easingCubicOut: CubicBezier; - const easingCubicInOut: CubicBezier; - const easingQuarticIn: CubicBezier; - const easingQuarticOut: CubicBezier; - const easingQuarticInOut: CubicBezier; - const easingQuinticIn: CubicBezier; - const easingQuinticOut: CubicBezier; - const easingQuinticInOut: CubicBezier; - const easingExponentialIn: CubicBezier; - const easingExponentialOut: CubicBezier; - const easingExponentialInOut: CubicBezier; - const easingCircularIn: CubicBezier; - const easingCircularOut: CubicBezier; - const easingCircularInOut: CubicBezier; - const easingBackIn: CubicBezier; - const easingBackOut: CubicBezier; - const easingBackInOut: CubicBezier; -} -import CubicBezier from "cubic-bezier-easing"; diff --git a/types/easing/easing.d.ts b/types/easing/easing.d.ts deleted file mode 100644 index ff46a67..0000000 --- a/types/easing/easing.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -export default Easing; -declare namespace Easing { - function linear(t: any): any; - function easingSinusoidalIn(t: any): number; - function easingSinusoidalOut(t: any): number; - function easingSinusoidalInOut(t: any): number; - function easingQuadraticIn(t: any): number; - function easingQuadraticOut(t: any): number; - function easingQuadraticInOut(t: any): number; - function easingCubicIn(t: any): number; - function easingCubicOut(t0: any): number; - function easingCubicInOut(t: any): number; - function easingQuarticIn(t: any): number; - function easingQuarticOut(t0: any): number; - function easingQuarticInOut(t0: any): number; - function easingQuinticIn(t: any): number; - function easingQuinticOut(t0: any): number; - function easingQuinticInOut(t0: any): number; - function easingCircularIn(t: any): number; - function easingCircularOut(t0: any): number; - function easingCircularInOut(t0: any): number; - function easingExponentialIn(t: any): number; - function easingExponentialOut(t: any): number; - function easingExponentialInOut(t0: any): number; - function easingBackIn(t: any): number; - function easingBackOut(t0: any): number; - function easingBackInOut(t0: any): number; - function easingElasticIn(t0: any): number; - function easingElasticOut(t: any): number; - function easingElasticInOut(t0: any): number; - function easingBounceIn(t: any): number; - function easingBounceOut(t0: any): number; - function easingBounceInOut(t: any): number; -} diff --git a/types/index-base.d.ts b/types/index-base.d.ts deleted file mode 100644 index c8d37c0..0000000 --- a/types/index-base.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -declare namespace _default { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { Objects }; - export { Easing }; - export { Util }; - export { Render }; - export { Interpolate }; - export { Internals }; - export { Selector }; - export { Version }; -} -export default _default; -import Animation from "./animation/animationBase.js"; -import Components from "./objects/componentsBase.js"; -import Tween from "./tween/tweenBase.js"; -import fromTo from "./interface/fromTo.js"; -import Objects from "./objects/objectsBase.js"; -import Easing from "./easing/easing-base.js"; -import Util from "./objects/util.js"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; diff --git a/types/index-extra.d.ts b/types/index-extra.d.ts deleted file mode 100644 index e5cb8fb..0000000 --- a/types/index-extra.d.ts +++ /dev/null @@ -1,41 +0,0 @@ -declare namespace _default { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { to }; - export { TweenCollection }; - export { ProgressBar }; - export { allFromTo }; - export { allTo }; - export { Objects }; - export { Util }; - export { Easing }; - export { CubicBezier }; - export { Render }; - export { Interpolate }; - export { Process }; - export { Internals }; - export { Selector }; - export { Version }; -} -export default _default; -import Animation from "./animation/animationDevelopment.js"; -import Components from "./objects/componentsExtra.js"; -import Tween from "./tween/tweenExtra.js"; -import fromTo from "./interface/fromTo.js"; -import to from "./interface/to.js"; -import TweenCollection from "./tween/tweenCollection.js"; -import ProgressBar from "./util/progressBar.js"; -import allFromTo from "./interface/allFromTo.js"; -import allTo from "./interface/allTo.js"; -import Objects from "./objects/objects.js"; -import Util from "./objects/util.js"; -import Easing from "./easing/easing-bezier.js"; -import CubicBezier from "cubic-bezier-easing"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Process from "./process/process.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; diff --git a/types/index-legacy.d.ts b/types/index-legacy.d.ts deleted file mode 100644 index 35afab0..0000000 --- a/types/index-legacy.d.ts +++ /dev/null @@ -1,54 +0,0 @@ -declare namespace _default { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { to }; - export { TweenCollection }; - export { allFromTo }; - export { allTo }; - export { Objects }; - export { Util }; - export { Easing }; - export { Render }; - export { Interpolate }; - export { Process }; - export { Internals }; - export { Selector }; - export { Version }; -} -export default _default; -import Animation from "./animation/animation.js"; -declare namespace Components { - export { BoxModel }; - export { ColorProperties }; - export { HTMLAttributes }; - export { OpacityProperty }; - export { TextWrite }; - export { TransformLegacy }; - export { SVGDraw }; - export { SVGMorph }; -} -import Tween from "./tween/tween.js"; -import fromTo from "./interface/fromTo.js"; -import to from "./interface/to.js"; -import TweenCollection from "./tween/tweenCollection.js"; -import allFromTo from "./interface/allFromTo.js"; -import allTo from "./interface/allTo.js"; -import Objects from "./objects/objects.js"; -import Util from "./objects/util.js"; -import Easing from "./easing/easing.js"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Process from "./process/process.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; -import BoxModel from "./components/boxModelEssential.js"; -import ColorProperties from "./components/colorProperties.js"; -import HTMLAttributes from "./components/htmlAttributes.js"; -import OpacityProperty from "./components/opacityProperty.js"; -import TextWrite from "./components/textWrite.js"; -import TransformLegacy from "./components/transformLegacy.js"; -import SVGDraw from "./components/svgDraw.js"; -import SVGMorph from "./components/svgMorph.js"; diff --git a/types/index.d.ts b/types/index.d.ts index e10e704..83fdebf 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,39 +1,155 @@ -export default KUTE; -declare namespace KUTE { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { to }; - export { TweenCollection }; - export { allFromTo }; - export { allTo }; - export { Objects }; - export { Util }; - export { Easing }; - export { CubicBezier }; - export { Render }; - export { Interpolate }; - export { Process }; - export { Internals }; - export { Selector }; - export { Version }; -} -import Animation from "./animation/animation.js"; -import Components from "./objects/componentsDefault.js"; -import Tween from "./tween/tween.js"; -import fromTo from "./interface/fromTo.js"; -import to from "./interface/to.js"; -import TweenCollection from "./tween/tweenCollection.js"; -import allFromTo from "./interface/allFromTo.js"; -import allTo from "./interface/allTo.js"; -import Objects from "./objects/objects.js"; -import Util from "./objects/util.js"; -import Easing from "./easing/easing-bezier.js"; -import CubicBezier from "cubic-bezier-easing"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Process from "./process/process.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; +export as namespace KUTE; + +// dependencies +// export * as SVGPathCommander from "svg-path-commander"; + +import './kute' +export { default as Animation } from "kute.js/src/animation/animation"; +export { default as AnimationBase } from "kute.js/src/animation/animationBase"; +export { default as AnimationDevelopment } from "kute.js/src/animation/animationDevelopment"; +export { default as backgroundPosition } from "kute.js/src/components/backgroundPosition"; +export { default as backgroundPositionBase } from "kute.js/src/components/backgroundPositionBase"; +export { default as borderRadius } from "kute.js/src/components/borderRadius"; +export { default as borderRadiusBase } from "kute.js/src/components/borderRadiusBase"; +export { default as boxModel } from "kute.js/src/components/boxModel"; +export { default as boxModelBase } from "kute.js/src/components/boxModelBase"; +export { default as boxModelEssential } from "kute.js/src/components/boxModelEssential"; +export { default as clipProperty } from "kute.js/src/components/clipProperty"; +export { default as clipPropertyBase } from "kute.js/src/components/clipPropertyBase"; +export { default as colorProperties } from "kute.js/src/components/colorProperties"; +export { default as colorPropertiesBase } from "kute.js/src/components/colorPropertiesBase"; +export { default as crossBrowserMove } from "kute.js/src/components/crossBrowserMove"; +export { default as filterEffects } from "kute.js/src/components/filterEffects"; +export { default as filterEffectsBase } from "kute.js/src/components/filterEffectsBase"; +export { default as htmlAttributes } from "kute.js/src/components/htmlAttributes"; +export { default as htmlAttributesBase } from "kute.js/src/components/htmlAttributesBase"; +export { default as opacityProperty } from "kute.js/src/components/opacityProperty"; +export { default as opacityPropertyBase } from "kute.js/src/components/opacityPropertyBase"; +export { default as scrollProperty } from "kute.js/src/components/scrollProperty"; +export { default as scrollPropertyBase } from "kute.js/src/components/scrollPropertyBase"; +export { default as shadowProperties } from "kute.js/src/components/shadowProperties"; +export { default as shadowPropertiesBase } from "kute.js/src/components/shadowPropertiesBase"; +export { default as svgCubicMorph } from "kute.js/src/components/svgCubicMorph"; +export { default as svgCubicMorphBase } from "kute.js/src/components/svgCubicMorphBase"; +export { default as svgDraw } from "kute.js/src/components/svgDraw"; +export { default as svgDrawBase } from "kute.js/src/components/svgDrawBase"; +export { default as svgMorph } from "kute.js/src/components/svgMorph"; +export { default as svgMorphBase } from "kute.js/src/components/svgMorphBase"; +export { default as svgTransform } from "kute.js/src/components/svgTransform"; +export { default as svgTransformBase } from "kute.js/src/components/svgTransformBase"; +export { default as textProperties } from "kute.js/src/components/textProperties"; +export { default as textPropertiesBase } from "kute.js/src/components/textPropertiesBase"; +export { default as textWrite } from "kute.js/src/components/textWrite"; +export { default as textWriteBase } from "kute.js/src/components/textWriteBase"; +export { default as transformFunctions } from "kute.js/src/components/transformFunctions"; +export { default as transformFunctionsBase } from "kute.js/src/components/transformFunctionsBase"; +export { default as transformLegacy } from "kute.js/src/components/transformLegacy"; +export { default as transformLegacyBase } from "kute.js/src/components/transformLegacyBase"; +export { default as transformMatrix } from "kute.js/src/components/transformMatrix"; +export { default as transformMatrixBase } from "kute.js/src/components/transformMatrixBase"; +export { default as add } from "kute.js/src/core/add"; +export { default as getAll } from "kute.js/src/core/getAll"; +export { default as Internals } from "kute.js/src/core/internals"; +export { default as linkInterpolation } from "kute.js/src/core/linkInterpolation"; +export { default as queueStart } from "kute.js/src/core/queueStart"; +export { default as remove } from "kute.js/src/core/remove"; +export { default as removeAll } from "kute.js/src/core/removeAll"; +export { default as Render } from "kute.js/src/core/render"; +export { default as EasingBase } from "kute.js/src/easing/easing-base"; +export { default as EasingBezier } from "kute.js/src/easing/easing-bezier"; +export { default as Easing } from "kute.js/src/easing/easing"; +export { default as allFromTo } from "kute.js/src/interface/allFromTo"; +export { default as allTo } from "kute.js/src/interface/allTo"; +export { default as fromTo } from "kute.js/src/interface/fromTo"; +export { default as to } from "kute.js/src/interface/to"; +export { default as arrays } from "kute.js/src/interpolation/arrays"; +export { default as colors } from "kute.js/src/interpolation/colors"; +export { default as coords } from "kute.js/src/interpolation/coords"; +export { default as numbers } from "kute.js/src/interpolation/numbers"; +export { default as perspective } from "kute.js/src/interpolation/perspective"; +export { default as rotate } from "kute.js/src/interpolation/rotate"; +export { default as rotate3d } from "kute.js/src/interpolation/rotate3d"; +export { default as scale } from "kute.js/src/interpolation/scale"; +export { default as skew } from "kute.js/src/interpolation/skew"; +export { default as skewX } from "kute.js/src/interpolation/skewX"; +export { default as skewY } from "kute.js/src/interpolation/skewY"; +export { default as translate } from "kute.js/src/interpolation/translate"; +export { default as translate3d } from "kute.js/src/interpolation/translate3d"; +export { default as units } from "kute.js/src/interpolation/units"; +export { default as ComponentsBase } from "kute.js/src/objects/componentsBase"; +export { default as ComponentsDefault } from "kute.js/src/objects/componentsDefault"; +export { default as ComponentsExtra } from "kute.js/src/objects/componentsExtra"; +export { default as connect } from "kute.js/src/objects/connect"; +export { default as crossCheck } from "kute.js/src/objects/crossCheck"; +export { default as defaultOptions } from "kute.js/src/objects/defaultOptions"; +export { default as defaultValues } from "kute.js/src/objects/defaultValues"; +export { default as globalObject } from "kute.js/src/objects/globalObject"; +export { default as Interpolate } from "kute.js/src/objects/interpolate"; +export { default as KEC } from "kute.js/src/objects/kute"; +export { default as linkProperty } from "kute.js/src/objects/linkProperty"; +export { default as Objects } from "kute.js/src/objects/objects"; +export { default as ObjectsBase } from "kute.js/src/objects/objectsBase"; +export { default as onComplete } from "kute.js/src/objects/onComplete"; +export { default as onStart } from "kute.js/src/objects/onStart"; +export { default as prepareProperty } from "kute.js/src/objects/prepareProperty"; +export { default as prepareStart } from "kute.js/src/objects/prepareStart"; +export { default as supportedProperties } from "kute.js/src/objects/supportedProperties"; +export { default as Tweens } from "kute.js/src/objects/tweens"; +export { default as Util } from "kute.js/src/objects/util"; +export { default as getInlineStyle } from "kute.js/src/process/getInlineStyle"; +export { default as getInlineStyleLegacy } from "kute.js/src/process/getInlineStyleLegacy"; +export { default as getStartValues } from "kute.js/src/process/getStartValues"; +export { default as getStyleForProperty } from "kute.js/src/process/getStyleForProperty"; +export { default as prepareObject } from "kute.js/src/process/prepareObject"; +export { default as Process } from "kute.js/src/process/process"; +export { default as Tween } from "kute.js/src/tween/tween"; +export { default as TweenBase } from "kute.js/src/tween/tweenBase"; +export { default as TweenCollection } from "kute.js/src/tween/tweenCollection"; +export { default as TweenExtra } from "kute.js/src/tween/tweenExtra"; +export { default as degToRad } from "kute.js/src/util/degToRad"; +export { default as fromJSON } from "kute.js/src/util/fromJSON"; +export { default as getPrefix } from "kute.js/src/util/getPrefix"; +export { default as hexToRGB } from "kute.js/src/util/hexToRGB"; +export { default as now } from "kute.js/src/util/now"; +export { default as ProgressBar } from "kute.js/src/util/progressBar"; +export { default as radToDeg } from "kute.js/src/util/radToDeg"; +export { default as rgbToHex } from "kute.js/src/util/rgbToHex"; +export { default as selector } from "kute.js/src/util/selector"; +export { default as supportLegacyTransform } from "kute.js/src/util/supportLegacyTransform"; +export { default as toJSON } from "kute.js/src/util/toJSON"; +export { default as transformProperty } from "kute.js/src/util/transformProperty"; +export { default as trueColor } from "kute.js/src/util/trueColor"; +export { default as trueDimension } from "kute.js/src/util/trueDimension"; +export { default as trueProperty } from "kute.js/src/util/trueProperty"; +export { default as Version } from "kute.js/src/util/version"; + +export { + easingFunction, + easingOption, + tweenOptions, + tweenProps, + tweenParams, + twCollection, + chainOption, + propValue, + rawValue, + interpolationFn, + preparePropFn, + prepareStartFn, + fullComponent, + baseComponent, + curveObject, + polygonMorph, + polygonObject, + transformMObject, + transformFObject, + transformSVGObject, + exactRing, + drawObject, + curveSpecs, + colorObject, + shadowObject, + filterList, + selectorType, +} from './more/types'; + diff --git a/types/interface/allFromTo.d.ts b/types/interface/allFromTo.d.ts deleted file mode 100644 index b4c41fa..0000000 --- a/types/interface/allFromTo.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default function allFromTo(elements: any, startObject: any, endObject: any, optionsObj: any): TweenCollection; -import TweenCollection from "../tween/tweenCollection.js"; diff --git a/types/interface/allTo.d.ts b/types/interface/allTo.d.ts deleted file mode 100644 index c584ff9..0000000 --- a/types/interface/allTo.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default function allTo(elements: any, endObject: any, optionsObj: any): TweenCollection; -import TweenCollection from "../tween/tweenCollection.js"; diff --git a/types/interface/fromTo.d.ts b/types/interface/fromTo.d.ts deleted file mode 100644 index 9b1e79a..0000000 --- a/types/interface/fromTo.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function fromTo(element: any, startObject: any, endObject: any, optionsObj: any): any; diff --git a/types/interface/to.d.ts b/types/interface/to.d.ts deleted file mode 100644 index 2f06841..0000000 --- a/types/interface/to.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function to(element: any, endObject: any, optionsObj: any): any; diff --git a/types/interpolation/arrays.d.ts b/types/interpolation/arrays.d.ts deleted file mode 100644 index 52faadf..0000000 --- a/types/interpolation/arrays.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function arrays(a: any, b: any, v: any): number[]; diff --git a/types/interpolation/colors.d.ts b/types/interpolation/colors.d.ts deleted file mode 100644 index cdd4c10..0000000 --- a/types/interpolation/colors.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function colors(a: any, b: any, v: any): string; diff --git a/types/interpolation/coords.d.ts b/types/interpolation/coords.d.ts deleted file mode 100644 index 87b0504..0000000 --- a/types/interpolation/coords.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function coords(a: any, b: any, l: any, v: any): never[][]; diff --git a/types/interpolation/numbers.d.ts b/types/interpolation/numbers.d.ts deleted file mode 100644 index 1ced278..0000000 --- a/types/interpolation/numbers.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function numbers(a: any, b: any, v: any): number; diff --git a/types/interpolation/perspective.d.ts b/types/interpolation/perspective.d.ts deleted file mode 100644 index ac066c1..0000000 --- a/types/interpolation/perspective.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function perspective(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/rotate.d.ts b/types/interpolation/rotate.d.ts deleted file mode 100644 index a24c6fc..0000000 --- a/types/interpolation/rotate.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function rotate(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/rotate3d.d.ts b/types/interpolation/rotate3d.d.ts deleted file mode 100644 index c73abb0..0000000 --- a/types/interpolation/rotate3d.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function rotate3d(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/scale.d.ts b/types/interpolation/scale.d.ts deleted file mode 100644 index 934615f..0000000 --- a/types/interpolation/scale.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function scale(a: any, b: any, v: any): string; diff --git a/types/interpolation/skew.d.ts b/types/interpolation/skew.d.ts deleted file mode 100644 index cfa640b..0000000 --- a/types/interpolation/skew.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function skew(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/skewX.d.ts b/types/interpolation/skewX.d.ts deleted file mode 100644 index 54584c9..0000000 --- a/types/interpolation/skewX.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function skewX(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/skewY.d.ts b/types/interpolation/skewY.d.ts deleted file mode 100644 index 8add4da..0000000 --- a/types/interpolation/skewY.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function skewY(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/translate.d.ts b/types/interpolation/translate.d.ts deleted file mode 100644 index 03d5296..0000000 --- a/types/interpolation/translate.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function translate(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/translate3d.d.ts b/types/interpolation/translate3d.d.ts deleted file mode 100644 index df44978..0000000 --- a/types/interpolation/translate3d.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function translate3d(a: any, b: any, u: any, v: any): string; diff --git a/types/interpolation/units.d.ts b/types/interpolation/units.d.ts deleted file mode 100644 index 3004ddc..0000000 --- a/types/interpolation/units.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function units(a: any, b: any, u: any, v: any): any; diff --git a/types/kute.d.ts b/types/kute.d.ts new file mode 100644 index 0000000..6ee6a85 --- /dev/null +++ b/types/kute.d.ts @@ -0,0 +1,3052 @@ +declare module "kute.js/src/objects/supportedProperties" { + export default supportedProperties; + const supportedProperties: {}; +} +declare module "kute.js/src/objects/defaultValues" { + export default defaultValues; + const defaultValues: {}; +} +declare module "kute.js/src/objects/defaultOptions" { + export default defaultOptions; + namespace defaultOptions { + const duration: number; + const delay: number; + const easing: string; + const repeat: number; + const repeatDelay: number; + const yoyo: boolean; + const resetStart: boolean; + const offset: number; + } +} +declare module "kute.js/src/objects/prepareProperty" { + export default prepareProperty; + const prepareProperty: {}; +} +declare module "kute.js/src/objects/prepareStart" { + export default prepareStart; + const prepareStart: {}; +} +declare module "kute.js/src/objects/onStart" { + export default onStart; + const onStart: {}; +} +declare module "kute.js/src/objects/onComplete" { + export default onComplete; + const onComplete: {}; +} +declare module "kute.js/src/objects/crossCheck" { + export default crossCheck; + const crossCheck: {}; +} +declare module "kute.js/src/objects/linkProperty" { + export default linkProperty; + const linkProperty: {}; +} +declare module "kute.js/src/objects/util" { + export default Util; + const Util: {}; +} +declare module "kute.js/src/objects/interpolate" { + export default interpolate; + const interpolate: {}; +} +declare module "kute.js/src/animation/animation" { + /** + * Animation Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + */ + export default class Animation { + /** + * @constructor + * @param {KUTE.fullComponent} Component + */ + constructor(Component: KUTE.fullComponent); + } +} +declare module "kute.js/src/animation/animationBase" { + /** + * Animation Base Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + * + * This class only registers the minimal amount of component information + * required to enable components animation, which means value processing + * as well as `to()` and `allTo()` methods are not supported. + */ + export default class AnimationBase { + /** + * @class + * @param {KUTE.baseComponent} Component + */ + constructor(Component: KUTE.baseComponent); + _: number; + } +} +declare module "kute.js/src/animation/animationDevelopment" { + /** + * Animation Development Class + * + * Registers components by populating KUTE.js objects and makes sure + * no duplicate component / property is allowed. + * + * In addition to the default class, this one provides more component + * information to help you with custom component development. + */ + export default class AnimationDevelopment extends Animation { + /** + * + * @param {KUTE.fullComponent} args + */ + constructor(Component: any); + } + import Animation from "kute.js/src/animation/animation"; +} +declare module "kute.js/src/process/getStyleForProperty" { + /** + * getStyleForProperty + * + * Returns the computed style property for element for .to() method. + * Used by for the `.to()` static method. + * + * @param {Element} elem + * @param {string} propertyName + * @returns {string} + */ + export default function getStyleForProperty(elem: Element, propertyName: string): string; +} +declare module "kute.js/src/interpolation/numbers" { + /** + * Numbers Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {number} v progress + * @returns {number} the interpolated number + */ + export default function numbers(a: number, b: number, v: number): number; +} +declare module "kute.js/src/util/trueDimension" { + export default trueDimension; + /** + * trueDimension + * + * Returns the string value of a specific CSS property converted into a nice + * { v = value, u = unit } object. + * + * @param {string} dimValue the property string value + * @param {boolean | number} isAngle sets the utility to investigate angles + * @returns {{v: number, u: string}} the true {value, unit} tuple + */ + function trueDimension(dimValue: string, isAngle: boolean | number): { + v: number; + u: string; + }; +} +declare module "kute.js/src/objects/kute" { + export default KEC; + /** + * The KUTE.js Execution Context + */ + const KEC: {}; +} +declare module "kute.js/src/components/backgroundPositionBase" { + /** + * Sets the property update function. + * @param {string} prop the property name + */ + export function onStartBgPos(prop: string): void; + export default BackgroundPositionBase; + namespace BackgroundPositionBase { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartBgPos as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; +} +declare module "kute.js/src/components/backgroundPosition" { + export default BackgroundPosition; + namespace BackgroundPosition { + export const component: string; + export const property: string; + export const defaultValue: number[]; + export namespace Interpolate { + export { numbers }; + } + export { bgPositionFunctions as functions }; + export namespace Util { + export { trueDimension }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + namespace bgPositionFunctions { + export { getBgPos as prepareStart }; + export { prepareBgPos as prepareProperty }; + export { onStartBgPos as onStart }; + } + import trueDimension from "kute.js/src/util/trueDimension"; + /** + * Returns the property computed style. + * @param {string} prop the property + * @returns {string} the property computed style + */ + function getBgPos(prop: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number[]} the property tween object + */ + function prepareBgPos(_: string, value: string): number[]; + import { onStartBgPos } from "kute.js/src/components/backgroundPositionBase"; +} +declare module "kute.js/src/interpolation/units" { + /** + * Units Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the interpolated value + unit string + */ + export default function units(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/components/borderRadiusBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function radiusOnStartFn(tweenProp: string): void; + export default BorderRadiusBase; + namespace BorderRadiusBase { + const component: string; + const category: string; + namespace Interpolate { + export { units }; + } + namespace functions { + export { radiusOnStart as onStart }; + } + } + import units from "kute.js/src/interpolation/units"; + const radiusOnStart: {}; +} +declare module "kute.js/src/components/borderRadius" { + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} the property computed style + */ + export function getRadius(tweenProp: string): string; + /** + * Returns the property tween object. + * @param {string} value the property value + * @returns {{v: number, u: string}} the property tween object + */ + export function prepareRadius(_: any, value: string): { + v: number; + u: string; + }; + export namespace radiusFunctions { + export { getRadius as prepareStart }; + export { prepareRadius as prepareProperty }; + export { radiusOnStart as onStart }; + } + export default BorderRadius; + const radiusOnStart: {}; + namespace BorderRadius { + export const component: string; + export const category: string; + export { radiusProps as properties }; + export { radiusValues as defaultValues }; + export namespace Interpolate { + export { units }; + } + export { radiusFunctions as functions }; + export namespace Util { + export { trueDimension }; + } + } + const radiusProps: string[]; + const radiusValues: {}; + import units from "kute.js/src/interpolation/units"; + import trueDimension from "kute.js/src/util/trueDimension"; +} +declare module "kute.js/src/components/boxModelBase" { + /** + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ + export function boxModelOnStart(tweenProp: string): void; + export default BoxModelBase; + namespace BoxModelBase { + export const component: string; + export const category: string; + export { baseBoxProps as properties }; + export namespace Interpolate { + export { numbers }; + } + export namespace functions { + export { baseBoxOnStart as onStart }; + } + } + const baseBoxProps: string[]; + import numbers from "kute.js/src/interpolation/numbers"; + const baseBoxOnStart: {}; +} +declare module "kute.js/src/components/boxModel" { + export default BoxModel; + namespace BoxModel { + export const component: string; + export const category: string; + export { boxModelProperties as properties }; + export { boxModelValues as defaultValues }; + export namespace Interpolate { + export { numbers }; + } + export { boxModelFunctions as functions }; + } + const boxModelProperties: string[]; + const boxModelValues: {}; + import numbers from "kute.js/src/interpolation/numbers"; + namespace boxModelFunctions { + export { getBoxModel as prepareStart }; + export { prepareBoxModel as prepareProperty }; + export { boxPropsOnStart as onStart }; + } + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ + function getBoxModel(tweenProp: string): string; + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareBoxModel(tweenProp: string, value: string): number; + const boxPropsOnStart: {}; +} +declare module "kute.js/src/components/boxModelEssential" { + export default BoxModelEssential; + namespace BoxModelEssential { + export const component: string; + export const category: string; + export { essentialBoxProps as properties }; + export { essentialBoxPropsValues as defaultValues }; + export namespace Interpolate { + export { numbers }; + } + export { essentialBoxModelFunctions as functions }; + export namespace Util { + export { trueDimension }; + } + } + const essentialBoxProps: string[]; + namespace essentialBoxPropsValues { + const top: number; + const left: number; + const width: number; + const height: number; + } + import numbers from "kute.js/src/interpolation/numbers"; + namespace essentialBoxModelFunctions { + export { getBoxModel as prepareStart }; + export { prepareBoxModel as prepareProperty }; + export { essentialBoxOnStart as onStart }; + } + import trueDimension from "kute.js/src/util/trueDimension"; + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ + function getBoxModel(tweenProp: string): string; + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property name + * @returns {number} the property tween object + */ + function prepareBoxModel(tweenProp: string, value: string): number; + const essentialBoxOnStart: {}; +} +declare module "kute.js/src/components/clipPropertyBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartClip(tweenProp: string): void; + export default ClipPropertyBase; + namespace ClipPropertyBase { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartClip as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; +} +declare module "kute.js/src/components/clipProperty" { + export default ClipProperty; + namespace ClipProperty { + export const component: string; + export const property: string; + export const defaultValue: number[]; + export namespace Interpolate { + export { numbers }; + } + export { clipFunctions as functions }; + export namespace Util { + export { trueDimension }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + namespace clipFunctions { + export { getClip as prepareStart }; + export { prepareClip as prepareProperty }; + export { onStartClip as onStart }; + } + import trueDimension from "kute.js/src/util/trueDimension"; + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string | number[]} computed style for property + */ + function getClip(tweenProp: string): string | number[]; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number[]} the property tween object + */ + function prepareClip(_: string, value: string): number[]; + import { onStartClip } from "kute.js/src/components/clipPropertyBase"; +} +declare module "kute.js/src/util/hexToRGB" { + export default hexToRGB; + /** + * hexToRGB + * + * Converts a #HEX color format into RGB + * and returns a color object {r,g,b}. + * + * @param {string} hex the degree angle + * @returns {KUTE.colorObject | null} the radian angle + */ + function hexToRGB(hex: string): KUTE.colorObject | null; +} +declare module "kute.js/src/util/trueColor" { + export default trueColor; + /** + * trueColor + * + * Transform any color to rgba()/rgb() and return a nice RGB(a) object. + * + * @param {string} colorString the color input + * @returns {KUTE.colorObject} the {r,g,b,a} color object + */ + function trueColor(colorString: string): KUTE.colorObject; +} +declare module "kute.js/src/interpolation/colors" { + /** + * Color Interpolation Function. + * + * @param {KUTE.colorObject} a start color + * @param {KUTE.colorObject} b end color + * @param {number} v progress + * @returns {string} the resulting color + */ + export default function colors(a: KUTE.colorObject, b: KUTE.colorObject, v: number): string; +} +declare module "kute.js/src/components/colorPropertiesBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartColors(tweenProp: string): void; + export namespace baseColors { + const component: string; + const category: string; + namespace Interpolate { + export { numbers }; + export { colors }; + } + namespace functions { + export { colorsOnStart as onStart }; + } + } + export default baseColors; + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; + const colorsOnStart: {}; +} +declare module "kute.js/src/components/colorProperties" { + export default colorProperties; + namespace colorProperties { + export const component: string; + export const category: string; + export { supportedColors as properties }; + export { defaultColors as defaultValues }; + export namespace Interpolate { + export { numbers }; + export { colors }; + } + export { colorFunctions as functions }; + export namespace Util { + export { trueColor }; + } + } + const supportedColors: string[]; + const defaultColors: {}; + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; + namespace colorFunctions { + export { getColor as prepareStart }; + export { prepareColor as prepareProperty }; + export { colorsOnStart as onStart }; + } + import trueColor from "kute.js/src/util/trueColor"; + /** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} property computed style + */ + function getColor(prop: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.colorObject} the property tween object + */ + function prepareColor(_: string, value: string): KUTE.colorObject; + const colorsOnStart: {}; +} +declare module "kute.js/src/process/getInlineStyle" { + /** + * getInlineStyle + * Returns the transform style for element from + * cssText. Used by for the `.to()` static method. + * + * @param {Element} el target element + * @returns {object} + */ + export default function getInlineStyle(el: Element): object; +} +declare module "kute.js/src/util/getPrefix" { + export default getPrefix; + /** + * getPrefix + * + * Returns browser CSS3 prefix. Keep `for()` + * for wider browser support. + * + * @returns {?string} the browser prefix + */ + function getPrefix(): string | null; +} +declare module "kute.js/src/util/trueProperty" { + export default trueProperty; + /** + * trueProperty + * + * Returns prefixed property name in a legacy browser + * or the regular name in modern browsers. + * + * @param {string} property the property name + * @returns {string} the right property name for every browser + */ + function trueProperty(property: string): string; +} +declare module "kute.js/src/components/crossBrowserMove" { + /** + * Sets the property update function. + * @param {string} tweenProp the `path` property + */ + export function onStartComponent(tweenProp: string): void; + export namespace baseCrossBrowserMove { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartComponent as onStart }; + } + } + export default crossBrowserMove; + import numbers from "kute.js/src/interpolation/numbers"; + namespace crossBrowserMove { + const component_1: string; + export { component_1 as component }; + const property_1: string; + export { property_1 as property }; + export const defaultValue: number[]; + export namespace Interpolate_1 { + export { numbers }; + } + export { Interpolate_1 as Interpolate }; + export { componentFunctions as functions }; + export namespace Util { + export { trueProperty }; + } + } + namespace componentFunctions { + export { getComponentCurrentValue as prepareStart }; + export { prepareComponentValue as prepareProperty }; + export { onStartComponent as onStart }; + } + import trueProperty from "kute.js/src/util/trueProperty"; + /** + * Returns the property current style. + */ + function getComponentCurrentValue(): number[]; + /** + * Returns the property tween object. + * @param {string} _ property name + * @param {string} value property value + * @returns {number[]} the property tween object + */ + function prepareComponentValue(_: string, value: string): number[]; +} +declare module "kute.js/src/components/filterEffectsBase" { + /** + * Sets the `drop-shadow` sub-property update function. + * * disimbiguation `dropshadow` interpolation function and `dropShadow` property + * @param {string} tweenProp the property name + */ + export function dropshadow(a: any, b: any, v: any): string; + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartFilter(tweenProp: string): void; + export default baseFilter; + namespace baseFilter { + const component: string; + const property: string; + namespace Interpolate { + export { numbers as opacity }; + export { numbers as blur }; + export { numbers as saturate }; + export { numbers as grayscale }; + export { numbers as brightness }; + export { numbers as contrast }; + export { numbers as sepia }; + export { numbers as invert }; + export { numbers as hueRotate }; + export namespace dropShadow { + export { numbers }; + export { colors }; + export { dropshadow }; + } + } + namespace functions { + export { onStartFilter as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; +} +declare module "kute.js/src/components/filterEffects" { + export default filterEffects; + namespace filterEffects { + export const component: string; + export const property: string; + export namespace defaultValue { + const opacity: number; + const blur: number; + const saturate: number; + const grayscale: number; + const brightness: number; + const contrast: number; + const sepia: number; + const invert: number; + const hueRotate: number; + const dropShadow: (number | { + r: number; + g: number; + b: number; + })[]; + const url: string; + } + export namespace Interpolate { + export { numbers as opacity }; + export { numbers as blur }; + export { numbers as saturate }; + export { numbers as grayscale }; + export { numbers as brightness }; + export { numbers as contrast }; + export { numbers as sepia }; + export { numbers as invert }; + export { numbers as hueRotate }; + export namespace dropShadow_1 { + export { numbers }; + export { colors }; + export { dropshadow }; + } + export { dropShadow_1 as dropShadow }; + } + export { filterFunctions as functions }; + export namespace Util { + export { parseDropShadow }; + export { parseFilterString }; + export { replaceDashNamespace }; + export { trueColor }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; + import { dropshadow } from "kute.js/src/components/filterEffectsBase"; + namespace filterFunctions { + export { getFilter as prepareStart }; + export { prepareFilter as prepareProperty }; + export { onStartFilter as onStart }; + export { crossCheckFilter as crossCheck }; + } + /** + * Returns `drop-shadow` sub-property object. + * @param {(string | number)[]} shadow and `Array` with `drop-shadow` parameters + * @returns {KUTE.filterList['dropShadow']} the expected `drop-shadow` values + */ + function parseDropShadow(shadow: (string | number)[]): KUTE.filterList['dropShadow']; + /** + * Returns an array with current filter sub-properties values. + * @param {string} currentStyle the current filter computed style + * @returns {{[x: string]: number}} the filter tuple + */ + function parseFilterString(currentStyle: string): { + [x: string]: number; + }; + /** + * Returns camelCase filter sub-property. + * @param {string} str source string + * @returns {string} camelCase property name + */ + function replaceDashNamespace(str: string): string; + import trueColor from "kute.js/src/util/trueColor"; + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {string} computed style for property + */ + function getFilter(tweenProp: string, value: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property name + * @returns {KUTE.filterList} the property tween object + */ + function prepareFilter(_: string, value: string): KUTE.filterList; + import { onStartFilter } from "kute.js/src/components/filterEffectsBase"; + /** + * Adds missing sub-properties in `valuesEnd` from `valuesStart`. + * @param {string} tweenProp the property name + */ + function crossCheckFilter(tweenProp: string): void; +} +declare module "kute.js/src/components/htmlAttributesBase" { + export namespace onStartAttr { + /** + * onStartAttr.attr + * + * Sets the sub-property update function. + * @param {string} tweenProp the property name + */ + function attr(tweenProp: string): void; + /** + * onStartAttr.attr + * + * Sets the sub-property update function. + * @param {string} tweenProp the property name + */ + function attr(tweenProp: string): void; + /** + * onStartAttr.attributes + * + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ + function attributes(tweenProp: string): void; + /** + * onStartAttr.attributes + * + * Sets the update function for the property. + * @param {string} tweenProp the property name + */ + function attributes(tweenProp: string): void; + } + export default baseAttributes; + export const attributes: {}; + namespace baseAttributes { + export { ComponentName as component }; + export const property: string; + export namespace Interpolate { + export { numbers }; + export { colors }; + } + export namespace functions { + export { onStartAttr as onStart }; + } + } + const ComponentName: "baseHTMLAttributes"; + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; +} +declare module "kute.js/src/components/htmlAttributes" { + /** + * Returns the current attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {{[x:string]: string}} attribute value + */ + export function getAttr(_: string, value: string): { + [x: string]: string; + }; + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} attrObj the property value + * @returns {number} the property tween object + */ + export function prepareAttr(tweenProp: string, attrObj: string): number; + export default htmlAttributes; + namespace htmlAttributes { + export { ComponentName as component }; + export const property: string; + export const subProperties: string[]; + export const defaultValue: { + fill: string; + stroke: string; + 'stop-color': string; + opacity: number; + 'stroke-opacity': number; + 'fill-opacity': number; + }; + export namespace Interpolate { + export { numbers }; + export { colors }; + } + export { attrFunctions as functions }; + export namespace Util { + export { replaceUppercase }; + export { trueColor }; + export { trueDimension }; + } + } + const ComponentName: "htmlAttributes"; + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; + namespace attrFunctions { + export { getAttr as prepareStart }; + export { prepareAttr as prepareProperty }; + export { onStartAttr as onStart }; + } + /** + * Returns non-camelcase property name. + * @param {string} a the camelcase property name + * @returns {string} the non-camelcase property name + */ + function replaceUppercase(a: string): string; + import trueColor from "kute.js/src/util/trueColor"; + import trueDimension from "kute.js/src/util/trueDimension"; + import { onStartAttr } from "kute.js/src/components/htmlAttributesBase"; +} +declare module "kute.js/src/components/opacityPropertyBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartOpacity(tweenProp: string): void; + export default OpacityPropertyBase; + namespace OpacityPropertyBase { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartOpacity as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; +} +declare module "kute.js/src/components/opacityProperty" { + export default OpacityProperty; + namespace OpacityProperty { + export const component: string; + export const property: string; + export const defaultValue: number; + export namespace Interpolate { + export { numbers }; + } + export { opacityFunctions as functions }; + } + import numbers from "kute.js/src/interpolation/numbers"; + namespace opacityFunctions { + export { getOpacity as prepareStart }; + export { prepareOpacity as prepareProperty }; + export { onStartOpacity as onStart }; + } + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ + function getOpacity(tweenProp: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareOpacity(_: string, value: string): number; + import { onStartOpacity } from "kute.js/src/components/opacityPropertyBase"; +} +declare module "kute.js/src/components/scrollPropertyBase" { + /** + * Prevent further scroll events until scroll animation is over. + * @param {Event} e event object + */ + export function preventScroll(e: Event): void; + /** + * Returns the scroll element / target. + * @returns {{el: Element, st: Element}} + */ + export function getScrollTargets(): { + el: Element; + st: Element; + }; + /** + * Toggles scroll prevention callback on scroll events. + * @param {string} action addEventListener / removeEventListener + * @param {Element} element target + */ + export function toggleScrollEvents(action: string, element: Element): void; + /** + * Action performed before scroll animation start. + */ + export function scrollIn(): void; + /** + * Action performed when scroll animation ends. + */ + export function scrollOut(): void; + /** + * * Sets the scroll target. + * * Adds the scroll prevention event listener. + * * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartScroll(tweenProp: string): void; + export class onStartScroll { + /** + * * Sets the scroll target. + * * Adds the scroll prevention event listener. + * * Sets the property update function. + * @param {string} tweenProp the property name + */ + constructor(tweenProp: string); + element: HTMLElement | undefined; + } + /** + * Removes the scroll prevention event listener. + */ + export function onCompleteScroll(): void; + export const scrollContainer: HTMLElement; + export default ScrollPropertyBase; + namespace ScrollPropertyBase { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartScroll as onStart }; + export { onCompleteScroll as onComplete }; + } + namespace Util { + export { preventScroll }; + export { scrollIn }; + export { scrollOut }; + export { getScrollTargets }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; +} +declare module "kute.js/src/components/scrollProperty" { + export default ScrollProperty; + namespace ScrollProperty { + export const component: string; + export const property: string; + export const defaultValue: number; + export namespace Interpolate { + export { numbers }; + } + export { scrollFunctions as functions }; + export namespace Util { + export { preventScroll }; + export { scrollIn }; + export { scrollOut }; + export { getScrollTargets }; + export { toggleScrollEvents }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + namespace scrollFunctions { + export { getScroll as prepareStart }; + export { prepareScroll as prepareProperty }; + export { onStartScroll as onStart }; + export { onCompleteScroll as onComplete }; + } + import { preventScroll } from "kute.js/src/components/scrollPropertyBase"; + import { scrollIn } from "kute.js/src/components/scrollPropertyBase"; + import { scrollOut } from "kute.js/src/components/scrollPropertyBase"; + import { getScrollTargets } from "kute.js/src/components/scrollPropertyBase"; + import { toggleScrollEvents } from "kute.js/src/components/scrollPropertyBase"; + /** + * Returns the current property computed style. + * @returns {number} computed style for property + */ + function getScroll(): number; + class getScroll { + element: HTMLElement | undefined; + } + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + function prepareScroll(_: string, value: string): number; + import { onStartScroll } from "kute.js/src/components/scrollPropertyBase"; + import { onCompleteScroll } from "kute.js/src/components/scrollPropertyBase"; +} +declare module "kute.js/src/components/shadowPropertiesBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartShadow(tweenProp: string): void; + export default ShadowPropertiesBase; + namespace ShadowPropertiesBase { + const component: string; + namespace Interpolate { + export { numbers }; + export { colors }; + } + namespace functions { + export { shadowPropOnStart as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; + const shadowPropOnStart: {}; +} +declare module "kute.js/src/components/shadowProperties" { + /** + * Returns the current property computed style. + * @param {string} tweenProp the property name + * @returns {string} computed style for property + */ + export function getShadow(tweenProp: string): string; + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} propValue the property value + * @returns {KUTE.shadowObject} the property tween object + */ + export function prepareShadow(tweenProp: string, propValue: string): KUTE.shadowObject; + export default ShadowProperties; + namespace ShadowProperties { + export const component: string; + export { shadowProps as properties }; + export namespace defaultValues { + const boxShadow: string; + const textShadow: string; + } + export namespace Interpolate { + export { numbers }; + export { colors }; + } + export { shadowFunctions as functions }; + export namespace Util { + export { processShadowArray }; + export { trueColor }; + } + } + const shadowProps: string[]; + import numbers from "kute.js/src/interpolation/numbers"; + import colors from "kute.js/src/interpolation/colors"; + namespace shadowFunctions { + export { getShadow as prepareStart }; + export { prepareShadow as prepareProperty }; + export { shadowPropOnStart as onStart }; + } + /** + * Return the box-shadow / text-shadow tween object. + * * box-shadow: none | h-shadow v-shadow blur spread color inset|initial|inherit + * * text-shadow: none | offset-x offset-y blur-radius color |initial|inherit + * * numbers must be floats and color must be rgb object + * + * @param {(number | string)[]} shadow an `Array` with shadow parameters + * @param {string} tweenProp the property name + * @returns {KUTE.shadowObject} the property tween object + */ + function processShadowArray(shadow: (number | string)[], tweenProp: string): KUTE.shadowObject; + import trueColor from "kute.js/src/util/trueColor"; + const shadowPropOnStart: {}; +} +declare module "kute.js/src/components/svgCubicMorphBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the `path` property + */ + export function onStartCubicMorph(tweenProp: string): void; + export default baseSvgCubicMorph; + namespace baseSvgCubicMorph { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + export { pathToString }; + } + namespace functions { + export { onStartCubicMorph as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + import pathToString from "svg-path-commander/src/convert/pathToString"; +} +declare module "kute.js/src/util/selector" { + /** + * selector + * + * A selector utility for KUTE.js. + * + * @param {KUTE.selectorType} el target(s) or string selector + * @param {boolean | number} multi when true returns an array/collection of elements + * @returns {Element | Element[] | null} + */ + export default function selector(el: KUTE.selectorType, multi: boolean | number): Element | Element[] | null; +} +declare module "kute.js/src/components/svgCubicMorph" { + export default svgCubicMorph; + namespace svgCubicMorph { + export const component: string; + export const property: string; + export const defaultValue: never[]; + export namespace Interpolate { + export { numbers }; + export { pathToString }; + } + export { svgCubicMorphFunctions as functions }; + export namespace Util { + export { pathToCurve }; + export { pathToAbsolute }; + export { pathToString }; + export { parsePathString }; + export { getRotatedCurve }; + export { getRotations }; + export { equalizeSegments }; + export { reverseCurve }; + export { clonePath }; + export { getDrawDirection }; + export { splitCubic }; + export { splitPath }; + export { fixPath }; + export { getCurveArray }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + import pathToString from "svg-path-commander/src/convert/pathToString"; + namespace svgCubicMorphFunctions { + export { getCubicMorph as prepareStart }; + export { prepareCubicMorph as prepareProperty }; + export { onStartCubicMorph as onStart }; + export { crossCheckCubicMorph as crossCheck }; + } + import pathToCurve from "svg-path-commander/src/convert/pathToCurve"; + import pathToAbsolute from "svg-path-commander/src/convert/pathToAbsolute"; + import parsePathString from "svg-path-commander/src/parser/parsePathString"; + /** + * Returns the `curveArray` rotation for the best morphing animation. + * @param {SVGPathCommander.curveArray} a the target `curveArray` + * @param {SVGPathCommander.curveArray} b the reference `curveArray` + * @returns {SVGPathCommander.curveArray} the best `a` rotation + */ + function getRotatedCurve(a: import("svg-path-commander").curveArray, b: import("svg-path-commander").curveArray): import("svg-path-commander").curveArray; + /** + * Returns all possible path rotations for `curveArray`. + * @param {SVGPathCommander.curveArray} a the source `curveArray` + * @returns {SVGPathCommander.curveArray[]} all rotations for source + */ + function getRotations(a: import("svg-path-commander").curveArray): import("svg-path-commander").curveArray[]; + /** + * Returns two `curveArray` with same amount of segments. + * @param {SVGPathCommander.curveArray} path1 the first `curveArray` + * @param {SVGPathCommander.curveArray} path2 the second `curveArray` + * @param {number} TL the maximum `curveArray` length + * @returns {SVGPathCommander.curveArray[]} equalized segments + */ + function equalizeSegments(path1: import("svg-path-commander").curveArray, path2: import("svg-path-commander").curveArray, TL: number): import("svg-path-commander").curveArray[]; + import reverseCurve from "svg-path-commander/src/process/reverseCurve"; + import clonePath from "svg-path-commander/src/process/clonePath"; + import getDrawDirection from "svg-path-commander/src/util/getDrawDirection"; + import splitCubic from "svg-path-commander/src/process/splitCubic"; + import splitPath from "svg-path-commander/src/process/splitPath"; + import fixPath from "svg-path-commander/src/process/fixPath"; + /** + * Returns first `pathArray` from multi-paths path. + * @param {SVGPathCommander.pathArray | string} source the source `pathArray` or string + * @returns {KUTE.curveSpecs[]} an `Array` with a custom tuple for `equalizeSegments` + */ + function getCurveArray(source: import("svg-path-commander").pathArray | string): KUTE.curveSpecs[]; + /** + * Returns the current `d` attribute value. + * @returns {string} + */ + function getCubicMorph(): string; + /** + * Returns the property tween object. + * @see KUTE.curveObject + * + * @param {string} _ is the `path` property name, not needed + * @param {string | KUTE.curveObject} value the `path` property value + * @returns {KUTE.curveObject} + */ + function prepareCubicMorph(_: string, value: string | KUTE.curveObject): KUTE.curveObject; + import { onStartCubicMorph } from "kute.js/src/components/svgCubicMorphBase"; + /** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} tweenProp is `path` tween property, but it's not needed + */ + function crossCheckCubicMorph(tweenProp: string): void; +} +declare module "kute.js/src/components/svgDrawBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartDraw(tweenProp: string): void; + export default SvgDrawBase; + namespace SvgDrawBase { + const component: string; + const property: string; + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartDraw as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; +} +declare module "kute.js/src/components/svgDraw" { + export default SvgDrawProperty; + namespace SvgDrawProperty { + export const component: string; + export const property: string; + export const defaultValue: string; + export namespace Interpolate { + export { numbers }; + } + export { svgDrawFunctions as functions }; + export namespace Util { + export { getRectLength }; + export { getPolyLength }; + export { getLineLength }; + export { getCircleLength }; + export { getEllipseLength }; + export { getTotalLength }; + export { resetDraw }; + export { getDraw }; + export { percent }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; + namespace svgDrawFunctions { + export { getDrawValue as prepareStart }; + export { prepareDraw as prepareProperty }; + export { onStartDraw as onStart }; + } + /** + * Returns the `` length. + * It doesn't compute `rx` and / or `ry` of the element. + * @see http://stackoverflow.com/a/30376660 + * @param {SVGRectElement} el target element + * @returns {number} the `` length + */ + function getRectLength(el: SVGRectElement): number; + /** + * Returns the `` / `` length. + * @param {SVGPolylineElement | SVGPolygonElement} el target element + * @returns {number} the element length + */ + function getPolyLength(el: SVGPolylineElement | SVGPolygonElement): number; + /** + * Returns the `` length. + * @param {SVGLineElement} el target element + * @returns {number} the element length + */ + function getLineLength(el: SVGLineElement): number; + /** + * Returns the `` length. + * @param {SVGCircleElement} el target element + * @returns {number} the element length + */ + function getCircleLength(el: SVGCircleElement): number; + /** + * Returns the `` length. + * @param {SVGEllipseElement} el target element + * @returns {number} the element length + */ + function getEllipseLength(el: SVGEllipseElement): number; + /** + * Returns the shape length. + * @param {SVGPathCommander.shapeTypes} el target element + * @returns {number} the element length + */ + function getTotalLength(el: SVGPathCommander.shapeTypes): number; + /** + * Reset CSS properties associated with the `draw` property. + * @param {SVGPathCommander.shapeTypes} element target + */ + function resetDraw(elem: any): void; + /** + * Returns the property tween object. + * @param {SVGPathCommander.shapeTypes} element the target element + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ + function getDraw(element: SVGPathCommander.shapeTypes, value: string | KUTE.drawObject): KUTE.drawObject; + /** + * Convert a `` length percent value to absolute. + * @param {string} v raw value + * @param {number} l length value + * @returns {number} the absolute value + */ + function percent(v: string, l: number): number; + /** + * Returns the property tween object. + * @returns {KUTE.drawObject} the property tween object + */ + function getDrawValue(): KUTE.drawObject; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.drawObject} value the property value + * @returns {KUTE.drawObject} the property tween object + */ + function prepareDraw(_: string, value: string | KUTE.drawObject): KUTE.drawObject; + import { onStartDraw } from "kute.js/src/components/svgDrawBase"; +} +declare module "kute.js/src/interpolation/coords" { + /** + * Coordinates Interpolation Function. + * + * @param {number[][]} a start coordinates + * @param {number[][]} b end coordinates + * @param {string} l amount of coordinates + * @param {number} v progress + * @returns {number[][]} the interpolated coordinates + */ + export default function coords(a: number[][], b: number[][], l: string, v: number): number[][]; +} +declare module "kute.js/src/components/svgMorphBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartSVGMorph(tweenProp: string): void; + export default SVGMorphBase; + namespace SVGMorphBase { + export const component: string; + export const property: string; + export { coords as Interpolate }; + export namespace functions { + export { onStartSVGMorph as onStart }; + } + } + import coords from "kute.js/src/interpolation/coords"; +} +declare module "kute.js/src/components/svgMorph" { + export default SVGMorph; + namespace SVGMorph { + export const component: string; + export const property: string; + export const defaultValue: never[]; + export { coords as Interpolate }; + export namespace defaultOptions { + const morphPrecision: number; + } + export { svgMorphFunctions as functions }; + export namespace Util { + export { addPoints }; + export { bisect }; + export { getPolygon }; + export { validPolygon }; + export { getInterpolationPoints }; + export { pathStringToPolygon }; + export { distanceSquareRoot }; + export { midPoint }; + export { approximateRing }; + export { rotatePolygon }; + export { pathToString }; + export { pathToCurve }; + export { getPathLength }; + export { getPointAtLength }; + export { getDrawDirection }; + export { roundPath }; + } + } + import coords from "kute.js/src/interpolation/coords"; + namespace svgMorphFunctions { + export { getSVGMorph as prepareStart }; + export { prepareSVGMorph as prepareProperty }; + export { onStartSVGMorph as onStart }; + export { crossCheckSVGMorph as crossCheck }; + } + /** + * Sample additional points for a polygon to better match its pair. + * @param {KUTE.polygonObject} polygon the target polygon + * @param {number} numPoints the amount of points needed + */ + function addPoints(polygon: KUTE.polygonObject, numPoints: number): void; + /** + * Split segments of a polygon until it reaches a certain + * amount of points. + * @param {number[][]} polygon the target polygon + * @param {number} maxSegmentLength the maximum amount of points + */ + function bisect(polygon: number[][], maxSegmentLength?: number): void; + /** + * Returns a new polygon and its length from string or another `Array`. + * @param {KUTE.polygonMorph | string} input the target polygon + * @param {number} maxSegmentLength the maximum amount of points + * @returns {KUTE.polygonMorph} normalized polygon + */ + function getPolygon(input: KUTE.polygonMorph | string, maxSegmentLength: number): KUTE.polygonMorph; + /** + * Checks the validity of a polygon. + * @param {KUTE.polygonMorph} polygon the target polygon + * @returns {boolean} the result of the check + */ + function validPolygon(polygon: KUTE.polygonMorph): boolean; + /** + * Returns two new polygons ready to tween. + * @param {string} path1 the first path string + * @param {string} path2 the second path string + * @param {number} precision the morphPrecision option value + * @returns {KUTE.polygonMorph[]} the two polygons + */ + function getInterpolationPoints(path1: string, path2: string, precision: number): KUTE.polygonMorph[]; + /** + * Parses a path string and returns a polygon array. + * @param {string} str path string + * @param {number} maxLength maximum amount of points + * @returns {KUTE.exactRing} the polygon array we need + */ + function pathStringToPolygon(str: string, maxLength: number): KUTE.exactRing; + import distanceSquareRoot from "svg-path-commander/src/math/distanceSquareRoot"; + import midPoint from "svg-path-commander/src/math/midPoint"; + /** + * Returns polygon length. + * @param {SVGPathCommander.pathArray} parsed target polygon + * @param {number} maxLength the maximum segment length + * @returns {KUTE.exactRing} length + */ + function approximateRing(parsed: import("svg-path-commander").pathArray, maxLength: number): KUTE.exactRing; + /** + * Rotates a polygon to better match its pair. + * @param {KUTE.polygonMorph} polygon the target polygon + * @param {KUTE.polygonMorph} vs the reference polygon + */ + function rotatePolygon(polygon: KUTE.polygonMorph, vs: KUTE.polygonMorph): void; + import pathToString from "svg-path-commander/src/convert/pathToString"; + import pathToCurve from "svg-path-commander/src/convert/pathToCurve"; + import getPathLength from "svg-path-commander/src/util/getPathLength"; + import getPointAtLength from "svg-path-commander/src/util/getPointAtLength"; + import getDrawDirection from "svg-path-commander/src/util/getDrawDirection"; + import roundPath from "svg-path-commander/src/process/roundPath"; + /** + * Returns the current `d` attribute value. + * @returns {string} the `d` attribute value + */ + function getSVGMorph(): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string | KUTE.polygonObject} value the property value + * @returns {KUTE.polygonObject} the property tween object + */ + function prepareSVGMorph(_: string, value: string | KUTE.polygonObject): KUTE.polygonObject; + import { onStartSVGMorph } from "kute.js/src/components/svgMorphBase"; + /** + * Enables the `to()` method by preparing the tween object in advance. + * @param {string} prop the `path` property name + */ + function crossCheckSVGMorph(prop: string): void; + /** + * Returns an existing polygin and its length or false if not polygon. + * @param {SVGPathCommander.pathArray} pathArray target polygon + * @returns {KUTE.exactRing} length + */ + function exactRing(pathArray: import("svg-path-commander").pathArray): KUTE.exactRing; +} +declare module "kute.js/src/components/svgTransformBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function svgTransformOnStart(tweenProp: string): void; + export default baseSVGTransform; + namespace baseSVGTransform { + const component: string; + const property: string; + namespace defaultOptions { + const transformOrigin: string; + } + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { svgTransformOnStart as onStart }; + } + } + import numbers from "kute.js/src/interpolation/numbers"; +} +declare module "kute.js/src/components/svgTransform" { + export namespace svgTransformFunctions { + export { getStartSvgTransform as prepareStart }; + export { prepareSvgTransform as prepareProperty }; + export { svgTransformOnStart as onStart }; + export { svgTransformCrossCheck as crossCheck }; + } + export namespace svgTransform { + export const component: string; + export const property: string; + export namespace defaultOptions { + const transformOrigin: string; + } + export namespace defaultValue { + const translate: number; + const rotate: number; + const skewX: number; + const skewY: number; + const scale: number; + } + export namespace Interpolate { + export { numbers }; + } + export { svgTransformFunctions as functions }; + export namespace Util { + export { parseStringOrigin }; + export { parseTransformString }; + export { parseTransformSVG }; + } + } + export default svgTransform; + /** + * Returns an object with the current transform attribute value. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {string} current transform object + */ + function getStartSvgTransform(_: string, value: string): string; + /** + * Returns the property tween object. + * @param {string} prop the property name + * @param {string} value the property value + * @returns {KUTE.transformSVGObject} the property tween object + */ + function prepareSvgTransform(prop: string, value: string): KUTE.transformSVGObject; + import { svgTransformOnStart } from "kute.js/src/components/svgTransformBase"; + function svgTransformCrossCheck(prop: any): void; + import numbers from "kute.js/src/interpolation/numbers"; + /** + * Returns a correct transform origin consistent with the shape bounding box. + * @param {string} origin transform origin string + * @param {SVGPathCommander.pathBBox} bbox path bounding box + * @returns {number} + */ + function parseStringOrigin(origin: string, bbox: SVGPathCommander.pathBBox): number; + /** + * Parse SVG transform string and return an object. + * @param {string} a transform string + * @returns {Object} + */ + function parseTransformString(a: string): { + [x: string]: (string | number); + }; + /** + * Returns the SVG transform tween object. + * @param {string} _ property name + * @param {Object} v property value object + * @returns {KUTE.transformSVGObject} the SVG transform tween object + */ + function parseTransformSVG(_: string, v: { + [x: string]: (string | number); + }): KUTE.transformSVGObject; +} +declare module "kute.js/src/components/textPropertiesBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function textPropOnStart(tweenProp: string): void; + export default TextPropertiesBase; + namespace TextPropertiesBase { + const component: string; + const category: string; + namespace Interpolate { + export { units }; + } + namespace functions { + export { textOnStart as onStart }; + } + } + import units from "kute.js/src/interpolation/units"; + const textOnStart: {}; +} +declare module "kute.js/src/components/textProperties" { + /** + * Returns the current property computed style. + * @param {string} prop the property name + * @returns {string} computed style for property + */ + export function getTextProp(prop: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {number} the property tween object + */ + export function prepareTextProp(_: string, value: string): number; + export default TextProperties; + namespace TextProperties { + export const component: string; + export const category: string; + export { textProps as properties }; + export namespace defaultValues { + const fontSize: number; + const lineHeight: number; + const letterSpacing: number; + const wordSpacing: number; + } + export namespace Interpolate { + export { units }; + } + export { textPropFunctions as functions }; + export namespace Util { + export { trueDimension }; + } + } + const textProps: string[]; + import units from "kute.js/src/interpolation/units"; + namespace textPropFunctions { + export { getTextProp as prepareStart }; + export { prepareTextProp as prepareProperty }; + export { textOnStart as onStart }; + } + import trueDimension from "kute.js/src/util/trueDimension"; + const textOnStart: {}; +} +declare module "kute.js/src/objects/connect" { + export default connect; + namespace connect { + const tween: KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra; + const processEasing: any; + } +} +declare module "kute.js/src/components/textWriteBase" { + export namespace onStartWrite { + /** + * onStartWrite.text + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ + function text(tweenProp: string): void; + /** + * onStartWrite.text + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ + function text(tweenProp: string): void; + /** + * onStartWrite.number + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ + function number(tweenProp: string): void; + /** + * onStartWrite.number + * + * Sets the property update function. + * @param {string} tweenProp the property name + */ + function number(tweenProp: string): void; + } + export namespace TextWriteBase { + const component: string; + const category: string; + namespace defaultOptions { + const textChars: string; + } + namespace Interpolate { + export { numbers }; + } + namespace functions { + export { onStartWrite as onStart }; + } + namespace Util { + export { charSet }; + } + } + export default TextWriteBase; + export namespace charSet { + export { lowerCaseAlpha as alpha }; + export { upperCaseAlpha as upper }; + export { nonAlpha as symbols }; + export { numeric }; + export { alphaNumeric as alphanumeric }; + export { allTypes as all }; + } + import numbers from "kute.js/src/interpolation/numbers"; + const lowerCaseAlpha: string[]; + const upperCaseAlpha: string[]; + const nonAlpha: string[]; + const numeric: string[]; + const alphaNumeric: string[]; + const allTypes: string[]; +} +declare module "kute.js/src/components/textWrite" { + export function createTextTweens(target: any, newText: any, ops: any): false | any[]; + export namespace textWriteFunctions { + export { getWrite as prepareStart }; + export { prepareText as prepareProperty }; + export { onStartWrite as onStart }; + } + export namespace TextWrite { + export const component: string; + export const category: string; + export const properties: string[]; + export namespace defaultValues { + const text: string; + const number: string; + } + export namespace defaultOptions { + const textChars: string; + } + export namespace Interpolate { + export { numbers }; + } + export { textWriteFunctions as functions }; + export namespace Util { + export { charSet }; + export { createTextTweens }; + } + } + export default TextWrite; + /** + * Returns the current element `innerHTML`. + * @returns {string} computed style for property + */ + function getWrite(): string; + /** + * Returns the property tween object. + * @param {string} tweenProp the property name + * @param {string} value the property value + * @returns {number | string} the property tween object + */ + function prepareText(tweenProp: string, value: string): number | string; + import { onStartWrite } from "kute.js/src/components/textWriteBase"; + import numbers from "kute.js/src/interpolation/numbers"; + import { charSet } from "kute.js/src/components/textWriteBase"; +} +declare module "kute.js/src/interpolation/perspective" { + /** + * Perspective Interpolation Function. + * + * @param {number} a start value + * @param {number} b end value + * @param {string} u unit + * @param {number} v progress + * @returns {string} the perspective function in string format + */ + export default function perspective(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/interpolation/translate3d" { + /** + * Translate 3D Interpolation Function. + * + * @param {number[]} a start [x,y,z] position + * @param {number[]} b end [x,y,z] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D translation string + */ + export default function translate3d(a: number[], b: number[], u: string, v: number): string; +} +declare module "kute.js/src/interpolation/rotate3d" { + /** + * 3D Rotation Interpolation Function. + * + * @param {number} a start [x,y,z] angles + * @param {number} b end [x,y,z] angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated 3D rotation string + */ + export default function rotate3d(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/interpolation/translate" { + /** + * Translate 2D Interpolation Function. + * + * @param {number[]} a start [x,y] position + * @param {number[]} b end [x,y] position + * @param {string} u unit, usually `px` degrees + * @param {number} v progress + * @returns {string} the interpolated 2D translation string + */ + export default function translate(a: number[], b: number[], u: string, v: number): string; +} +declare module "kute.js/src/interpolation/rotate" { + /** + * 2D Rotation Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated rotation + */ + export default function rotate(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/interpolation/scale" { + /** + * Scale Interpolation Function. + * + * @param {number} a start scale + * @param {number} b end scale + * @param {number} v progress + * @returns {string} the interpolated scale + */ + export default function scale(a: number, b: number, v: number): string; +} +declare module "kute.js/src/interpolation/skew" { + /** + * Skew Interpolation Function. + * + * @param {number} a start {x,y} angles + * @param {number} b end {x,y} angles + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated string value of skew(s) + */ + export default function skew(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/components/transformFunctionsBase" { + /** + * Sets the property update function. + * * same to svgTransform, htmlAttributes + * @param {string} tweenProp the property name + */ + export function onStartTransform(tweenProp: string): void; + export default TransformFunctionsBase; + namespace TransformFunctionsBase { + const component: string; + const property: string; + namespace functions { + export { onStartTransform as onStart }; + } + namespace Interpolate { + export { perspective }; + export { translate3d }; + export { rotate3d }; + export { translate }; + export { rotate }; + export { scale }; + export { skew }; + } + } + import perspective from "kute.js/src/interpolation/perspective"; + import translate3d from "kute.js/src/interpolation/translate3d"; + import rotate3d from "kute.js/src/interpolation/rotate3d"; + import translate from "kute.js/src/interpolation/translate"; + import rotate from "kute.js/src/interpolation/rotate"; + import scale from "kute.js/src/interpolation/scale"; + import skew from "kute.js/src/interpolation/skew"; +} +declare module "kute.js/src/components/transformFunctions" { + export default TransformFunctions; + namespace TransformFunctions { + export const component: string; + export const property: string; + export { supportedTransformProperties as subProperties }; + export { defaultTransformValues as defaultValues }; + export { transformFunctions as functions }; + export namespace Interpolate { + export { perspective }; + export { translate3d }; + export { rotate3d }; + export { translate }; + export { rotate }; + export { scale }; + export { skew }; + } + } + const supportedTransformProperties: string[]; + namespace defaultTransformValues { + const perspective_1: number; + export { perspective_1 as perspective }; + const translate3d_1: number[]; + export { translate3d_1 as translate3d }; + export const translateX: number; + export const translateY: number; + export const translateZ: number; + const translate_1: number[]; + export { translate_1 as translate }; + const rotate3d_1: number[]; + export { rotate3d_1 as rotate3d }; + export const rotateX: number; + export const rotateY: number; + export const rotateZ: number; + const rotate_1: number; + export { rotate_1 as rotate }; + export const skewX: number; + export const skewY: number; + const skew_1: number[]; + export { skew_1 as skew }; + const scale_1: number; + export { scale_1 as scale }; + } + namespace transformFunctions { + export { getTransform as prepareStart }; + export { prepareTransform as prepareProperty }; + export { onStartTransform as onStart }; + export { crossCheckTransform as crossCheck }; + } + import perspective from "kute.js/src/interpolation/perspective"; + import translate3d from "kute.js/src/interpolation/translate3d"; + import rotate3d from "kute.js/src/interpolation/rotate3d"; + import translate from "kute.js/src/interpolation/translate"; + import rotate from "kute.js/src/interpolation/rotate"; + import scale from "kute.js/src/interpolation/scale"; + import skew from "kute.js/src/interpolation/skew"; + /** + * Returns the current property inline style. + * @param {string} tweenProp the property name + * @returns {string} inline style for property + */ + function getTransform(tweenProp: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformFObject} the property tween object + */ + function prepareTransform(_: string, obj: { + [x: string]: string | number | (string | number)[]; + }): KUTE.transformFObject; + import { onStartTransform } from "kute.js/src/components/transformFunctionsBase"; + /** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ + function crossCheckTransform(tweenProp: string): void; +} +declare module "kute.js/src/util/transformProperty" { + export default transformProperty; + /** the `transform` string for legacy browsers */ + const transformProperty: string; +} +declare module "kute.js/src/process/getInlineStyleLegacy" { + /** + * getInlineStyle + * + * Returns the transform style for element from cssText. + * Used by for the `.to()` static method on legacy browsers. + * + * @param {Element} el target element + * @returns {object} a transform object + */ + export default function getInlineStyleLegacy(el: Element): object; +} +declare module "kute.js/src/util/supportLegacyTransform" { + export default supportTransform; + /** check if transform is supported via prefixed property */ + const supportTransform: boolean; +} +declare module "kute.js/src/components/transformLegacyBase" { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + export function onStartLegacyTransform(tweenProp: string): void; + export default BaseLegacyTransform; + namespace BaseLegacyTransform { + const component: string; + const property: string; + namespace functions { + export { onStartLegacyTransform as onStart }; + } + namespace Interpolate { + export { perspective }; + export { translate3d }; + export { rotate3d }; + export { translate }; + export { rotate }; + export { scale }; + export { skew }; + } + namespace Util { + export { transformProperty }; + } + } + import perspective from "kute.js/src/interpolation/perspective"; + import translate3d from "kute.js/src/interpolation/translate3d"; + import rotate3d from "kute.js/src/interpolation/rotate3d"; + import translate from "kute.js/src/interpolation/translate"; + import rotate from "kute.js/src/interpolation/rotate"; + import scale from "kute.js/src/interpolation/scale"; + import skew from "kute.js/src/interpolation/skew"; + import transformProperty from "kute.js/src/util/transformProperty"; +} +declare module "kute.js/src/components/transformLegacy" { + export default transformLegacyComponent; + namespace transformLegacyComponent { + export const component: string; + export const property: string; + export { legacyTransformProperties as subProperties }; + export { legacyTransformValues as defaultValues }; + export { transformLegacyFunctions as functions }; + export namespace Interpolate { + export { perspective }; + export { translate3d }; + export { rotate3d }; + export { translate }; + export { rotate }; + export { scale }; + export { skew }; + } + export const Util: string[]; + } + const legacyTransformProperties: string[]; + namespace legacyTransformValues { + const perspective_1: number; + export { perspective_1 as perspective }; + const translate3d_1: number[]; + export { translate3d_1 as translate3d }; + export const translateX: number; + export const translateY: number; + export const translateZ: number; + const translate_1: number[]; + export { translate_1 as translate }; + const rotate3d_1: number[]; + export { rotate3d_1 as rotate3d }; + export const rotateX: number; + export const rotateY: number; + export const rotateZ: number; + const rotate_1: number; + export { rotate_1 as rotate }; + export const skewX: number; + export const skewY: number; + const skew_1: number[]; + export { skew_1 as skew }; + const scale_1: number; + export { scale_1 as scale }; + } + namespace transformLegacyFunctions { + export { getLegacyTransform as prepareStart }; + export { prepareLegacyTransform as prepareProperty }; + export { onStartLegacyTransform as onStart }; + export { crossCheckLegacyTransform as crossCheck }; + } + import perspective from "kute.js/src/interpolation/perspective"; + import translate3d from "kute.js/src/interpolation/translate3d"; + import rotate3d from "kute.js/src/interpolation/rotate3d"; + import translate from "kute.js/src/interpolation/translate"; + import rotate from "kute.js/src/interpolation/rotate"; + import scale from "kute.js/src/interpolation/scale"; + import skew from "kute.js/src/interpolation/skew"; + /** + * Returns the current property inline style. + * @param {string} tweenProperty the property name + * @returns {string} inline style for property + */ + function getLegacyTransform(tweenProperty: string): string; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformFObject} the property tween object + */ + function prepareLegacyTransform(_: string, obj: { + [x: string]: string | number | (string | number)[]; + }): KUTE.transformFObject; + import { onStartLegacyTransform } from "kute.js/src/components/transformLegacyBase"; + /** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ + function crossCheckLegacyTransform(tweenProp: string): void; +} +declare module "kute.js/src/interpolation/arrays" { + /** + * Array Interpolation Function. + * + * @param {number[]} a start array + * @param {number[]} b end array + * @param {number} v progress + * @returns {number[]} the resulting array + */ + export default function arrays(a: number[], b: number[], v: number): number[]; +} +declare module "kute.js/src/components/transformMatrixBase" { + export namespace onStartTransform { + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + function transform(tweenProp: string): void; + /** + * Sets the property update function. + * @param {string} tweenProp the property name + */ + function transform(tweenProp: string): void; + /** + * onStartTransform.CSS3Matrix + * + * Sets the update function for the property. + * @param {string} prop the property name + */ + function CSS3Matrix(prop: string): void; + /** + * onStartTransform.CSS3Matrix + * + * Sets the update function for the property. + * @param {string} prop the property name + */ + function CSS3Matrix(prop: string): void; + } + export namespace TransformMatrixBase { + export { matrixComponent as component }; + export const property: string; + export namespace functions { + export { onStartTransform as onStart }; + } + export namespace Interpolate { + export { numbers as perspective }; + export { arrays as translate3d }; + export { arrays as rotate3d }; + export { arrays as skew }; + export { arrays as scale3d }; + } + } + export default TransformMatrixBase; + const matrixComponent: "transformMatrixBase"; + import numbers from "kute.js/src/interpolation/numbers"; + import arrays from "kute.js/src/interpolation/arrays"; +} +declare module "kute.js/src/components/transformMatrix" { + export default matrixTransform; + namespace matrixTransform { + export { matrixComponent as component }; + export const property: string; + export namespace defaultValue { + const perspective: number; + const translate3d: number[]; + const translateX: number; + const translateY: number; + const translateZ: number; + const rotate3d: number[]; + const rotateX: number; + const rotateY: number; + const rotateZ: number; + const skew: number[]; + const skewX: number; + const skewY: number; + const scale3d: number[]; + const scaleX: number; + const scaleY: number; + const scaleZ: number; + } + export { matrixFunctions as functions }; + export namespace Interpolate { + export { numbers as perspective }; + export { arrays as translate3d }; + export { arrays as rotate3d }; + export { arrays as skew }; + export { arrays as scale3d }; + } + } + const matrixComponent: "transformMatrix"; + namespace matrixFunctions { + export { getTransform as prepareStart }; + export { prepareTransform as prepareProperty }; + export { onStartTransform as onStart }; + export { onCompleteTransform as onComplete }; + export { crossCheckTransform as crossCheck }; + } + import numbers from "kute.js/src/interpolation/numbers"; + import arrays from "kute.js/src/interpolation/arrays"; + /** + * Returns the current transform object. + * @param {string} _ the property name + * @param {string} value the property value + * @returns {KUTE.transformMObject} transform object + */ + function getTransform(_: string, value: string): KUTE.transformMObject; + /** + * Returns the property tween object. + * @param {string} _ the property name + * @param {Object} obj the property value + * @returns {KUTE.transformMObject} the property tween object + */ + function prepareTransform(_: string, value: any): KUTE.transformMObject; + import { onStartTransform } from "kute.js/src/components/transformMatrixBase"; + /** + * Sets the end values for the next `to()` method call. + * @param {string} tweenProp the property name + */ + function onCompleteTransform(tweenProp: string): void; + /** + * Prepare tween object in advance for `to()` method. + * @param {string} tweenProp the property name + */ + function crossCheckTransform(tweenProp: string): void; +} +declare module "kute.js/src/objects/tweens" { + export default Tweens; + const Tweens: any[]; +} +declare module "kute.js/src/core/add" { + export default add; + /** + * KUTE.add(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + function add(tw: KUTE.Tween): number; +} +declare module "kute.js/src/core/getAll" { + export default getAll; + /** + * KUTE.add(Tween) + * + * @return {KUTE.Tween[]} tw a new tween to add + */ + function getAll(): KUTE.Tween[]; +} +declare module "kute.js/src/core/remove" { + export default remove; + /** + * KUTE.remove(Tween) + * + * @param {KUTE.Tween} tw a new tween to add + */ + function remove(tw: KUTE.Tween): void; +} +declare module "kute.js/src/core/removeAll" { + export default removeAll; + /** + * KUTE.removeAll() + */ + function removeAll(): void; +} +declare module "kute.js/src/objects/globalObject" { + export default globalObject; + const globalObject: {}; +} +declare module "kute.js/src/util/now" { + export default now; + function now(): number; +} +declare module "kute.js/src/core/render" { + export function stop(): void; + export default Render; + export let Tick: number; + /** + * + * @param {number | Date} time + */ + export function Ticker(time: number | Date): void; + namespace Render { + export { Tick }; + export { Ticker }; + export { Tweens }; + export { Time }; + } + import Tweens from "kute.js/src/objects/tweens"; + namespace Time { + export { now }; + } + import now from "kute.js/src/util/now"; +} +declare module "kute.js/src/core/linkInterpolation" { + /** + * linkInterpolation + * @this {KUTE.Tween} + */ + export default function linkInterpolation(): void; +} +declare module "kute.js/src/core/internals" { + export default internals; + namespace internals { + export { add }; + export { remove }; + export { getAll }; + export { removeAll }; + export { stop }; + export { linkInterpolation }; + } + import add from "kute.js/src/core/add"; + import remove from "kute.js/src/core/remove"; + import getAll from "kute.js/src/core/getAll"; + import removeAll from "kute.js/src/core/removeAll"; + import { stop } from "kute.js/src/core/render"; + import linkInterpolation from "kute.js/src/core/linkInterpolation"; +} +declare module "kute.js/src/core/queueStart" { + export default function queueStart(): void; +} +declare module "kute.js/src/easing/easing-base" { + export default Easing; + namespace Easing { + const linear: KUTE.easingFunction; + const easingQuadraticIn: KUTE.easingFunction; + const easingQuadraticOut: KUTE.easingFunction; + const easingQuadraticInOut: KUTE.easingFunction; + const easingCubicIn: KUTE.easingFunction; + const easingCubicOut: KUTE.easingFunction; + const easingCubicInOut: KUTE.easingFunction; + const easingCircularIn: KUTE.easingFunction; + const easingCircularOut: KUTE.easingFunction; + const easingCircularInOut: KUTE.easingFunction; + const easingBackIn: KUTE.easingFunction; + const easingBackOut: KUTE.easingFunction; + const easingBackInOut: KUTE.easingFunction; + } +} +declare module "kute.js/src/easing/easing-bezier" { + export default Easing; + namespace Easing { + const linear: CubicBezier; + const easingSinusoidalIn: CubicBezier; + const easingSinusoidalOut: CubicBezier; + const easingSinusoidalInOut: CubicBezier; + const easingQuadraticIn: CubicBezier; + const easingQuadraticOut: CubicBezier; + const easingQuadraticInOut: CubicBezier; + const easingCubicIn: CubicBezier; + const easingCubicOut: CubicBezier; + const easingCubicInOut: CubicBezier; + const easingQuarticIn: CubicBezier; + const easingQuarticOut: CubicBezier; + const easingQuarticInOut: CubicBezier; + const easingQuinticIn: CubicBezier; + const easingQuinticOut: CubicBezier; + const easingQuinticInOut: CubicBezier; + const easingExponentialIn: CubicBezier; + const easingExponentialOut: CubicBezier; + const easingExponentialInOut: CubicBezier; + const easingCircularIn: CubicBezier; + const easingCircularOut: CubicBezier; + const easingCircularInOut: CubicBezier; + const easingBackIn: CubicBezier; + const easingBackOut: CubicBezier; + const easingBackInOut: CubicBezier; + } + import CubicBezier from "cubic-bezier-easing"; +} +declare module "kute.js/src/easing/easing" { + export default Easing; + namespace Easing { + const linear: KUTE.easingFunction; + const easingSinusoidalIn: KUTE.easingFunction; + const easingSinusoidalOut: KUTE.easingFunction; + const easingSinusoidalInOut: KUTE.easingFunction; + const easingQuadraticIn: KUTE.easingFunction; + const easingQuadraticOut: KUTE.easingFunction; + const easingQuadraticInOut: KUTE.easingFunction; + const easingCubicIn: KUTE.easingFunction; + const easingCubicOut: KUTE.easingFunction; + const easingCubicInOut: KUTE.easingFunction; + const easingQuarticIn: KUTE.easingFunction; + const easingQuarticOut: KUTE.easingFunction; + const easingQuarticInOut: KUTE.easingFunction; + const easingQuinticIn: KUTE.easingFunction; + const easingQuinticOut: KUTE.easingFunction; + const easingQuinticInOut: KUTE.easingFunction; + const easingCircularIn: KUTE.easingFunction; + const easingCircularOut: KUTE.easingFunction; + const easingCircularInOut: KUTE.easingFunction; + const easingExponentialIn: KUTE.easingFunction; + const easingExponentialOut: KUTE.easingFunction; + const easingExponentialInOut: KUTE.easingFunction; + const easingBackIn: KUTE.easingFunction; + const easingBackOut: KUTE.easingFunction; + const easingBackInOut: KUTE.easingFunction; + const easingElasticIn: KUTE.easingFunction; + const easingElasticOut: KUTE.easingFunction; + const easingElasticInOut: KUTE.easingFunction; + const easingBounceIn: KUTE.easingFunction; + const easingBounceOut: KUTE.easingFunction; + const easingBounceInOut: KUTE.easingFunction; + } +} +declare module "kute.js/src/tween/tweenCollection" { + /** + * The static method creates a new `Tween` object for each `HTMLElement` + * from and `Array`, `HTMLCollection` or `NodeList`. + */ + export default class TweenCollection { + /** + * + * @param {Element[] | HTMLCollection | NodeList} els target elements + * @param {KUTE.tweenProps} vS the start values + * @param {KUTE.tweenProps} vE the end values + * @param {KUTE.tweenOptions} Options tween options + * @returns {TweenCollection} the Tween object collection + */ + constructor(els: Element[] | HTMLCollection | NodeList, vS: KUTE.tweenProps, vE: KUTE.tweenProps, Options: KUTE.tweenOptions); + /** @type {KUTE.twCollection[]} */ + tweens: KUTE.twCollection[]; + /** @type {number?} */ + length: number | null; + /** + * Starts tweening, all targets + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ + start(time: number | null): TweenCollection; + /** + * Stops tweening, all targets and their chains + * @returns {TweenCollection} this instance + */ + stop(): TweenCollection; + /** + * Pause tweening, all targets + * @returns {TweenCollection} this instance + */ + pause(): TweenCollection; + /** + * Resume tweening, all targets + * @returns {TweenCollection} this instance + */ + resume(): TweenCollection; + /** + * Schedule another tween or collection to start after + * this one is complete. + * @param {number?} args the tween start time + * @returns {TweenCollection} this instance + */ + chain(args: number | null): TweenCollection; + /** + * Check if any tween instance is playing + * @param {number?} time the tween start time + * @returns {TweenCollection} this instance + */ + playing(): TweenCollection; + /** + * Remove all tweens in the collection + */ + removeTweens(): void; + /** + * Returns the maximum animation duration + * @returns {number} this instance + */ + getMaxDuration(): number; + } +} +declare module "kute.js/src/interface/allFromTo" { + /** + * The `KUTE.allFromTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at a given state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {TweenCollection} the Tween object collection + */ + export default function allFromTo(elements: Element[] | HTMLCollection | NodeList, startObject: KUTE.tweenProps, endObject: KUTE.tweenProps, optionsObj: KUTE.tweenOptions): TweenCollection; + import TweenCollection from "kute.js/src/tween/tweenCollection"; +} +declare module "kute.js/src/interface/allTo" { + /** + * The `KUTE.allTo()` static method creates a new Tween object + * for multiple `HTMLElement`s, `HTMLCollection` or `NodeListat` + * at their current state. + * + * @param {Element[] | HTMLCollection | NodeList} elements target elements + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenProps} optionsObj progress + * @returns {TweenCollection} the Tween object collection + */ + export default function allTo(elements: Element[] | HTMLCollection | NodeList, endObject: KUTE.tweenProps, optionsObj: KUTE.tweenProps): TweenCollection; + import TweenCollection from "kute.js/src/tween/tweenCollection"; +} +declare module "kute.js/src/interface/fromTo" { + /** + * The `KUTE.fromTo()` static method returns a new Tween object + * for a single `HTMLElement` at a given state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} startObject + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ + export default function fromTo(element: Element, startObject: KUTE.tweenProps, endObject: KUTE.tweenProps, optionsObj: KUTE.tweenOptions): KUTE.Tween; +} +declare module "kute.js/src/interface/to" { + /** + * The `KUTE.to()` static method returns a new Tween object + * for a single `HTMLElement` at its current state. + * + * @param {Element} element target element + * @param {KUTE.tweenProps} endObject + * @param {KUTE.tweenOptions} optionsObj tween options + * @returns {KUTE.Tween} the resulting Tween object + */ + export default function to(element: Element, endObject: KUTE.tweenProps, optionsObj: KUTE.tweenOptions): KUTE.Tween; +} +declare module "kute.js/src/interpolation/skewX" { + /** + * SkewX Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated skewX + */ + export default function skewX(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/interpolation/skewY" { + /** + * SkewY Interpolation Function. + * + * @param {number} a start angle + * @param {number} b end angle + * @param {string} u unit, usually `deg` degrees + * @param {number} v progress + * @returns {string} the interpolated skewY + */ + export default function skewY(a: number, b: number, u: string, v: number): string; +} +declare module "kute.js/src/objects/componentsBase" { + export default Components; + namespace Components { + const Transform: Animation; + const BoxModel: Animation; + const Opacity: Animation; + } + import Animation from "kute.js/src/animation/animationBase"; +} +declare module "kute.js/src/objects/componentsDefault" { + export default Components; + namespace Components { + export { EssentialBoxModel }; + export { ColorsProperties }; + export { HTMLAttributes }; + export { OpacityProperty }; + export { TextWriteProp }; + export { TransformFunctions }; + export { SVGDraw }; + export { SVGMorph }; + } + import EssentialBoxModel from "kute.js/src/components/boxModelEssential"; + import ColorsProperties from "kute.js/src/components/colorProperties"; + import HTMLAttributes from "kute.js/src/components/htmlAttributes"; + import OpacityProperty from "kute.js/src/components/opacityProperty"; + import TextWriteProp from "kute.js/src/components/textWrite"; + import TransformFunctions from "kute.js/src/components/transformFunctions"; + import SVGDraw from "kute.js/src/components/svgDraw"; + import SVGMorph from "kute.js/src/components/svgMorph"; +} +declare module "kute.js/src/objects/componentsExtra" { + export default Components; + namespace Components { + export { BackgroundPosition }; + export { BorderRadius }; + export { BoxModel }; + export { ClipProperty }; + export { ColorProperties }; + export { FilterEffects }; + export { HTMLAttributes }; + export { OpacityProperty }; + export { SVGDraw }; + export { SVGCubicMorph }; + export { SVGTransform }; + export { ScrollProperty }; + export { ShadowProperties }; + export { TextProperties }; + export { TextWriteProperties }; + export { MatrixTransform }; + } + import BackgroundPosition from "kute.js/src/components/backgroundPosition"; + import BorderRadius from "kute.js/src/components/borderRadius"; + import BoxModel from "kute.js/src/components/boxModel"; + import ClipProperty from "kute.js/src/components/clipProperty"; + import ColorProperties from "kute.js/src/components/colorProperties"; + import FilterEffects from "kute.js/src/components/filterEffects"; + import HTMLAttributes from "kute.js/src/components/htmlAttributes"; + import OpacityProperty from "kute.js/src/components/opacityProperty"; + import SVGDraw from "kute.js/src/components/svgDraw"; + import SVGCubicMorph from "kute.js/src/components/svgCubicMorph"; + import SVGTransform from "kute.js/src/components/svgTransform"; + import ScrollProperty from "kute.js/src/components/scrollProperty"; + import ShadowProperties from "kute.js/src/components/shadowProperties"; + import TextProperties from "kute.js/src/components/textProperties"; + import TextWriteProperties from "kute.js/src/components/textWrite"; + import MatrixTransform from "kute.js/src/components/transformMatrix"; +} +declare module "kute.js/src/objects/objects" { + export default Objects; + namespace Objects { + export { supportedProperties }; + export { defaultValues }; + export { defaultOptions }; + export { prepareProperty }; + export { prepareStart }; + export { crossCheck }; + export { onStart }; + export { onComplete }; + export { linkProperty }; + } + import supportedProperties from "kute.js/src/objects/supportedProperties"; + import defaultValues from "kute.js/src/objects/defaultValues"; + import defaultOptions from "kute.js/src/objects/defaultOptions"; + import prepareProperty from "kute.js/src/objects/prepareProperty"; + import prepareStart from "kute.js/src/objects/prepareStart"; + import crossCheck from "kute.js/src/objects/crossCheck"; + import onStart from "kute.js/src/objects/onStart"; + import onComplete from "kute.js/src/objects/onComplete"; + import linkProperty from "kute.js/src/objects/linkProperty"; +} +declare module "kute.js/src/objects/objectsBase" { + export default Objects; + namespace Objects { + export { defaultOptions }; + export { linkProperty }; + export { onStart }; + export { onComplete }; + } + import defaultOptions from "kute.js/src/objects/defaultOptions"; + import linkProperty from "kute.js/src/objects/linkProperty"; + import onStart from "kute.js/src/objects/onStart"; + import onComplete from "kute.js/src/objects/onComplete"; +} +declare module "kute.js/src/process/prepareObject" { + /** + * prepareObject + * + * Returns all processed valuesStart / valuesEnd. + * + * @param {Element} obj the values start/end object + * @param {string} fn toggles between the two + */ + export default function prepareObject(obj: Element, fn: string): void; +} +declare module "kute.js/src/process/getStartValues" { + /** + * getStartValues + * + * Returns the start values for to() method. + * Used by for the `.to()` static method. + * + * @this {KUTE.Tween} the tween instance + */ + export default function getStartValues(): void; + export default class getStartValues { + valuesStart: {}; + } +} +declare module "kute.js/src/process/process" { + namespace _default { + export { getInlineStyle }; + export { getStyleForProperty }; + export { getStartValues }; + export { prepareObject }; + } + export default _default; + import getInlineStyle from "kute.js/src/process/getInlineStyle"; + import getStyleForProperty from "kute.js/src/process/getStyleForProperty"; + import getStartValues from "kute.js/src/process/getStartValues"; + import prepareObject from "kute.js/src/process/prepareObject"; +} +declare module "kute.js/src/tween/tweenBase" { + /** + * The `TweenBase` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * `TweenBase` is meant to be used with pre-processed values. + */ + export default class TweenBase { + /** + * @param {Element} targetElement the target element + * @param {KUTE.tweenProps} startObject the start values + * @param {KUTE.tweenProps} endObject the end values + * @param {KUTE.tweenOptions} opsObject the end values + * @returns {TweenBase} the resulting Tween object + */ + constructor(targetElement: Element, startObject: KUTE.tweenProps, endObject: KUTE.tweenProps, opsObject: KUTE.tweenOptions); + element: Element; + /** @type {boolean} */ + playing: boolean; + /** @type {number?} */ + _startTime: number | null; + /** @type {boolean} */ + _startFired: boolean; + valuesEnd: KUTE.tweenProps; + valuesStart: KUTE.tweenProps; + _resetStart: any; + /** @type {KUTE.easingOption} */ + _easing: KUTE.easingOption; + /** @type {number} */ + _duration: number; + /** @type {number} */ + _delay: number; + /** + * Starts tweening + * @param {number?} time the tween start time + * @returns {TweenBase} this instance + */ + start(time: number | null): TweenBase; + /** + * Stops tweening + * @returns {TweenBase} this instance + */ + stop(): TweenBase; + /** + * Trigger internal completion callbacks. + */ + close(): void; + /** + * Schedule another tween instance to start once this one completes. + * @param {KUTE.chainOption} args the tween animation start time + * @returns {TweenBase} this instance + */ + chain(args: KUTE.chainOption): TweenBase; + _chain: any; + /** + * Stop tweening the chained tween instances. + */ + stopChainedTweens(): void; + /** + * Update the tween on each tick. + * @param {number} time the tick time + * @returns {boolean} this instance + */ + update(time: number): boolean; + } +} +declare module "kute.js/src/tween/tween" { + /** + * The `KUTE.Tween()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor adds additional functionality and is the default + * Tween object constructor in KUTE.js. + */ + export default class Tween extends TweenBase { + /** @type {boolean} */ + paused: boolean; + /** @type {number?} */ + _pauseTime: number | null; + /** @type {number?} */ + _repeat: number | null; + /** @type {number?} */ + _repeatDelay: number | null; + /** @type {number?} */ + _repeatOption: number | null; + /** @type {KUTE.tweenProps} */ + valuesRepeat: KUTE.tweenProps; + /** @type {boolean} */ + _yoyo: boolean; + /** @type {boolean} */ + _reversed: boolean; + /** + * Resume tweening + * @returns {Tween} this instance + */ + resume(): Tween; + /** + * Pause tweening + * @returns {Tween} this instance + */ + pause(): Tween; + /** + * Reverses start values with end values + */ + reverse(): void; + } + import TweenBase from "kute.js/src/tween/tweenBase"; +} +declare module "kute.js/src/tween/tweenExtra" { + /** + * The `KUTE.TweenExtra()` constructor creates a new `Tween` object + * for a single `HTMLElement` and returns it. + * + * This constructor is intended for experiments or testing of new features. + */ + export default class TweenExtra extends Tween { + /** + * Method to add callbacks on the fly. + * @param {string} name callback name + * @param {Function} fn callback function + * @returns {TweenExtra} + */ + on(name: string, fn: Function): TweenExtra; + /** + * Method to set options on the fly. + * * accepting [repeat,yoyo,delay,repeatDelay,easing] + * + * @param {string} option the tick time + * @param {string | number | number[]} value the tick time + * @returns {TweenExtra} + */ + option(option: string, value: string | number | number[]): TweenExtra; + } + import Tween from "kute.js/src/tween/tween"; +} +declare module "kute.js/src/util/degToRad" { + export default degToRad; + /** + * degToRad + * + * Returns the value of a degree angle in radian. + * + * @param {number} a the degree angle + * @returns {number} the radian angle + */ + function degToRad(a: number): number; +} +declare module "kute.js/src/util/fromJSON" { + export default fromJSON; + /** + * fromJSON + * + * Returns the {valuesStart, valuesEnd} objects + * from a Tween instance. + * + * @param {string} str the JSON string + * @returns {JSON} the JSON object + */ + function fromJSON(str: string): JSON; +} +declare module "kute.js/src/util/progressBar" { + /** + * ProgressBar + * + * @class + * A progress bar utility for KUTE.js that will connect + * a target ``. with a Tween instance + * allowing it to control the progress of the Tween. + */ + export default class ProgressBar { + /** + * @constructor + * @param {HTMLElement} el target or string selector + * @param {KUTE.Tween} multi when true returns an array of elements + */ + constructor(element: any, tween: any); + element: HTMLInputElement; + updateBar(): void; + toggleEvents(action: any): void; + updateTween(): void; + moveAction(): void; + downAction(): void; + upAction(): void; + } +} +declare module "kute.js/src/util/radToDeg" { + export default radToDeg; + /** + * radToDeg + * + * Returns the value of a radian in degrees. + * + * @param {number} a the value in radian + * @returns {number} the value in degrees + */ + function radToDeg(a: number): number; +} +declare module "kute.js/src/util/rgbToHex" { + export default rgbToHex; + /** + * rgbToHex + * + * Converts an {r,g,b} color `Object` into #HEX string color format. + * Webkit browsers ignore HEX, always use RGB/RGBA. + * + * @param {number} r the red value + * @param {number} g the green value + * @param {number} b the blue value + * @returns {string} the #HEX string + */ + function rgbToHex(r: number, g: number, b: number): string; +} +declare module "kute.js/src/util/toJSON" { + export default toJSON; + /** + * toJSON + * + * Returns the {valuesStart, valuesEnd} objects + * from a Tween instance in JSON string format. + * + * @param {KUTE.Tween} tween the Tween instance + * @returns {string} the JSON string + */ + function toJSON(tween: KUTE.Tween): string; +} +declare module "kute.js/src/util/version" { + export default Version; + /** + * A global namespace for library version. + * @type {string} + */ + const Version: string; +} +declare module "kute.js/types/more/kute" { + export { default as Animation } from "kute.js/src/animation/animation"; + export { default as AnimationBase } from "kute.js/src/animation/animationBase"; + export { default as AnimationDevelopment } from "kute.js/src/animation/animationDevelopment"; + export { default as backgroundPosition } from "kute.js/src/components/backgroundPosition"; + export { default as backgroundPositionBase } from "kute.js/src/components/backgroundPositionBase"; + export { default as borderRadius } from "kute.js/src/components/borderRadius"; + export { default as borderRadiusBase } from "kute.js/src/components/borderRadiusBase"; + export { default as boxModel } from "kute.js/src/components/boxModel"; + export { default as boxModelBase } from "kute.js/src/components/boxModelBase"; + export { default as boxModelEssential } from "kute.js/src/components/boxModelEssential"; + export { default as clipProperty } from "kute.js/src/components/clipProperty"; + export { default as clipPropertyBase } from "kute.js/src/components/clipPropertyBase"; + export { default as colorProperties } from "kute.js/src/components/colorProperties"; + export { default as colorPropertiesBase } from "kute.js/src/components/colorPropertiesBase"; + export { default as crossBrowserMove } from "kute.js/src/components/crossBrowserMove"; + export { default as filterEffects } from "kute.js/src/components/filterEffects"; + export { default as filterEffectsBase } from "kute.js/src/components/filterEffectsBase"; + export { default as htmlAttributes } from "kute.js/src/components/htmlAttributes"; + export { default as htmlAttributesBase } from "kute.js/src/components/htmlAttributesBase"; + export { default as opacityProperty } from "kute.js/src/components/opacityProperty"; + export { default as opacityPropertyBase } from "kute.js/src/components/opacityPropertyBase"; + export { default as scrollProperty } from "kute.js/src/components/scrollProperty"; + export { default as scrollPropertyBase } from "kute.js/src/components/scrollPropertyBase"; + export { default as shadowProperties } from "kute.js/src/components/shadowProperties"; + export { default as shadowPropertiesBase } from "kute.js/src/components/shadowPropertiesBase"; + export { default as svgCubicMorph } from "kute.js/src/components/svgCubicMorph"; + export { default as svgCubicMorphBase } from "kute.js/src/components/svgCubicMorphBase"; + export { default as svgDraw } from "kute.js/src/components/svgDraw"; + export { default as svgDrawBase } from "kute.js/src/components/svgDrawBase"; + export { default as svgMorph } from "kute.js/src/components/svgMorph"; + export { default as svgMorphBase } from "kute.js/src/components/svgMorphBase"; + export { default as svgTransform } from "kute.js/src/components/svgTransform"; + export { default as svgTransformBase } from "kute.js/src/components/svgTransformBase"; + export { default as textProperties } from "kute.js/src/components/textProperties"; + export { default as textPropertiesBase } from "kute.js/src/components/textPropertiesBase"; + export { default as textWrite } from "kute.js/src/components/textWrite"; + export { default as textWriteBase } from "kute.js/src/components/textWriteBase"; + export { default as transformFunctions } from "kute.js/src/components/transformFunctions"; + export { default as transformFunctionsBase } from "kute.js/src/components/transformFunctionsBase"; + export { default as transformLegacy } from "kute.js/src/components/transformLegacy"; + export { default as transformLegacyBase } from "kute.js/src/components/transformLegacyBase"; + export { default as transformMatrix } from "kute.js/src/components/transformMatrix"; + export { default as transformMatrixBase } from "kute.js/src/components/transformMatrixBase"; + export { default as add } from "kute.js/src/core/add"; + export { default as getAll } from "kute.js/src/core/getAll"; + export { default as Internals } from "kute.js/src/core/internals"; + export { default as linkInterpolation } from "kute.js/src/core/linkInterpolation"; + export { default as queueStart } from "kute.js/src/core/queueStart"; + export { default as remove } from "kute.js/src/core/remove"; + export { default as removeAll } from "kute.js/src/core/removeAll"; + export { default as Render } from "kute.js/src/core/render"; + export { default as EasingBase } from "kute.js/src/easing/easing-base"; + export { default as EasingBezier } from "kute.js/src/easing/easing-bezier"; + export { default as Easing } from "kute.js/src/easing/easing"; + export { default as allFromTo } from "kute.js/src/interface/allFromTo"; + export { default as allTo } from "kute.js/src/interface/allTo"; + export { default as fromTo } from "kute.js/src/interface/fromTo"; + export { default as to } from "kute.js/src/interface/to"; + export { default as arrays } from "kute.js/src/interpolation/arrays"; + export { default as colors } from "kute.js/src/interpolation/colors"; + export { default as coords } from "kute.js/src/interpolation/coords"; + export { default as numbers } from "kute.js/src/interpolation/numbers"; + export { default as perspective } from "kute.js/src/interpolation/perspective"; + export { default as rotate } from "kute.js/src/interpolation/rotate"; + export { default as rotate3d } from "kute.js/src/interpolation/rotate3d"; + export { default as scale } from "kute.js/src/interpolation/scale"; + export { default as skew } from "kute.js/src/interpolation/skew"; + export { default as skewX } from "kute.js/src/interpolation/skewX"; + export { default as skewY } from "kute.js/src/interpolation/skewY"; + export { default as translate } from "kute.js/src/interpolation/translate"; + export { default as translate3d } from "kute.js/src/interpolation/translate3d"; + export { default as units } from "kute.js/src/interpolation/units"; + export { default as ComponentsBase } from "kute.js/src/objects/componentsBase"; + export { default as ComponentsDefault } from "kute.js/src/objects/componentsDefault"; + export { default as ComponentsExtra } from "kute.js/src/objects/componentsExtra"; + export { default as connect } from "kute.js/src/objects/connect"; + export { default as crossCheck } from "kute.js/src/objects/crossCheck"; + export { default as defaultOptions } from "kute.js/src/objects/defaultOptions"; + export { default as defaultValues } from "kute.js/src/objects/defaultValues"; + export { default as globalObject } from "kute.js/src/objects/globalObject"; + export { default as Interpolate } from "kute.js/src/objects/interpolate"; + export { default as KEC } from "kute.js/src/objects/kute"; + export { default as linkProperty } from "kute.js/src/objects/linkProperty"; + export { default as Objects } from "kute.js/src/objects/objects"; + export { default as ObjectsBase } from "kute.js/src/objects/objectsBase"; + export { default as onComplete } from "kute.js/src/objects/onComplete"; + export { default as onStart } from "kute.js/src/objects/onStart"; + export { default as prepareProperty } from "kute.js/src/objects/prepareProperty"; + export { default as prepareStart } from "kute.js/src/objects/prepareStart"; + export { default as supportedProperties } from "kute.js/src/objects/supportedProperties"; + export { default as Tweens } from "kute.js/src/objects/tweens"; + export { default as Util } from "kute.js/src/objects/util"; + export { default as getInlineStyle } from "kute.js/src/process/getInlineStyle"; + export { default as getInlineStyleLegacy } from "kute.js/src/process/getInlineStyleLegacy"; + export { default as getStartValues } from "kute.js/src/process/getStartValues"; + export { default as getStyleForProperty } from "kute.js/src/process/getStyleForProperty"; + export { default as prepareObject } from "kute.js/src/process/prepareObject"; + export { default as Process } from "kute.js/src/process/process"; + export { default as Tween } from "kute.js/src/tween/tween"; + export { default as TweenBase } from "kute.js/src/tween/tweenBase"; + export { default as TweenCollection } from "kute.js/src/tween/tweenCollection"; + export { default as TweenExtra } from "kute.js/src/tween/tweenExtra"; + export { default as degToRad } from "kute.js/src/util/degToRad"; + export { default as fromJSON } from "kute.js/src/util/fromJSON"; + export { default as getPrefix } from "kute.js/src/util/getPrefix"; + export { default as hexToRGB } from "kute.js/src/util/hexToRGB"; + export { default as now } from "kute.js/src/util/now"; + export { default as ProgressBar } from "kute.js/src/util/progressBar"; + export { default as radToDeg } from "kute.js/src/util/radToDeg"; + export { default as rgbToHex } from "kute.js/src/util/rgbToHex"; + export { default as selector } from "kute.js/src/util/selector"; + export { default as supportLegacyTransform } from "kute.js/src/util/supportLegacyTransform"; + export { default as toJSON } from "kute.js/src/util/toJSON"; + export { default as transformProperty } from "kute.js/src/util/transformProperty"; + export { default as trueColor } from "kute.js/src/util/trueColor"; + export { default as trueDimension } from "kute.js/src/util/trueDimension"; + export { default as trueProperty } from "kute.js/src/util/trueProperty"; + export { default as Version } from "kute.js/src/util/version"; +} diff --git a/types/more/kute.ts b/types/more/kute.ts new file mode 100644 index 0000000..185d333 --- /dev/null +++ b/types/more/kute.ts @@ -0,0 +1,127 @@ +export {default as Animation} from '../../src/animation/animation'; +export {default as AnimationBase} from '../../src/animation/animationBase'; +export {default as AnimationDevelopment} from '../../src/animation/animationDevelopment'; + +export {default as backgroundPosition} from '../../src/components/backgroundPosition'; +export {default as backgroundPositionBase} from '../../src/components/backgroundPositionBase'; +export {default as borderRadius} from '../../src/components/borderRadius'; +export {default as borderRadiusBase} from '../../src/components/borderRadiusBase'; +export {default as boxModel} from '../../src/components/boxModel'; +export {default as boxModelBase} from '../../src/components/boxModelBase'; +export {default as boxModelEssential} from '../../src/components/boxModelEssential'; +export {default as clipProperty} from '../../src/components/clipProperty'; +export {default as clipPropertyBase} from '../../src/components/clipPropertyBase'; +export {default as colorProperties} from '../../src/components/colorProperties'; +export {default as colorPropertiesBase} from '../../src/components/colorPropertiesBase'; +export {default as crossBrowserMove} from '../../src/components/crossBrowserMove'; +export {default as filterEffects} from '../../src/components/filterEffects'; +export {default as filterEffectsBase} from '../../src/components/filterEffectsBase'; +export {default as htmlAttributes} from '../../src/components/htmlAttributes'; +export {default as htmlAttributesBase} from '../../src/components/htmlAttributesBase'; +export {default as opacityProperty} from '../../src/components/opacityProperty'; +export {default as opacityPropertyBase} from '../../src/components/opacityPropertyBase'; +export {default as scrollProperty} from '../../src/components/scrollProperty'; +export {default as scrollPropertyBase} from '../../src/components/scrollPropertyBase'; +export {default as shadowProperties} from '../../src/components/shadowProperties'; +export {default as shadowPropertiesBase} from '../../src/components/shadowPropertiesBase'; +export {default as svgCubicMorph} from '../../src/components/svgCubicMorph'; +export {default as svgCubicMorphBase} from '../../src/components/svgCubicMorphBase'; +export {default as svgDraw} from '../../src/components/svgDraw'; +export {default as svgDrawBase} from '../../src/components/svgDrawBase'; +export {default as svgMorph} from '../../src/components/svgMorph'; +export {default as svgMorphBase} from '../../src/components/svgMorphBase'; +export {default as svgTransform} from '../../src/components/svgTransform'; +export {default as svgTransformBase} from '../../src/components/svgTransformBase'; +export {default as textProperties} from '../../src/components/textProperties'; +export {default as textPropertiesBase} from '../../src/components/textPropertiesBase'; +export {default as textWrite} from '../../src/components/textWrite'; +export {default as textWriteBase} from '../../src/components/textWriteBase'; +export {default as transformFunctions} from '../../src/components/transformFunctions'; +export {default as transformFunctionsBase} from '../../src/components/transformFunctionsBase'; +export {default as transformLegacy} from '../../src/components/transformLegacy'; +export {default as transformLegacyBase} from '../../src/components/transformLegacyBase'; +export {default as transformMatrix} from '../../src/components/transformMatrix'; +export {default as transformMatrixBase} from '../../src/components/transformMatrixBase'; + +export {default as add} from '../../src/core/add'; +export {default as getAll} from '../../src/core/getAll'; +export {default as Internals} from '../../src/core/internals'; +export {default as linkInterpolation} from '../../src/core/linkInterpolation'; +export {default as queueStart} from '../../src/core/queueStart'; +export {default as remove} from '../../src/core/remove'; +export {default as removeAll} from '../../src/core/removeAll'; +export {default as Render} from '../../src/core/render'; + +export {default as EasingBase} from '../../src/easing/easing-base'; +export {default as EasingBezier} from '../../src/easing/easing-bezier'; +export {default as Easing} from '../../src/easing/easing'; + +export {default as allFromTo} from '../../src/interface/allFromTo'; +export {default as allTo} from '../../src/interface/allTo'; +export {default as fromTo} from '../../src/interface/fromTo'; +export {default as to} from '../../src/interface/to'; + +export {default as arrays} from '../../src/interpolation/arrays'; +export {default as colors} from '../../src/interpolation/colors'; +export {default as coords} from '../../src/interpolation/coords'; +export {default as numbers} from '../../src/interpolation/numbers'; +export {default as perspective} from '../../src/interpolation/perspective'; +export {default as rotate} from '../../src/interpolation/rotate'; +export {default as rotate3d} from '../../src/interpolation/rotate3d'; +export {default as scale} from '../../src/interpolation/scale'; +export {default as skew} from '../../src/interpolation/skew'; +export {default as skewX} from '../../src/interpolation/skewX'; +export {default as skewY} from '../../src/interpolation/skewY'; +export {default as translate} from '../../src/interpolation/translate'; +export {default as translate3d} from '../../src/interpolation/translate3d'; +export {default as units} from '../../src/interpolation/units'; + +export {default as ComponentsBase} from '../../src/objects/componentsBase'; +export {default as ComponentsDefault} from '../../src/objects/componentsDefault'; +export {default as ComponentsExtra} from '../../src/objects/componentsExtra'; +export {default as connect} from '../../src/objects/connect'; +export {default as crossCheck} from '../../src/objects/crossCheck'; +export {default as defaultOptions} from '../../src/objects/defaultOptions'; +export {default as defaultValues} from '../../src/objects/defaultValues'; +export {default as globalObject} from '../../src/objects/globalObject'; +export {default as Interpolate} from '../../src/objects/interpolate'; +export {default as KEC} from '../../src/objects/kute'; +export {default as linkProperty} from '../../src/objects/linkProperty'; +export {default as Objects} from '../../src/objects/objects'; +export {default as ObjectsBase} from '../../src/objects/objectsBase'; +export {default as onComplete} from '../../src/objects/onComplete'; +export {default as onStart} from '../../src/objects/onStart'; +export {default as prepareProperty} from '../../src/objects/prepareProperty'; +export {default as prepareStart} from '../../src/objects/prepareStart'; +export {default as supportedProperties} from '../../src/objects/supportedProperties'; +export {default as Tweens} from '../../src/objects/tweens'; +export {default as Util} from '../../src/objects/util'; + +export {default as getInlineStyle} from '../../src/process/getInlineStyle'; +export {default as getInlineStyleLegacy} from '../../src/process/getInlineStyleLegacy'; +export {default as getStartValues} from '../../src/process/getStartValues'; +export {default as getStyleForProperty} from '../../src/process/getStyleForProperty'; +export {default as prepareObject} from '../../src/process/prepareObject'; +export {default as Process} from '../../src/process/process'; + +export {default as Tween} from '../../src/tween/tween'; +export {default as TweenBase} from '../../src/tween/tweenBase'; +export {default as TweenCollection} from '../../src/tween/tweenCollection'; +export {default as TweenExtra} from '../../src/tween/tweenExtra'; + +export {default as degToRad} from '../../src/util/degToRad'; +export {default as fromJSON} from '../../src/util/fromJSON'; +export {default as getPrefix} from '../../src/util/getPrefix'; +export {default as hexToRGB} from '../../src/util/hexToRGB'; +export {default as now} from '../../src/util/now'; +export {default as ProgressBar} from '../../src/util/progressBar'; +export {default as radToDeg} from '../../src/util/radToDeg'; +export {default as rgbToHex} from '../../src/util/rgbToHex'; +export {default as selector} from '../../src/util/selector'; +export {default as supportLegacyTransform} from '../../src/util/supportLegacyTransform'; +export {default as toJSON} from '../../src/util/toJSON'; +export {default as transformProperty} from '../../src/util/transformProperty'; +export {default as trueColor} from '../../src/util/trueColor'; +export {default as trueDimension} from '../../src/util/trueDimension'; +export {default as trueProperty} from '../../src/util/trueProperty'; +export {default as Version} from '../../src/util/version'; diff --git a/types/more/types.d.ts b/types/more/types.d.ts new file mode 100644 index 0000000..534bd26 --- /dev/null +++ b/types/more/types.d.ts @@ -0,0 +1,208 @@ +import CubicBezier from "cubic-bezier-easing"; +import Tween from "kute.js/src/tween/tween"; +import TweenBase from "kute.js/src/tween/tweenBase"; +import TweenExtra from "kute.js/src/tween/tweenExtra"; + +// custom types +export type selectorType = Element | Element[] | HTMLCollection | string; + +export type easingFunction = (fn: number) => number; +export type easingOption = string | easingFunction | CubicBezier; + +export declare interface tweenOptions { + /** @default 700 */ + duration?: number; + /** @default 0 */ + delay?: number; + /** @default 0 */ + offset?: number; + /** @default "linear" */ + easing?: easingOption; + /** @default 0 */ + repeat?: number; + /** @default 0 */ + repeatDelay?: number; + /** @default false */ + yoyo?: boolean; + /** @default null */ + resetStart?: any; +} + +export type tweenProps = [string, (string | number | number[])][]; +export type tweenParams = [Element, tweenProps, tweenProps, tweenOptions]; +export type twCollection = (Tween | TweenBase | TweenExtra)[]; +export type chainOption = Tween | TweenBase | twCollection; +export type propValue = number | number[] | [string, number] | [string, number][]; +export type rawValue = string | propValue; +export type interpolationFn = (a: propValue, b: propValue, t: number) => void; +export type prepareStartFn = (a?: string, b?: rawValue) => rawValue; +export type preparePropFn = (a?: string, b?: rawValue) => propValue; +export type onStartPropFn = (tweenProp?: string) => void; + +export interface fullComponent { + component: string; + category?: string; + property?: string; + properties?: string[]; + subProperties?: string[]; + defaultValues?: propValue[]; + defaultValue?: propValue; + defaultOptions?: [string, string | number | number[]][]; + Interpolate?: [string, interpolationFn][]; + functions: { + prepareStart: prepareStartFn; + prepareProperty: preparePropFn; + onStart: () => onStartPropFn; + onComplete?: () => void; + crossCheck?: () => void; + } +} +export interface baseComponent { + component: string; + category?: string; + property?: string; + properties?: string[]; + subProperties?: string[]; + defaultOptions?: [string, string | number | number[]][]; + Interpolate?: [string, interpolationFn][]; + functions: { + onStart: onStartPropFn; + } +} +export interface curveSpecs { + s: SVGPathCommander.CSegment | SVGPathCommander.MSegment, + ss: SVGPathCommander.curveArray, + l: number +} + +export interface curveObject { + curve: SVGPathCommander.curveArray, + original: string +} + +export type polygonMorph = [number, number][]; + +export type exactRing = { ring: polygonMorph, skipBisect?: boolean } | false; + +export interface polygonObject { + polygon: polygonMorph, + original: string +} + +export declare interface transformFObject { + perspective?: number; + translate3d?: number[]; + rotate3d?: number[]; + skew?: number[]; + scale?: number; + } + +export declare interface transformMObject { + perspective?: number; + translate3d?: number[]; + rotate3d?: number[]; + scale3d?: number[]; + skew?: number[]; + } + + +export interface colorObject { + /** @default 0 */ + r: number, + /** @default 0 */ + g: number, + /** @default 0 */ + b: number, + /** @default 1 */ + a: number | null +} + +export interface drawObject { + s: number, + e: number, + l: number +} + +export interface transformSVGObject { + translate?: number | [number, number], + rotate?: number, + skewX?: number, + skewY?: number, + scale?: number +} + +// boxShadow: '0px 0px 0px 0px rgb(0,0,0)', +// h-shadow, v-shadow, blur, spread, color +export type boxShadowObject = [number, number, number, number, colorObject]; +// textShadow: '0px 0px 0px rgb(0,0,0)', +// h-shadow, v-shadow, blur, color +export type textShadowObject = [number, number, number, colorObject] +export type shadowObject = boxShadowObject | textShadowObject; + +// property: range | default +export interface filterList { + /** + * opacity range [0-100%] + * opacity unit % + * @default 100 + */ + opacity: number, + /** + * blur range [0-N] + * blur unit [em, px, rem] + * @default 0 + */ + blur: number, + /** + * saturate range [0-N] + * saturate unit % + * @default 100 + */ + saturate: number, + /** + * invert range [0-100] + * invert unit % + * @default 0 + */ + invert: number, + /** + * grayscale range [0-100] + * grayscale unit % + * @default 0 + */ + grayscale: number, + /** + * brightness range [0-100] + * brightness unit % + * @default 100 + */ + brightness: number, + /** + * contrast range [0-N] + * contrast unit % + * @default 100 + */ + contrast: number, + /** + * sepia range [0-N] + * sepia unit % + * @default 0 + */ + sepia: number, + /** + * hue-rotate range [0-N] + * hue-rotate unit deg + * @default 0 + */ + hueRotate: number, + /** + * drop-shadow [x,y,spread,color] + * @default [0,0,0,{r:0,g:0,b:0}] + */ + dropShadow: [number, number, number, colorObject], + /** + * "url(_URL_)" + * @default null + */ + url: string +} \ No newline at end of file diff --git a/types/objects/componentsBase.d.ts b/types/objects/componentsBase.d.ts deleted file mode 100644 index 06df2c9..0000000 --- a/types/objects/componentsBase.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default Components; -declare namespace Components { - const Transform: Animation; - const BoxModel: Animation; - const Opacity: Animation; -} -import Animation from "../animation/animationBase.js"; diff --git a/types/objects/componentsDefault.d.ts b/types/objects/componentsDefault.d.ts deleted file mode 100644 index e875a98..0000000 --- a/types/objects/componentsDefault.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -export default Components; -declare namespace Components { - export { EssentialBoxModel }; - export { ColorsProperties }; - export { HTMLAttributes }; - export { OpacityProperty }; - export { TextWrite }; - export { TransformFunctions }; - export { SVGDraw }; - export { SVGMorph }; -} -import EssentialBoxModel from "../components/boxModelEssential.js"; -import ColorsProperties from "../components/colorProperties.js"; -import HTMLAttributes from "../components/htmlAttributes.js"; -import OpacityProperty from "../components/opacityProperty.js"; -import TextWrite from "../components/textWrite.js"; -import TransformFunctions from "../components/transformFunctions.js"; -import SVGDraw from "../components/svgDraw.js"; -import SVGMorph from "../components/svgMorph.js"; diff --git a/types/objects/componentsExtra.d.ts b/types/objects/componentsExtra.d.ts deleted file mode 100644 index c963a40..0000000 --- a/types/objects/componentsExtra.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -export default Components; -declare namespace Components { - export { BackgroundPosition }; - export { BorderRadius }; - export { BoxModel }; - export { ClipProperty }; - export { ColorProperties }; - export { FilterEffects }; - export { HTMLAttributes }; - export { OpacityProperty }; - export { SVGDraw }; - export { SVGCubicMorph }; - export { SVGTransform }; - export { ScrollProperty }; - export { ShadowProperties }; - export { TextProperties }; - export { TextWriteProperties }; - export { MatrixTransform }; -} -import BackgroundPosition from "../components/backgroundPosition.js"; -import BorderRadius from "../components/borderRadius.js"; -import BoxModel from "../components/boxModel.js"; -import ClipProperty from "../components/clipProperty.js"; -import ColorProperties from "../components/colorProperties.js"; -import FilterEffects from "../components/filterEffects"; -import HTMLAttributes from "../components/htmlAttributes.js"; -import OpacityProperty from "../components/opacityProperty.js"; -import SVGDraw from "../components/svgDraw.js"; -import SVGCubicMorph from "../components/svgCubicMorph.js"; -import SVGTransform from "../components/svgTransform.js"; -import ScrollProperty from "../components/scrollProperty.js"; -import ShadowProperties from "../components/shadowProperties.js"; -import TextProperties from "../components/textProperties.js"; -import TextWriteProperties from "../components/textWrite.js"; -import MatrixTransform from "../components/transformMatrix.js"; diff --git a/types/objects/connect.d.ts b/types/objects/connect.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/connect.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/crossCheck.d.ts b/types/objects/crossCheck.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/crossCheck.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/defaultOptions.d.ts b/types/objects/defaultOptions.d.ts deleted file mode 100644 index 79abb9c..0000000 --- a/types/objects/defaultOptions.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default defaultOptions; -declare namespace defaultOptions { - const duration: number; - const delay: number; - const easing: string; -} diff --git a/types/objects/defaultValues.d.ts b/types/objects/defaultValues.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/defaultValues.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/globalObject.d.ts b/types/objects/globalObject.d.ts deleted file mode 100644 index 9aeba26..0000000 --- a/types/objects/globalObject.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default globalObject; -declare let globalObject: any; diff --git a/types/objects/interpolate.d.ts b/types/objects/interpolate.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/interpolate.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/kute.d.ts b/types/objects/kute.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/kute.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/linkProperty.d.ts b/types/objects/linkProperty.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/linkProperty.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/objects.d.ts b/types/objects/objects.d.ts deleted file mode 100644 index a45dfb2..0000000 --- a/types/objects/objects.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -declare namespace _default { - export { supportedProperties }; - export { defaultValues }; - export { defaultOptions }; - export { prepareProperty }; - export { prepareStart }; - export { crossCheck }; - export { onStart }; - export { onComplete }; - export { linkProperty }; -} -export default _default; -import supportedProperties from "./supportedProperties.js"; -import defaultValues from "./defaultValues.js"; -import defaultOptions from "./defaultOptions.js"; -import prepareProperty from "./prepareProperty.js"; -import prepareStart from "./prepareStart.js"; -import crossCheck from "./crossCheck.js"; -import onStart from "./onStart.js"; -import onComplete from "./onComplete.js"; -import linkProperty from "./linkProperty.js"; diff --git a/types/objects/objectsBase.d.ts b/types/objects/objectsBase.d.ts deleted file mode 100644 index cd4e122..0000000 --- a/types/objects/objectsBase.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -declare namespace _default { - export { defaultOptions }; - export { linkProperty }; - export { onStart }; - export { onComplete }; -} -export default _default; -import defaultOptions from "./defaultOptions.js"; -import linkProperty from "./linkProperty.js"; -import onStart from "./onStart.js"; -import onComplete from "./onComplete.js"; diff --git a/types/objects/onComplete.d.ts b/types/objects/onComplete.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/onComplete.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/onStart.d.ts b/types/objects/onStart.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/onStart.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/prepareProperty.d.ts b/types/objects/prepareProperty.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/prepareProperty.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/prepareStart.d.ts b/types/objects/prepareStart.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/prepareStart.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/supportedProperties.d.ts b/types/objects/supportedProperties.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/supportedProperties.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/objects/tweens.d.ts b/types/objects/tweens.d.ts deleted file mode 100644 index 4bff4e4..0000000 --- a/types/objects/tweens.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: never[]; -export default _default; diff --git a/types/objects/util.d.ts b/types/objects/util.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/objects/util.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/process/getInlineStyle.d.ts b/types/process/getInlineStyle.d.ts deleted file mode 100644 index ec3a5e4..0000000 --- a/types/process/getInlineStyle.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getInlineStyle(el: any): {}; diff --git a/types/process/getInlineStyleLegacy.d.ts b/types/process/getInlineStyleLegacy.d.ts deleted file mode 100644 index 2464533..0000000 --- a/types/process/getInlineStyleLegacy.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getInlineStyleLegacy(el: any): {}; diff --git a/types/process/getStartValues.d.ts b/types/process/getStartValues.d.ts deleted file mode 100644 index d611890..0000000 --- a/types/process/getStartValues.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default function getStartValues(): void; -export default class getStartValues { - valuesStart: {}; -} diff --git a/types/process/getStyleForProperty.d.ts b/types/process/getStyleForProperty.d.ts deleted file mode 100644 index e0c91fb..0000000 --- a/types/process/getStyleForProperty.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getStyleForProperty(elem: any, propertyName: any): any; diff --git a/types/process/prepareObject.d.ts b/types/process/prepareObject.d.ts deleted file mode 100644 index 136d9b9..0000000 --- a/types/process/prepareObject.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function prepareObject(obj: any, fn: any): void; diff --git a/types/process/process.d.ts b/types/process/process.d.ts deleted file mode 100644 index 0e3e3b0..0000000 --- a/types/process/process.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -declare namespace _default { - export { getInlineStyle }; - export { getStyleForProperty }; - export { getStartValues }; - export { prepareObject }; -} -export default _default; -import getInlineStyle from "./getInlineStyle.js"; -import getStyleForProperty from "./getStyleForProperty.js"; -import getStartValues from "./getStartValues.js"; -import prepareObject from "./prepareObject.js"; diff --git a/types/src/animation/animation.d.ts b/types/src/animation/animation.d.ts deleted file mode 100644 index c06a2e4..0000000 --- a/types/src/animation/animation.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default class Animation { - constructor(Component: any); - setComponent(Component: any): Animation; -} diff --git a/types/src/animation/animationBase.d.ts b/types/src/animation/animationBase.d.ts deleted file mode 100644 index d996925..0000000 --- a/types/src/animation/animationBase.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default class AnimationBase { - constructor(Component: any); - setComponent(Component: any): { - name: any; - }; - _: number | undefined; -} diff --git a/types/src/animation/animationDevelopment.d.ts b/types/src/animation/animationDevelopment.d.ts deleted file mode 100644 index 0790634..0000000 --- a/types/src/animation/animationDevelopment.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default class AnimationDevelopment extends Animation { - constructor(...args: any[]); -} -import Animation from "./animation.js"; diff --git a/types/src/components/backgroundPosition.d.ts b/types/src/components/backgroundPosition.d.ts deleted file mode 100644 index 8e3c5c8..0000000 --- a/types/src/components/backgroundPosition.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -export default BackgroundPosition; -declare namespace BackgroundPosition { - export const component: string; - export const property: string; - export const defaultValue: number[]; - export namespace Interpolate { - export { numbers }; - } - export { bgPositionFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace bgPositionFunctions { - export { getBgPos as prepareStart }; - export { prepareBgPos as prepareProperty }; - export { onStartBgPos as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare function getBgPos(prop: any): any; -declare function prepareBgPos(prop: any, value: any): number[]; -import { onStartBgPos } from "./backgroundPositionBase.js"; diff --git a/types/src/components/backgroundPositionBase.d.ts b/types/src/components/backgroundPositionBase.d.ts deleted file mode 100644 index e1398b2..0000000 --- a/types/src/components/backgroundPositionBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartBgPos(prop: any): void; -export default baseBgPosOps; -declare namespace baseBgPosOps { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartBgPos as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/src/components/borderRadius.d.ts b/types/src/components/borderRadius.d.ts deleted file mode 100644 index 61740b8..0000000 --- a/types/src/components/borderRadius.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -export function getRadius(tweenProp: any): any; -export function prepareRadius(tweenProp: any, value: any): { - v: number; - u: string; -}; -export namespace radiusFunctions { - export { getRadius as prepareStart }; - export { prepareRadius as prepareProperty }; - export { radiusOnStart as onStart }; -} -export default BorderRadius; -declare const radiusOnStart: {}; -declare namespace BorderRadius { - export const component: string; - export const category: string; - export { radiusProps as properties }; - export { radiusValues as defaultValues }; - export namespace Interpolate { - export { units }; - } - export { radiusFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -declare const radiusProps: string[]; -declare const radiusValues: {}; -import units from "../interpolation/units.js"; -import trueDimension from "../util/trueDimension.js"; diff --git a/types/src/components/borderRadiusBase.d.ts b/types/src/components/borderRadiusBase.d.ts deleted file mode 100644 index ec79191..0000000 --- a/types/src/components/borderRadiusBase.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export function radiusOnStartFn(tweenProp: any): void; -export default baseBorderRadius; -declare namespace baseBorderRadius { - const component: string; - const category: string; - namespace Interpolate { - export { units }; - } - namespace functions { - export { radiusOnStart as onStart }; - } -} -import units from "../interpolation/units.js"; -declare const radiusOnStart: {}; diff --git a/types/src/components/boxModel.d.ts b/types/src/components/boxModel.d.ts deleted file mode 100644 index 7fc837d..0000000 --- a/types/src/components/boxModel.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -export default boxModel; -declare namespace boxModel { - export const component: string; - export const category: string; - export { boxModelProperties as properties }; - export { boxModelValues as defaultValues }; - export namespace Interpolate { - export { numbers }; - } - export { boxModelFunctions as functions }; -} -declare const boxModelProperties: string[]; -declare const boxModelValues: {}; -import numbers from "../interpolation/numbers.js"; -declare namespace boxModelFunctions { - export { getBoxModel as prepareStart }; - export { prepareBoxModel as prepareProperty }; - export { boxPropsOnStart as onStart }; -} -declare function getBoxModel(tweenProp: any): any; -declare function prepareBoxModel(tweenProp: any, value: any): number; -declare const boxPropsOnStart: {}; diff --git a/types/src/components/boxModelBase.d.ts b/types/src/components/boxModelBase.d.ts deleted file mode 100644 index be0a171..0000000 --- a/types/src/components/boxModelBase.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function boxModelOnStart(tweenProp: any): void; -export default baseBoxModel; -declare namespace baseBoxModel { - export const component: string; - export const category: string; - export { baseBoxProps as properties }; - export namespace Interpolate { - export { numbers }; - } - export namespace functions { - export { baseBoxOnStart as onStart }; - } -} -declare const baseBoxProps: string[]; -import numbers from "../interpolation/numbers.js"; -declare const baseBoxOnStart: {}; diff --git a/types/src/components/boxModelEssential.d.ts b/types/src/components/boxModelEssential.d.ts deleted file mode 100644 index a193138..0000000 --- a/types/src/components/boxModelEssential.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -export default essentialBoxModel; -declare namespace essentialBoxModel { - export const component: string; - export const category: string; - export { essentialBoxProps as properties }; - export { essentialBoxPropsValues as defaultValues }; - export namespace Interpolate { - export { numbers }; - } - export { essentialBoxModelFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -declare const essentialBoxProps: string[]; -declare namespace essentialBoxPropsValues { - const top: number; - const left: number; - const width: number; - const height: number; -} -import numbers from "../interpolation/numbers.js"; -declare namespace essentialBoxModelFunctions { - export { getBoxModel as prepareStart }; - export { prepareBoxModel as prepareProperty }; - export { essentialBoxOnStart as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare function getBoxModel(tweenProp: any): any; -declare function prepareBoxModel(tweenProp: any, value: any): number; -declare const essentialBoxOnStart: {}; diff --git a/types/src/components/clipProperty.d.ts b/types/src/components/clipProperty.d.ts deleted file mode 100644 index a6b03bb..0000000 --- a/types/src/components/clipProperty.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -export default clipProperty; -declare namespace clipProperty { - export const component: string; - export const property: string; - export const defaultValue: number[]; - export namespace Interpolate { - export { numbers }; - } - export { clipFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace clipFunctions { - export { getClip as prepareStart }; - export { prepareClip as prepareProperty }; - export { onStartClip as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare function getClip(tweenProp: any): any; -declare function prepareClip(tweenProp: any, value: any): any; -import { onStartClip } from "./clipPropertyBase.js"; diff --git a/types/src/components/clipPropertyBase.d.ts b/types/src/components/clipPropertyBase.d.ts deleted file mode 100644 index 9a46168..0000000 --- a/types/src/components/clipPropertyBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartClip(tweenProp: any): void; -export default baseClip; -declare namespace baseClip { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartClip as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/src/components/colorProperties.d.ts b/types/src/components/colorProperties.d.ts deleted file mode 100644 index 35d3153..0000000 --- a/types/src/components/colorProperties.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export default colorProperties; -declare namespace colorProperties { - export const component: string; - export const category: string; - export { supportedColors as properties }; - export { defaultColors as defaultValues }; - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export { colorFunctions as functions }; - export namespace Util { - export { trueColor }; - } -} -declare const supportedColors: string[]; -declare const defaultColors: {}; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare namespace colorFunctions { - export { getColor as prepareStart }; - export { prepareColor as prepareProperty }; - export { colorsOnStart as onStart }; -} -import trueColor from "../util/trueColor.js"; -declare function getColor(prop: any): any; -declare function prepareColor(prop: any, value: any): { - r: number; - g: number; - b: number; - a?: undefined; -} | { - r: number; - g: number; - b: number; - a: number; -} | undefined; -declare const colorsOnStart: {}; diff --git a/types/src/components/colorPropertiesBase.d.ts b/types/src/components/colorPropertiesBase.d.ts deleted file mode 100644 index c4d3d3e..0000000 --- a/types/src/components/colorPropertiesBase.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function onStartColors(tweenProp: any): void; -export namespace baseColors { - const component: string; - const category: string; - namespace Interpolate { - export { numbers }; - export { colors }; - } - namespace functions { - export { colorsOnStart as onStart }; - } -} -export default baseColors; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare const colorsOnStart: {}; diff --git a/types/src/components/crossBrowserMove.d.ts b/types/src/components/crossBrowserMove.d.ts deleted file mode 100644 index ccd45c9..0000000 --- a/types/src/components/crossBrowserMove.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -export function onStartComponent(tweenProp: any): void; -export namespace baseCrossBrowserMove { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartComponent as onStart }; - } -} -export default crossBrowserMove; -import numbers from "../interpolation/numbers.js"; -declare namespace crossBrowserMove { - const component_1: string; - export { component_1 as component }; - const property_1: string; - export { property_1 as property }; - export const defaultValue: number[]; - export namespace Interpolate_1 { - export { numbers }; - } - export { Interpolate_1 as Interpolate }; - export { componentFunctions as functions }; - export namespace Util { - export { trueProperty }; - } -} -declare namespace componentFunctions { - export { getComponentCurrentValue as prepareStart }; - export { prepareComponentValue as prepareProperty }; - export { onStartComponent as onStart }; -} -import trueProperty from "../util/trueProperty.js"; -declare function getComponentCurrentValue(): number[]; -declare function prepareComponentValue(tweenProp: any, value: any): number[]; diff --git a/types/src/components/filterEffects.d.ts b/types/src/components/filterEffects.d.ts deleted file mode 100644 index 02f56a2..0000000 --- a/types/src/components/filterEffects.d.ts +++ /dev/null @@ -1,63 +0,0 @@ -export default filterEffects; -declare namespace filterEffects { - export const component: string; - export const property: string; - export namespace defaultValue { - const opacity: number; - const blur: number; - const saturate: number; - const grayscale: number; - const brightness: number; - const contrast: number; - const sepia: number; - const invert: number; - const hueRotate: number; - const dropShadow: (number | { - r: number; - g: number; - b: number; - })[]; - const url: string; - } - export namespace Interpolate { - export { numbers as opacity }; - export { numbers as blur }; - export { numbers as saturate }; - export { numbers as grayscale }; - export { numbers as brightness }; - export { numbers as contrast }; - export { numbers as sepia }; - export { numbers as invert }; - export { numbers as hueRotate }; - export namespace dropShadow_1 { - export { numbers }; - export { colors }; - export { dropShadow }; - } - export { dropShadow_1 as dropShadow }; - } - export { filterFunctions as functions }; - export namespace Util { - export { parseDropShadow }; - export { parseFilterString }; - export { replaceDashNamespace }; - export { trueColor }; - } -} -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -import { dropShadow as dropShadow_2 } from "./filterEffectsBase.js"; -declare namespace filterFunctions { - export { getFilter as prepareStart }; - export { prepareFilter as prepareProperty }; - export { onStartFilter as onStart }; - export { crossCheckFilter as crossCheck }; -} -declare function parseDropShadow(shadow: any): any[] | undefined; -declare function parseFilterString(currentStyle: any): {}; -declare function replaceDashNamespace(str: any): any; -import trueColor from "../util/trueColor.js"; -declare function getFilter(tweenProp: any, value: any): {}; -declare function prepareFilter(tweenProp: any, value: any): {}; -import { onStartFilter } from "./filterEffectsBase.js"; -declare function crossCheckFilter(tweenProp: any): void; diff --git a/types/src/components/filterEffectsBase.d.ts b/types/src/components/filterEffectsBase.d.ts deleted file mode 100644 index 8bc328b..0000000 --- a/types/src/components/filterEffectsBase.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -export function dropShadow(a: any, b: any, v: any): string; -export function onStartFilter(tweenProp: any): void; -export default baseFilter; -declare namespace baseFilter { - const component: string; - const property: string; - namespace Interpolate { - export { numbers as opacity }; - export { numbers as blur }; - export { numbers as saturate }; - export { numbers as grayscale }; - export { numbers as brightness }; - export { numbers as contrast }; - export { numbers as sepia }; - export { numbers as invert }; - export { numbers as hueRotate }; - export namespace dropShadow { - export { numbers }; - export { colors }; - export { dropShadow }; - } - } - namespace functions { - export { onStartFilter as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; diff --git a/types/src/components/htmlAttributes.d.ts b/types/src/components/htmlAttributes.d.ts deleted file mode 100644 index 49ee1f7..0000000 --- a/types/src/components/htmlAttributes.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export function getAttr(tweenProp: any, value: any): {}; -export function prepareAttr(tweenProp: any, attrObj: any): {}; -export default htmlAttributes; -declare namespace htmlAttributes { - export { ComponentName as component }; - export const property: string; - export const subProperties: string[]; - export const defaultValue: { - fill: string; - stroke: string; - 'stop-color': string; - opacity: number; - 'stroke-opacity': number; - 'fill-opacity': number; - }; - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export { attrFunctions as functions }; - export namespace Util { - export { replaceUppercase }; - export { trueColor }; - export { trueDimension }; - } -} -declare const ComponentName: "htmlAttributes"; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare namespace attrFunctions { - export { getAttr as prepareStart }; - export { prepareAttr as prepareProperty }; - export { onStartAttr as onStart }; -} -declare function replaceUppercase(a: any): any; -import trueColor from "../util/trueColor.js"; -import trueDimension from "../util/trueDimension.js"; -import { onStartAttr } from "./htmlAttributesBase.js"; diff --git a/types/src/components/htmlAttributesBase.d.ts b/types/src/components/htmlAttributesBase.d.ts deleted file mode 100644 index 6c85754..0000000 --- a/types/src/components/htmlAttributesBase.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -export namespace onStartAttr { - function attr(tweenProp: any): void; - function attr(tweenProp: any): void; - function attributes(tweenProp: any): void; - function attributes(tweenProp: any): void; -} -export default baseAttributes; -export const attributes: {}; -declare namespace baseAttributes { - export { ComponentName as component }; - export const property: string; - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export namespace functions { - export { onStartAttr as onStart }; - } -} -declare const ComponentName: "baseHTMLAttributes"; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; diff --git a/types/src/components/opacityProperty.d.ts b/types/src/components/opacityProperty.d.ts deleted file mode 100644 index 24f571b..0000000 --- a/types/src/components/opacityProperty.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -export default opacityProperty; -declare namespace opacityProperty { - export const component: string; - export const property: string; - export const defaultValue: number; - export namespace Interpolate { - export { numbers }; - } - export { opacityFunctions as functions }; -} -import numbers from "../interpolation/numbers.js"; -declare namespace opacityFunctions { - export { getOpacity as prepareStart }; - export { prepareOpacity as prepareProperty }; - export { onStartOpacity as onStart }; -} -declare function getOpacity(tweenProp: any): any; -declare function prepareOpacity(tweenProp: any, value: any): number; -import { onStartOpacity } from "./opacityPropertyBase.js"; diff --git a/types/src/components/opacityPropertyBase.d.ts b/types/src/components/opacityPropertyBase.d.ts deleted file mode 100644 index f94b41f..0000000 --- a/types/src/components/opacityPropertyBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartOpacity(tweenProp: any): void; -export default baseOpacity; -declare namespace baseOpacity { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartOpacity as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/src/components/scrollProperty.d.ts b/types/src/components/scrollProperty.d.ts deleted file mode 100644 index abe049c..0000000 --- a/types/src/components/scrollProperty.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export default scrollProperty; -declare namespace scrollProperty { - export const component: string; - export const property: string; - export const defaultValue: number; - export namespace Interpolate { - export { numbers }; - } - export { scrollFunctions as functions }; - export namespace Util { - export { preventScroll }; - export { scrollIn }; - export { scrollOut }; - export { getScrollTargets }; - export { toggleScrollEvents }; - export { supportPassive }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace scrollFunctions { - export { getScroll as prepareStart }; - export { prepareScroll as prepareProperty }; - export { onStartScroll as onStart }; - export { onCompleteScroll as onComplete }; -} -import { preventScroll } from "./scrollPropertyBase.js"; -import { scrollIn } from "./scrollPropertyBase.js"; -import { scrollOut } from "./scrollPropertyBase.js"; -import { getScrollTargets } from "./scrollPropertyBase.js"; -import { toggleScrollEvents } from "./scrollPropertyBase.js"; -import supportPassive from "shorter-js/src/boolean/supportPassive.js"; -declare function getScroll(): number; -declare class getScroll { - element: HTMLElement | undefined; -} -declare function prepareScroll(prop: any, value: any): number; -import { onStartScroll } from "./scrollPropertyBase.js"; -import { onCompleteScroll } from "./scrollPropertyBase.js"; diff --git a/types/src/components/scrollPropertyBase.d.ts b/types/src/components/scrollPropertyBase.d.ts deleted file mode 100644 index 7f7717b..0000000 --- a/types/src/components/scrollPropertyBase.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -export function preventScroll(e: any): void; -export function getScrollTargets(): { - el: any; - st: any; -}; -export function toggleScrollEvents(action: any, element: any): void; -export function scrollIn(): void; -export function scrollOut(): void; -export function onStartScroll(tweenProp: any): void; -export class onStartScroll { - constructor(tweenProp: any); - element: HTMLElement | undefined; -} -export function onCompleteScroll(): void; -export const scrollContainer: HTMLElement; -export default baseScroll; -declare namespace baseScroll { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartScroll as onStart }; - export { onCompleteScroll as onComplete }; - } - namespace Util { - export { preventScroll }; - export { scrollIn }; - export { scrollOut }; - export { getScrollTargets }; - export { supportPassive }; - } -} -import numbers from "../interpolation/numbers.js"; -import supportPassive from "shorter-js/src/boolean/supportPassive.js"; diff --git a/types/src/components/shadowProperties.d.ts b/types/src/components/shadowProperties.d.ts deleted file mode 100644 index 8ccb83b..0000000 --- a/types/src/components/shadowProperties.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -export function getShadow(tweenProp: any): any; -export function prepareShadow(tweenProp: any, propValue: any): any; -export default shadowProperties; -declare namespace shadowProperties { - export const component: string; - export { shadowProps as properties }; - export namespace defaultValues { - const boxShadow: string; - const textShadow: string; - } - export namespace Interpolate { - export { numbers }; - export { colors }; - } - export { shadowFunctions as functions }; - export namespace Util { - export { processShadowArray }; - export { trueColor }; - } -} -declare const shadowProps: string[]; -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare namespace shadowFunctions { - export { getShadow as prepareStart }; - export { prepareShadow as prepareProperty }; - export { shadowPropOnStart as onStart }; -} -declare function processShadowArray(shadow: any, tweenProp: any): any; -import trueColor from "../util/trueColor.js"; -declare const shadowPropOnStart: {}; diff --git a/types/src/components/shadowPropertiesBase.d.ts b/types/src/components/shadowPropertiesBase.d.ts deleted file mode 100644 index 3ba8bbc..0000000 --- a/types/src/components/shadowPropertiesBase.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function onStartShadow(tweenProp: any): void; -export default baseShadow; -declare namespace baseShadow { - const component: string; - namespace Interpolate { - export { numbers }; - export { colors }; - } - namespace functions { - export { shadowPropOnStart as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; -import colors from "../interpolation/colors.js"; -declare const shadowPropOnStart: {}; diff --git a/types/src/components/svgCubicMorph.d.ts b/types/src/components/svgCubicMorph.d.ts deleted file mode 100644 index 45b984b..0000000 --- a/types/src/components/svgCubicMorph.d.ts +++ /dev/null @@ -1,48 +0,0 @@ -export default svgCubicMorph; -declare namespace svgCubicMorph { - export const component: string; - export const property: string; - export const defaultValue: never[]; - export namespace Interpolate { - export { numbers }; - export { pathToString }; - } - export { svgCubicMorphFunctions as functions }; - export namespace Util { - export { pathToCurve }; - export { pathToAbsolute }; - export { pathToString }; - export { parsePathString }; - export { getRotatedCurve }; - export { getRotations }; - export { equalizeSegments }; - export { reverseCurve }; - export { clonePath }; - export { getDrawDirection }; - export { splitCubic }; - export { getCurveArray }; - } -} -import numbers from "../interpolation/numbers.js"; -import pathToString from "svg-path-commander/src/convert/pathToString.js"; -declare namespace svgCubicMorphFunctions { - export { getCubicMorph as prepareStart }; - export { prepareCubicMorph as prepareProperty }; - export { onStartCubicMorph as onStart }; - export { crossCheckCubicMorph as crossCheck }; -} -import pathToCurve from "svg-path-commander/src/convert/pathToCurve.js"; -import pathToAbsolute from "svg-path-commander/src/convert/pathToAbsolute.js"; -import parsePathString from "svg-path-commander/src/process/parsePathString.js"; -declare function getRotatedCurve(a: any, b: any): any; -declare function getRotations(a: any): any; -declare function equalizeSegments(path1: any, path2: any, TL: any): any; -import reverseCurve from "svg-path-commander/src/process/reverseCurve.js"; -import clonePath from "svg-path-commander/src/process/clonePath.js"; -import getDrawDirection from "svg-path-commander/src/util/getDrawDirection.js"; -import splitCubic from "svg-path-commander/src/process/splitCubic.js"; -declare function getCurveArray(pathString: any): any; -declare function getCubicMorph(): any; -declare function prepareCubicMorph(tweenProp: any, value: any): any; -import { onStartCubicMorph } from "./svgCubicMorphBase.js"; -declare function crossCheckCubicMorph(tweenProp: any): void; diff --git a/types/src/components/svgCubicMorphBase.d.ts b/types/src/components/svgCubicMorphBase.d.ts deleted file mode 100644 index 65b94ec..0000000 --- a/types/src/components/svgCubicMorphBase.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function onStartCubicMorph(tweenProp: any): void; -export default baseSvgCubicMorph; -declare namespace baseSvgCubicMorph { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - export { pathToString }; - } - namespace functions { - export { onStartCubicMorph as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; -import pathToString from "svg-path-commander/src/convert/pathToString.js"; diff --git a/types/src/components/svgDraw.d.ts b/types/src/components/svgDraw.d.ts deleted file mode 100644 index 50144a9..0000000 --- a/types/src/components/svgDraw.d.ts +++ /dev/null @@ -1,39 +0,0 @@ -export default svgDraw; -declare namespace svgDraw { - export const component: string; - export const property: string; - export const defaultValue: string; - export namespace Interpolate { - export { numbers }; - } - export { svgDrawFunctions as functions }; - export namespace Util { - export { getRectLength }; - export { getPolyLength }; - export { getLineLength }; - export { getCircleLength }; - export { getEllipseLength }; - export { getTotalLength }; - export { resetDraw }; - export { getDraw }; - export { percent }; - } -} -import numbers from "../interpolation/numbers.js"; -declare namespace svgDrawFunctions { - export { getDrawValue as prepareStart }; - export { prepareDraw as prepareProperty }; - export { onStartDraw as onStart }; -} -declare function getRectLength(el: any): number; -declare function getPolyLength(el: any): number; -declare function getLineLength(el: any): number; -declare function getCircleLength(el: any): number; -declare function getEllipseLength(el: any): number; -declare function getTotalLength(el: any): number; -declare function resetDraw(elem: any): void; -declare function getDraw(element: any, value: any): any; -declare function percent(v: any, l: any): number; -declare function getDrawValue(): any; -declare function prepareDraw(a: any, o: any): any; -import { onStartDraw } from "./svgDrawBase.js"; diff --git a/types/src/components/svgDrawBase.d.ts b/types/src/components/svgDrawBase.d.ts deleted file mode 100644 index 4a1a002..0000000 --- a/types/src/components/svgDrawBase.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function onStartDraw(tweenProp: any): void; -export default baseSVGDraw; -declare namespace baseSVGDraw { - const component: string; - const property: string; - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartDraw as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/src/components/svgMorph.d.ts b/types/src/components/svgMorph.d.ts deleted file mode 100644 index 163b2b2..0000000 --- a/types/src/components/svgMorph.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -export default svgMorph; -declare namespace svgMorph { - export const component: string; - export const property: string; - export const defaultValue: never[]; - export { coords as Interpolate }; - export namespace defaultOptions { - const morphPrecision: number; - const morphIndex: number; - } - export { svgMorphFunctions as functions }; - export namespace Util { - export { addPoints }; - export { bisect }; - export { normalizeRing }; - export { validRing }; - export { getInterpolationPoints }; - export { pathStringToRing }; - export { distanceSquareRoot }; - export { midPoint }; - export { approximateRing }; - export { rotateRing }; - export { pathToString }; - export { pathToCurve }; - export { getPathLength }; - export { getPointAtLength }; - export { getDrawDirection }; - export { roundPath }; - } -} -import coords from "../interpolation/coords.js"; -declare namespace svgMorphFunctions { - export { getSVGMorph as prepareStart }; - export { prepareSVGMorph as prepareProperty }; - export { onStartSVGMorph as onStart }; - export { crossCheckSVGMorph as crossCheck }; -} -declare function addPoints(ring: any, numPoints: any): void; -declare function bisect(ring: any, maxSegmentLength?: number): void; -declare function normalizeRing(input: any, maxSegmentLength: any): any; -declare function validRing(ring: any): boolean; -declare function getInterpolationPoints(pathArray1: any, pathArray2: any, precision: any): any[]; -declare function pathStringToRing(str: any, maxSegmentLength: any): { - ring: any[][]; - pathLength: number; -}; -import distanceSquareRoot from "svg-path-commander/src/math/distanceSquareRoot.js"; -import midPoint from "svg-path-commander/src/math/midPoint.js"; -declare function approximateRing(parsed: any, maxSegmentLength: any): { - pathLength: number; - ring: any[][]; - skipBisect: boolean; -}; -declare function rotateRing(ring: any, vs: any): void; -import pathToString from "svg-path-commander/src/convert/pathToString.js"; -import pathToCurve from "svg-path-commander/src/convert/pathToCurve.js"; -import getPathLength from "svg-path-commander/src/util/getPathLength.js"; -import getPointAtLength from "svg-path-commander/src/util/getPointAtLength.js"; -import getDrawDirection from "svg-path-commander/src/util/getDrawDirection.js"; -import roundPath from "svg-path-commander/src/process/roundPath.js"; -declare function getSVGMorph(): any; -declare function prepareSVGMorph(tweenProp: any, value: any): any; -import { onStartSVGMorph } from "./svgMorphBase.js"; -declare function crossCheckSVGMorph(prop: any): void; diff --git a/types/src/components/svgMorphBase.d.ts b/types/src/components/svgMorphBase.d.ts deleted file mode 100644 index d1c12ca..0000000 --- a/types/src/components/svgMorphBase.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -export function onStartSVGMorph(tweenProp: any): void; -export default baseSVGMorph; -declare namespace baseSVGMorph { - export const component: string; - export const property: string; - export { coords as Interpolate }; - export namespace functions { - export { onStartSVGMorph as onStart }; - } -} -import coords from "../interpolation/coords.js"; diff --git a/types/src/components/svgTransform.d.ts b/types/src/components/svgTransform.d.ts deleted file mode 100644 index 0014a31..0000000 --- a/types/src/components/svgTransform.d.ts +++ /dev/null @@ -1,45 +0,0 @@ -export namespace svgTransformFunctions { - export { getStartSvgTransform as prepareStart }; - export { prepareSvgTransform as prepareProperty }; - export { svgTransformOnStart as onStart }; - export { svgTransformCrossCheck as crossCheck }; -} -export namespace svgTransform { - export const component: string; - export const property: string; - export namespace defaultOptions { - const transformOrigin: string; - } - export namespace defaultValue { - const translate: number; - const rotate: number; - const skewX: number; - const skewY: number; - const scale: number; - } - export namespace Interpolate { - export { numbers }; - } - export { svgTransformFunctions as functions }; - export namespace Util { - export { parseStringOrigin }; - export { parseTransformString }; - export { parseTransformSVG }; - } -} -export default svgTransform; -declare function getStartSvgTransform(tweenProp: any, value: any): {}; -declare function prepareSvgTransform(p: any, v: any): { - origin: any; -}; -import { svgTransformOnStart } from "./svgTransformBase.js"; -declare function svgTransformCrossCheck(prop: any): void; -import numbers from "../interpolation/numbers.js"; -declare function parseStringOrigin(origin: any, { x, width }: { - x: any; - width: any; -}): any; -declare function parseTransformString(a: any): {}; -declare function parseTransformSVG(p: any, v: any): { - origin: any; -}; diff --git a/types/src/components/svgTransformBase.d.ts b/types/src/components/svgTransformBase.d.ts deleted file mode 100644 index 28be88b..0000000 --- a/types/src/components/svgTransformBase.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function svgTransformOnStart(tweenProp: any): void; -export default baseSVGTransform; -declare namespace baseSVGTransform { - const component: string; - const property: string; - namespace defaultOptions { - const transformOrigin: string; - } - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { svgTransformOnStart as onStart }; - } -} -import numbers from "../interpolation/numbers.js"; diff --git a/types/src/components/textProperties.d.ts b/types/src/components/textProperties.d.ts deleted file mode 100644 index 5e7820c..0000000 --- a/types/src/components/textProperties.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -export function getTextProp(prop: any): any; -export function prepareTextProp(prop: any, value: any): { - v: number; - u: string; -}; -export default textProperties; -declare namespace textProperties { - export const component: string; - export const category: string; - export { textProps as properties }; - export namespace defaultValues { - const fontSize: number; - const lineHeight: number; - const letterSpacing: number; - const wordSpacing: number; - } - export namespace Interpolate { - export { units }; - } - export { textPropFunctions as functions }; - export namespace Util { - export { trueDimension }; - } -} -declare const textProps: string[]; -import units from "../interpolation/units.js"; -declare namespace textPropFunctions { - export { getTextProp as prepareStart }; - export { prepareTextProp as prepareProperty }; - export { textOnStart as onStart }; -} -import trueDimension from "../util/trueDimension.js"; -declare const textOnStart: {}; diff --git a/types/src/components/textPropertiesBase.d.ts b/types/src/components/textPropertiesBase.d.ts deleted file mode 100644 index 28f5871..0000000 --- a/types/src/components/textPropertiesBase.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export function textPropOnStart(tweenProp: any): void; -export default baseTextProperties; -declare namespace baseTextProperties { - const component: string; - const category: string; - namespace Interpolate { - export { units }; - } - namespace functions { - export { textOnStart as onStart }; - } -} -import units from "../interpolation/units.js"; -declare const textOnStart: {}; diff --git a/types/src/components/textWrite.d.ts b/types/src/components/textWrite.d.ts deleted file mode 100644 index ee2c0c8..0000000 --- a/types/src/components/textWrite.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -export function createTextTweens(target: any, newText: any, ops: any): false | any[]; -export namespace textWriteFunctions { - export { getWrite as prepareStart }; - export { prepareText as prepareProperty }; - export { onStartWrite as onStart }; -} -export namespace textWrite { - export const component: string; - export const category: string; - export const properties: string[]; - export namespace defaultValues { - const text: string; - const number: string; - } - export namespace defaultOptions { - const textChars: string; - } - export namespace Interpolate { - export { numbers }; - } - export { textWriteFunctions as functions }; - export namespace Util { - export { charSet }; - export { createTextTweens }; - } -} -export default textWrite; -declare function getWrite(): any; -declare function prepareText(tweenProp: any, value: any): any; -import { onStartWrite } from "./textWriteBase.js"; -import numbers from "../interpolation/numbers.js"; -import { charSet } from "./textWriteBase.js"; diff --git a/types/src/components/textWriteBase.d.ts b/types/src/components/textWriteBase.d.ts deleted file mode 100644 index 455bf17..0000000 --- a/types/src/components/textWriteBase.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -export namespace onStartWrite { - function text(tweenProp: any): void; - function text(tweenProp: any): void; - function number(tweenProp: any): void; - function number(tweenProp: any): void; -} -export namespace baseTextWrite { - const component: string; - const category: string; - namespace defaultOptions { - const textChars: string; - } - namespace Interpolate { - export { numbers }; - } - namespace functions { - export { onStartWrite as onStart }; - } - namespace Util { - export { charSet }; - } -} -export default baseTextWrite; -export namespace charSet { - export { lowerCaseAlpha as alpha }; - export { upperCaseAlpha as upper }; - export { nonAlpha as symbols }; - export { numeric }; - export { alphaNumeric as alphanumeric }; - export { allTypes as all }; -} -import numbers from "../interpolation/numbers.js"; -declare const lowerCaseAlpha: string[]; -declare const upperCaseAlpha: string[]; -declare const nonAlpha: string[]; -declare const numeric: string[]; -declare const alphaNumeric: string[]; -declare const allTypes: string[]; diff --git a/types/src/components/transformFunctions.d.ts b/types/src/components/transformFunctions.d.ts deleted file mode 100644 index 7cba996..0000000 --- a/types/src/components/transformFunctions.d.ts +++ /dev/null @@ -1,59 +0,0 @@ -export default transformFunctionsComponent; -declare namespace transformFunctionsComponent { - export const component: string; - export const property: string; - export { supportedTransformProperties as subProperties }; - export { defaultTransformValues as defaultValues }; - export { transformFunctions as functions }; - export namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } -} -declare const supportedTransformProperties: string[]; -declare namespace defaultTransformValues { - const perspective_1: number; - export { perspective_1 as perspective }; - const translate3d_1: number[]; - export { translate3d_1 as translate3d }; - export const translateX: number; - export const translateY: number; - export const translateZ: number; - const translate_1: number[]; - export { translate_1 as translate }; - const rotate3d_1: number[]; - export { rotate3d_1 as rotate3d }; - export const rotateX: number; - export const rotateY: number; - export const rotateZ: number; - const rotate_1: number; - export { rotate_1 as rotate }; - export const skewX: number; - export const skewY: number; - const skew_1: number[]; - export { skew_1 as skew }; - const scale_1: number; - export { scale_1 as scale }; -} -declare namespace transformFunctions { - export { getTransform as prepareStart }; - export { prepareTransform as prepareProperty }; - export { onStartTransform as onStart }; - export { crossCheckTransform as crossCheck }; -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; -declare function getTransform(tweenProperty: any): any; -declare function prepareTransform(prop: any, obj: any): {}; -import { onStartTransform } from "./transformFunctionsBase.js"; -declare function crossCheckTransform(tweenProp: any): void; diff --git a/types/src/components/transformFunctionsBase.d.ts b/types/src/components/transformFunctionsBase.d.ts deleted file mode 100644 index b3f9080..0000000 --- a/types/src/components/transformFunctionsBase.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -export function onStartTransform(tweenProp: any): void; -export default BaseTransform; -declare namespace BaseTransform { - const component: string; - const property: string; - namespace functions { - export { onStartTransform as onStart }; - } - namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; diff --git a/types/src/components/transformLegacy.d.ts b/types/src/components/transformLegacy.d.ts deleted file mode 100644 index 6106e1e..0000000 --- a/types/src/components/transformLegacy.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -export default transformLegacyComponent; -declare namespace transformLegacyComponent { - export const component: string; - export const property: string; - export { legacyTransformProperties as subProperties }; - export { legacyTransformValues as defaultValues }; - export { transformLegacyFunctions as functions }; - export namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } - export const Util: any[]; -} -declare const legacyTransformProperties: string[]; -declare namespace legacyTransformValues { - const perspective_1: number; - export { perspective_1 as perspective }; - const translate3d_1: number[]; - export { translate3d_1 as translate3d }; - export const translateX: number; - export const translateY: number; - export const translateZ: number; - const translate_1: number[]; - export { translate_1 as translate }; - const rotate3d_1: number[]; - export { rotate3d_1 as rotate3d }; - export const rotateX: number; - export const rotateY: number; - export const rotateZ: number; - const rotate_1: number; - export { rotate_1 as rotate }; - export const skewX: number; - export const skewY: number; - const skew_1: number[]; - export { skew_1 as skew }; - const scale_1: number; - export { scale_1 as scale }; -} -declare namespace transformLegacyFunctions { - export { getLegacyTransform as prepareStart }; - export { prepareLegacyTransform as prepareProperty }; - export { onStartLegacyTransform as onStart }; - export { crossCheckLegacyTransform as crossCheck }; -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; -declare function getLegacyTransform(tweenProperty: any): any; -declare function prepareLegacyTransform(prop: any, obj: any): {}; -import { onStartLegacyTransform } from "./transformLegacyBase.js"; -declare function crossCheckLegacyTransform(tweenProp: any): void; diff --git a/types/src/components/transformLegacyBase.d.ts b/types/src/components/transformLegacyBase.d.ts deleted file mode 100644 index 63de18e..0000000 --- a/types/src/components/transformLegacyBase.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -export function onStartLegacyTransform(tweenProp: any): void; -export default BaseLegacyTransform; -declare namespace BaseLegacyTransform { - const component: string; - const property: string; - namespace functions { - export { onStartLegacyTransform as onStart }; - } - namespace Interpolate { - export { perspective }; - export { translate3d }; - export { rotate3d }; - export { translate }; - export { rotate }; - export { scale }; - export { skew }; - } - namespace Util { - export { transformProperty }; - } -} -import perspective from "../interpolation/perspective.js"; -import translate3d from "../interpolation/translate3d.js"; -import rotate3d from "../interpolation/rotate3d.js"; -import translate from "../interpolation/translate.js"; -import rotate from "../interpolation/rotate.js"; -import scale from "../interpolation/scale.js"; -import skew from "../interpolation/skew.js"; -import transformProperty from "../util/transformProperty.js"; diff --git a/types/src/components/transformMatrix.d.ts b/types/src/components/transformMatrix.d.ts deleted file mode 100644 index f39ed2d..0000000 --- a/types/src/components/transformMatrix.d.ts +++ /dev/null @@ -1,46 +0,0 @@ -export default matrixTransform; -declare namespace matrixTransform { - export { matrixComponent as component }; - export const property: string; - export namespace defaultValue { - const perspective: number; - const translate3d: number[]; - const translateX: number; - const translateY: number; - const translateZ: number; - const rotate3d: number[]; - const rotateX: number; - const rotateY: number; - const rotateZ: number; - const skew: number[]; - const skewX: number; - const skewY: number; - const scale3d: number[]; - const scaleX: number; - const scaleY: number; - const scaleZ: number; - } - export { matrixFunctions as functions }; - export namespace Interpolate { - export { numbers as perspective }; - export { arrays as translate3d }; - export { arrays as rotate3d }; - export { arrays as skew }; - export { arrays as scale3d }; - } -} -declare const matrixComponent: "transformMatrix"; -declare namespace matrixFunctions { - export { getTransform as prepareStart }; - export { prepareTransform as prepareProperty }; - export { onStartTransform as onStart }; - export { onCompleteTransform as onComplete }; - export { crossCheckTransform as crossCheck }; -} -import numbers from "../interpolation/numbers.js"; -import arrays from "../interpolation/arrays.js"; -declare function getTransform(tweenProp: any, value: any): {}; -declare function prepareTransform(tweenProp: any, value: any): {}; -import { onStartTransform } from "./transformMatrixBase.js"; -declare function onCompleteTransform(tweenProp: any): void; -declare function crossCheckTransform(tweenProp: any): void; diff --git a/types/src/components/transformMatrixBase.d.ts b/types/src/components/transformMatrixBase.d.ts deleted file mode 100644 index 911c469..0000000 --- a/types/src/components/transformMatrixBase.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -export namespace onStartTransform { - function transform(tweenProp: any): void; - function transform(tweenProp: any): void; - function CSS3Matrix(prop: any): void; - function CSS3Matrix(prop: any): void; -} -export namespace baseMatrixTransform { - export { matrixComponent as component }; - export const property: string; - export namespace functions { - export { onStartTransform as onStart }; - } - export namespace Interpolate { - export { numbers as perspective }; - export { arrays as translate3d }; - export { arrays as rotate3d }; - export { arrays as skew }; - export { arrays as scale3d }; - } -} -export default baseMatrixTransform; -declare const matrixComponent: "transformMatrixBase"; -import numbers from "../interpolation/numbers.js"; -import arrays from "../interpolation/arrays.js"; diff --git a/types/src/core/add.d.ts b/types/src/core/add.d.ts deleted file mode 100644 index bfdb8c7..0000000 --- a/types/src/core/add.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(tw: any): number; -export default _default; diff --git a/types/src/core/getAll.d.ts b/types/src/core/getAll.d.ts deleted file mode 100644 index 748dcf1..0000000 --- a/types/src/core/getAll.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(): never[]; -export default _default; diff --git a/types/src/core/internals.d.ts b/types/src/core/internals.d.ts deleted file mode 100644 index 260f982..0000000 --- a/types/src/core/internals.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -declare namespace _default { - export { add }; - export { remove }; - export { getAll }; - export { removeAll }; - export { stop }; - export { linkInterpolation }; -} -export default _default; -import add from "./add.js"; -import remove from "./remove.js"; -import getAll from "./getAll.js"; -import removeAll from "./removeAll.js"; -import { stop } from "./render.js"; -import linkInterpolation from "./linkInterpolation.js"; diff --git a/types/src/core/linkInterpolation.d.ts b/types/src/core/linkInterpolation.d.ts deleted file mode 100644 index 681707e..0000000 --- a/types/src/core/linkInterpolation.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function linkInterpolation(): void; diff --git a/types/src/core/queueStart.d.ts b/types/src/core/queueStart.d.ts deleted file mode 100644 index e28e758..0000000 --- a/types/src/core/queueStart.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function queueStart(): void; diff --git a/types/src/core/remove.d.ts b/types/src/core/remove.d.ts deleted file mode 100644 index faa732d..0000000 --- a/types/src/core/remove.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(tw: any): void; -export default _default; diff --git a/types/src/core/removeAll.d.ts b/types/src/core/removeAll.d.ts deleted file mode 100644 index 9b8fba0..0000000 --- a/types/src/core/removeAll.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(): void; -export default _default; diff --git a/types/src/core/render.d.ts b/types/src/core/render.d.ts deleted file mode 100644 index b985745..0000000 --- a/types/src/core/render.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function stop(): void; -export default Render; -export let Tick: number; -export function Ticker(time: any): void; -declare namespace Render { - export { Tick }; - export { Ticker }; - export { Tweens }; - export { Time }; -} -import Tweens from "../objects/tweens.js"; -declare namespace Time { - export { now }; -} -import now from "../util/now.js"; diff --git a/types/src/easing/easing-base.d.ts b/types/src/easing/easing-base.d.ts deleted file mode 100644 index 1eab2d2..0000000 --- a/types/src/easing/easing-base.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -export default Easing; -declare namespace Easing { - function linear(t: any): any; - function easingQuadraticIn(t: any): number; - function easingQuadraticOut(t: any): number; - function easingQuadraticInOut(t: any): number; - function easingCubicIn(t: any): number; - function easingCubicOut(t0: any): number; - function easingCubicInOut(t: any): number; - function easingCircularIn(t: any): number; - function easingCircularOut(t0: any): number; - function easingCircularInOut(t0: any): number; - function easingBackIn(t: any): number; - function easingBackOut(t0: any): number; - function easingBackInOut(t0: any): number; -} diff --git a/types/src/easing/easing-bezier.d.ts b/types/src/easing/easing-bezier.d.ts deleted file mode 100644 index 103f137..0000000 --- a/types/src/easing/easing-bezier.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -export default Easing; -declare namespace Easing { - const linear: CubicBezier; - const easingSinusoidalIn: CubicBezier; - const easingSinusoidalOut: CubicBezier; - const easingSinusoidalInOut: CubicBezier; - const easingQuadraticIn: CubicBezier; - const easingQuadraticOut: CubicBezier; - const easingQuadraticInOut: CubicBezier; - const easingCubicIn: CubicBezier; - const easingCubicOut: CubicBezier; - const easingCubicInOut: CubicBezier; - const easingQuarticIn: CubicBezier; - const easingQuarticOut: CubicBezier; - const easingQuarticInOut: CubicBezier; - const easingQuinticIn: CubicBezier; - const easingQuinticOut: CubicBezier; - const easingQuinticInOut: CubicBezier; - const easingExponentialIn: CubicBezier; - const easingExponentialOut: CubicBezier; - const easingExponentialInOut: CubicBezier; - const easingCircularIn: CubicBezier; - const easingCircularOut: CubicBezier; - const easingCircularInOut: CubicBezier; - const easingBackIn: CubicBezier; - const easingBackOut: CubicBezier; - const easingBackInOut: CubicBezier; -} -import CubicBezier from "cubic-bezier-easing"; diff --git a/types/src/easing/easing.d.ts b/types/src/easing/easing.d.ts deleted file mode 100644 index ff46a67..0000000 --- a/types/src/easing/easing.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -export default Easing; -declare namespace Easing { - function linear(t: any): any; - function easingSinusoidalIn(t: any): number; - function easingSinusoidalOut(t: any): number; - function easingSinusoidalInOut(t: any): number; - function easingQuadraticIn(t: any): number; - function easingQuadraticOut(t: any): number; - function easingQuadraticInOut(t: any): number; - function easingCubicIn(t: any): number; - function easingCubicOut(t0: any): number; - function easingCubicInOut(t: any): number; - function easingQuarticIn(t: any): number; - function easingQuarticOut(t0: any): number; - function easingQuarticInOut(t0: any): number; - function easingQuinticIn(t: any): number; - function easingQuinticOut(t0: any): number; - function easingQuinticInOut(t0: any): number; - function easingCircularIn(t: any): number; - function easingCircularOut(t0: any): number; - function easingCircularInOut(t0: any): number; - function easingExponentialIn(t: any): number; - function easingExponentialOut(t: any): number; - function easingExponentialInOut(t0: any): number; - function easingBackIn(t: any): number; - function easingBackOut(t0: any): number; - function easingBackInOut(t0: any): number; - function easingElasticIn(t0: any): number; - function easingElasticOut(t: any): number; - function easingElasticInOut(t0: any): number; - function easingBounceIn(t: any): number; - function easingBounceOut(t0: any): number; - function easingBounceInOut(t: any): number; -} diff --git a/types/src/index-base.d.ts b/types/src/index-base.d.ts deleted file mode 100644 index c8d37c0..0000000 --- a/types/src/index-base.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -declare namespace _default { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { Objects }; - export { Easing }; - export { Util }; - export { Render }; - export { Interpolate }; - export { Internals }; - export { Selector }; - export { Version }; -} -export default _default; -import Animation from "./animation/animationBase.js"; -import Components from "./objects/componentsBase.js"; -import Tween from "./tween/tweenBase.js"; -import fromTo from "./interface/fromTo.js"; -import Objects from "./objects/objectsBase.js"; -import Easing from "./easing/easing-base.js"; -import Util from "./objects/util.js"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; diff --git a/types/src/index-extra.d.ts b/types/src/index-extra.d.ts deleted file mode 100644 index e5cb8fb..0000000 --- a/types/src/index-extra.d.ts +++ /dev/null @@ -1,41 +0,0 @@ -declare namespace _default { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { to }; - export { TweenCollection }; - export { ProgressBar }; - export { allFromTo }; - export { allTo }; - export { Objects }; - export { Util }; - export { Easing }; - export { CubicBezier }; - export { Render }; - export { Interpolate }; - export { Process }; - export { Internals }; - export { Selector }; - export { Version }; -} -export default _default; -import Animation from "./animation/animationDevelopment.js"; -import Components from "./objects/componentsExtra.js"; -import Tween from "./tween/tweenExtra.js"; -import fromTo from "./interface/fromTo.js"; -import to from "./interface/to.js"; -import TweenCollection from "./tween/tweenCollection.js"; -import ProgressBar from "./util/progressBar.js"; -import allFromTo from "./interface/allFromTo.js"; -import allTo from "./interface/allTo.js"; -import Objects from "./objects/objects.js"; -import Util from "./objects/util.js"; -import Easing from "./easing/easing-bezier.js"; -import CubicBezier from "cubic-bezier-easing"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Process from "./process/process.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; diff --git a/types/src/index-legacy.d.ts b/types/src/index-legacy.d.ts deleted file mode 100644 index 35afab0..0000000 --- a/types/src/index-legacy.d.ts +++ /dev/null @@ -1,54 +0,0 @@ -declare namespace _default { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { to }; - export { TweenCollection }; - export { allFromTo }; - export { allTo }; - export { Objects }; - export { Util }; - export { Easing }; - export { Render }; - export { Interpolate }; - export { Process }; - export { Internals }; - export { Selector }; - export { Version }; -} -export default _default; -import Animation from "./animation/animation.js"; -declare namespace Components { - export { BoxModel }; - export { ColorProperties }; - export { HTMLAttributes }; - export { OpacityProperty }; - export { TextWrite }; - export { TransformLegacy }; - export { SVGDraw }; - export { SVGMorph }; -} -import Tween from "./tween/tween.js"; -import fromTo from "./interface/fromTo.js"; -import to from "./interface/to.js"; -import TweenCollection from "./tween/tweenCollection.js"; -import allFromTo from "./interface/allFromTo.js"; -import allTo from "./interface/allTo.js"; -import Objects from "./objects/objects.js"; -import Util from "./objects/util.js"; -import Easing from "./easing/easing.js"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Process from "./process/process.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; -import BoxModel from "./components/boxModelEssential.js"; -import ColorProperties from "./components/colorProperties.js"; -import HTMLAttributes from "./components/htmlAttributes.js"; -import OpacityProperty from "./components/opacityProperty.js"; -import TextWrite from "./components/textWrite.js"; -import TransformLegacy from "./components/transformLegacy.js"; -import SVGDraw from "./components/svgDraw.js"; -import SVGMorph from "./components/svgMorph.js"; diff --git a/types/src/index.d.ts b/types/src/index.d.ts deleted file mode 100644 index e10e704..0000000 --- a/types/src/index.d.ts +++ /dev/null @@ -1,39 +0,0 @@ -export default KUTE; -declare namespace KUTE { - export { Animation }; - export { Components }; - export { Tween }; - export { fromTo }; - export { to }; - export { TweenCollection }; - export { allFromTo }; - export { allTo }; - export { Objects }; - export { Util }; - export { Easing }; - export { CubicBezier }; - export { Render }; - export { Interpolate }; - export { Process }; - export { Internals }; - export { Selector }; - export { Version }; -} -import Animation from "./animation/animation.js"; -import Components from "./objects/componentsDefault.js"; -import Tween from "./tween/tween.js"; -import fromTo from "./interface/fromTo.js"; -import to from "./interface/to.js"; -import TweenCollection from "./tween/tweenCollection.js"; -import allFromTo from "./interface/allFromTo.js"; -import allTo from "./interface/allTo.js"; -import Objects from "./objects/objects.js"; -import Util from "./objects/util.js"; -import Easing from "./easing/easing-bezier.js"; -import CubicBezier from "cubic-bezier-easing"; -import Render from "./core/render.js"; -import Interpolate from "./objects/interpolate.js"; -import Process from "./process/process.js"; -import Internals from "./core/internals.js"; -import Selector from "./util/selector.js"; -import Version from "./util/version.js"; diff --git a/types/src/interface/allFromTo.d.ts b/types/src/interface/allFromTo.d.ts deleted file mode 100644 index b4c41fa..0000000 --- a/types/src/interface/allFromTo.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default function allFromTo(elements: any, startObject: any, endObject: any, optionsObj: any): TweenCollection; -import TweenCollection from "../tween/tweenCollection.js"; diff --git a/types/src/interface/allTo.d.ts b/types/src/interface/allTo.d.ts deleted file mode 100644 index c584ff9..0000000 --- a/types/src/interface/allTo.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default function allTo(elements: any, endObject: any, optionsObj: any): TweenCollection; -import TweenCollection from "../tween/tweenCollection.js"; diff --git a/types/src/interface/fromTo.d.ts b/types/src/interface/fromTo.d.ts deleted file mode 100644 index 9b1e79a..0000000 --- a/types/src/interface/fromTo.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function fromTo(element: any, startObject: any, endObject: any, optionsObj: any): any; diff --git a/types/src/interface/to.d.ts b/types/src/interface/to.d.ts deleted file mode 100644 index 2f06841..0000000 --- a/types/src/interface/to.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function to(element: any, endObject: any, optionsObj: any): any; diff --git a/types/src/interpolation/arrays.d.ts b/types/src/interpolation/arrays.d.ts deleted file mode 100644 index 52faadf..0000000 --- a/types/src/interpolation/arrays.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function arrays(a: any, b: any, v: any): number[]; diff --git a/types/src/interpolation/colors.d.ts b/types/src/interpolation/colors.d.ts deleted file mode 100644 index cdd4c10..0000000 --- a/types/src/interpolation/colors.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function colors(a: any, b: any, v: any): string; diff --git a/types/src/interpolation/coords.d.ts b/types/src/interpolation/coords.d.ts deleted file mode 100644 index 87b0504..0000000 --- a/types/src/interpolation/coords.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function coords(a: any, b: any, l: any, v: any): never[][]; diff --git a/types/src/interpolation/numbers.d.ts b/types/src/interpolation/numbers.d.ts deleted file mode 100644 index 1ced278..0000000 --- a/types/src/interpolation/numbers.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function numbers(a: any, b: any, v: any): number; diff --git a/types/src/interpolation/perspective.d.ts b/types/src/interpolation/perspective.d.ts deleted file mode 100644 index ac066c1..0000000 --- a/types/src/interpolation/perspective.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function perspective(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/rotate.d.ts b/types/src/interpolation/rotate.d.ts deleted file mode 100644 index a24c6fc..0000000 --- a/types/src/interpolation/rotate.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function rotate(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/rotate3d.d.ts b/types/src/interpolation/rotate3d.d.ts deleted file mode 100644 index c73abb0..0000000 --- a/types/src/interpolation/rotate3d.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function rotate3d(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/scale.d.ts b/types/src/interpolation/scale.d.ts deleted file mode 100644 index 934615f..0000000 --- a/types/src/interpolation/scale.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function scale(a: any, b: any, v: any): string; diff --git a/types/src/interpolation/skew.d.ts b/types/src/interpolation/skew.d.ts deleted file mode 100644 index cfa640b..0000000 --- a/types/src/interpolation/skew.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function skew(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/skewX.d.ts b/types/src/interpolation/skewX.d.ts deleted file mode 100644 index 54584c9..0000000 --- a/types/src/interpolation/skewX.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function skewX(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/skewY.d.ts b/types/src/interpolation/skewY.d.ts deleted file mode 100644 index 8add4da..0000000 --- a/types/src/interpolation/skewY.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function skewY(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/translate.d.ts b/types/src/interpolation/translate.d.ts deleted file mode 100644 index 03d5296..0000000 --- a/types/src/interpolation/translate.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function translate(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/translate3d.d.ts b/types/src/interpolation/translate3d.d.ts deleted file mode 100644 index df44978..0000000 --- a/types/src/interpolation/translate3d.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function translate3d(a: any, b: any, u: any, v: any): string; diff --git a/types/src/interpolation/units.d.ts b/types/src/interpolation/units.d.ts deleted file mode 100644 index 3004ddc..0000000 --- a/types/src/interpolation/units.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function units(a: any, b: any, u: any, v: any): any; diff --git a/types/src/objects/componentsBase.d.ts b/types/src/objects/componentsBase.d.ts deleted file mode 100644 index 06df2c9..0000000 --- a/types/src/objects/componentsBase.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export default Components; -declare namespace Components { - const Transform: Animation; - const BoxModel: Animation; - const Opacity: Animation; -} -import Animation from "../animation/animationBase.js"; diff --git a/types/src/objects/componentsDefault.d.ts b/types/src/objects/componentsDefault.d.ts deleted file mode 100644 index e875a98..0000000 --- a/types/src/objects/componentsDefault.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -export default Components; -declare namespace Components { - export { EssentialBoxModel }; - export { ColorsProperties }; - export { HTMLAttributes }; - export { OpacityProperty }; - export { TextWrite }; - export { TransformFunctions }; - export { SVGDraw }; - export { SVGMorph }; -} -import EssentialBoxModel from "../components/boxModelEssential.js"; -import ColorsProperties from "../components/colorProperties.js"; -import HTMLAttributes from "../components/htmlAttributes.js"; -import OpacityProperty from "../components/opacityProperty.js"; -import TextWrite from "../components/textWrite.js"; -import TransformFunctions from "../components/transformFunctions.js"; -import SVGDraw from "../components/svgDraw.js"; -import SVGMorph from "../components/svgMorph.js"; diff --git a/types/src/objects/componentsExtra.d.ts b/types/src/objects/componentsExtra.d.ts deleted file mode 100644 index c963a40..0000000 --- a/types/src/objects/componentsExtra.d.ts +++ /dev/null @@ -1,35 +0,0 @@ -export default Components; -declare namespace Components { - export { BackgroundPosition }; - export { BorderRadius }; - export { BoxModel }; - export { ClipProperty }; - export { ColorProperties }; - export { FilterEffects }; - export { HTMLAttributes }; - export { OpacityProperty }; - export { SVGDraw }; - export { SVGCubicMorph }; - export { SVGTransform }; - export { ScrollProperty }; - export { ShadowProperties }; - export { TextProperties }; - export { TextWriteProperties }; - export { MatrixTransform }; -} -import BackgroundPosition from "../components/backgroundPosition.js"; -import BorderRadius from "../components/borderRadius.js"; -import BoxModel from "../components/boxModel.js"; -import ClipProperty from "../components/clipProperty.js"; -import ColorProperties from "../components/colorProperties.js"; -import FilterEffects from "../components/filterEffects"; -import HTMLAttributes from "../components/htmlAttributes.js"; -import OpacityProperty from "../components/opacityProperty.js"; -import SVGDraw from "../components/svgDraw.js"; -import SVGCubicMorph from "../components/svgCubicMorph.js"; -import SVGTransform from "../components/svgTransform.js"; -import ScrollProperty from "../components/scrollProperty.js"; -import ShadowProperties from "../components/shadowProperties.js"; -import TextProperties from "../components/textProperties.js"; -import TextWriteProperties from "../components/textWrite.js"; -import MatrixTransform from "../components/transformMatrix.js"; diff --git a/types/src/objects/connect.d.ts b/types/src/objects/connect.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/connect.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/crossCheck.d.ts b/types/src/objects/crossCheck.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/crossCheck.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/defaultOptions.d.ts b/types/src/objects/defaultOptions.d.ts deleted file mode 100644 index 79abb9c..0000000 --- a/types/src/objects/defaultOptions.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default defaultOptions; -declare namespace defaultOptions { - const duration: number; - const delay: number; - const easing: string; -} diff --git a/types/src/objects/defaultValues.d.ts b/types/src/objects/defaultValues.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/defaultValues.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/globalObject.d.ts b/types/src/objects/globalObject.d.ts deleted file mode 100644 index 9aeba26..0000000 --- a/types/src/objects/globalObject.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default globalObject; -declare let globalObject: any; diff --git a/types/src/objects/interpolate.d.ts b/types/src/objects/interpolate.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/interpolate.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/kute.d.ts b/types/src/objects/kute.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/kute.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/linkProperty.d.ts b/types/src/objects/linkProperty.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/linkProperty.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/objects.d.ts b/types/src/objects/objects.d.ts deleted file mode 100644 index a45dfb2..0000000 --- a/types/src/objects/objects.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -declare namespace _default { - export { supportedProperties }; - export { defaultValues }; - export { defaultOptions }; - export { prepareProperty }; - export { prepareStart }; - export { crossCheck }; - export { onStart }; - export { onComplete }; - export { linkProperty }; -} -export default _default; -import supportedProperties from "./supportedProperties.js"; -import defaultValues from "./defaultValues.js"; -import defaultOptions from "./defaultOptions.js"; -import prepareProperty from "./prepareProperty.js"; -import prepareStart from "./prepareStart.js"; -import crossCheck from "./crossCheck.js"; -import onStart from "./onStart.js"; -import onComplete from "./onComplete.js"; -import linkProperty from "./linkProperty.js"; diff --git a/types/src/objects/objectsBase.d.ts b/types/src/objects/objectsBase.d.ts deleted file mode 100644 index cd4e122..0000000 --- a/types/src/objects/objectsBase.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -declare namespace _default { - export { defaultOptions }; - export { linkProperty }; - export { onStart }; - export { onComplete }; -} -export default _default; -import defaultOptions from "./defaultOptions.js"; -import linkProperty from "./linkProperty.js"; -import onStart from "./onStart.js"; -import onComplete from "./onComplete.js"; diff --git a/types/src/objects/onComplete.d.ts b/types/src/objects/onComplete.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/onComplete.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/onStart.d.ts b/types/src/objects/onStart.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/onStart.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/prepareProperty.d.ts b/types/src/objects/prepareProperty.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/prepareProperty.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/prepareStart.d.ts b/types/src/objects/prepareStart.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/prepareStart.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/supportedProperties.d.ts b/types/src/objects/supportedProperties.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/supportedProperties.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/objects/tweens.d.ts b/types/src/objects/tweens.d.ts deleted file mode 100644 index 4bff4e4..0000000 --- a/types/src/objects/tweens.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: never[]; -export default _default; diff --git a/types/src/objects/util.d.ts b/types/src/objects/util.d.ts deleted file mode 100644 index d53de1c..0000000 --- a/types/src/objects/util.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: {}; -export default _default; diff --git a/types/src/process/getInlineStyle.d.ts b/types/src/process/getInlineStyle.d.ts deleted file mode 100644 index ec3a5e4..0000000 --- a/types/src/process/getInlineStyle.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getInlineStyle(el: any): {}; diff --git a/types/src/process/getInlineStyleLegacy.d.ts b/types/src/process/getInlineStyleLegacy.d.ts deleted file mode 100644 index 2464533..0000000 --- a/types/src/process/getInlineStyleLegacy.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getInlineStyleLegacy(el: any): {}; diff --git a/types/src/process/getStartValues.d.ts b/types/src/process/getStartValues.d.ts deleted file mode 100644 index d611890..0000000 --- a/types/src/process/getStartValues.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default function getStartValues(): void; -export default class getStartValues { - valuesStart: {}; -} diff --git a/types/src/process/getStyleForProperty.d.ts b/types/src/process/getStyleForProperty.d.ts deleted file mode 100644 index e0c91fb..0000000 --- a/types/src/process/getStyleForProperty.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getStyleForProperty(elem: any, propertyName: any): any; diff --git a/types/src/process/prepareObject.d.ts b/types/src/process/prepareObject.d.ts deleted file mode 100644 index 136d9b9..0000000 --- a/types/src/process/prepareObject.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function prepareObject(obj: any, fn: any): void; diff --git a/types/src/process/process.d.ts b/types/src/process/process.d.ts deleted file mode 100644 index 0e3e3b0..0000000 --- a/types/src/process/process.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -declare namespace _default { - export { getInlineStyle }; - export { getStyleForProperty }; - export { getStartValues }; - export { prepareObject }; -} -export default _default; -import getInlineStyle from "./getInlineStyle.js"; -import getStyleForProperty from "./getStyleForProperty.js"; -import getStartValues from "./getStartValues.js"; -import prepareObject from "./prepareObject.js"; diff --git a/types/src/tween/tween.d.ts b/types/src/tween/tween.d.ts deleted file mode 100644 index 869aaf2..0000000 --- a/types/src/tween/tween.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default class Tween extends TweenBase { - constructor(...args: any[]); - paused: boolean; - _pauseTime: any; - _repeat: any; - _repeatDelay: any; - _repeatOption: any; - valuesRepeat: {}; - _yoyo: any; - _reversed: boolean; - resume(): Tween; - pause(): Tween; - reverse(): void; -} -import TweenBase from "./tweenBase.js"; diff --git a/types/src/tween/tweenBase.d.ts b/types/src/tween/tweenBase.d.ts deleted file mode 100644 index 5818406..0000000 --- a/types/src/tween/tweenBase.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -export default class TweenBase { - constructor(targetElement: any, startObject: any, endObject: any, opsObject: any); - element: any; - playing: boolean; - _startTime: any; - _startFired: boolean; - valuesEnd: any; - valuesStart: any; - _resetStart: any; - _easing: any; - _duration: any; - _delay: any; - start(time: any): TweenBase; - stop(): TweenBase; - close(): void; - chain(args: any): TweenBase; - _chain: any; - stopChainedTweens(): void; - update(time: any): boolean; -} diff --git a/types/src/tween/tweenCollection.d.ts b/types/src/tween/tweenCollection.d.ts deleted file mode 100644 index 7f57eb5..0000000 --- a/types/src/tween/tweenCollection.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export default class TweenCollection { - constructor(els: any, vS: any, vE: any, Options: any); - tweens: any[]; - length: number; - start(time: any): TweenCollection; - stop(): TweenCollection; - pause(time: any): TweenCollection; - resume(time: any): TweenCollection; - chain(args: any): TweenCollection; - playing(): boolean; - removeTweens(): void; - getMaxDuration(): number; -} diff --git a/types/src/tween/tweenExtra.d.ts b/types/src/tween/tweenExtra.d.ts deleted file mode 100644 index 6914270..0000000 --- a/types/src/tween/tweenExtra.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default class TweenExtra extends Tween { - on(name: any, fn: any): void; - option(o: any, v: any): void; -} -import Tween from "./tween.js"; diff --git a/types/src/util/degToRad.d.ts b/types/src/util/degToRad.d.ts deleted file mode 100644 index dfe5cfd..0000000 --- a/types/src/util/degToRad.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function degToRad(a: any): number; diff --git a/types/src/util/fromJSON.d.ts b/types/src/util/fromJSON.d.ts deleted file mode 100644 index a58003c..0000000 --- a/types/src/util/fromJSON.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare function _default(str: any): { - valuesStart: any; - valuesEnd: any; -}; -export default _default; diff --git a/types/src/util/getPrefix.d.ts b/types/src/util/getPrefix.d.ts deleted file mode 100644 index 46273fa..0000000 --- a/types/src/util/getPrefix.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getPrefix(): string | undefined; diff --git a/types/src/util/hexToRGB.d.ts b/types/src/util/hexToRGB.d.ts deleted file mode 100644 index f5e039a..0000000 --- a/types/src/util/hexToRGB.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare function _default(hex: any): { - r: number; - g: number; - b: number; -} | null; -export default _default; diff --git a/types/src/util/now.d.ts b/types/src/util/now.d.ts deleted file mode 100644 index 6b773c4..0000000 --- a/types/src/util/now.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default now; -declare let now: any; diff --git a/types/src/util/polyfill-legacy.d.ts b/types/src/util/polyfill-legacy.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/types/src/util/polyfill-legacy.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/types/src/util/polyfill.d.ts b/types/src/util/polyfill.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/types/src/util/polyfill.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/types/src/util/progressBar.d.ts b/types/src/util/progressBar.d.ts deleted file mode 100644 index 2dc656d..0000000 --- a/types/src/util/progressBar.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default class ProgressBar { - constructor(element: any, tween: any); - element: HTMLInputElement; - updateBar(): void; - toggleEvents(action: any): void; - updateTween(): void; - moveAction(): void; - downAction(): void; - upAction(): void; -} diff --git a/types/src/util/radToDeg.d.ts b/types/src/util/radToDeg.d.ts deleted file mode 100644 index 9ab0404..0000000 --- a/types/src/util/radToDeg.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(a: any): number; -export default _default; diff --git a/types/src/util/rgbToHex.d.ts b/types/src/util/rgbToHex.d.ts deleted file mode 100644 index d0dbe53..0000000 --- a/types/src/util/rgbToHex.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(r: any, g: any, b: any): string; -export default _default; diff --git a/types/src/util/selector.d.ts b/types/src/util/selector.d.ts deleted file mode 100644 index f28c913..0000000 --- a/types/src/util/selector.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function selector(el: any, multi: any): any; diff --git a/types/src/util/supportLegacyTransform.d.ts b/types/src/util/supportLegacyTransform.d.ts deleted file mode 100644 index 9abc091..0000000 --- a/types/src/util/supportLegacyTransform.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: boolean; -export default _default; diff --git a/types/src/util/toJSON.d.ts b/types/src/util/toJSON.d.ts deleted file mode 100644 index 5df3b87..0000000 --- a/types/src/util/toJSON.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(tween: any): string; -export default _default; diff --git a/types/src/util/transformProperty.d.ts b/types/src/util/transformProperty.d.ts deleted file mode 100644 index e384567..0000000 --- a/types/src/util/transformProperty.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: any; -export default _default; diff --git a/types/src/util/trueColor.d.ts b/types/src/util/trueColor.d.ts deleted file mode 100644 index 1cb41fd..0000000 --- a/types/src/util/trueColor.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -export default function trueColor(colorString: any): { - r: number; - g: number; - b: number; - a?: undefined; -} | { - r: number; - g: number; - b: number; - a: number; -} | undefined; diff --git a/types/src/util/trueDimension.d.ts b/types/src/util/trueDimension.d.ts deleted file mode 100644 index abeb7d9..0000000 --- a/types/src/util/trueDimension.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default function trueDimension(dimValue: any, isAngle: any): { - v: number; - u: string; -}; diff --git a/types/src/util/trueProperty.d.ts b/types/src/util/trueProperty.d.ts deleted file mode 100644 index bd3699b..0000000 --- a/types/src/util/trueProperty.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function trueProperty(property: any): any; diff --git a/types/src/util/version.d.ts b/types/src/util/version.d.ts deleted file mode 100644 index de0a7bd..0000000 --- a/types/src/util/version.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default Version; -import { version as Version } from "../../package.json"; diff --git a/types/tween/tween.d.ts b/types/tween/tween.d.ts deleted file mode 100644 index 869aaf2..0000000 --- a/types/tween/tween.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default class Tween extends TweenBase { - constructor(...args: any[]); - paused: boolean; - _pauseTime: any; - _repeat: any; - _repeatDelay: any; - _repeatOption: any; - valuesRepeat: {}; - _yoyo: any; - _reversed: boolean; - resume(): Tween; - pause(): Tween; - reverse(): void; -} -import TweenBase from "./tweenBase.js"; diff --git a/types/tween/tweenBase.d.ts b/types/tween/tweenBase.d.ts deleted file mode 100644 index 5818406..0000000 --- a/types/tween/tweenBase.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -export default class TweenBase { - constructor(targetElement: any, startObject: any, endObject: any, opsObject: any); - element: any; - playing: boolean; - _startTime: any; - _startFired: boolean; - valuesEnd: any; - valuesStart: any; - _resetStart: any; - _easing: any; - _duration: any; - _delay: any; - start(time: any): TweenBase; - stop(): TweenBase; - close(): void; - chain(args: any): TweenBase; - _chain: any; - stopChainedTweens(): void; - update(time: any): boolean; -} diff --git a/types/tween/tweenCollection.d.ts b/types/tween/tweenCollection.d.ts deleted file mode 100644 index 7f57eb5..0000000 --- a/types/tween/tweenCollection.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -export default class TweenCollection { - constructor(els: any, vS: any, vE: any, Options: any); - tweens: any[]; - length: number; - start(time: any): TweenCollection; - stop(): TweenCollection; - pause(time: any): TweenCollection; - resume(time: any): TweenCollection; - chain(args: any): TweenCollection; - playing(): boolean; - removeTweens(): void; - getMaxDuration(): number; -} diff --git a/types/tween/tweenExtra.d.ts b/types/tween/tweenExtra.d.ts deleted file mode 100644 index 6914270..0000000 --- a/types/tween/tweenExtra.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default class TweenExtra extends Tween { - on(name: any, fn: any): void; - option(o: any, v: any): void; -} -import Tween from "./tween.js"; diff --git a/types/util/degToRad.d.ts b/types/util/degToRad.d.ts deleted file mode 100644 index dfe5cfd..0000000 --- a/types/util/degToRad.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function degToRad(a: any): number; diff --git a/types/util/fromJSON.d.ts b/types/util/fromJSON.d.ts deleted file mode 100644 index a58003c..0000000 --- a/types/util/fromJSON.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare function _default(str: any): { - valuesStart: any; - valuesEnd: any; -}; -export default _default; diff --git a/types/util/getPrefix.d.ts b/types/util/getPrefix.d.ts deleted file mode 100644 index 46273fa..0000000 --- a/types/util/getPrefix.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function getPrefix(): string | undefined; diff --git a/types/util/hexToRGB.d.ts b/types/util/hexToRGB.d.ts deleted file mode 100644 index f5e039a..0000000 --- a/types/util/hexToRGB.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -declare function _default(hex: any): { - r: number; - g: number; - b: number; -} | null; -export default _default; diff --git a/types/util/now.d.ts b/types/util/now.d.ts deleted file mode 100644 index 6b773c4..0000000 --- a/types/util/now.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export default now; -declare let now: any; diff --git a/types/util/polyfill-legacy.d.ts b/types/util/polyfill-legacy.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/types/util/polyfill-legacy.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/types/util/polyfill.d.ts b/types/util/polyfill.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/types/util/polyfill.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/types/util/progressBar.d.ts b/types/util/progressBar.d.ts deleted file mode 100644 index 2dc656d..0000000 --- a/types/util/progressBar.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export default class ProgressBar { - constructor(element: any, tween: any); - element: HTMLInputElement; - updateBar(): void; - toggleEvents(action: any): void; - updateTween(): void; - moveAction(): void; - downAction(): void; - upAction(): void; -} diff --git a/types/util/radToDeg.d.ts b/types/util/radToDeg.d.ts deleted file mode 100644 index 9ab0404..0000000 --- a/types/util/radToDeg.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(a: any): number; -export default _default; diff --git a/types/util/rgbToHex.d.ts b/types/util/rgbToHex.d.ts deleted file mode 100644 index d0dbe53..0000000 --- a/types/util/rgbToHex.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(r: any, g: any, b: any): string; -export default _default; diff --git a/types/util/selector.d.ts b/types/util/selector.d.ts deleted file mode 100644 index f28c913..0000000 --- a/types/util/selector.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function selector(el: any, multi: any): any; diff --git a/types/util/supportLegacyTransform.d.ts b/types/util/supportLegacyTransform.d.ts deleted file mode 100644 index 9abc091..0000000 --- a/types/util/supportLegacyTransform.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: boolean; -export default _default; diff --git a/types/util/toJSON.d.ts b/types/util/toJSON.d.ts deleted file mode 100644 index 5df3b87..0000000 --- a/types/util/toJSON.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare function _default(tween: any): string; -export default _default; diff --git a/types/util/transformProperty.d.ts b/types/util/transformProperty.d.ts deleted file mode 100644 index e384567..0000000 --- a/types/util/transformProperty.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare var _default: any; -export default _default; diff --git a/types/util/trueColor.d.ts b/types/util/trueColor.d.ts deleted file mode 100644 index 1cb41fd..0000000 --- a/types/util/trueColor.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -export default function trueColor(colorString: any): { - r: number; - g: number; - b: number; - a?: undefined; -} | { - r: number; - g: number; - b: number; - a: number; -} | undefined; diff --git a/types/util/trueDimension.d.ts b/types/util/trueDimension.d.ts deleted file mode 100644 index abeb7d9..0000000 --- a/types/util/trueDimension.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default function trueDimension(dimValue: any, isAngle: any): { - v: number; - u: string; -}; diff --git a/types/util/trueProperty.d.ts b/types/util/trueProperty.d.ts deleted file mode 100644 index bd3699b..0000000 --- a/types/util/trueProperty.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function trueProperty(property: any): any; diff --git a/types/util/version.d.ts b/types/util/version.d.ts deleted file mode 100644 index 2db5d43..0000000 --- a/types/util/version.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default Version;