refactor(util): extract math functions and epsilons

Author: plainheart

src/Handler.ts

@@ -12,6 +12,7 @@ import Storage from './Storage';
 import Element, {ElementEvent} from './Element';
 import CanvasPainter from './canvas/Painter';
 import BoundingRect from './core/BoundingRect';
+import { PI, PI2, mathCos, mathSin } from './core/math';
 
 /**
  * [The interface between `Handler` and `HandlerProxy`]:
@@ -382,12 +383,11 @@ class Handler extends Eventful {
              */
             if (candidates.length) {
                 const rStep = 4;
-                const thetaStep = Math.PI / 12;
-                const PI2 = Math.PI * 2;
+                const thetaStep = PI / 12;
                 for (let r = 0; r < targetSizeHalf; r += rStep) {
                     for (let theta = 0; theta < PI2; theta += thetaStep) {
-                        const x1 = x + r * Math.cos(theta);
-                        const y1 = y + r * Math.sin(theta);
+                        const x1 = x + r * mathCos(theta);
+                        const y1 = y + r * mathSin(theta);
                         setHoverTarget(candidates, out, x1, y1, exclude);
                         if (out.target) {
                             return out;

src/animation/Animator.ts

@@ -21,6 +21,7 @@ import easingFuncs, { AnimationEasing } from './easing';
 import Animation from './Animation';
 import { createCubicEasingFunc } from './cubicEasing';
 import { isLinearGradient, isRadialGradient } from '../svg/helper';
+import { mathFloor, mathMax, mathMin } from '../core/math';
 
 type NumberArray = ArrayLike<number>
 type InterpolatableType = string | number | NumberArray | NumberArray[];
@@ -120,9 +121,9 @@ function fillColorStops(val0: ParsedColorStop[], val1: ParsedColorStop[]) {
     const len1 = val1.length;
 
     const shorterArr = len0 > len1 ? val1 : val0;
-    const shorterLen = Math.min(len0, len1);
+    const shorterLen = mathMin(len0, len1);
     const last = shorterArr[shorterLen - 1] || { color: [0, 0, 0, 0], offset: 0 };
-    for (let i = shorterLen; i < Math.max(len0, len1); i++) {
+    for (let i = shorterLen; i < mathMax(len0, len1); i++) {
         // Use last color stop to fill the shorter array
         shorterArr.push({
             offset: last.offset,
@@ -195,9 +196,9 @@ export function cloneValue(value: InterpolatableType) {
 }
 
 function rgba2String(rgba: number[]): string {
-    rgba[0] = Math.floor(rgba[0]) || 0;
-    rgba[1] = Math.floor(rgba[1]) || 0;
-    rgba[2] = Math.floor(rgba[2]) || 0;
+    rgba[0] = mathFloor(rgba[0]) || 0;
+    rgba[1] = mathFloor(rgba[1]) || 0;
+    rgba[2] = mathFloor(rgba[2]) || 0;
     rgba[3] = rgba[3] == null ? 1 : rgba[3];
 
     return 'rgba(' + rgba.join(',') + ')';
@@ -468,7 +469,6 @@ class Track {
         // find kf2 and kf3 and do interpolation
         let frameIdx;
         const lastFrame = this._lastFr;
-        const mathMin = Math.min;
         let frame;
         let nextFrame;
         if (kfsNum === 1) {
@@ -787,7 +787,7 @@ export default class Animator<T> {
             }
             track.addKeyframe(time, cloneValue(props[propName]), easing);
         }
-        this._maxTime = Math.max(this._maxTime, time);
+        this._maxTime = mathMax(this._maxTime, time);
         return this;
     }
 

src/animation/Clip.ts

@@ -16,6 +16,7 @@ import easingFuncs, {AnimationEasing} from './easing';
 import type Animation from './Animation';
 import { isFunction, noop } from '../core/util';
 import { createCubicEasingFunc } from './cubicEasing';
+import { mathMin } from '../core/math';
 
 type OnframeCallback = (percent: number) => void;
 type ondestroyCallback = () => void
@@ -100,7 +101,7 @@ export default class Clip {
             percent = 0;
         }
 
-        percent = Math.min(percent, 1);
+        percent = mathMin(percent, 1);
 
         const easingFunc = this.easingFunc;
         const schedule = easingFunc ? easingFunc(percent) : percent;

src/animation/easing.ts

@@ -4,6 +4,8 @@
  * @exports zrender/animation/easing
  */
 
+import { PI_OVER_2, PI2, PI, mathCos, mathSin, mathPow, mathSqrt, mathASin } from '../core/math';
+
 type easingFunc = (percent: number) => number;
 
 export type AnimationEasing = keyof typeof easingFuncs | easingFunc;
@@ -126,21 +128,21 @@ const easingFuncs = {
     * @return {number}
     */
     sinusoidalIn(k: number) {
-        return 1 - Math.cos(k * Math.PI / 2);
+        return 1 - mathCos(k * PI_OVER_2);
     },
     /**
     * @param {number} k
     * @return {number}
     */
     sinusoidalOut(k: number) {
-        return Math.sin(k * Math.PI / 2);
+        return mathSin(k * PI_OVER_2);
     },
     /**
     * @param {number} k
     * @return {number}
     */
     sinusoidalInOut(k: number) {
-        return 0.5 * (1 - Math.cos(Math.PI * k));
+        return 0.5 * (1 - mathCos(PI * k));
     },
 
     // 指数曲线的缓动（2^t）
@@ -149,14 +151,14 @@ const easingFuncs = {
     * @return {number}
     */
     exponentialIn(k: number) {
-        return k === 0 ? 0 : Math.pow(1024, k - 1);
+        return k === 0 ? 0 : mathPow(1024, k - 1);
     },
     /**
     * @param {number} k
     * @return {number}
     */
     exponentialOut(k: number) {
-        return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
+        return k === 1 ? 1 : 1 - mathPow(2, -10 * k);
     },
     /**
     * @param {number} k
@@ -170,9 +172,9 @@ const easingFuncs = {
             return 1;
         }
         if ((k *= 2) < 1) {
-            return 0.5 * Math.pow(1024, k - 1);
+            return 0.5 * mathPow(1024, k - 1);
         }
-        return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2);
+        return 0.5 * (-mathPow(2, -10 * (k - 1)) + 2);
     },
 
     // 圆形曲线的缓动（sqrt(1-t^2)）
@@ -181,24 +183,24 @@ const easingFuncs = {
     * @return {number}
     */
     circularIn(k: number) {
-        return 1 - Math.sqrt(1 - k * k);
+        return 1 - mathSqrt(1 - k * k);
     },
     /**
     * @param {number} k
     * @return {number}
     */
     circularOut(k: number) {
-        return Math.sqrt(1 - (--k * k));
+        return mathSqrt(1 - (--k * k));
     },
     /**
     * @param {number} k
     * @return {number}
     */
     circularInOut(k: number) {
         if ((k *= 2) < 1) {
-            return -0.5 * (Math.sqrt(1 - k * k) - 1);
+            return -0.5 * (mathSqrt(1 - k * k) - 1);
         }
-        return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
+        return 0.5 * (mathSqrt(1 - (k -= 2) * k) + 1);
     },
 
     // 创建类似于弹簧在停止前来回振荡的动画
@@ -221,10 +223,10 @@ const easingFuncs = {
             s = p / 4;
         }
         else {
-            s = p * Math.asin(1 / a) / (2 * Math.PI);
+            s = p * mathASin(1 / a) / PI2;
         }
-        return -(a * Math.pow(2, 10 * (k -= 1))
-                    * Math.sin((k - s) * (2 * Math.PI) / p));
+        return -(a * mathPow(2, 10 * (k -= 1))
+                    * mathSin((k - s) * PI2 / p));
     },
     /**
     * @param {number} k
@@ -245,38 +247,38 @@ const easingFuncs = {
             s = p / 4;
         }
         else {
-            s = p * Math.asin(1 / a) / (2 * Math.PI);
+            s = p * mathASin(1 / a) / PI2;
         }
-        return (a * Math.pow(2, -10 * k)
-                    * Math.sin((k - s) * (2 * Math.PI) / p) + 1);
+        return (a * mathPow(2, -10 * k)
+                    * mathSin((k - s) * PI2 / p) + 1);
     },
     /**
     * @param {number} k
     * @return {number}
     */
     elasticInOut(k: number) {
-        let s;
-        let a = 0.1;
-        let p = 0.4;
         if (k === 0) {
             return 0;
         }
         if (k === 1) {
             return 1;
         }
+        let s;
+        let a = 0.1;
+        const p = 0.4;
         if (!a || a < 1) {
             a = 1;
             s = p / 4;
         }
         else {
-            s = p * Math.asin(1 / a) / (2 * Math.PI);
+            s = p * mathASin(1 / a) / PI2;
         }
         if ((k *= 2) < 1) {
-            return -0.5 * (a * Math.pow(2, 10 * (k -= 1))
-                * Math.sin((k - s) * (2 * Math.PI) / p));
+            return -0.5 * (a * mathPow(2, 10 * (k -= 1))
+                * mathSin((k - s) * PI2 / p));
         }
-        return a * Math.pow(2, -10 * (k -= 1))
-                * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
+        return a * mathPow(2, -10 * (k -= 1))
+                * mathSin((k - s) * PI2 / p) * 0.5 + 1;
 
     },
 
@@ -286,23 +288,23 @@ const easingFuncs = {
     * @return {number}
     */
     backIn(k: number) {
-        let s = 1.70158;
+        const s = 1.70158;
         return k * k * ((s + 1) * k - s);
     },
     /**
     * @param {number} k
     * @return {number}
     */
     backOut(k: number) {
-        let s = 1.70158;
+        const s = 1.70158;
         return --k * k * ((s + 1) * k + s) + 1;
     },
     /**
     * @param {number} k
     * @return {number}
     */
     backInOut(k: number) {
-        let s = 1.70158 * 1.525;
+        const s = 1.70158 * 1.525;
         if ((k *= 2) < 1) {
             return 0.5 * (k * k * ((s + 1) * k - s));
         }

src/canvas/Painter.ts

@@ -14,6 +14,7 @@ import BoundingRect from '../core/BoundingRect';
 import { REDRAW_BIT } from '../graphic/constants';
 import { getSize } from './helper';
 import type IncrementalDisplayable from '../graphic/IncrementalDisplayable';
+import { mathRandom } from '../core/math';
 
 const HOVER_LAYER_ZLEVEL = 1e5;
 const CANVAS_ZLEVEL = 314159;
@@ -236,7 +237,7 @@ export default class CanvasPainter implements PainterBase {
 
         const zlevelList = this._zlevelList;
 
-        this._redrawId = Math.random();
+        this._redrawId = mathRandom();
 
         this._paintList(list, prevList, paintAll, this._redrawId);
 

src/canvas/graphic.ts

@@ -11,7 +11,7 @@ import Path, { PathStyleProps } from '../graphic/Path';
 import ZRImage, { ImageStyleProps } from '../graphic/Image';
 import TSpan, {TSpanStyleProps} from '../graphic/TSpan';
 import { MatrixArray } from '../core/matrix';
-import { RADIAN_TO_DEGREE } from '../core/util';
+import { mathMax, mathMin, RADIAN_TO_DEGREE } from '../core/math';
 import { getLineDash } from './dashStyle';
 import { REDRAW_BIT, SHAPE_CHANGED_BIT } from '../graphic/constants';
 import type IncrementalDisplayable from '../graphic/IncrementalDisplayable';
@@ -383,7 +383,7 @@ function bindCommonProps(
         flushPathDrawn(ctx, scope);
         styleChanged = true;
         // Ensure opacity is between 0 ~ 1. Invalid opacity will lead to a failure set and use the leaked opacity from the previous.
-        const opacity = Math.max(Math.min(style.opacity, 1), 0);
+        const opacity = mathMax(mathMin(style.opacity, 1), 0);
         ctx.globalAlpha = isNaN(opacity) ? DEFAULT_COMMON_STYLE.opacity : opacity;
     }
 

src/canvas/helper.ts

@@ -3,6 +3,7 @@ import { RadialGradientObject } from '../graphic/RadialGradient';
 import { GradientObject } from '../graphic/Gradient';
 import { RectLike } from '../core/BoundingRect';
 import Path from '../graphic/Path';
+import { mathMin } from '../core/math';
 
 function isSafeNum(num: number) {
     // NaN、Infinity、undefined、'xx'
@@ -46,7 +47,7 @@ export function createRadialGradient(
 ) {
     const width = rect.width;
     const height = rect.height;
-    const min = Math.min(width, height);
+    const min = mathMin(width, height);
 
     let x = obj.x == null ? 0.5 : obj.x;
     let y = obj.y == null ? 0.5 : obj.y;

src/config.ts

@@ -1,10 +1,11 @@
 import env from './core/env';
+import { mathMax } from './core/math';
 
 let dpr = 1;
 
 // If in browser environment
 if (env.hasGlobalWindow) {
-    dpr = Math.max(
+    dpr = mathMax(
         window.devicePixelRatio
         || (window.screen && (window.screen as any).deviceXDPI / (window.screen as any).logicalXDPI)
         || 1, 1

src/contain/arc.ts

@@ -1,7 +1,6 @@
 
 import {normalizeRadian} from './util';
-
-const PI2 = Math.PI * 2;
+import { PI2, EPSILON4, mathAbs, mathSqrt, mathATan2 } from '../core/math';
 
 /**
  * 圆弧描边包含判断
@@ -19,13 +18,13 @@ export function containStroke(
 
     x -= cx;
     y -= cy;
-    const d = Math.sqrt(x * x + y * y);
+    const d = mathSqrt(x * x + y * y);
 
     if ((d - _l > r) || (d + _l < r)) {
         return false;
     }
     // TODO
-    if (Math.abs(startAngle - endAngle) % PI2 < 1e-4) {
+    if (mathAbs(startAngle - endAngle) % PI2 < EPSILON4) {
         // Is a circle
         return true;
     }
@@ -42,7 +41,7 @@ export function containStroke(
         endAngle += PI2;
     }
 
-    let angle = Math.atan2(y, x);
+    let angle = mathATan2(y, x);
     if (angle < 0) {
         angle += PI2;
     }

src/contain/line.ts

@@ -1,3 +1,4 @@
+import { mathAbs } from '../core/math';
 
 /**
  * 线段包含判断
@@ -35,7 +36,7 @@ export function containStroke(
         _b = (x0 * y1 - x1 * y0) / (x0 - x1);
     }
     else {
-        return Math.abs(x - x0) <= _l / 2;
+        return mathAbs(x - x0) <= _l / 2;
     }
     const tmp = _a * x - y + _b;
     const _s = tmp * tmp / (_a * _a + 1);