aldehyde 0.2.514 → 0.2.516

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.
Files changed (144) hide show
  1. package/lib/controls/direct-file-view/index.d.ts +1 -1
  2. package/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
  3. package/lib/detail/button/cquery-button-bar.d.ts +1 -1
  4. package/lib/detail/rightbar/index.d.ts +1 -1
  5. package/lib/draw-canvas-edit/components/asset-bar/index.js +3 -3
  6. package/lib/draw-canvas-edit/components/asset-bar/index.js.map +1 -1
  7. package/lib/draw-canvas-edit/components/asset-bar/index.less +35 -35
  8. package/lib/draw-canvas-edit/components/main-header/index.less +23 -23
  9. package/lib/form/field-group-form.d.ts +1 -1
  10. package/lib/index.d.ts +2 -1
  11. package/lib/index.d.ts.map +1 -1
  12. package/lib/index.js +2 -1
  13. package/lib/index.js.map +1 -1
  14. package/lib/layout/menu/l2menu-message-bar.d.ts +1 -1
  15. package/lib/layout2/page.d.ts.map +1 -1
  16. package/lib/layout2/page.js +3 -0
  17. package/lib/layout2/page.js.map +1 -1
  18. package/lib/layout3/css/main.less +17 -17
  19. package/lib/layout4/css/main.less +18 -17
  20. package/lib/locale/LocaleProvider.d.ts.map +1 -1
  21. package/lib/locale/LocaleProvider.js +4 -2
  22. package/lib/locale/LocaleProvider.js.map +1 -1
  23. package/lib/lowcode-components/base-table/index.less +61 -61
  24. package/lib/lowcode-components/data-number/index.less +10 -10
  25. package/lib/lowcode-components/date-time/index.less +4 -4
  26. package/lib/lowcode-components/four-angle-glow-border/index.less +49 -49
  27. package/lib/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  28. package/lib/lowcode-components/lowcode-view/component/group-layer/index.d.ts +1 -1
  29. package/lib/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  30. package/lib/lowcode-components/text-scroller/index.less +28 -28
  31. package/lib/module/index.less +6 -0
  32. package/lib/module/ltmpl-table.d.ts +3 -0
  33. package/lib/module/ltmpl-table.d.ts.map +1 -1
  34. package/lib/module/ltmpl-table.js +2 -2
  35. package/lib/module/ltmpl-table.js.map +1 -1
  36. package/lib/module/ttmpl-table.d.ts +41 -0
  37. package/lib/module/ttmpl-table.d.ts.map +1 -0
  38. package/lib/module/ttmpl-table.js +188 -0
  39. package/lib/module/ttmpl-table.js.map +1 -0
  40. package/lib/routable/index.less +6 -0
  41. package/lib/routable/ttmpl-table-route.d.ts +12 -0
  42. package/lib/routable/ttmpl-table-route.d.ts.map +1 -0
  43. package/lib/routable/ttmpl-table-route.js +283 -0
  44. package/lib/routable/ttmpl-table-route.js.map +1 -0
  45. package/lib/table/act-table.d.ts +11 -3
  46. package/lib/table/act-table.d.ts.map +1 -1
  47. package/lib/table/act-table.js +2 -2
  48. package/lib/table/act-table.js.map +1 -1
  49. package/lib/table/column/column-builder.d.ts.map +1 -1
  50. package/lib/table/column/column-builder.js +7 -3
  51. package/lib/table/column/column-builder.js.map +1 -1
  52. package/lib/table/index.css +2 -2
  53. package/lib/table/l2-act-table.d.ts +1 -1
  54. package/lib/table/page-chart.d.ts +1 -1
  55. package/lib/table/pagination.d.ts +1 -0
  56. package/lib/table/pagination.d.ts.map +1 -1
  57. package/lib/table/pagination.js +5 -4
  58. package/lib/table/pagination.js.map +1 -1
  59. package/lib/table/query-table.d.ts +2 -0
  60. package/lib/table/query-table.d.ts.map +1 -1
  61. package/lib/table/query-table.js +10 -6
  62. package/lib/table/query-table.js.map +1 -1
  63. package/lib/table/relation-table.d.ts +2 -2
  64. package/lib/tmpl/hc-data-source.d.ts +2 -1
  65. package/lib/tmpl/hc-data-source.d.ts.map +1 -1
  66. package/lib/tmpl/hc-data-source.js +12 -0
  67. package/lib/tmpl/hc-data-source.js.map +1 -1
  68. package/lib/tmpl/hcservice-v3.d.ts +1 -0
  69. package/lib/tmpl/hcservice-v3.d.ts.map +1 -1
  70. package/lib/tmpl/hcservice-v3.js +12 -0
  71. package/lib/tmpl/hcservice-v3.js.map +1 -1
  72. package/lib/tmpl/interface.d.ts +16 -1
  73. package/lib/tmpl/interface.d.ts.map +1 -1
  74. package/lib/tmpl/interface.js.map +1 -1
  75. package/lib/welcome/components/page-card.d.ts +1 -1
  76. package/package.json +4 -2
  77. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
  78. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +156 -156
  79. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
  80. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
  81. package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
  82. package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
  83. package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
  84. package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
  85. package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
  86. package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
  87. package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
  88. package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
  89. package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
  90. package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
  91. package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
  92. package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
  93. package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
  94. package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
  95. package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
  96. package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
  97. package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
  98. package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
  99. package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
  100. package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
  101. package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
  102. package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
  103. package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
  104. package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
  105. package/src/aldehyde/index.tsx +3 -1
  106. package/src/aldehyde/layout2/page.tsx +3 -0
  107. package/src/aldehyde/layout3/css/main.less +17 -17
  108. package/src/aldehyde/layout4/css/main.less +18 -17
  109. package/src/aldehyde/layout4/imgs/user.svg +26 -26
  110. package/src/aldehyde/locale/LocaleProvider.tsx +4 -2
  111. package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
  112. package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
  113. package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
  114. package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
  115. package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
  116. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
  117. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
  118. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
  119. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
  120. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
  121. package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +144 -144
  122. package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  123. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
  124. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
  125. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
  126. package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
  127. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  128. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
  129. package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
  130. package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
  131. package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
  132. package/src/aldehyde/module/index.less +6 -0
  133. package/src/aldehyde/module/ltmpl-table.tsx +8 -1
  134. package/src/aldehyde/module/ttmpl-table.tsx +349 -0
  135. package/src/aldehyde/routable/index.less +6 -0
  136. package/src/aldehyde/routable/ttmpl-table-route.tsx +390 -0
  137. package/src/aldehyde/table/act-table.tsx +9 -1
  138. package/src/aldehyde/table/column/column-builder.tsx +5 -3
  139. package/src/aldehyde/table/index.css +2 -2
  140. package/src/aldehyde/table/pagination.tsx +11 -9
  141. package/src/aldehyde/table/query-table.tsx +13 -4
  142. package/src/aldehyde/tmpl/hc-data-source.tsx +12 -0
  143. package/src/aldehyde/tmpl/hcservice-v3.tsx +11 -0
  144. package/src/aldehyde/tmpl/interface.tsx +14 -2
