vue-wiring-diagram 1.1.24 → 1.1.26
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 +93 -93
- package/dist/style.css +1 -1
- package/dist/vue-wiring-diagram.es.js +4501 -4488
- package/dist/vue-wiring-diagram.umd.js +35 -35
- package/package.json +1 -1
- package/packages/components/Shortcuts.vue +31 -31
- package/packages/components/baseShape.js +62 -62
- package/packages/components/common.js +105 -105
- package/packages/components/edge-control/arrow-line.vue +292 -292
- package/packages/components/edge-control/condition.vue +110 -110
- package/packages/components/edge-control/default-line.vue +156 -156
- package/packages/components/edge-control/index.vue +94 -94
- package/packages/components/edge-control/pipe-line.vue +354 -354
- package/packages/components/editor/index.vue +590 -590
- package/packages/components/enums.js +80 -80
- package/packages/components/graph-control/index.vue +121 -121
- package/packages/components/image-control/group-form.vue +114 -114
- package/packages/components/image-control/image-condition.vue +117 -117
- package/packages/components/image-control/image-form.vue +184 -184
- package/packages/components/image-control/image-management.vue +213 -213
- package/packages/components/image-control/index.vue +290 -290
- package/packages/components/portsOptions.js +21 -21
- package/packages/components/preview/index.vue +399 -399
- package/packages/components/settings.js +262 -262
- package/packages/components/text-control/index.vue +472 -457
- package/packages/components/tools.js +256 -256
- package/packages/http.js +104 -104
- package/packages/index.js +43 -43
- package/packages/styles/animation.scss +27 -27
- package/packages/styles/dialog.scss +4 -4
- package/packages/styles/editor.scss +165 -165
- package/packages/styles/elPath.scss +257 -257
package/packages/http.js
CHANGED
|
@@ -1,104 +1,104 @@
|
|
|
1
|
-
// http.js
|
|
2
|
-
|
|
3
|
-
import axios from 'axios';
|
|
4
|
-
import {ElMessage} from "element-plus";
|
|
5
|
-
|
|
6
|
-
let baseURL = 'http://localhost:8001'
|
|
7
|
-
|
|
8
|
-
// 创建一个 axios 实例
|
|
9
|
-
export const instance = axios.create({
|
|
10
|
-
baseURL: baseURL, // 你的 API 基础 URL
|
|
11
|
-
timeout: 10000, // 请求超时时间
|
|
12
|
-
headers: {
|
|
13
|
-
'Content-Type': 'application/json',
|
|
14
|
-
// 其他全局请求头
|
|
15
|
-
},
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* 设置基础URL
|
|
20
|
-
* @param url
|
|
21
|
-
*/
|
|
22
|
-
export const setBaseURL = (url) => {
|
|
23
|
-
instance.defaults.baseURL = url
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* 设置token
|
|
28
|
-
* @param token
|
|
29
|
-
*/
|
|
30
|
-
export const setToken = (token) => {
|
|
31
|
-
instance.interceptors.request.use(
|
|
32
|
-
config => {
|
|
33
|
-
if (token) {
|
|
34
|
-
config.headers['token'] = token;
|
|
35
|
-
return config;
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
error => {
|
|
39
|
-
return Promise.reject(error);
|
|
40
|
-
}
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// 响应拦截器
|
|
45
|
-
instance.interceptors.response.use(
|
|
46
|
-
response => {
|
|
47
|
-
// 对响应数据做些什么
|
|
48
|
-
response.data.isOk = response.data.code === 200;
|
|
49
|
-
return response.data;
|
|
50
|
-
},
|
|
51
|
-
error => {
|
|
52
|
-
// 对响应错误做些什么
|
|
53
|
-
if (error.response) {
|
|
54
|
-
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
|
|
55
|
-
switch (error.response.status) {
|
|
56
|
-
case 401:
|
|
57
|
-
// 处理未授权
|
|
58
|
-
break;
|
|
59
|
-
case 403:
|
|
60
|
-
// 处理禁止访问
|
|
61
|
-
break;
|
|
62
|
-
case 404:
|
|
63
|
-
// 处理资源未找到
|
|
64
|
-
break;
|
|
65
|
-
case 500:
|
|
66
|
-
// 处理服务器内部错误
|
|
67
|
-
break;
|
|
68
|
-
default:
|
|
69
|
-
// 处理其他错误
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
return Promise.reject(error);
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
// GET 请求
|
|
78
|
-
export const get = (url, params = {}) => {
|
|
79
|
-
return instance.get(url, {params});
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
// POST 请求
|
|
83
|
-
export const post = (url, data = {}) => {
|
|
84
|
-
return instance.post(url, data);
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
// PUT 请求
|
|
88
|
-
export const put = (url, data = {}) => {
|
|
89
|
-
return instance.put(url, data);
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
// DELETE 请求
|
|
93
|
-
export const del = (url, params = {}) => {
|
|
94
|
-
return instance.delete(url, {params});
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
// 上传文件
|
|
98
|
-
export const upload = (url, data = {}) => {
|
|
99
|
-
return instance.post(url, data, {
|
|
100
|
-
headers: {
|
|
101
|
-
'Content-Type': 'multipart/form-data',
|
|
102
|
-
},
|
|
103
|
-
});
|
|
104
|
-
};
|
|
1
|
+
// http.js
|
|
2
|
+
|
|
3
|
+
import axios from 'axios';
|
|
4
|
+
import {ElMessage} from "element-plus";
|
|
5
|
+
|
|
6
|
+
let baseURL = 'http://localhost:8001'
|
|
7
|
+
|
|
8
|
+
// 创建一个 axios 实例
|
|
9
|
+
export const instance = axios.create({
|
|
10
|
+
baseURL: baseURL, // 你的 API 基础 URL
|
|
11
|
+
timeout: 10000, // 请求超时时间
|
|
12
|
+
headers: {
|
|
13
|
+
'Content-Type': 'application/json',
|
|
14
|
+
// 其他全局请求头
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* 设置基础URL
|
|
20
|
+
* @param url
|
|
21
|
+
*/
|
|
22
|
+
export const setBaseURL = (url) => {
|
|
23
|
+
instance.defaults.baseURL = url
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* 设置token
|
|
28
|
+
* @param token
|
|
29
|
+
*/
|
|
30
|
+
export const setToken = (token) => {
|
|
31
|
+
instance.interceptors.request.use(
|
|
32
|
+
config => {
|
|
33
|
+
if (token) {
|
|
34
|
+
config.headers['token'] = token;
|
|
35
|
+
return config;
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
error => {
|
|
39
|
+
return Promise.reject(error);
|
|
40
|
+
}
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// 响应拦截器
|
|
45
|
+
instance.interceptors.response.use(
|
|
46
|
+
response => {
|
|
47
|
+
// 对响应数据做些什么
|
|
48
|
+
response.data.isOk = response.data.code === 200;
|
|
49
|
+
return response.data;
|
|
50
|
+
},
|
|
51
|
+
error => {
|
|
52
|
+
// 对响应错误做些什么
|
|
53
|
+
if (error.response) {
|
|
54
|
+
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
|
|
55
|
+
switch (error.response.status) {
|
|
56
|
+
case 401:
|
|
57
|
+
// 处理未授权
|
|
58
|
+
break;
|
|
59
|
+
case 403:
|
|
60
|
+
// 处理禁止访问
|
|
61
|
+
break;
|
|
62
|
+
case 404:
|
|
63
|
+
// 处理资源未找到
|
|
64
|
+
break;
|
|
65
|
+
case 500:
|
|
66
|
+
// 处理服务器内部错误
|
|
67
|
+
break;
|
|
68
|
+
default:
|
|
69
|
+
// 处理其他错误
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return Promise.reject(error);
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
// GET 请求
|
|
78
|
+
export const get = (url, params = {}) => {
|
|
79
|
+
return instance.get(url, {params});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// POST 请求
|
|
83
|
+
export const post = (url, data = {}) => {
|
|
84
|
+
return instance.post(url, data);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// PUT 请求
|
|
88
|
+
export const put = (url, data = {}) => {
|
|
89
|
+
return instance.put(url, data);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
// DELETE 请求
|
|
93
|
+
export const del = (url, params = {}) => {
|
|
94
|
+
return instance.delete(url, {params});
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
// 上传文件
|
|
98
|
+
export const upload = (url, data = {}) => {
|
|
99
|
+
return instance.post(url, data, {
|
|
100
|
+
headers: {
|
|
101
|
+
'Content-Type': 'multipart/form-data',
|
|
102
|
+
},
|
|
103
|
+
});
|
|
104
|
+
};
|
package/packages/index.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import WiringDiagramEditor from "./components/editor/index.vue";
|
|
2
|
-
import WiringDiagramPreview from "./components/preview/index.vue";
|
|
3
|
-
import {setBaseURL, setToken} from "./http.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const components = [
|
|
7
|
-
WiringDiagramEditor,
|
|
8
|
-
WiringDiagramPreview
|
|
9
|
-
]
|
|
10
|
-
|
|
11
|
-
const install = (app) => {
|
|
12
|
-
components.forEach(component => {
|
|
13
|
-
app.component(component.name, component)
|
|
14
|
-
})
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// 自动安装
|
|
18
|
-
if (typeof window !== 'undefined' && window.Vue) {
|
|
19
|
-
install(window.Vue);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// 是否是SunOS
|
|
23
|
-
export let isSunOs = false
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* 设置是否是SunOS
|
|
27
|
-
* @param val
|
|
28
|
-
*/
|
|
29
|
-
const setIsSunOs = (val) => {
|
|
30
|
-
isSunOs = val
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export {
|
|
34
|
-
WiringDiagramEditor,
|
|
35
|
-
WiringDiagramPreview,
|
|
36
|
-
setBaseURL,
|
|
37
|
-
setToken,
|
|
38
|
-
setIsSunOs
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export default {
|
|
42
|
-
install
|
|
43
|
-
}
|
|
1
|
+
import WiringDiagramEditor from "./components/editor/index.vue";
|
|
2
|
+
import WiringDiagramPreview from "./components/preview/index.vue";
|
|
3
|
+
import {setBaseURL, setToken} from "./http.js";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
const components = [
|
|
7
|
+
WiringDiagramEditor,
|
|
8
|
+
WiringDiagramPreview
|
|
9
|
+
]
|
|
10
|
+
|
|
11
|
+
const install = (app) => {
|
|
12
|
+
components.forEach(component => {
|
|
13
|
+
app.component(component.name, component)
|
|
14
|
+
})
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// 自动安装
|
|
18
|
+
if (typeof window !== 'undefined' && window.Vue) {
|
|
19
|
+
install(window.Vue);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// 是否是SunOS
|
|
23
|
+
export let isSunOs = false
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* 设置是否是SunOS
|
|
27
|
+
* @param val
|
|
28
|
+
*/
|
|
29
|
+
const setIsSunOs = (val) => {
|
|
30
|
+
isSunOs = val
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export {
|
|
34
|
+
WiringDiagramEditor,
|
|
35
|
+
WiringDiagramPreview,
|
|
36
|
+
setBaseURL,
|
|
37
|
+
setToken,
|
|
38
|
+
setIsSunOs
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default {
|
|
42
|
+
install
|
|
43
|
+
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
@keyframes forward-pipe {
|
|
2
|
-
to {
|
|
3
|
-
stroke-dashoffset: -1000
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
@keyframes reverse-pipe {
|
|
8
|
-
to {
|
|
9
|
-
stroke-dashoffset: 1000
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// 闪烁箭头
|
|
14
|
-
@keyframes flashing {
|
|
15
|
-
0% {
|
|
16
|
-
opacity: 0;
|
|
17
|
-
}
|
|
18
|
-
35% {
|
|
19
|
-
opacity: 1;
|
|
20
|
-
}
|
|
21
|
-
65% {
|
|
22
|
-
opacity: 1;
|
|
23
|
-
}
|
|
24
|
-
100% {
|
|
25
|
-
opacity: 0;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
1
|
+
@keyframes forward-pipe {
|
|
2
|
+
to {
|
|
3
|
+
stroke-dashoffset: -1000
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@keyframes reverse-pipe {
|
|
8
|
+
to {
|
|
9
|
+
stroke-dashoffset: 1000
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// 闪烁箭头
|
|
14
|
+
@keyframes flashing {
|
|
15
|
+
0% {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
}
|
|
18
|
+
35% {
|
|
19
|
+
opacity: 1;
|
|
20
|
+
}
|
|
21
|
+
65% {
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
100% {
|
|
25
|
+
opacity: 0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.footer {
|
|
2
|
-
display: flex;
|
|
3
|
-
justify-content: end;
|
|
4
|
-
}
|
|
1
|
+
.footer {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: end;
|
|
4
|
+
}
|
|
@@ -1,165 +1,165 @@
|
|
|
1
|
-
@use "elPath";
|
|
2
|
-
|
|
3
|
-
.page-container {
|
|
4
|
-
color: #ffffff;
|
|
5
|
-
height: 100%;
|
|
6
|
-
width: 100%;
|
|
7
|
-
display: grid;
|
|
8
|
-
grid-template-rows: auto 1fr;
|
|
9
|
-
overflow: hidden;
|
|
10
|
-
background: rgba(9, 23, 87, .95);
|
|
11
|
-
|
|
12
|
-
::-webkit-scrollbar {
|
|
13
|
-
width: 5px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
::-webkit-scrollbar-thumb {
|
|
17
|
-
background: rgba(144, 147, 153, 0.3);
|
|
18
|
-
border-radius: 5px;
|
|
19
|
-
transition: all .3s ease;
|
|
20
|
-
|
|
21
|
-
&:hover {
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
transition: all .3s ease;
|
|
24
|
-
background: rgba(144, 147, 153, 0.5);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.tool-bar {
|
|
29
|
-
display: flex;
|
|
30
|
-
justify-content: space-between;
|
|
31
|
-
align-items: center;
|
|
32
|
-
padding: 5px 10px;
|
|
33
|
-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
34
|
-
background: transparent;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.board {
|
|
38
|
-
display: grid;
|
|
39
|
-
grid-template-columns: 240px minmax(auto, 1fr) 350px;
|
|
40
|
-
grid-column-gap: 10px;
|
|
41
|
-
overflow: hidden;
|
|
42
|
-
|
|
43
|
-
#stencil {
|
|
44
|
-
box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1);
|
|
45
|
-
display: flex;
|
|
46
|
-
flex: 1;
|
|
47
|
-
position: relative;
|
|
48
|
-
overflow: auto;
|
|
49
|
-
|
|
50
|
-
:deep(.x6-widget-stencil) {
|
|
51
|
-
background: none;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
:deep(.x6-widget-stencil-title) {
|
|
55
|
-
display: none;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
:deep(.x6-widget-stencil.searchable > .x6-widget-stencil-content) {
|
|
59
|
-
top: 50px
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
:deep(.x6-widget-stencil-search-text) {
|
|
63
|
-
background: rgba(35, 100, 221, 0.3);
|
|
64
|
-
color: #ffffff;
|
|
65
|
-
border-radius: 5px;
|
|
66
|
-
border: 1px solid rgb(35, 100, 221);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
#controls {
|
|
71
|
-
padding: 0 10px;
|
|
72
|
-
box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
|
|
73
|
-
display: grid;
|
|
74
|
-
grid-template-rows: auto 1fr;
|
|
75
|
-
grid-row-gap: 5px;
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
|
|
78
|
-
.controls-label {
|
|
79
|
-
text-align: center;
|
|
80
|
-
padding: 5px 0;
|
|
81
|
-
font-size: 14px;
|
|
82
|
-
font-weight: bold;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.controls-label::before {
|
|
86
|
-
content: '》';
|
|
87
|
-
display: flex;
|
|
88
|
-
position: absolute;
|
|
89
|
-
font-size: 14px;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.drawing-board-box {
|
|
94
|
-
margin: 10px 0;
|
|
95
|
-
overflow: hidden;
|
|
96
|
-
box-sizing: border-box;
|
|
97
|
-
box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
#drawing-board {
|
|
101
|
-
width: 100%;
|
|
102
|
-
height: 100%;
|
|
103
|
-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
104
|
-
box-sizing: border-box;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
:deep(.x6-widget-selection-box) {
|
|
108
|
-
border: 0;
|
|
109
|
-
box-shadow: none;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
:deep(.x6-widget-transform), :deep(.x6-widget-transform) > div, :deep(.x6-widget-selection-inner) {
|
|
113
|
-
border: 2px solid #239edd;
|
|
114
|
-
border-radius: 0;
|
|
115
|
-
box-shadow: none;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
::v-deep(.x6-widget-stencil-group) {
|
|
120
|
-
.x6-widget-stencil-group-title {
|
|
121
|
-
background: rgba(35, 100, 221, 0.3);
|
|
122
|
-
border-radius: 3px;
|
|
123
|
-
color: #ffffff;
|
|
124
|
-
padding-left: 5px;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
::v-deep(.x6-widget-stencil-group.collapsable.collapsed > .x6-widget-stencil-group-title::before) {
|
|
129
|
-
background: none;
|
|
130
|
-
opacity: 1;
|
|
131
|
-
content: '▲';
|
|
132
|
-
transform: rotate(0deg);
|
|
133
|
-
transform-origin: center center;
|
|
134
|
-
color: #ffffff;
|
|
135
|
-
right: 5px;
|
|
136
|
-
top: 0;
|
|
137
|
-
left: unset;
|
|
138
|
-
width: unset;
|
|
139
|
-
height: unset;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
::v-deep(.x6-widget-stencil-group.collapsable > .x6-widget-stencil-group-title::before) {
|
|
143
|
-
background: none;
|
|
144
|
-
opacity: 1;
|
|
145
|
-
content: '▲';
|
|
146
|
-
transform: rotate(180deg);
|
|
147
|
-
transform-origin: center center;
|
|
148
|
-
color: #ffffff;
|
|
149
|
-
right: 5px;
|
|
150
|
-
top: 0;
|
|
151
|
-
left: unset;
|
|
152
|
-
width: unset;
|
|
153
|
-
height: unset;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.row-column {
|
|
158
|
-
display: flex;
|
|
159
|
-
flex-direction: column;
|
|
160
|
-
gap: 10px;
|
|
161
|
-
|
|
162
|
-
.row-label {
|
|
163
|
-
font-size: 14px;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
1
|
+
@use "elPath";
|
|
2
|
+
|
|
3
|
+
.page-container {
|
|
4
|
+
color: #ffffff;
|
|
5
|
+
height: 100%;
|
|
6
|
+
width: 100%;
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-template-rows: auto 1fr;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
background: rgba(9, 23, 87, .95);
|
|
11
|
+
|
|
12
|
+
::-webkit-scrollbar {
|
|
13
|
+
width: 5px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
::-webkit-scrollbar-thumb {
|
|
17
|
+
background: rgba(144, 147, 153, 0.3);
|
|
18
|
+
border-radius: 5px;
|
|
19
|
+
transition: all .3s ease;
|
|
20
|
+
|
|
21
|
+
&:hover {
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
transition: all .3s ease;
|
|
24
|
+
background: rgba(144, 147, 153, 0.5);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.tool-bar {
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
align-items: center;
|
|
32
|
+
padding: 5px 10px;
|
|
33
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
34
|
+
background: transparent;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.board {
|
|
38
|
+
display: grid;
|
|
39
|
+
grid-template-columns: 240px minmax(auto, 1fr) 350px;
|
|
40
|
+
grid-column-gap: 10px;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
|
|
43
|
+
#stencil {
|
|
44
|
+
box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1);
|
|
45
|
+
display: flex;
|
|
46
|
+
flex: 1;
|
|
47
|
+
position: relative;
|
|
48
|
+
overflow: auto;
|
|
49
|
+
|
|
50
|
+
:deep(.x6-widget-stencil) {
|
|
51
|
+
background: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:deep(.x6-widget-stencil-title) {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:deep(.x6-widget-stencil.searchable > .x6-widget-stencil-content) {
|
|
59
|
+
top: 50px
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:deep(.x6-widget-stencil-search-text) {
|
|
63
|
+
background: rgba(35, 100, 221, 0.3);
|
|
64
|
+
color: #ffffff;
|
|
65
|
+
border-radius: 5px;
|
|
66
|
+
border: 1px solid rgb(35, 100, 221);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
#controls {
|
|
71
|
+
padding: 0 10px;
|
|
72
|
+
box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
|
|
73
|
+
display: grid;
|
|
74
|
+
grid-template-rows: auto 1fr;
|
|
75
|
+
grid-row-gap: 5px;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
|
|
78
|
+
.controls-label {
|
|
79
|
+
text-align: center;
|
|
80
|
+
padding: 5px 0;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
font-weight: bold;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.controls-label::before {
|
|
86
|
+
content: '》';
|
|
87
|
+
display: flex;
|
|
88
|
+
position: absolute;
|
|
89
|
+
font-size: 14px;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.drawing-board-box {
|
|
94
|
+
margin: 10px 0;
|
|
95
|
+
overflow: hidden;
|
|
96
|
+
box-sizing: border-box;
|
|
97
|
+
box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
#drawing-board {
|
|
101
|
+
width: 100%;
|
|
102
|
+
height: 100%;
|
|
103
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
104
|
+
box-sizing: border-box;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:deep(.x6-widget-selection-box) {
|
|
108
|
+
border: 0;
|
|
109
|
+
box-shadow: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:deep(.x6-widget-transform), :deep(.x6-widget-transform) > div, :deep(.x6-widget-selection-inner) {
|
|
113
|
+
border: 2px solid #239edd;
|
|
114
|
+
border-radius: 0;
|
|
115
|
+
box-shadow: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
::v-deep(.x6-widget-stencil-group) {
|
|
120
|
+
.x6-widget-stencil-group-title {
|
|
121
|
+
background: rgba(35, 100, 221, 0.3);
|
|
122
|
+
border-radius: 3px;
|
|
123
|
+
color: #ffffff;
|
|
124
|
+
padding-left: 5px;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
::v-deep(.x6-widget-stencil-group.collapsable.collapsed > .x6-widget-stencil-group-title::before) {
|
|
129
|
+
background: none;
|
|
130
|
+
opacity: 1;
|
|
131
|
+
content: '▲';
|
|
132
|
+
transform: rotate(0deg);
|
|
133
|
+
transform-origin: center center;
|
|
134
|
+
color: #ffffff;
|
|
135
|
+
right: 5px;
|
|
136
|
+
top: 0;
|
|
137
|
+
left: unset;
|
|
138
|
+
width: unset;
|
|
139
|
+
height: unset;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
::v-deep(.x6-widget-stencil-group.collapsable > .x6-widget-stencil-group-title::before) {
|
|
143
|
+
background: none;
|
|
144
|
+
opacity: 1;
|
|
145
|
+
content: '▲';
|
|
146
|
+
transform: rotate(180deg);
|
|
147
|
+
transform-origin: center center;
|
|
148
|
+
color: #ffffff;
|
|
149
|
+
right: 5px;
|
|
150
|
+
top: 0;
|
|
151
|
+
left: unset;
|
|
152
|
+
width: unset;
|
|
153
|
+
height: unset;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.row-column {
|
|
158
|
+
display: flex;
|
|
159
|
+
flex-direction: column;
|
|
160
|
+
gap: 10px;
|
|
161
|
+
|
|
162
|
+
.row-label {
|
|
163
|
+
font-size: 14px;
|
|
164
|
+
}
|
|
165
|
+
}
|