From 15e5e4cb59c4d52f857b1679cc87deafd6797bbb Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 7 May 2019 15:45:47 +0800 Subject: [PATCH] :bug: Do not prettier js in less --- .prettierignore | 1 + components/style/color/bezierEasing.less | 155 +++++++++++++++-------- components/style/color/colorPalette.less | 93 +++++++++----- components/style/color/tinyColor.less | 2 +- 4 files changed, 168 insertions(+), 83 deletions(-) diff --git a/.prettierignore b/.prettierignore index b89e6391b0..5676463006 100644 --- a/.prettierignore +++ b/.prettierignore @@ -24,3 +24,4 @@ components/*/*.jsx .editorconfig .eslintignore **/*.yml +components/style/color/*.less diff --git a/components/style/color/bezierEasing.less b/components/style/color/bezierEasing.less index 9a92f3ecfb..f53ffb3680 100644 --- a/components/style/color/bezierEasing.less +++ b/components/style/color/bezierEasing.less @@ -1,57 +1,108 @@ /* stylelint-disable */ .bezierEasingMixin() { - @functions: ~`( - function() {var NEWTON_ITERATIONS = 4; var NEWTON_MIN_SLOPE = 0.001; var SUBDIVISION_PRECISION - = 0.0000001; var SUBDIVISION_MAX_ITERATIONS = 10; var kSplineTableSize = 11; var kSampleStepSize - = 1 / (kSplineTableSize - 1) ; var float32ArraySupported = typeof Float32Array === 'function' - ; function A (aA1, aA2) {return 1 - 3 * aA2 + 3 * aA1;} function B (aA1, aA2) {return 3 * - aA2 - 6 * aA1;} function C (aA1) {return 3 * aA1;} / / Returns x(t) given t, - x1, - and x2, - or y(t) given t, - y1, - and y2. function calcBezier (aT, aA1, aA2) {return ( - (A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1) - ) * aT;} / / Returns dx/dt given t, - x1, - and x2, - or dy/dt given t, - y1, - and y2. function getSlope (aT, aA1, aA2) {return 3 * A(aA1, aA2) * aT * aT + 2 * B(aA1, aA2) * - aT + C(aA1) ;} function binarySubdivide (aX, aA, aB, mX1, mX2) {var currentX, - currentT, - i = 0; do {currentT = aA + (aB - aA) / 2.0; currentX = calcBezier(currentT, mX1, mX2) - aX; if - (currentX > 0) {aB = currentT;} else {aA = currentT;}} while - (Math.abs(currentX) > SUBDIVISION_PRECISION && + +i < SUBDIVISION_MAX_ITERATIONS) ; return - currentT;} function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {for - (var i = 0; i < NEWTON_ITERATIONS; + +i) {var currentSlope = getSlope(aGuessT, mX1, mX2) ; if - (currentSlope === 0) {return aGuessT;} var currentX = calcBezier(aGuessT, mX1, mX2) - aX; aGuessT -= - currentX / currentSlope;} return aGuessT;} var BezierEasing = function (mX1, mY1, mX2, mY2) - {if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {throw new - Error('bezier x values must be in [0, 1] range') ;} / / Precompute samples table var sampleValues - = float32ArraySupported ? new Float32Array(kSplineTableSize): new Array(kSplineTableSize) ; if - (mX1 !== mY1 || mX2 !== mY2) {for (var i = 0; i < kSplineTableSize; + +i) {sampleValues[i] = - calcBezier(i * kSampleStepSize, mX1, mX2) ;}} function getTForX (aX) {var intervalStart = - 0.0; var currentSample = 1; var lastSample = kSplineTableSize - 1; for - (; currentSample !== lastSample && sampleValues[currentSample] <= aX; + +currentSample) {intervalStart + - = kSampleStepSize;} --currentSample; / / Interpolate to provide an initial guess for t var - dist = (aX - sampleValues[currentSample]) / - (sampleValues[currentSample + 1] - sampleValues[currentSample]) ; var guessForT = - intervalStart + dist * kSampleStepSize; var initialSlope = getSlope(guessForT, mX1, mX2) ; - if (initialSlope >= NEWTON_MIN_SLOPE) {return newtonRaphsonIterate(aX, guessForT, mX1, mX2) ;} - else if (initialSlope === 0) {return guessForT;} else {return binarySubdivide( - aX, - intervalStart, - intervalStart + kSampleStepSize, - mX1, - mX2 - ) ;}} return function BezierEasing (x) {if (mX1 === mY1 && mX2 === mY2) {return x; / / linear} / / - Because JavaScript number are imprecise, - we should guarantee the extremes are right. if (x === 0) {return 0;} if (x === 1) {return 1;} - return calcBezier(getTForX(x), mY1, mY2) ;};}; this.colorEasing = - BezierEasing(0.26, 0.09, 0.37, 0.18) ; / / less 3 requires a return return '' ;} - ) - () `; +@functions: ~`(function() { + var NEWTON_ITERATIONS = 4; + var NEWTON_MIN_SLOPE = 0.001; + var SUBDIVISION_PRECISION = 0.0000001; + var SUBDIVISION_MAX_ITERATIONS = 10; + + var kSplineTableSize = 11; + var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); + + var float32ArraySupported = typeof Float32Array === 'function'; + + function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } + function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } + function C (aA1) { return 3.0 * aA1; } + + // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. + function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } + + // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. + function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } + + function binarySubdivide (aX, aA, aB, mX1, mX2) { + var currentX, currentT, i = 0; + do { + currentT = aA + (aB - aA) / 2.0; + currentX = calcBezier(currentT, mX1, mX2) - aX; + if (currentX > 0.0) { + aB = currentT; + } else { + aA = currentT; + } + } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); + return currentT; + } + + function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { + for (var i = 0; i < NEWTON_ITERATIONS; ++i) { + var currentSlope = getSlope(aGuessT, mX1, mX2); + if (currentSlope === 0.0) { + return aGuessT; + } + var currentX = calcBezier(aGuessT, mX1, mX2) - aX; + aGuessT -= currentX / currentSlope; + } + return aGuessT; + } + + var BezierEasing = function (mX1, mY1, mX2, mY2) { + if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { + throw new Error('bezier x values must be in [0, 1] range'); + } + + // Precompute samples table + var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); + if (mX1 !== mY1 || mX2 !== mY2) { + for (var i = 0; i < kSplineTableSize; ++i) { + sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); + } + } + + function getTForX (aX) { + var intervalStart = 0.0; + var currentSample = 1; + var lastSample = kSplineTableSize - 1; + + for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { + intervalStart += kSampleStepSize; + } + --currentSample; + + // Interpolate to provide an initial guess for t + var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); + var guessForT = intervalStart + dist * kSampleStepSize; + + var initialSlope = getSlope(guessForT, mX1, mX2); + if (initialSlope >= NEWTON_MIN_SLOPE) { + return newtonRaphsonIterate(aX, guessForT, mX1, mX2); + } else if (initialSlope === 0.0) { + return guessForT; + } else { + return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); + } + } + + return function BezierEasing (x) { + if (mX1 === mY1 && mX2 === mY2) { + return x; // linear + } + // Because JavaScript number are imprecise, we should guarantee the extremes are right. + if (x === 0) { + return 0; + } + if (x === 1) { + return 1; + } + return calcBezier(getTForX(x), mY1, mY2); + }; + }; + + this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18); + // less 3 requires a return + return ''; +})()`; } // It is hacky way to make this function will be compiled preferentially by less // resolve error: `ReferenceError: colorPalette is not defined` diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less index f66f41d57d..069991137c 100644 --- a/components/style/color/colorPalette.less +++ b/components/style/color/colorPalette.less @@ -1,40 +1,73 @@ /* stylelint-disable no-duplicate-selectors */ -@import 'bezierEasing'; -@import 'tinyColor'; +@import "bezierEasing"; +@import "tinyColor"; // We create a very complex algorithm which take the place of original tint/shade color system // to make sure no one can understand it 👻 // and create an entire color palette magicly by inputing just a single primary color. // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin .colorPaletteMixin() { - @functions: ~`( - function() {var hueStep = 2; var saturationStep = 16; var saturationStep2 = 5; var brightnessStep1 - = 5; var brightnessStep2 = 15; var lightColorCount = 5; var darkColorCount = 4; var getHue = - function(hsv, i, isLight) {var hue; if (hsv.h >= 60 && hsv.h <= 240) {hue = isLight ? hsv.h - - hueStep * i: hsv.h + hueStep * i;} else {hue = isLight ? hsv.h + hueStep * i: hsv.h - hueStep * - i;} if (hue < 0) {hue + = 360;} else if (hue >= 360) {hue -= 360;} return Math.round(hue) ;}; - var getSaturation = function(hsv, i, isLight) {var saturation; if (isLight) {saturation = Math.round( - hsv.s * 100 - ) - saturationStep * i;} else if (i == darkColorCount) {saturation = Math.round( - hsv.s * 100 - ) + saturationStep;} else {saturation = Math.round(hsv.s * 100) + saturationStep2 * i;} if - (saturation > 100) {saturation = 100;} if - (isLight && i === lightColorCount && saturation > 10) {saturation = 10;} if (saturation < 6) - {saturation = 6;} return Math.round(saturation) ;}; var getValue = function(hsv, i, isLight) - {if (isLight) {return Math.round(hsv.v * 100) + brightnessStep1 * i;} return Math.round( - hsv.v * 100 - ) - brightnessStep2 * i;}; this.colorPalette = function(color, index) {var isLight = index - <= 6; var hsv = tinycolor(color) .toHsv() ; var i = isLight ? lightColorCount + 1 - index: - index - lightColorCount - 1; return - tinycolor( - {h: getHue(hsv, i, isLight), - s: getSaturation(hsv, i, isLight), - v: getValue(hsv, i, isLight), - } - ) - .toHexString() ;};} - ) - () `; +@functions: ~`(function() { + var hueStep = 2; + var saturationStep = 16; + var saturationStep2 = 5; + var brightnessStep1 = 5; + var brightnessStep2 = 15; + var lightColorCount = 5; + var darkColorCount = 4; + + var getHue = function(hsv, i, isLight) { + var hue; + if (hsv.h >= 60 && hsv.h <= 240) { + hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; + } else { + hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; + } + if (hue < 0) { + hue += 360; + } else if (hue >= 360) { + hue -= 360; + } + return Math.round(hue); + }; + var getSaturation = function(hsv, i, isLight) { + var saturation; + if (isLight) { + saturation = Math.round(hsv.s * 100) - saturationStep * i; + } else if (i == darkColorCount) { + saturation = Math.round(hsv.s * 100) + saturationStep; + } else { + saturation = Math.round(hsv.s * 100) + saturationStep2 * i; + } + if (saturation > 100) { + saturation = 100; + } + if (isLight && i === lightColorCount && saturation > 10) { + saturation = 10; + } + if (saturation < 6) { + saturation = 6; + } + return Math.round(saturation); + }; + var getValue = function(hsv, i, isLight) { + if (isLight) { + return Math.round(hsv.v * 100) + brightnessStep1 * i; + } + return Math.round(hsv.v * 100) - brightnessStep2 * i; + }; + + this.colorPalette = function(color, index) { + var isLight = index <= 6; + var hsv = tinycolor(color).toHsv(); + var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; + return tinycolor({ + h: getHue(hsv, i, isLight), + s: getSaturation(hsv, i, isLight), + v: getValue(hsv, i, isLight), + }).toHexString(); + }; +})()`; } // It is hacky way to make this function will be compiled preferentially by less // resolve error: `ReferenceError: colorPalette is not defined` diff --git a/components/style/color/tinyColor.less b/components/style/color/tinyColor.less index bfa4826d41..e576c78687 100644 --- a/components/style/color/tinyColor.less +++ b/components/style/color/tinyColor.less @@ -1,6 +1,6 @@ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ .tinyColorMixin() { - @functions: ~`(function() { +@functions: ~`(function() { // TinyColor v1.4.1 // https://github.com/bgrins/TinyColor // 2016-07-07, Brian Grinstead, MIT License