inl-ui 0.1.117 → 0.1.119
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -49
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/theme/index.js +70 -70
- package/dist/theme/scripts/dark-vars.js +21 -21
- package/dist/theme/scripts/default-vars.js +25 -25
- package/dist/theme/scripts/light-vars.js +22 -22
- package/dist/theme/style/color/bezierEasing.less +110 -110
- package/dist/theme/style/color/colorPalette.less +81 -81
- package/dist/theme/style/color/colors.less +162 -162
- package/dist/theme/style/color/tinyColor.less +1184 -1184
- package/dist/theme/style/compact.less +4 -4
- package/dist/theme/style/dark.less +4 -4
- package/dist/theme/style/default.less +4 -4
- package/dist/theme/style/index.less +2 -2
- package/dist/theme/style/index.tsx +2 -2
- package/dist/theme/style/themes/compact.less +295 -295
- package/dist/theme/style/themes/dark.less +790 -790
- package/dist/theme/style/themes/default.less +1067 -1067
- package/dist/theme/style/themes/index.less +7 -7
- package/dist/theme/style/themes/var-dark.less +343 -343
- package/dist/theme/style/themes/var-default.less +184 -184
- package/dist/theme/style/themes/variable.less +1122 -1122
- package/dist/theme/style/variable.less +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
# 工业PC ui库
|
|
2
|
-
|
|
3
|
-
前端通用库,包括组件、hooks、utils等。
|
|
4
|
-
|
|
5
|
-
### 运行
|
|
6
|
-
|
|
7
|
-
+ 开发模式 yarn dev
|
|
8
|
-
+ 生产打包 yarn build
|
|
9
|
-
+ 生成文档 yarn build:docs
|
|
10
|
-
+ 打包图扑工具 yarn buildtp
|
|
11
|
-
|
|
12
|
-
### 使用方法
|
|
13
|
-
|
|
14
|
-
```javascript
|
|
15
|
-
import inl from 'inl-ui';
|
|
16
|
-
import 'inl-ui/dist/style.css';
|
|
17
|
-
|
|
18
|
-
vue.use(inl)
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
### 激活主题
|
|
24
|
-
|
|
25
|
-
**vite.config.ts**
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
const additionalData = require("inl-ui/dist/theme").default;
|
|
29
|
-
|
|
30
|
-
...
|
|
31
|
-
|
|
32
|
-
css: {
|
|
33
|
-
preprocessorOptions: {
|
|
34
|
-
less: {
|
|
35
|
-
javascriptEnabled: true,
|
|
36
|
-
additionalData,
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
### 文档链接
|
|
43
|
-
|
|
44
|
-
##### [组件文档](./src/components/README.md)
|
|
45
|
-
|
|
46
|
-
##### [hooks文档](./src/hooks/README.md)
|
|
47
|
-
|
|
48
|
-
##### [Utils文档](./src/utils/README.md)
|
|
49
|
-
|
|
1
|
+
# 工业PC ui库
|
|
2
|
+
|
|
3
|
+
前端通用库,包括组件、hooks、utils等。
|
|
4
|
+
|
|
5
|
+
### 运行
|
|
6
|
+
|
|
7
|
+
+ 开发模式 yarn dev
|
|
8
|
+
+ 生产打包 yarn build
|
|
9
|
+
+ 生成文档 yarn build:docs
|
|
10
|
+
+ 打包图扑工具 yarn buildtp
|
|
11
|
+
|
|
12
|
+
### 使用方法
|
|
13
|
+
|
|
14
|
+
```javascript
|
|
15
|
+
import inl from 'inl-ui';
|
|
16
|
+
import 'inl-ui/dist/style.css';
|
|
17
|
+
|
|
18
|
+
vue.use(inl)
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### 激活主题
|
|
24
|
+
|
|
25
|
+
**vite.config.ts**
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
const additionalData = require("inl-ui/dist/theme").default;
|
|
29
|
+
|
|
30
|
+
...
|
|
31
|
+
|
|
32
|
+
css: {
|
|
33
|
+
preprocessorOptions: {
|
|
34
|
+
less: {
|
|
35
|
+
javascriptEnabled: true,
|
|
36
|
+
additionalData,
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 文档链接
|
|
43
|
+
|
|
44
|
+
##### [组件文档](./src/components/README.md)
|
|
45
|
+
|
|
46
|
+
##### [hooks文档](./src/hooks/README.md)
|
|
47
|
+
|
|
48
|
+
##### [Utils文档](./src/utils/README.md)
|
|
49
|
+
|
package/dist/index.cjs
CHANGED
|
@@ -43,7 +43,7 @@ var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios$2);
|
|
|
43
43
|
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
|
|
44
44
|
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
|
|
45
45
|
|
|
46
|
-
var version = "0.1.
|
|
46
|
+
var version = "0.1.119";
|
|
47
47
|
|
|
48
48
|
const setTheme = theme => {
|
|
49
49
|
if (theme === "dark") {
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { Key } from 'ant-design-vue/lib/table/interface';
|
|
|
11
11
|
import * as vue_jsx_runtime from 'vue/jsx-runtime';
|
|
12
12
|
import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
|
|
13
13
|
|
|
14
|
-
var version = "0.1.
|
|
14
|
+
var version = "0.1.119";
|
|
15
15
|
|
|
16
16
|
declare const _default$p: {
|
|
17
17
|
set(theme: string): void;
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
|
|
|
13
13
|
import { marked } from 'marked';
|
|
14
14
|
import '@sszj-temp/mobile/style.css';
|
|
15
15
|
|
|
16
|
-
var version = "0.1.
|
|
16
|
+
var version = "0.1.119";
|
|
17
17
|
|
|
18
18
|
const setTheme = theme => {
|
|
19
19
|
if (theme === "dark") {
|
package/dist/theme/index.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
const less = require("less");
|
|
2
|
-
const defaultVars = require("./scripts/default-vars");
|
|
3
|
-
|
|
4
|
-
const dark = require("./scripts/dark-vars");
|
|
5
|
-
const light = require("./scripts/light-vars");
|
|
6
|
-
|
|
7
|
-
const path = require("path");
|
|
8
|
-
const varDark = path.join(__dirname, ".", "style");
|
|
9
|
-
const themeConfig = [
|
|
10
|
-
{
|
|
11
|
-
theme: "dark",
|
|
12
|
-
htmlThemeAttr: "dark",
|
|
13
|
-
modifyVars: {
|
|
14
|
-
hack: `true;@import "${require.resolve(
|
|
15
|
-
varDark + "/color/colorPalette.less"
|
|
16
|
-
)}";@import "${require.resolve(varDark + "/themes/var-dark.less")}";`,
|
|
17
|
-
...defaultVars,
|
|
18
|
-
...dark,
|
|
19
|
-
"root-entry-name": "dark",
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
theme: "light",
|
|
24
|
-
htmlThemeAttr: "light",
|
|
25
|
-
modifyVars: {
|
|
26
|
-
// 引入除了变量外的其他内容
|
|
27
|
-
hack: `true;@import "${require.resolve(
|
|
28
|
-
varDark + "/color/colorPalette.less"
|
|
29
|
-
)}";@import "${require.resolve(varDark + "/themes/var-default.less")}";`,
|
|
30
|
-
...defaultVars,
|
|
31
|
-
...light,
|
|
32
|
-
"root-entry-name": "default",
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
];
|
|
36
|
-
const additionalData = async (content, filename) => {
|
|
37
|
-
const themePromises = themeConfig.map(async (t) => {
|
|
38
|
-
const { htmlThemeAttr, modifyVars = {} } = t;
|
|
39
|
-
const options = {
|
|
40
|
-
javascriptEnabled: true,
|
|
41
|
-
modifyVars,
|
|
42
|
-
relativeUrls: true,
|
|
43
|
-
filename,
|
|
44
|
-
};
|
|
45
|
-
try {
|
|
46
|
-
const { css } = await less.render(content, options);
|
|
47
|
-
let res = "";
|
|
48
|
-
if (htmlThemeAttr && css) {
|
|
49
|
-
res = `
|
|
50
|
-
[data-doc-theme=${htmlThemeAttr}] {
|
|
51
|
-
${css}
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
54
|
-
}
|
|
55
|
-
return Promise.resolve(res);
|
|
56
|
-
} catch (error) {
|
|
57
|
-
// eslint-disable-next-line no-console
|
|
58
|
-
console.log(error);
|
|
59
|
-
return Promise.reject(content);
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
let res = content;
|
|
63
|
-
for (const themePromise of themePromises) {
|
|
64
|
-
const theme = await themePromise;
|
|
65
|
-
res += theme;
|
|
66
|
-
}
|
|
67
|
-
return res;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
exports.default = additionalData;
|
|
1
|
+
const less = require("less");
|
|
2
|
+
const defaultVars = require("./scripts/default-vars");
|
|
3
|
+
|
|
4
|
+
const dark = require("./scripts/dark-vars");
|
|
5
|
+
const light = require("./scripts/light-vars");
|
|
6
|
+
|
|
7
|
+
const path = require("path");
|
|
8
|
+
const varDark = path.join(__dirname, ".", "style");
|
|
9
|
+
const themeConfig = [
|
|
10
|
+
{
|
|
11
|
+
theme: "dark",
|
|
12
|
+
htmlThemeAttr: "dark",
|
|
13
|
+
modifyVars: {
|
|
14
|
+
hack: `true;@import "${require.resolve(
|
|
15
|
+
varDark + "/color/colorPalette.less"
|
|
16
|
+
)}";@import "${require.resolve(varDark + "/themes/var-dark.less")}";`,
|
|
17
|
+
...defaultVars,
|
|
18
|
+
...dark,
|
|
19
|
+
"root-entry-name": "dark",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
theme: "light",
|
|
24
|
+
htmlThemeAttr: "light",
|
|
25
|
+
modifyVars: {
|
|
26
|
+
// 引入除了变量外的其他内容
|
|
27
|
+
hack: `true;@import "${require.resolve(
|
|
28
|
+
varDark + "/color/colorPalette.less"
|
|
29
|
+
)}";@import "${require.resolve(varDark + "/themes/var-default.less")}";`,
|
|
30
|
+
...defaultVars,
|
|
31
|
+
...light,
|
|
32
|
+
"root-entry-name": "default",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
];
|
|
36
|
+
const additionalData = async (content, filename) => {
|
|
37
|
+
const themePromises = themeConfig.map(async (t) => {
|
|
38
|
+
const { htmlThemeAttr, modifyVars = {} } = t;
|
|
39
|
+
const options = {
|
|
40
|
+
javascriptEnabled: true,
|
|
41
|
+
modifyVars,
|
|
42
|
+
relativeUrls: true,
|
|
43
|
+
filename,
|
|
44
|
+
};
|
|
45
|
+
try {
|
|
46
|
+
const { css } = await less.render(content, options);
|
|
47
|
+
let res = "";
|
|
48
|
+
if (htmlThemeAttr && css) {
|
|
49
|
+
res = `
|
|
50
|
+
[data-doc-theme=${htmlThemeAttr}] {
|
|
51
|
+
${css}
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
return Promise.resolve(res);
|
|
56
|
+
} catch (error) {
|
|
57
|
+
// eslint-disable-next-line no-console
|
|
58
|
+
console.log(error);
|
|
59
|
+
return Promise.reject(content);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
let res = content;
|
|
63
|
+
for (const themePromise of themePromises) {
|
|
64
|
+
const theme = await themePromise;
|
|
65
|
+
res += theme;
|
|
66
|
+
}
|
|
67
|
+
return res;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
exports.default = additionalData;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* convert dark.less into js vars
|
|
3
|
-
*
|
|
4
|
-
* const darkVars = require('./dark-vars');
|
|
5
|
-
*/
|
|
6
|
-
const fs = require("fs");
|
|
7
|
-
const path = require("path");
|
|
8
|
-
const lessToJs = require("less-vars-to-js");
|
|
9
|
-
|
|
10
|
-
const stylePath = path.join(__dirname, "..", "style");
|
|
11
|
-
const darkLess = fs.readFileSync(
|
|
12
|
-
path.join(stylePath, "themes", "var-dark.less"),
|
|
13
|
-
"utf8"
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
const darkPaletteLess = lessToJs(darkLess, {
|
|
17
|
-
stripPrefix: true,
|
|
18
|
-
resolveVariables: false,
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
module.exports = darkPaletteLess;
|
|
1
|
+
/**
|
|
2
|
+
* convert dark.less into js vars
|
|
3
|
+
*
|
|
4
|
+
* const darkVars = require('./dark-vars');
|
|
5
|
+
*/
|
|
6
|
+
const fs = require("fs");
|
|
7
|
+
const path = require("path");
|
|
8
|
+
const lessToJs = require("less-vars-to-js");
|
|
9
|
+
|
|
10
|
+
const stylePath = path.join(__dirname, "..", "style");
|
|
11
|
+
const darkLess = fs.readFileSync(
|
|
12
|
+
path.join(stylePath, "themes", "var-dark.less"),
|
|
13
|
+
"utf8"
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const darkPaletteLess = lessToJs(darkLess, {
|
|
17
|
+
stripPrefix: true,
|
|
18
|
+
resolveVariables: false,
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
module.exports = darkPaletteLess;
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* convert default.less into js vars
|
|
3
|
-
*
|
|
4
|
-
* const darkVars = require('./default-vars');
|
|
5
|
-
*/
|
|
6
|
-
const fs = require("fs");
|
|
7
|
-
const path = require("path");
|
|
8
|
-
const lessToJs = require("less-vars-to-js");
|
|
9
|
-
|
|
10
|
-
const stylePath = path.join(__dirname, "..", "style");
|
|
11
|
-
const colorLess = fs.readFileSync(
|
|
12
|
-
path.join(stylePath, "color", "colors.less"),
|
|
13
|
-
"utf8"
|
|
14
|
-
);
|
|
15
|
-
const defaultLess = fs.readFileSync(
|
|
16
|
-
path.join(stylePath, "themes", "default.less"),
|
|
17
|
-
"utf8"
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
const defaultPaletteLess = lessToJs(`${colorLess}${defaultLess}`, {
|
|
21
|
-
stripPrefix: true,
|
|
22
|
-
resolveVariables: false,
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
module.exports = defaultPaletteLess;
|
|
1
|
+
/**
|
|
2
|
+
* convert default.less into js vars
|
|
3
|
+
*
|
|
4
|
+
* const darkVars = require('./default-vars');
|
|
5
|
+
*/
|
|
6
|
+
const fs = require("fs");
|
|
7
|
+
const path = require("path");
|
|
8
|
+
const lessToJs = require("less-vars-to-js");
|
|
9
|
+
|
|
10
|
+
const stylePath = path.join(__dirname, "..", "style");
|
|
11
|
+
const colorLess = fs.readFileSync(
|
|
12
|
+
path.join(stylePath, "color", "colors.less"),
|
|
13
|
+
"utf8"
|
|
14
|
+
);
|
|
15
|
+
const defaultLess = fs.readFileSync(
|
|
16
|
+
path.join(stylePath, "themes", "default.less"),
|
|
17
|
+
"utf8"
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
const defaultPaletteLess = lessToJs(`${colorLess}${defaultLess}`, {
|
|
21
|
+
stripPrefix: true,
|
|
22
|
+
resolveVariables: false,
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
module.exports = defaultPaletteLess;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* convert dark.less into js vars
|
|
3
|
-
*
|
|
4
|
-
* const darkVars = require('./dark-vars');
|
|
5
|
-
*/
|
|
6
|
-
const fs = require("fs");
|
|
7
|
-
const path = require("path");
|
|
8
|
-
const lessToJs = require("less-vars-to-js");
|
|
9
|
-
|
|
10
|
-
const stylePath = path.join(__dirname, "..", "style");
|
|
11
|
-
const lightLess = fs.readFileSync(
|
|
12
|
-
path.join(stylePath, "themes", "var-default.less"),
|
|
13
|
-
"utf8"
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
// 注册变量,过滤其他内容
|
|
17
|
-
const lightPaletteLess = lessToJs(lightLess, {
|
|
18
|
-
stripPrefix: true,
|
|
19
|
-
resolveVariables: false,
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
module.exports = lightPaletteLess;
|
|
1
|
+
/**
|
|
2
|
+
* convert dark.less into js vars
|
|
3
|
+
*
|
|
4
|
+
* const darkVars = require('./dark-vars');
|
|
5
|
+
*/
|
|
6
|
+
const fs = require("fs");
|
|
7
|
+
const path = require("path");
|
|
8
|
+
const lessToJs = require("less-vars-to-js");
|
|
9
|
+
|
|
10
|
+
const stylePath = path.join(__dirname, "..", "style");
|
|
11
|
+
const lightLess = fs.readFileSync(
|
|
12
|
+
path.join(stylePath, "themes", "var-default.less"),
|
|
13
|
+
"utf8"
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
// 注册变量,过滤其他内容
|
|
17
|
+
const lightPaletteLess = lessToJs(lightLess, {
|
|
18
|
+
stripPrefix: true,
|
|
19
|
+
resolveVariables: false,
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
module.exports = lightPaletteLess;
|
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
/* stylelint-disable */
|
|
2
|
-
.bezierEasingMixin() {
|
|
3
|
-
@functions: ~`(function() {
|
|
4
|
-
var NEWTON_ITERATIONS = 4;
|
|
5
|
-
var NEWTON_MIN_SLOPE = 0.001;
|
|
6
|
-
var SUBDIVISION_PRECISION = 0.0000001;
|
|
7
|
-
var SUBDIVISION_MAX_ITERATIONS = 10;
|
|
8
|
-
|
|
9
|
-
var kSplineTableSize = 11;
|
|
10
|
-
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
|
|
11
|
-
|
|
12
|
-
var float32ArraySupported = typeof Float32Array === 'function';
|
|
13
|
-
|
|
14
|
-
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
|
|
15
|
-
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
|
|
16
|
-
function C (aA1) { return 3.0 * aA1; }
|
|
17
|
-
|
|
18
|
-
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
|
|
19
|
-
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
|
|
20
|
-
|
|
21
|
-
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
|
|
22
|
-
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
|
|
23
|
-
|
|
24
|
-
function binarySubdivide (aX, aA, aB, mX1, mX2) {
|
|
25
|
-
var currentX, currentT, i = 0;
|
|
26
|
-
do {
|
|
27
|
-
currentT = aA + (aB - aA) / 2.0;
|
|
28
|
-
currentX = calcBezier(currentT, mX1, mX2) - aX;
|
|
29
|
-
if (currentX > 0.0) {
|
|
30
|
-
aB = currentT;
|
|
31
|
-
} else {
|
|
32
|
-
aA = currentT;
|
|
33
|
-
}
|
|
34
|
-
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
|
|
35
|
-
return currentT;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
|
|
39
|
-
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
|
|
40
|
-
var currentSlope = getSlope(aGuessT, mX1, mX2);
|
|
41
|
-
if (currentSlope === 0.0) {
|
|
42
|
-
return aGuessT;
|
|
43
|
-
}
|
|
44
|
-
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
|
|
45
|
-
aGuessT -= currentX / currentSlope;
|
|
46
|
-
}
|
|
47
|
-
return aGuessT;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
var BezierEasing = function (mX1, mY1, mX2, mY2) {
|
|
51
|
-
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
|
|
52
|
-
throw new Error('bezier x values must be in [0, 1] range');
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// Precompute samples table
|
|
56
|
-
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
|
|
57
|
-
if (mX1 !== mY1 || mX2 !== mY2) {
|
|
58
|
-
for (var i = 0; i < kSplineTableSize; ++i) {
|
|
59
|
-
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function getTForX (aX) {
|
|
64
|
-
var intervalStart = 0.0;
|
|
65
|
-
var currentSample = 1;
|
|
66
|
-
var lastSample = kSplineTableSize - 1;
|
|
67
|
-
|
|
68
|
-
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
|
|
69
|
-
intervalStart += kSampleStepSize;
|
|
70
|
-
}
|
|
71
|
-
--currentSample;
|
|
72
|
-
|
|
73
|
-
// Interpolate to provide an initial guess for t
|
|
74
|
-
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
|
|
75
|
-
var guessForT = intervalStart + dist * kSampleStepSize;
|
|
76
|
-
|
|
77
|
-
var initialSlope = getSlope(guessForT, mX1, mX2);
|
|
78
|
-
if (initialSlope >= NEWTON_MIN_SLOPE) {
|
|
79
|
-
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
|
|
80
|
-
} else if (initialSlope === 0.0) {
|
|
81
|
-
return guessForT;
|
|
82
|
-
} else {
|
|
83
|
-
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
return function BezierEasing (x) {
|
|
88
|
-
if (mX1 === mY1 && mX2 === mY2) {
|
|
89
|
-
return x; // linear
|
|
90
|
-
}
|
|
91
|
-
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
|
|
92
|
-
if (x === 0) {
|
|
93
|
-
return 0;
|
|
94
|
-
}
|
|
95
|
-
if (x === 1) {
|
|
96
|
-
return 1;
|
|
97
|
-
}
|
|
98
|
-
return calcBezier(getTForX(x), mY1, mY2);
|
|
99
|
-
};
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
|
|
103
|
-
// less 3 requires a return
|
|
104
|
-
return '';
|
|
105
|
-
})()`;
|
|
106
|
-
}
|
|
107
|
-
// It is hacky way to make this function will be compiled preferentially by less
|
|
108
|
-
// resolve error: `ReferenceError: colorPalette is not defined`
|
|
109
|
-
// https://github.com/ant-design/ant-motion/issues/44
|
|
110
|
-
.bezierEasingMixin();
|
|
1
|
+
/* stylelint-disable */
|
|
2
|
+
.bezierEasingMixin() {
|
|
3
|
+
@functions: ~`(function() {
|
|
4
|
+
var NEWTON_ITERATIONS = 4;
|
|
5
|
+
var NEWTON_MIN_SLOPE = 0.001;
|
|
6
|
+
var SUBDIVISION_PRECISION = 0.0000001;
|
|
7
|
+
var SUBDIVISION_MAX_ITERATIONS = 10;
|
|
8
|
+
|
|
9
|
+
var kSplineTableSize = 11;
|
|
10
|
+
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
|
|
11
|
+
|
|
12
|
+
var float32ArraySupported = typeof Float32Array === 'function';
|
|
13
|
+
|
|
14
|
+
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
|
|
15
|
+
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
|
|
16
|
+
function C (aA1) { return 3.0 * aA1; }
|
|
17
|
+
|
|
18
|
+
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
|
|
19
|
+
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
|
|
20
|
+
|
|
21
|
+
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
|
|
22
|
+
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
|
|
23
|
+
|
|
24
|
+
function binarySubdivide (aX, aA, aB, mX1, mX2) {
|
|
25
|
+
var currentX, currentT, i = 0;
|
|
26
|
+
do {
|
|
27
|
+
currentT = aA + (aB - aA) / 2.0;
|
|
28
|
+
currentX = calcBezier(currentT, mX1, mX2) - aX;
|
|
29
|
+
if (currentX > 0.0) {
|
|
30
|
+
aB = currentT;
|
|
31
|
+
} else {
|
|
32
|
+
aA = currentT;
|
|
33
|
+
}
|
|
34
|
+
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
|
|
35
|
+
return currentT;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
|
|
39
|
+
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
|
|
40
|
+
var currentSlope = getSlope(aGuessT, mX1, mX2);
|
|
41
|
+
if (currentSlope === 0.0) {
|
|
42
|
+
return aGuessT;
|
|
43
|
+
}
|
|
44
|
+
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
|
|
45
|
+
aGuessT -= currentX / currentSlope;
|
|
46
|
+
}
|
|
47
|
+
return aGuessT;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
var BezierEasing = function (mX1, mY1, mX2, mY2) {
|
|
51
|
+
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
|
|
52
|
+
throw new Error('bezier x values must be in [0, 1] range');
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Precompute samples table
|
|
56
|
+
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
|
|
57
|
+
if (mX1 !== mY1 || mX2 !== mY2) {
|
|
58
|
+
for (var i = 0; i < kSplineTableSize; ++i) {
|
|
59
|
+
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function getTForX (aX) {
|
|
64
|
+
var intervalStart = 0.0;
|
|
65
|
+
var currentSample = 1;
|
|
66
|
+
var lastSample = kSplineTableSize - 1;
|
|
67
|
+
|
|
68
|
+
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
|
|
69
|
+
intervalStart += kSampleStepSize;
|
|
70
|
+
}
|
|
71
|
+
--currentSample;
|
|
72
|
+
|
|
73
|
+
// Interpolate to provide an initial guess for t
|
|
74
|
+
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
|
|
75
|
+
var guessForT = intervalStart + dist * kSampleStepSize;
|
|
76
|
+
|
|
77
|
+
var initialSlope = getSlope(guessForT, mX1, mX2);
|
|
78
|
+
if (initialSlope >= NEWTON_MIN_SLOPE) {
|
|
79
|
+
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
|
|
80
|
+
} else if (initialSlope === 0.0) {
|
|
81
|
+
return guessForT;
|
|
82
|
+
} else {
|
|
83
|
+
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return function BezierEasing (x) {
|
|
88
|
+
if (mX1 === mY1 && mX2 === mY2) {
|
|
89
|
+
return x; // linear
|
|
90
|
+
}
|
|
91
|
+
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
|
|
92
|
+
if (x === 0) {
|
|
93
|
+
return 0;
|
|
94
|
+
}
|
|
95
|
+
if (x === 1) {
|
|
96
|
+
return 1;
|
|
97
|
+
}
|
|
98
|
+
return calcBezier(getTForX(x), mY1, mY2);
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
|
|
103
|
+
// less 3 requires a return
|
|
104
|
+
return '';
|
|
105
|
+
})()`;
|
|
106
|
+
}
|
|
107
|
+
// It is hacky way to make this function will be compiled preferentially by less
|
|
108
|
+
// resolve error: `ReferenceError: colorPalette is not defined`
|
|
109
|
+
// https://github.com/ant-design/ant-motion/issues/44
|
|
110
|
+
.bezierEasingMixin();
|