@@ -1,27 +1,27 @@
1
- @font-face {
2
- font-family: "DingTalk JinBuTi";
3
- src: url('./DingTalk-JinBuTi.woff2');
4
- font-weight: normal;
5
- font-style: normal;
6
- }
7
-
8
- @font-face {
9
- font-family: "DouyinSansBold";
10
- src: url('./DouyinSansBold.woff');
11
- font-weight: normal;
12
- font-style: normal;
13
- }
14
-
15
- @font-face {
16
- font-family: "优设标题黑";
17
- src: url('./YouSheBiaoTiHei.woff2');
18
- font-weight: normal;
19
- font-style: normal;
20
- }
21
-
22
- @font-face {
23
- font-family: "庞门正道标题体免费版";
24
- src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
25
- font-weight: normal;
26
- font-style: normal;
1
+ @font-face {
2
+ font-family: "DingTalk JinBuTi";
3
+ src: url('./DingTalk-JinBuTi.woff2');
4
+ font-weight: normal;
5
+ font-style: normal;
6
+ }
7
+
8
+ @font-face {
9
+ font-family: "DouyinSansBold";
10
+ src: url('./DouyinSansBold.woff');
11
+ font-weight: normal;
12
+ font-style: normal;
13
+ }
14
+
15
+ @font-face {
16
+ font-family: "优设标题黑";
17
+ src: url('./YouSheBiaoTiHei.woff2');
18
+ font-weight: normal;
19
+ font-style: normal;
20
+ }
21
+
22
+ @font-face {
23
+ font-family: "庞门正道标题体免费版";
24
+ src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
25
+ font-weight: normal;
26
+ font-style: normal;
27
27
  }
@@ -1,37 +1,37 @@
1
- import { ComponentInfoType } from "../../interface";
2
- import GroupLayer from "./index";
3
- import AbstractDesignerController from "../abstract-controller";
4
-
5
- export interface GroupLayerProps {
6
- base: ComponentInfoType;
7
- }
8
-
9
- export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
10
-
11
- constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
12
- super();
13
- this.container = container;
14
- this.config = config;
15
- this.instance = instance;
16
- }
17
-
18
- async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
19
- }
20
-
21
- public getConfig(): GroupLayerProps | null {
22
- return this.config;
23
- }
24
-
25
- public update(): void {
26
- }
27
-
28
- public show(): void {
29
- this.instance?.setState({ load: true })
30
- }
31
-
32
- public hide(): void {
33
- this.instance?.setState({ load: false })
34
- }
35
-
36
-
1
+ import { ComponentInfoType } from "../../interface";
2
+ import GroupLayer from "./index";
3
+ import AbstractDesignerController from "../abstract-controller";
4
+
5
+ export interface GroupLayerProps {
6
+ base: ComponentInfoType;
7
+ }
8
+
9
+ export default class GroupLayerController extends AbstractDesignerController<GroupLayer, GroupLayerProps> {
10
+
11
+ constructor(container: HTMLElement, config: GroupLayerProps, instance: GroupLayer) {
12
+ super();
13
+ this.container = container;
14
+ this.config = config;
15
+ this.instance = instance;
16
+ }
17
+
18
+ async create(container: HTMLElement, config: GroupLayerProps): Promise<void> {
19
+ }
20
+
21
+ public getConfig(): GroupLayerProps | null {
22
+ return this.config;
23
+ }
24
+
25
+ public update(): void {
26
+ }
27
+
28
+ public show(): void {
29
+ this.instance?.setState({ load: true })
30
+ }
31
+
32
+ public hide(): void {
33
+ this.instance?.setState({ load: false })
34
+ }
35
+
36
+
37
37
  }
