@easyv/react-component-builder 0.12.3 → 0.15.0
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.
|
@@ -1,137 +1,133 @@
|
|
|
1
|
-
const { appSrc, ownLoaders, cliNodeModules } = require(
|
|
1
|
+
const { appSrc, ownLoaders, cliNodeModules } = require("../config/paths");
|
|
2
2
|
|
|
3
|
-
module.exports = function ({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
3
|
+
module.exports = function ({ isProduction, uniqueId, entrys }) {
|
|
4
|
+
return {
|
|
5
|
+
stats: "errors-only",
|
|
6
|
+
module: {
|
|
7
|
+
rules: [
|
|
8
|
+
// three有些插件需要读全局变量
|
|
9
|
+
{
|
|
10
|
+
test: /three\.module/,
|
|
11
|
+
loader: "expose-loader",
|
|
12
|
+
options: {
|
|
13
|
+
exposes: {
|
|
14
|
+
globalName: "THREE",
|
|
15
|
+
override: true,
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
test: /\.worker\.(js|ts)$/,
|
|
21
|
+
use: {
|
|
22
|
+
loader: "worker-loader",
|
|
23
|
+
},
|
|
24
|
+
},
|
|
23
25
|
|
|
26
|
+
{
|
|
27
|
+
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
|
28
|
+
include: appSrc,
|
|
29
|
+
loader: require.resolve("babel-loader"),
|
|
30
|
+
options: {
|
|
31
|
+
customize: require.resolve(
|
|
32
|
+
"babel-preset-react-app/webpack-overrides"
|
|
33
|
+
),
|
|
34
|
+
presets: [require.resolve("babel-preset-react-app")],
|
|
35
|
+
plugins: [
|
|
36
|
+
[
|
|
37
|
+
require.resolve("babel-plugin-named-asset-import"),
|
|
24
38
|
{
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
customize: require.resolve(
|
|
30
|
-
'babel-preset-react-app/webpack-overrides'
|
|
31
|
-
),
|
|
32
|
-
presets: [require.resolve('babel-preset-react-app')],
|
|
33
|
-
plugins: [
|
|
34
|
-
[
|
|
35
|
-
require.resolve('babel-plugin-named-asset-import'),
|
|
36
|
-
{
|
|
37
|
-
loaderMap: {
|
|
38
|
-
svg: {
|
|
39
|
-
ReactComponent:
|
|
40
|
-
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
],
|
|
45
|
-
],
|
|
46
|
-
cacheDirectory: false,
|
|
47
|
-
cacheCompression: false,
|
|
39
|
+
loaderMap: {
|
|
40
|
+
svg: {
|
|
41
|
+
ReactComponent:
|
|
42
|
+
"@svgr/webpack?-svgo,+titleProp,+ref![path]",
|
|
48
43
|
},
|
|
44
|
+
},
|
|
49
45
|
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
],
|
|
47
|
+
],
|
|
48
|
+
cacheDirectory: false,
|
|
49
|
+
cacheCompression: false,
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
// 修改入口文件
|
|
54
|
+
test: Object.values(entrys), // 仅匹配所有组件的index文件
|
|
55
|
+
loader: "react-entry-loader",
|
|
56
|
+
options: {
|
|
57
|
+
isBuild: isProduction,
|
|
58
|
+
uniqueId,
|
|
59
|
+
},
|
|
60
|
+
},
|
|
59
61
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
{
|
|
63
|
+
test: /\.js\.map$/,
|
|
64
|
+
use: {
|
|
65
|
+
loader: "file-loader",
|
|
66
|
+
},
|
|
67
|
+
},
|
|
66
68
|
|
|
69
|
+
{
|
|
70
|
+
test: /\.css$/,
|
|
71
|
+
oneOf: [
|
|
72
|
+
{
|
|
73
|
+
test: /\.(M|m)odule\.css$/,
|
|
74
|
+
use: [
|
|
67
75
|
{
|
|
68
|
-
|
|
69
|
-
oneOf: [
|
|
70
|
-
{
|
|
71
|
-
test: /\.(M|m)odule\.css$/,
|
|
72
|
-
use: [
|
|
73
|
-
{
|
|
74
|
-
loader: 'style-loader',
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
loader: 'css-loader',
|
|
78
|
-
options: {
|
|
79
|
-
modules: {
|
|
80
|
-
localIdentName: isProduction ? '[name]_[local]_[hash:base64:5]' : '[path][name]__[local]',
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
]
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
use: ['style-loader', 'css-loader']
|
|
88
|
-
}
|
|
89
|
-
]
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
test: /\.less$/,
|
|
93
|
-
include: [appSrc],
|
|
94
|
-
use: [
|
|
95
|
-
{
|
|
96
|
-
loader: 'style-loader',
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
loader: 'css-loader',
|
|
100
|
-
options: {
|
|
101
|
-
modules: true,
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
loader: 'less-loader',
|
|
106
|
-
},
|
|
107
|
-
],
|
|
76
|
+
loader: "style-loader",
|
|
108
77
|
},
|
|
109
78
|
{
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
79
|
+
loader: "css-loader",
|
|
80
|
+
options: {
|
|
81
|
+
modules: {
|
|
82
|
+
localIdentName: isProduction
|
|
83
|
+
? "[name]_[local]_[hash:base64:5]"
|
|
84
|
+
: "[path][name]__[local]",
|
|
85
|
+
},
|
|
86
|
+
},
|
|
116
87
|
},
|
|
117
|
-
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
use: ["style-loader", "css-loader"],
|
|
92
|
+
},
|
|
93
|
+
],
|
|
118
94
|
},
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
95
|
+
{
|
|
96
|
+
test: /\.less$/,
|
|
97
|
+
include: [appSrc],
|
|
98
|
+
use: [
|
|
99
|
+
{
|
|
100
|
+
loader: "style-loader",
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
loader: "css-loader",
|
|
104
|
+
options: {
|
|
105
|
+
modules: true,
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
loader: "less-loader",
|
|
110
|
+
},
|
|
111
|
+
],
|
|
126
112
|
},
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
113
|
+
{
|
|
114
|
+
// exclude: /node_modules/,
|
|
115
|
+
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
|
|
116
|
+
loader: "url-loader",
|
|
117
|
+
options: {
|
|
118
|
+
limit: 20 * 1024 * 1024,
|
|
119
|
+
},
|
|
134
120
|
},
|
|
121
|
+
].filter(Boolean),
|
|
122
|
+
},
|
|
123
|
+
|
|
124
|
+
resolveLoader: {
|
|
125
|
+
modules: ["node_modules", ownLoaders, cliNodeModules],
|
|
126
|
+
},
|
|
135
127
|
|
|
136
|
-
|
|
137
|
-
|
|
128
|
+
resolve: {
|
|
129
|
+
extensions: [".js", ".jsx"],
|
|
130
|
+
modules: ["node_modules", cliNodeModules],
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@easyv/react-component-builder",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"launcher",
|
|
6
6
|
"templates",
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/core": "7.9.0",
|
|
19
19
|
"@babel/register": "^7.10.4",
|
|
20
|
-
"@easyv/react-gui": "^1.
|
|
21
|
-
"@easyv/simulator": "^0.
|
|
20
|
+
"@easyv/react-gui": "^1.6.6",
|
|
21
|
+
"@easyv/simulator": "^0.3.1",
|
|
22
22
|
"@svgr/webpack": "4.3.3",
|
|
23
23
|
"acorn": "^7.3.1",
|
|
24
24
|
"acorn-jsx": "^5.2.0",
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
"url-loader": "2.3.0",
|
|
49
49
|
"webpack": "4.42.0",
|
|
50
50
|
"webpack-dev-server": "3.10.3",
|
|
51
|
-
"webpack-manifest-plugin": "2.2.0"
|
|
51
|
+
"webpack-manifest-plugin": "2.2.0",
|
|
52
|
+
"worker-loader": "^3.0.8"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
55
|
"@types/lodash": "^4.14.157",
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import css from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import css from "./styles/index.module.css";
|
|
3
3
|
|
|
4
4
|
export default function (props) {
|
|
5
5
|
const { left, top, width, height, id, data } = props;
|
|
6
6
|
|
|
7
7
|
// 自定义逻辑
|
|
8
8
|
const styles = {
|
|
9
|
-
position:
|
|
10
|
-
left,
|
|
11
|
-
|
|
9
|
+
position: "absolute",
|
|
10
|
+
left,
|
|
11
|
+
top,
|
|
12
|
+
width,
|
|
13
|
+
height,
|
|
14
|
+
textAlign: "center",
|
|
12
15
|
};
|
|
13
16
|
|
|
14
17
|
/**
|
|
@@ -16,8 +19,8 @@ export default function (props) {
|
|
|
16
19
|
*/
|
|
17
20
|
return (
|
|
18
21
|
<div className="__easyv-component" style={styles} id={id}>
|
|
19
|
-
<img src={require(
|
|
22
|
+
<img src={require("./assets/logo.png")} />
|
|
20
23
|
<div className={css.title}>{data[0].text}</div>
|
|
21
24
|
</div>
|
|
22
25
|
);
|
|
23
|
-
}
|
|
26
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
2
|
+
"data": [
|
|
3
|
+
{
|
|
4
|
+
"text": "我是文字组件"
|
|
5
|
+
}
|
|
6
|
+
],
|
|
7
|
+
"fields": [
|
|
8
|
+
{
|
|
9
|
+
"name": "text",
|
|
10
|
+
"value": "text",
|
|
11
|
+
"desc": "文本"
|
|
12
|
+
}
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -1,76 +1,76 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
"base": {},
|
|
3
|
+
"width": 600,
|
|
4
|
+
"height": 600,
|
|
5
|
+
"configuration": [
|
|
6
|
+
{
|
|
7
|
+
"name": "chart",
|
|
8
|
+
"displayName": "组件",
|
|
9
|
+
"value": [
|
|
6
10
|
{
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
11
|
+
"name": "visionConfig",
|
|
12
|
+
"displayName": "视效配置",
|
|
13
|
+
"value": [
|
|
14
|
+
{
|
|
15
|
+
"name": "cameraConfig",
|
|
16
|
+
"displayName": "相机",
|
|
17
|
+
"value": [
|
|
10
18
|
{
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"value": 0
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"name": "z",
|
|
64
|
-
"displayName": "z",
|
|
65
|
-
"value": 0
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
}
|
|
69
|
-
]
|
|
70
|
-
}
|
|
71
|
-
]
|
|
19
|
+
"name": "fov",
|
|
20
|
+
"displayName": "视角",
|
|
21
|
+
"value": 45,
|
|
22
|
+
"config": {
|
|
23
|
+
"min": 15,
|
|
24
|
+
"max": 165
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "position",
|
|
29
|
+
"displayName": "位置",
|
|
30
|
+
"value": [
|
|
31
|
+
{
|
|
32
|
+
"name": "x",
|
|
33
|
+
"displayName": "x",
|
|
34
|
+
"value": 100
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "y",
|
|
38
|
+
"displayName": "y",
|
|
39
|
+
"value": 100
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "z",
|
|
43
|
+
"displayName": "z",
|
|
44
|
+
"value": 100
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"name": "target",
|
|
50
|
+
"displayName": "聚焦点",
|
|
51
|
+
"value": [
|
|
52
|
+
{
|
|
53
|
+
"name": "x",
|
|
54
|
+
"displayName": "x",
|
|
55
|
+
"value": 0
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "y",
|
|
59
|
+
"displayName": "y",
|
|
60
|
+
"value": 0
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "z",
|
|
64
|
+
"displayName": "z",
|
|
65
|
+
"value": 0
|
|
66
|
+
}
|
|
67
|
+
]
|
|
72
68
|
}
|
|
73
|
-
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
]
|
|
74
72
|
}
|
|
75
|
-
|
|
76
|
-
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, { Component } from
|
|
2
|
-
import * as THREE from
|
|
3
|
-
import { isEqual } from
|
|
4
|
-
import { EasyVComponent3d } from
|
|
5
|
-
import { reduceConfig } from
|
|
1
|
+
import React, { Component } from "react";
|
|
2
|
+
import * as THREE from "three";
|
|
3
|
+
import { isEqual } from "lodash";
|
|
4
|
+
import { EasyVComponent3d } from "./utils/Component";
|
|
5
|
+
import { reduceConfig } from "./utils/reduce-config";
|
|
6
6
|
|
|
7
7
|
export default class MyComponent extends Component {
|
|
8
8
|
constructor(props) {
|
|
@@ -15,7 +15,12 @@ export default class MyComponent extends Component {
|
|
|
15
15
|
initStage = () => {
|
|
16
16
|
let { width, height } = this.component.getDimension(),
|
|
17
17
|
{ cameraConfig } = this.component.config.chart.visionConfig,
|
|
18
|
-
camera = new THREE.PerspectiveCamera(
|
|
18
|
+
camera = new THREE.PerspectiveCamera(
|
|
19
|
+
cameraConfig.fov,
|
|
20
|
+
width / height,
|
|
21
|
+
0.01,
|
|
22
|
+
10000
|
|
23
|
+
),
|
|
19
24
|
renderer = new THREE.WebGLRenderer({
|
|
20
25
|
antialias: true,
|
|
21
26
|
alpha: true,
|
|
@@ -90,24 +95,27 @@ export default class MyComponent extends Component {
|
|
|
90
95
|
const { dimension } = chart;
|
|
91
96
|
|
|
92
97
|
const styles = {
|
|
93
|
-
position:
|
|
98
|
+
position: "absolute",
|
|
94
99
|
...dimension.chartPosition,
|
|
95
100
|
...dimension.chartDimension,
|
|
96
101
|
};
|
|
97
102
|
|
|
98
103
|
const containerStyle = {
|
|
99
|
-
position:
|
|
100
|
-
width:
|
|
101
|
-
height:
|
|
102
|
-
overflow:
|
|
104
|
+
position: "relative",
|
|
105
|
+
width: "100%",
|
|
106
|
+
height: "100%",
|
|
107
|
+
overflow: "hidden",
|
|
103
108
|
};
|
|
104
109
|
|
|
105
110
|
/**
|
|
106
111
|
* 固定格式: 返回的div必须有className/id属性
|
|
107
112
|
*/
|
|
108
113
|
return (
|
|
109
|
-
<div className=
|
|
110
|
-
<div
|
|
114
|
+
<div className="__easyv-component" style={styles} id={id}>
|
|
115
|
+
<div
|
|
116
|
+
ref={(elment) => (this.container = elment)}
|
|
117
|
+
style={containerStyle}
|
|
118
|
+
/>
|
|
111
119
|
</div>
|
|
112
120
|
);
|
|
113
121
|
}
|