aldehyde 0.2.494 → 0.2.495
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/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +63 -63
- package/lib/draw-canvas-edit/components/asset-bar/index.less +35 -35
- package/lib/draw-canvas-edit/components/main-header/index.less +23 -23
- package/lib/layout2/page.d.ts +2 -1
- package/lib/layout2/page.d.ts.map +1 -1
- package/lib/layout2/page.js +19 -8
- package/lib/layout2/page.js.map +1 -1
- package/lib/layout2/type/layout-type.d.ts +1 -0
- package/lib/layout2/type/layout-type.d.ts.map +1 -1
- package/lib/lowcode-components/base-table/index.less +61 -61
- package/lib/lowcode-components/base-text/index.less +19 -19
- package/lib/lowcode-components/data-number/index.less +10 -10
- package/lib/lowcode-components/date-time/index.less +4 -4
- package/lib/lowcode-components/four-angle-glow-border/index.less +49 -49
- package/lib/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
- package/lib/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
- package/lib/lowcode-components/text-scroller/index.less +28 -28
- package/lib/module/ltmpl-table.d.ts +7 -0
- package/lib/module/ltmpl-table.d.ts.map +1 -1
- package/lib/module/ltmpl-table.js +12 -16
- package/lib/module/ltmpl-table.js.map +1 -1
- package/lib/routable/dtmpl-route.d.ts.map +1 -1
- package/lib/routable/dtmpl-route.js +8 -2
- package/lib/routable/dtmpl-route.js.map +1 -1
- package/lib/routable/import-route.d.ts.map +1 -1
- package/lib/routable/import-route.js +9 -1
- package/lib/routable/import-route.js.map +1 -1
- package/lib/routable/ltmpl-route.d.ts.map +1 -1
- package/lib/routable/ltmpl-route.js +13 -6
- package/lib/routable/ltmpl-route.js.map +1 -1
- package/lib/routable/splitview-ltmpl-route.d.ts.map +1 -1
- package/lib/routable/splitview-ltmpl-route.js +11 -10
- package/lib/routable/splitview-ltmpl-route.js.map +1 -1
- package/lib/routable/ttmpl-route.d.ts.map +1 -1
- package/lib/routable/ttmpl-route.js +9 -2
- package/lib/routable/ttmpl-route.js.map +1 -1
- package/lib/table/act-table.d.ts +1 -0
- package/lib/table/act-table.d.ts.map +1 -1
- package/lib/table/act-table.js +31 -9
- package/lib/table/act-table.js.map +1 -1
- package/lib/table/page-chart.js +1 -1
- package/lib/table/page-chart.js.map +1 -1
- package/lib/table/row-table.d.ts +6 -0
- package/lib/table/row-table.d.ts.map +1 -1
- package/lib/table/row-table.js +21 -6
- package/lib/table/row-table.js.map +1 -1
- package/lib/tmpl/interface.d.ts +1 -0
- package/lib/tmpl/interface.d.ts.map +1 -1
- package/lib/tree/act-tree.d.ts +1 -0
- package/lib/tree/act-tree.d.ts.map +1 -1
- package/lib/tree/act-tree.js +6 -7
- package/lib/tree/act-tree.js.map +1 -1
- package/lib/tree/tree-utils.d.ts +1 -1
- package/lib/tree/tree-utils.d.ts.map +1 -1
- package/lib/tree/tree-utils.js +4 -4
- package/lib/tree/tree-utils.js.map +1 -1
- package/lib/units/index.d.ts +4 -0
- package/lib/units/index.d.ts.map +1 -1
- package/lib/units/index.js +10 -3
- package/lib/units/index.js.map +1 -1
- package/package.json +1 -1
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +63 -63
- package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +93 -93
- package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
- package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
- package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
- package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
- package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
- package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
- package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
- package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
- package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
- package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
- package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
- package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
- package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
- package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
- package/src/aldehyde/layout2/page.tsx +17 -9
- package/src/aldehyde/layout2/type/layout-type.ts +1 -0
- package/src/aldehyde/layout4/imgs/user.svg +26 -26
- package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
- package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
- package/src/aldehyde/lowcode-components/base-text/index.less +19 -19
- package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
- package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
- package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
- package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
- package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
- package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
- package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +91 -91
- package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
- package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
- package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
- package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
- package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
- package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
- package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
- package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
- package/src/aldehyde/module/ltmpl-table.tsx +14 -15
- package/src/aldehyde/routable/dtmpl-route.tsx +14 -8
- package/src/aldehyde/routable/import-route.tsx +12 -5
- package/src/aldehyde/routable/ltmpl-route.tsx +14 -9
- package/src/aldehyde/routable/splitview-ltmpl-route.tsx +11 -8
- package/src/aldehyde/routable/ttmpl-route.tsx +13 -8
- package/src/aldehyde/table/act-table.tsx +28 -9
- package/src/aldehyde/table/page-chart.tsx +1 -1
- package/src/aldehyde/table/row-table.tsx +29 -6
- package/src/aldehyde/tmpl/interface.tsx +1 -0
- package/src/aldehyde/tree/act-tree.tsx +8 -6
- package/src/aldehyde/tree/tree-utils.tsx +4 -4
- package/src/aldehyde/units/index.tsx +11 -3
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
{
|
|
2
|
-
"id": "5037136",
|
|
3
|
-
"name": "phonenode-menu-icon",
|
|
4
|
-
"font_family": "iconfont",
|
|
5
|
-
"css_prefix_text": "icon-",
|
|
6
|
-
"description": "",
|
|
7
|
-
"glyphs": [
|
|
8
|
-
{
|
|
9
|
-
"icon_id": "1079710",
|
|
10
|
-
"name": "停车位",
|
|
11
|
-
"font_class": "tingchewei",
|
|
12
|
-
"unicode": "e664",
|
|
13
|
-
"unicode_decimal": 58980
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"icon_id": "1305474",
|
|
17
|
-
"name": "权限",
|
|
18
|
-
"font_class": "quanxian",
|
|
19
|
-
"unicode": "e63f",
|
|
20
|
-
"unicode_decimal": 58943
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"icon_id": "1998826",
|
|
24
|
-
"name": "工位",
|
|
25
|
-
"font_class": "gongwei",
|
|
26
|
-
"unicode": "e641",
|
|
27
|
-
"unicode_decimal": 58945
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"icon_id": "10487476",
|
|
31
|
-
"name": "维修",
|
|
32
|
-
"font_class": "weixiu",
|
|
33
|
-
"unicode": "e690",
|
|
34
|
-
"unicode_decimal": 59024
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"icon_id": "12184880",
|
|
38
|
-
"name": "部门",
|
|
39
|
-
"font_class": "bumen",
|
|
40
|
-
"unicode": "e686",
|
|
41
|
-
"unicode_decimal": 59014
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"icon_id": "20951818",
|
|
45
|
-
"name": "生产基地",
|
|
46
|
-
"font_class": "shengchanjidi",
|
|
47
|
-
"unicode": "e63b",
|
|
48
|
-
"unicode_decimal": 58939
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"icon_id": "765849",
|
|
52
|
-
"name": "地址",
|
|
53
|
-
"font_class": "shouye",
|
|
54
|
-
"unicode": "e63c",
|
|
55
|
-
"unicode_decimal": 58940
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"icon_id": "8629256",
|
|
59
|
-
"name": "人员",
|
|
60
|
-
"font_class": "renyuan",
|
|
61
|
-
"unicode": "e66c",
|
|
62
|
-
"unicode_decimal": 58988
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"icon_id": "9921751",
|
|
66
|
-
"name": "apply",
|
|
67
|
-
"font_class": "apply",
|
|
68
|
-
"unicode": "e61c",
|
|
69
|
-
"unicode_decimal": 58908
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"icon_id": "39260433",
|
|
73
|
-
"name": "厂区管理",
|
|
74
|
-
"font_class": "changquguanli",
|
|
75
|
-
"unicode": "e607",
|
|
76
|
-
"unicode_decimal": 58887
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"icon_id": "8329706",
|
|
80
|
-
"name": "kuaidi",
|
|
81
|
-
"font_class": "kuaidi",
|
|
82
|
-
"unicode": "e6c0",
|
|
83
|
-
"unicode_decimal": 59072
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"icon_id": "15838501",
|
|
87
|
-
"name": "menu",
|
|
88
|
-
"font_class": "menu",
|
|
89
|
-
"unicode": "e677",
|
|
90
|
-
"unicode_decimal": 58999
|
|
91
|
-
}
|
|
92
|
-
]
|
|
93
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"id": "5037136",
|
|
3
|
+
"name": "phonenode-menu-icon",
|
|
4
|
+
"font_family": "iconfont",
|
|
5
|
+
"css_prefix_text": "icon-",
|
|
6
|
+
"description": "",
|
|
7
|
+
"glyphs": [
|
|
8
|
+
{
|
|
9
|
+
"icon_id": "1079710",
|
|
10
|
+
"name": "停车位",
|
|
11
|
+
"font_class": "tingchewei",
|
|
12
|
+
"unicode": "e664",
|
|
13
|
+
"unicode_decimal": 58980
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"icon_id": "1305474",
|
|
17
|
+
"name": "权限",
|
|
18
|
+
"font_class": "quanxian",
|
|
19
|
+
"unicode": "e63f",
|
|
20
|
+
"unicode_decimal": 58943
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"icon_id": "1998826",
|
|
24
|
+
"name": "工位",
|
|
25
|
+
"font_class": "gongwei",
|
|
26
|
+
"unicode": "e641",
|
|
27
|
+
"unicode_decimal": 58945
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"icon_id": "10487476",
|
|
31
|
+
"name": "维修",
|
|
32
|
+
"font_class": "weixiu",
|
|
33
|
+
"unicode": "e690",
|
|
34
|
+
"unicode_decimal": 59024
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"icon_id": "12184880",
|
|
38
|
+
"name": "部门",
|
|
39
|
+
"font_class": "bumen",
|
|
40
|
+
"unicode": "e686",
|
|
41
|
+
"unicode_decimal": 59014
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"icon_id": "20951818",
|
|
45
|
+
"name": "生产基地",
|
|
46
|
+
"font_class": "shengchanjidi",
|
|
47
|
+
"unicode": "e63b",
|
|
48
|
+
"unicode_decimal": 58939
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"icon_id": "765849",
|
|
52
|
+
"name": "地址",
|
|
53
|
+
"font_class": "shouye",
|
|
54
|
+
"unicode": "e63c",
|
|
55
|
+
"unicode_decimal": 58940
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"icon_id": "8629256",
|
|
59
|
+
"name": "人员",
|
|
60
|
+
"font_class": "renyuan",
|
|
61
|
+
"unicode": "e66c",
|
|
62
|
+
"unicode_decimal": 58988
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"icon_id": "9921751",
|
|
66
|
+
"name": "apply",
|
|
67
|
+
"font_class": "apply",
|
|
68
|
+
"unicode": "e61c",
|
|
69
|
+
"unicode_decimal": 58908
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"icon_id": "39260433",
|
|
73
|
+
"name": "厂区管理",
|
|
74
|
+
"font_class": "changquguanli",
|
|
75
|
+
"unicode": "e607",
|
|
76
|
+
"unicode_decimal": 58887
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"icon_id": "8329706",
|
|
80
|
+
"name": "kuaidi",
|
|
81
|
+
"font_class": "kuaidi",
|
|
82
|
+
"unicode": "e6c0",
|
|
83
|
+
"unicode_decimal": 59072
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"icon_id": "15838501",
|
|
87
|
+
"name": "menu",
|
|
88
|
+
"font_class": "menu",
|
|
89
|
+
"unicode": "e677",
|
|
90
|
+
"unicode_decimal": 58999
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
.asset-bar {
|
|
2
|
-
background-color: #f5f5f5;
|
|
3
|
-
width: 200px;
|
|
4
|
-
min-height: 100%;
|
|
5
|
-
|
|
6
|
-
.asset-list {
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-wrap: wrap;
|
|
9
|
-
padding: 4px;
|
|
10
|
-
margin: 0;
|
|
11
|
-
list-style: none;
|
|
12
|
-
|
|
13
|
-
&>li {
|
|
14
|
-
width: 20%;
|
|
15
|
-
padding-top: 20%;
|
|
16
|
-
flex-shrink: 0;
|
|
17
|
-
cursor: pointer;
|
|
18
|
-
position: relative;
|
|
19
|
-
border-radius: 4px;
|
|
20
|
-
|
|
21
|
-
&:hover {
|
|
22
|
-
background-color: #ddd;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&>img {
|
|
26
|
-
position: absolute;
|
|
27
|
-
top: 6px;
|
|
28
|
-
left: 6px;
|
|
29
|
-
object-fit: contain;
|
|
30
|
-
width: calc(~"100% - 12px");
|
|
31
|
-
height: calc(~"100% - 12px");
|
|
32
|
-
pointer-events: none;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
1
|
+
.asset-bar {
|
|
2
|
+
background-color: #f5f5f5;
|
|
3
|
+
width: 200px;
|
|
4
|
+
min-height: 100%;
|
|
5
|
+
|
|
6
|
+
.asset-list {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
padding: 4px;
|
|
10
|
+
margin: 0;
|
|
11
|
+
list-style: none;
|
|
12
|
+
|
|
13
|
+
&>li {
|
|
14
|
+
width: 20%;
|
|
15
|
+
padding-top: 20%;
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
position: relative;
|
|
19
|
+
border-radius: 4px;
|
|
20
|
+
|
|
21
|
+
&:hover {
|
|
22
|
+
background-color: #ddd;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&>img {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 6px;
|
|
28
|
+
left: 6px;
|
|
29
|
+
object-fit: contain;
|
|
30
|
+
width: calc(~"100% - 12px");
|
|
31
|
+
height: calc(~"100% - 12px");
|
|
32
|
+
pointer-events: none;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
36
|
}
|
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
import React, { DragEvent, useEffect, useMemo, useState } from 'react';
|
|
2
|
-
import { Collapse, Tooltip } from "antd";
|
|
3
|
-
import { ProgramConfig } from "../../../index";
|
|
4
|
-
import './index.less';
|
|
5
|
-
|
|
6
|
-
// 组件分组配置
|
|
7
|
-
const assetGroups = [
|
|
8
|
-
{ key: 'SVG', label: '矢量图' },
|
|
9
|
-
{ key: 'picture', label: '图片' },
|
|
10
|
-
{ key: 'gif', label: 'GIF' },
|
|
11
|
-
// { key: 'composite', label: '图形组合 (JSON)' },
|
|
12
|
-
{ key: 'other', label: '其他' }
|
|
13
|
-
];
|
|
14
|
-
|
|
15
|
-
export const handleImgUrl = (val: string) => {
|
|
16
|
-
let src = val;
|
|
17
|
-
if (!src || src.startsWith("http")) {
|
|
18
|
-
return src;
|
|
19
|
-
}
|
|
20
|
-
if (src.includes("@R@")) {
|
|
21
|
-
const text = src.split("@R@")[1];
|
|
22
|
-
if (text.startsWith("http")) {
|
|
23
|
-
return text;
|
|
24
|
-
}
|
|
25
|
-
src = text;
|
|
26
|
-
}
|
|
27
|
-
const url = encodeURI(ProgramConfig.joinPath(
|
|
28
|
-
ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
|
|
29
|
-
src
|
|
30
|
-
)) +
|
|
31
|
-
`?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
|
|
32
|
-
return url;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// 不显示连接线的组件类型
|
|
36
|
-
const noLinkToolType = ["workstation"];
|
|
37
|
-
|
|
38
|
-
interface AssetItem {
|
|
39
|
-
body: {
|
|
40
|
-
path: string;
|
|
41
|
-
suffix: string;
|
|
42
|
-
};
|
|
43
|
-
type: string; // 组件类型
|
|
44
|
-
config?: string; // 组件配置
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const AssetList = () => {
|
|
48
|
-
const [activeKey, setActiveKey] = useState<string[]>(["SVG"]);
|
|
49
|
-
const [component2D, setComponent2D] = useState<any>({});
|
|
50
|
-
|
|
51
|
-
// 拖拽
|
|
52
|
-
const handleDragStart = (e: DragEvent, item: AssetItem) => {
|
|
53
|
-
if (!item?.body) {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
let defValues = {};
|
|
57
|
-
try {
|
|
58
|
-
const config = JSON.parse(item.config || "[]");
|
|
59
|
-
config.forEach(item => {
|
|
60
|
-
item.groups.forEach(r => r.fields?.forEach(i => {
|
|
61
|
-
if (i.defaultValue || i.defaultValue === 0) {
|
|
62
|
-
defValues[i.id] = i.defaultValue;
|
|
63
|
-
}
|
|
64
|
-
}));
|
|
65
|
-
});
|
|
66
|
-
} catch { defValues = {} }
|
|
67
|
-
e.dataTransfer.setData('defaultValues', JSON.stringify(defValues)); // 默认值配置
|
|
68
|
-
e.dataTransfer.setData('componentItem', JSON.stringify(item)); // 整体配置信息
|
|
69
|
-
e.dataTransfer.setData('src', item.body.path); // 组件地址
|
|
70
|
-
e.dataTransfer.setData('type', item.body.suffix);
|
|
71
|
-
e.dataTransfer.setData('componentType', item.type || ''); // 组件类型
|
|
72
|
-
e.dataTransfer.setData('showPoints', noLinkToolType.includes(item.type) ? "false" : "true");
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
const get2DComponent = async () => {
|
|
76
|
-
if (!activeKey?.length) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
const res = await ProgramConfig.get2DComponent(activeKey);
|
|
80
|
-
setComponent2D(res);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
useEffect(() => {
|
|
84
|
-
get2DComponent();
|
|
85
|
-
}, [activeKey])
|
|
86
|
-
|
|
87
|
-
// 组件渲染
|
|
88
|
-
const assetNodes = useMemo(() => {
|
|
89
|
-
const temArr = assetGroups?.map(r => ({
|
|
90
|
-
...r,
|
|
91
|
-
children: component2D[r.key]?.length ? <ul className="asset-list">
|
|
92
|
-
{component2D[r.key].map((item, idx) => {
|
|
93
|
-
const temDom = <li key={idx} draggable onDragStart={(e) => handleDragStart(e, item)}>
|
|
94
|
-
<img src={handleImgUrl(item?.body?.path)} alt="" />
|
|
95
|
-
</li>;
|
|
96
|
-
return item.title ? <Tooltip title={item.title}>{temDom}</Tooltip> : temDom;
|
|
97
|
-
})}
|
|
98
|
-
</ul> : null
|
|
99
|
-
}))?.filter(r => r.children);
|
|
100
|
-
return temArr || [];
|
|
101
|
-
}, [component2D]);
|
|
102
|
-
|
|
103
|
-
return (
|
|
104
|
-
<div className="asset-bar">
|
|
105
|
-
<Collapse styles={{ body: { padding: "4px 8px 8px" } }} size="small" onChange={setActiveKey} bordered={false} items={assetNodes} activeKey={activeKey} />
|
|
106
|
-
</div>
|
|
107
|
-
)
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
export default AssetList;
|
|
1
|
+
import React, { DragEvent, useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import { Collapse, Tooltip } from "antd";
|
|
3
|
+
import { ProgramConfig } from "../../../index";
|
|
4
|
+
import './index.less';
|
|
5
|
+
|
|
6
|
+
// 组件分组配置
|
|
7
|
+
const assetGroups = [
|
|
8
|
+
{ key: 'SVG', label: '矢量图' },
|
|
9
|
+
{ key: 'picture', label: '图片' },
|
|
10
|
+
{ key: 'gif', label: 'GIF' },
|
|
11
|
+
// { key: 'composite', label: '图形组合 (JSON)' },
|
|
12
|
+
{ key: 'other', label: '其他' }
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
export const handleImgUrl = (val: string) => {
|
|
16
|
+
let src = val;
|
|
17
|
+
if (!src || src.startsWith("http")) {
|
|
18
|
+
return src;
|
|
19
|
+
}
|
|
20
|
+
if (src.includes("@R@")) {
|
|
21
|
+
const text = src.split("@R@")[1];
|
|
22
|
+
if (text.startsWith("http")) {
|
|
23
|
+
return text;
|
|
24
|
+
}
|
|
25
|
+
src = text;
|
|
26
|
+
}
|
|
27
|
+
const url = encodeURI(ProgramConfig.joinPath(
|
|
28
|
+
ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
|
|
29
|
+
src
|
|
30
|
+
)) +
|
|
31
|
+
`?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
|
|
32
|
+
return url;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// 不显示连接线的组件类型
|
|
36
|
+
const noLinkToolType = ["workstation"];
|
|
37
|
+
|
|
38
|
+
interface AssetItem {
|
|
39
|
+
body: {
|
|
40
|
+
path: string;
|
|
41
|
+
suffix: string;
|
|
42
|
+
};
|
|
43
|
+
type: string; // 组件类型
|
|
44
|
+
config?: string; // 组件配置
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const AssetList = () => {
|
|
48
|
+
const [activeKey, setActiveKey] = useState<string[]>(["SVG"]);
|
|
49
|
+
const [component2D, setComponent2D] = useState<any>({});
|
|
50
|
+
|
|
51
|
+
// 拖拽
|
|
52
|
+
const handleDragStart = (e: DragEvent, item: AssetItem) => {
|
|
53
|
+
if (!item?.body) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
let defValues = {};
|
|
57
|
+
try {
|
|
58
|
+
const config = JSON.parse(item.config || "[]");
|
|
59
|
+
config.forEach(item => {
|
|
60
|
+
item.groups.forEach(r => r.fields?.forEach(i => {
|
|
61
|
+
if (i.defaultValue || i.defaultValue === 0) {
|
|
62
|
+
defValues[i.id] = i.defaultValue;
|
|
63
|
+
}
|
|
64
|
+
}));
|
|
65
|
+
});
|
|
66
|
+
} catch { defValues = {} }
|
|
67
|
+
e.dataTransfer.setData('defaultValues', JSON.stringify(defValues)); // 默认值配置
|
|
68
|
+
e.dataTransfer.setData('componentItem', JSON.stringify(item)); // 整体配置信息
|
|
69
|
+
e.dataTransfer.setData('src', item.body.path); // 组件地址
|
|
70
|
+
e.dataTransfer.setData('type', item.body.suffix);
|
|
71
|
+
e.dataTransfer.setData('componentType', item.type || ''); // 组件类型
|
|
72
|
+
e.dataTransfer.setData('showPoints', noLinkToolType.includes(item.type) ? "false" : "true");
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const get2DComponent = async () => {
|
|
76
|
+
if (!activeKey?.length) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const res = await ProgramConfig.get2DComponent(activeKey);
|
|
80
|
+
setComponent2D(res);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
get2DComponent();
|
|
85
|
+
}, [activeKey])
|
|
86
|
+
|
|
87
|
+
// 组件渲染
|
|
88
|
+
const assetNodes = useMemo(() => {
|
|
89
|
+
const temArr = assetGroups?.map(r => ({
|
|
90
|
+
...r,
|
|
91
|
+
children: component2D[r.key]?.length ? <ul className="asset-list">
|
|
92
|
+
{component2D[r.key].map((item, idx) => {
|
|
93
|
+
const temDom = <li key={idx} draggable onDragStart={(e) => handleDragStart(e, item)}>
|
|
94
|
+
<img src={handleImgUrl(item?.body?.path)} alt="" />
|
|
95
|
+
</li>;
|
|
96
|
+
return item.title ? <Tooltip title={item.title}>{temDom}</Tooltip> : temDom;
|
|
97
|
+
})}
|
|
98
|
+
</ul> : null
|
|
99
|
+
}))?.filter(r => r.children);
|
|
100
|
+
return temArr || [];
|
|
101
|
+
}, [component2D]);
|
|
102
|
+
|
|
103
|
+
return (
|
|
104
|
+
<div className="asset-bar">
|
|
105
|
+
<Collapse styles={{ body: { padding: "4px 8px 8px" } }} size="small" onChange={setActiveKey} bordered={false} items={assetNodes} activeKey={activeKey} />
|
|
106
|
+
</div>
|
|
107
|
+
)
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
export default AssetList;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
.main-header {
|
|
2
|
-
min-height: 40px;
|
|
3
|
-
padding: 4px 8px;
|
|
4
|
-
display: flex;
|
|
5
|
-
justify-content: space-between;
|
|
6
|
-
align-items: center;
|
|
7
|
-
background: var(--ant-layout-body-bg);
|
|
8
|
-
overflow-x: auto;
|
|
9
|
-
overflow-y: hidden;
|
|
10
|
-
|
|
11
|
-
button {
|
|
12
|
-
padding: 4px 8px;
|
|
13
|
-
font-size: 16px;
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
|
|
18
|
-
&.active {
|
|
19
|
-
background-color: var(--ant-color-primary);
|
|
20
|
-
color: #fff;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
}
|
|
1
|
+
.main-header {
|
|
2
|
+
min-height: 40px;
|
|
3
|
+
padding: 4px 8px;
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: space-between;
|
|
6
|
+
align-items: center;
|
|
7
|
+
background: var(--ant-layout-body-bg);
|
|
8
|
+
overflow-x: auto;
|
|
9
|
+
overflow-y: hidden;
|
|
10
|
+
|
|
11
|
+
button {
|
|
12
|
+
padding: 4px 8px;
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
|
|
18
|
+
&.active {
|
|
19
|
+
background-color: var(--ant-color-primary);
|
|
20
|
+
color: #fff;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
}
|
|
24
24
|
}
|