@@ -1,54 +1,54 @@
1
- import {
2
- AbstractDefinition,
3
- ActionInfo,
4
- BaseInfoType
5
- } from "../abstract-definition";
6
- import GroupLayerController, { GroupLayerProps } from "./controller";
7
- import AbstractController from "../abstract-controller";
8
-
9
- export default class GroupLayerDefinition extends AbstractDefinition<GroupLayerController, GroupLayerProps> {
10
- getBaseInfo(): BaseInfoType {
11
- return {
12
- compName: "",
13
- compKey: "group",
14
- };
15
- }
16
-
17
- getChartImg(): string | null {
18
- return null;
19
- }
20
-
21
- getController() {
22
- return null;
23
- }
24
-
25
- getInitConfig(): GroupLayerProps {
26
- return {
27
- base: {
28
- id: "",
29
- name: '分组图层',
30
- type: 'group',
31
- }
32
- };
33
- }
34
-
35
- getActionList(): ActionInfo[] {
36
- return [
37
- {
38
- name: "显示",
39
- id: "show",
40
- handler: (controller: AbstractController) => {
41
- (controller as GroupLayerController).show();
42
- }
43
- },
44
- {
45
- name: "隐藏",
46
- id: "hide",
47
- handler: (controller: AbstractController) => {
48
- (controller as GroupLayerController).hide();
49
- }
50
- }
51
- ];
52
- }
53
-
1
+ import {
2
+ AbstractDefinition,
3
+ ActionInfo,
4
+ BaseInfoType
5
+ } from "../abstract-definition";
6
+ import GroupLayerController, { GroupLayerProps } from "./controller";
7
+ import AbstractController from "../abstract-controller";
8
+
9
+ export default class GroupLayerDefinition extends AbstractDefinition<GroupLayerController, GroupLayerProps> {
10
+ getBaseInfo(): BaseInfoType {
11
+ return {
12
+ compName: "",
13
+ compKey: "group",
14
+ };
15
+ }
16
+
17
+ getChartImg(): string | null {
18
+ return null;
19
+ }
20
+
21
+ getController() {
22
+ return null;
23
+ }
24
+
25
+ getInitConfig(): GroupLayerProps {
26
+ return {
27
+ base: {
28
+ id: "",
29
+ name: '分组图层',
30
+ type: 'group',
31
+ }
32
+ };
33
+ }
34
+
35
+ getActionList(): ActionInfo[] {
36
+ return [
37
+ {
38
+ name: "显示",
39
+ id: "show",
40
+ handler: (controller: AbstractController) => {
41
+ (controller as GroupLayerController).show();
42
+ }
43
+ },
44
+ {
45
+ name: "隐藏",
46
+ id: "hide",
47
+ handler: (controller: AbstractController) => {
48
+ (controller as GroupLayerController).hide();
49
+ }
50
+ }
51
+ ];
52
+ }
53
+
54
54
  }
@@ -1,16 +1,16 @@
1
- import React from "react";
2
-
3
- export interface GroupLayerStyleProps {
4
- children?: React.ReactNode;
5
- }
6
-
7
- export default class GroupLayer extends React.PureComponent<GroupLayerStyleProps> {
8
- state = {
9
- load: true
10
- }
11
-
12
- render() {
13
- const { load } = this.state;
14
- return load ? <div style={{ position: 'absolute' }}>{this.props.children}</div> : "";
15
- }
1
+ import React from "react";
2
+
3
+ export interface GroupLayerStyleProps {
4
+ children?: React.ReactNode;
5
+ }
6
+
7
+ export default class GroupLayer extends React.PureComponent<GroupLayerStyleProps> {
8
+ state = {
9
+ load: true
10
+ }
11
+
12
+ render() {
13
+ const { load } = this.state;
14
+ return load ? <div style={{ position: 'absolute' }}>{this.props.children}</div> : "";
15
+ }
16
16
  }
@@ -1,99 +1,99 @@
1
- import { createElement, ReactElement } from "react";
2
- import cloneDeep from "lodash/cloneDeep";
3
- import ComponentContainer from "./component-container";
4
- import { ILayerItem, LayerManagerDataType, } from "../interface";
5
- import GroupLayer from "./group-layer";
6
-
7
- export enum LayerOrder {
8
- ASC,
9
- DESC,
10
- }
11
-
12
- class LayerBuilder {
13
-
14
- /**
15
- * 解析函数
16
- */
17
- public parser = (layerManager: LayerManagerDataType, order: LayerOrder = LayerOrder.DESC): ILayerItem[] => {
18
- const { layerHeader, layerConfigs } = layerManager;
19
- const layerMap = cloneDeep(layerConfigs);
20
- let sourceLayerArr: ILayerItem[] = [];
21
-
22
- const iterateLayers = (currentLayer: ILayerItem, res: ILayerItem[]): void => {
23
- if (currentLayer) {
24
- res.push(currentLayer);
25
- if (currentLayer.childHeader) {
26
- let childLayer = layerMap[currentLayer.childHeader];
27
- iterateLayers(childLayer, res);
28
- }
29
- let next = currentLayer.next;
30
- while (next) {
31
- const nextLayer = layerMap[next!];
32
- if (nextLayer?.childHeader)
33
- iterateLayers(layerMap[nextLayer.childHeader], res);
34
- nextLayer && res.push(nextLayer);
35
- next = nextLayer?.next;
36
- }
37
- }
38
- }
39
-
40
- iterateLayers(layerMap[layerHeader!], sourceLayerArr);
41
-
42
- if (order === LayerOrder.ASC)
43
- sourceLayerArr = sourceLayerArr.reverse();
44
-
45
- // 构建树结构
46
- const resData: ILayerItem[] = [];
47
- for (const layerItem of sourceLayerArr) {
48
- if (!layerItem?.pid) {
49
- // 根节点
50
- resData.push(layerItem);
51
- } else {
52
- // 非根节点,将其加入父节点的 children 中
53
- const parent = layerMap[layerItem.pid];
54
- if (parent) {
55
- parent.children = parent.children || [];
56
- parent.children.push(layerItem);
57
- }
58
- }
59
- }
60
- return resData;
61
- };
62
-
63
- private order: number = 1;
64
-
65
- /**
66
- * 构建设计器主画布组件
67
- * @param layerMap
68
- */
69
- public buildCanvasComponents = (layerManager: LayerManagerDataType): ReactElement[] => {
70
- const res: ReactElement[] = [];
71
- //渲染顺序,先渲染顶层容器,再逐步渲染底层的子容器
72
- this.parser(layerManager, LayerOrder.ASC).forEach((item: ILayerItem) => {
73
- res.push(this.buildComponents(layerManager, item));
74
- });
75
- //重置排序编号
76
- this.order = 1;
77
- return res;
78
- }
79
-
80
- private buildComponents = (layerManager: LayerManagerDataType, layer: ILayerItem): ReactElement => {
81
- const { type, children } = layer;
82
- const { layerConfigs } = layerManager;
83
- const targetLayer = layerConfigs[layer.id!];
84
- //给每个图层重新设置排序编号,用于在图层移动的过程中提供更好的体验
85
- if (targetLayer)
86
- targetLayer.order = this.order++;
87
- if (type === 'group') {
88
- //先生成子元素再包裹groupItem
89
- const childDomArr: ReactElement[] = children?.map((item: ILayerItem) => this.buildComponents(layerManager, item));
90
- return createElement(GroupLayer, { key: layer.id }, ...childDomArr);
91
- } else {
92
- return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
93
- }
94
- }
95
-
96
- }
97
-
98
- const layerBuilder = new LayerBuilder();
1
+ import { createElement, ReactElement } from "react";
2
+ import cloneDeep from "lodash/cloneDeep";
3
+ import ComponentContainer from "./component-container";
4
+ import { ILayerItem, LayerManagerDataType, } from "../interface";
5
+ import GroupLayer from "./group-layer";
6
+
7
+ export enum LayerOrder {
8
+ ASC,
9
+ DESC,
10
+ }
11
+
12
+ class LayerBuilder {
13
+
14
+ /**
15
+ * 解析函数
16
+ */
17
+ public parser = (layerManager: LayerManagerDataType, order: LayerOrder = LayerOrder.DESC): ILayerItem[] => {
18
+ const { layerHeader, layerConfigs } = layerManager;
19
+ const layerMap = cloneDeep(layerConfigs);
20
+ let sourceLayerArr: ILayerItem[] = [];
21
+
22
+ const iterateLayers = (currentLayer: ILayerItem, res: ILayerItem[]): void => {
23
+ if (currentLayer) {
24
+ res.push(currentLayer);
25
+ if (currentLayer.childHeader) {
26
+ let childLayer = layerMap[currentLayer.childHeader];
27
+ iterateLayers(childLayer, res);
28
+ }
29
+ let next = currentLayer.next;
30
+ while (next) {
31
+ const nextLayer = layerMap[next!];
32
+ if (nextLayer?.childHeader)
33
+ iterateLayers(layerMap[nextLayer.childHeader], res);
34
+ nextLayer && res.push(nextLayer);
35
+ next = nextLayer?.next;
36
+ }
37
+ }
38
+ }
39
+
40
+ iterateLayers(layerMap[layerHeader!], sourceLayerArr);
41
+
42
+ if (order === LayerOrder.ASC)
43
+ sourceLayerArr = sourceLayerArr.reverse();
44
+
45
+ // 构建树结构
46
+ const resData: ILayerItem[] = [];
47
+ for (const layerItem of sourceLayerArr) {
48
+ if (!layerItem?.pid) {
49
+ // 根节点
50
+ resData.push(layerItem);
51
+ } else {
52
+ // 非根节点,将其加入父节点的 children 中
53
+ const parent = layerMap[layerItem.pid];
54
+ if (parent) {
55
+ parent.children = parent.children || [];
56
+ parent.children.push(layerItem);
57
+ }
58
+ }
59
+ }
60
+ return resData;
61
+ };
62
+
63
+ private order: number = 1;
64
+
65
+ /**
66
+ * 构建设计器主画布组件
67
+ * @param layerMap
68
+ */
69
+ public buildCanvasComponents = (layerManager: LayerManagerDataType): ReactElement[] => {
70
+ const res: ReactElement[] = [];
71
+ //渲染顺序,先渲染顶层容器,再逐步渲染底层的子容器
72
+ this.parser(layerManager, LayerOrder.ASC).forEach((item: ILayerItem) => {
73
+ res.push(this.buildComponents(layerManager, item));
74
+ });
75
+ //重置排序编号
76
+ this.order = 1;
77
+ return res;
78
+ }
79
+
80
+ private buildComponents = (layerManager: LayerManagerDataType, layer: ILayerItem): ReactElement => {
81
+ const { type, children } = layer;
82
+ const { layerConfigs } = layerManager;
83
+ const targetLayer = layerConfigs[layer.id!];
84
+ //给每个图层重新设置排序编号,用于在图层移动的过程中提供更好的体验
85
+ if (targetLayer)
86
+ targetLayer.order = this.order++;
87
+ if (type === 'group') {
88
+ //先生成子元素再包裹groupItem
89
+ const childDomArr: ReactElement[] = children?.map((item: ILayerItem) => this.buildComponents(layerManager, item));
90
+ return createElement(GroupLayer, { key: layer.id }, ...childDomArr);
91
+ } else {
92
+ return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
93
+ }
94
+ }
95
+
96
+ }
97
+
98
+ const layerBuilder = new LayerBuilder();
99
99
  export default layerBuilder;
@@ -1,14 +1,14 @@
1
- .react-screen-box {
2
- background-size: 100% 100%;
3
- width: 100%;
4
- height: 100%;
5
- overflow: hidden;
6
-
7
- .screen-wrapper {
8
- transition-property: all;
9
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
10
- transition-duration: 300ms;
11
- position: relative;
12
- transform-origin: left top;
13
- }
1
+ .react-screen-box {
2
+ background-size: 100% 100%;
3
+ width: 100%;
4
+ height: 100%;
5
+ overflow: hidden;
6
+
7
+ .screen-wrapper {
8
+ transition-property: all;
9
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
10
+ transition-duration: 300ms;
11
+ position: relative;
12
+ transform-origin: left top;
13
+ }
14
14
  }