aldehyde 0.2.515 → 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 (140) 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/index.css +2 -2
  50. package/lib/table/l2-act-table.d.ts +1 -1
  51. package/lib/table/page-chart.d.ts +1 -1
  52. package/lib/table/pagination.d.ts +1 -0
  53. package/lib/table/pagination.d.ts.map +1 -1
  54. package/lib/table/pagination.js +5 -4
  55. package/lib/table/pagination.js.map +1 -1
  56. package/lib/table/query-table.d.ts +2 -0
  57. package/lib/table/query-table.d.ts.map +1 -1
  58. package/lib/table/query-table.js +10 -6
  59. package/lib/table/query-table.js.map +1 -1
  60. package/lib/table/relation-table.d.ts +2 -2
  61. package/lib/tmpl/hc-data-source.d.ts +2 -1
  62. package/lib/tmpl/hc-data-source.d.ts.map +1 -1
  63. package/lib/tmpl/hc-data-source.js +12 -0
  64. package/lib/tmpl/hc-data-source.js.map +1 -1
  65. package/lib/tmpl/hcservice-v3.d.ts +1 -0
  66. package/lib/tmpl/hcservice-v3.d.ts.map +1 -1
  67. package/lib/tmpl/hcservice-v3.js +12 -0
  68. package/lib/tmpl/hcservice-v3.js.map +1 -1
  69. package/lib/tmpl/interface.d.ts +16 -1
  70. package/lib/tmpl/interface.d.ts.map +1 -1
  71. package/lib/tmpl/interface.js.map +1 -1
  72. package/lib/welcome/components/page-card.d.ts +1 -1
  73. package/package.json +4 -2
  74. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
  75. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +156 -156
  76. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
  77. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
  78. package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
  79. package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
  80. package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
  81. package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
  82. package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
  83. package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
  84. package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
  85. package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
  86. package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
  87. package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
  88. package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
  89. package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
  90. package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
  91. package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
  92. package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
  93. package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
  94. package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
  95. package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
  96. package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
  97. package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
  98. package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
  99. package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
  100. package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
  101. package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
  102. package/src/aldehyde/index.tsx +3 -1
  103. package/src/aldehyde/layout2/page.tsx +3 -0
  104. package/src/aldehyde/layout3/css/main.less +17 -17
  105. package/src/aldehyde/layout4/css/main.less +18 -17
  106. package/src/aldehyde/layout4/imgs/user.svg +26 -26
  107. package/src/aldehyde/locale/LocaleProvider.tsx +4 -2
  108. package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
  109. package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
  110. package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
  111. package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
  112. package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
  113. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
  114. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
  115. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
  116. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
  117. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
  118. package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +144 -144
  119. package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  120. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
  121. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
  122. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
  123. package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
  124. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  125. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
  126. package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
  127. package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
  128. package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
  129. package/src/aldehyde/module/index.less +6 -0
  130. package/src/aldehyde/module/ltmpl-table.tsx +8 -1
  131. package/src/aldehyde/module/ttmpl-table.tsx +349 -0
  132. package/src/aldehyde/routable/index.less +6 -0
  133. package/src/aldehyde/routable/ttmpl-table-route.tsx +390 -0
  134. package/src/aldehyde/table/act-table.tsx +9 -1
  135. package/src/aldehyde/table/index.css +2 -2
  136. package/src/aldehyde/table/pagination.tsx +11 -9
  137. package/src/aldehyde/table/query-table.tsx +13 -4
  138. package/src/aldehyde/tmpl/hc-data-source.tsx +12 -0
  139. package/src/aldehyde/tmpl/hcservice-v3.tsx +11 -0
  140. 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
  }