Skip to content

Commit 7b9a97e

Browse files
xiaopujunxiaopujun
committed
Merge branch 'develop'
2 parents 42aaee4 + 34ccad9 commit 7b9a97e

36 files changed

+898
-585
lines changed

‎doc/LIGHT-CHASER-STORE.xmind

46.6 KB
Binary file not shown.

‎src/App.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@ import {Component, lazy, Suspense} from 'react';
22
import 'antd/dist/antd.min.css';
33
import './App.less';
44
import {Route, Switch} from "react-router-dom";
5-
import JsonSchemaDemo from "./test/JsonSchemaDemo";
65
import Loading from "./ui/loading/Loading";
76
import {Login} from "./pages/login/Login";
8-
import {LayerDemo} from "./test/canvas-demo/LayerDemo";
9-
import {LayerGroupItem} from "./designer/float-configs/layer-list/group/LayerGroupItem";
7+
import LayerGroupItem from "./designer/float-configs/layer-list/group/LayerGroupItem";
108
import DemoMain from "./test/DemoMain";
119

1210
const LightChaserList = lazy(() => import('./list/LightChaserList'));

‎src/comps/common-component/base-info/BaseInfo.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ class BaseInfo extends Component<ConfigType> {
6060
const id = controller.getConfig().info.id;
6161
updateLayout && updateLayout([{id, name: value}]);
6262
//如果显示图层,则更新图层名称
63-
const {layerInstanceMap} = layerListStore;
64-
let layerInstance = layerInstanceMap[id];
65-
layerInstance && layerInstance.update({name: value});
63+
const {layerInstances} = layerListStore;
64+
let layerInstance = layerInstances[id];
65+
layerInstance && (layerInstance as Component).setState({name: value});
6666
}
6767

6868
changeDesc = (value: string) => {

‎src/comps/lc/base-text/BaseTextConfig.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@ export const BaseTextStyleConfig: React.FC<ConfigType<BaseTextController>> = ({c
4343
value: style?.fontSize,
4444
config: {
4545
type: 'number',
46-
min: 100,
47-
max: 900,
48-
step: 100
46+
min: 1,
4947
}
5048
},
5149
{

‎src/designer/canvas/DesignerCanvas.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {hotkeyConfigs} from "../operate-provider/hot-key/HotKeyConfig";
1313
import ComponentContainer from "../../framework/core/ComponentContainer";
1414
import {isEqual} from "lodash";
1515
import {DesignerDragScaleContainer} from "./DesignerDragScaleContainer";
16+
import layerBuilder from "../float-configs/layer-list/LayerBuilder";
1617

1718
/**
1819
* 设计器画布
@@ -41,19 +42,21 @@ class DesignerCanvas extends PureComponent<DesignerStore | any> {
4142
let {layoutConfigs} = designerStore!;
4243
const sortLayout = Object.values(layoutConfigs).sort((a: MovableItemType, b: MovableItemType) => a.order! - b.order!);
4344
return sortLayout.map((item: MovableItemType) => {
45+
if (item.type === 'group') return null;
4446
return <ComponentContainer layout={item} key={item.id}/>
4547
});
4648
}
4749

4850
render() {
51+
const {layoutConfigs} = designerStore!;
4952
return (
5053
<>
5154
<DesignerContainer>
5255
<GroupSelectable>
5356
<DesignerRuler>
5457
<DesignerDragScaleContainer onDoubleClick={this.updateActive}>
5558
<GroupMovable>
56-
{this.generateElement()}
59+
{layerBuilder.buildCanvasComponents(layoutConfigs)}
5760
</GroupMovable>
5861
</DesignerDragScaleContainer>
5962
</DesignerRuler>

‎src/designer/float-configs/layer-list/LayerBuilder.tsx

Lines changed: 101 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,116 @@
11
import {MovableItemType} from "../../operate-provider/movable/types";
2+
import {ReactElement} from "react";
3+
import LayerItem from "./item/LayerItem";
4+
import LayerGroupItem from "./group/LayerGroupItem";
5+
import eventOperateStore from "../../operate-provider/EventOperateStore";
6+
import {cloneDeep} from "lodash";
7+
import layerListStore from "./LayerListStore";
8+
import ComponentContainer from "../../../framework/core/ComponentContainer";
29

3-
export default class LayerBuilder {
4-
/**
5-
* 原始图层信息，取自于设计器store
6-
*/
7-
private sourceLayer: MovableItemType | null = null;
10+
export enum RenderOrder {
11+
ASC,
12+
DESC,
13+
}
814

9-
/**
10-
* 将原始图层信息解析为树结构
11-
*/
12-
private layerTree: any | null = null;
15+
class LayerBuilder {
1316

1417
/**
1518
* 解析函数
1619
*/
17-
public parser: (layer: MovableItemType) => {};
20+
public parser = (layerMap: Record<string, MovableItemType>, order: RenderOrder = RenderOrder.DESC): MovableItemType[] => {
21+
layerMap = cloneDeep(layerMap);
22+
let sourceLayerArr;
23+
if (order === RenderOrder.DESC)
24+
sourceLayerArr = Object.values(layerMap).sort((a, b) => b.order! - a.order!);
25+
else
26+
sourceLayerArr = Object.values(layerMap).sort((a, b) => a.order! - b.order!);
27+
// 构建树结构
28+
const resData: MovableItemType[] = [];
29+
for (const layerItem of sourceLayerArr) {
30+
if (!layerItem?.pid) {
31+
// 根节点
32+
resData.push(layerItem);
33+
} else {
34+
// 非根节点，将其加入父节点的 children 中
35+
const parent = layerMap[layerItem.pid];
36+
if (parent) {
37+
parent.children = parent.children || [];
38+
parent.children.push(layerItem);
39+
}
40+
}
41+
}
42+
return resData;
43+
};
1844

1945

2046
/**
2147
* 构建图层组件
2248
*/
23-
public build = (layer: MovableItemType) => {
24-
49+
public buildLayerList = (layerMap: Record<string, MovableItemType>): ReactElement[] => {
50+
const res: ReactElement[] = [];
51+
this.parser(layerMap, RenderOrder.DESC).forEach((item: MovableItemType) => {
52+
res.push(this.buildLayer(item));
53+
});
54+
return res;
55+
}
56+
57+
58+
private buildLayer = (layer: MovableItemType): ReactElement => {
59+
const {type, children} = layer;
60+
const {targetIds} = eventOperateStore;
61+
const {layerInstances} = layerListStore;
62+
let _props = {
63+
key: layer.id,
64+
name: layer.name,
65+
lock: layer.lock,
66+
hide: layer.hide,
67+
compId: layer.id,
68+
type: layer.type,
69+
selected: targetIds.includes(layer.id!)
70+
}
71+
if (type === 'group') {
72+
//先生成子元素再包裹groupItem
73+
const childDomArr: ReactElement[] = [];
74+
children?.forEach((item: MovableItemType) => {
75+
childDomArr.push(this.buildLayer(item));
76+
});
77+
return <LayerGroupItem {..._props} ref={ref => layerInstances[layer.id!] = ref!}>
78+
{childDomArr}
79+
</LayerGroupItem>;
80+
} else {
81+
//直接生成layerItem
82+
return <LayerItem {..._props} ref={ref => layerInstances[layer.id!] = ref!}/>;
83+
}
84+
}
85+
86+
/**
87+
* 构建设计器主画布组件
88+
* @param layerMap
89+
*/
90+
public buildCanvasComponents = (layerMap: Record<string, MovableItemType>): ReactElement[] => {
91+
const res: ReactElement[] = [];
92+
this.parser(layerMap, RenderOrder.ASC).forEach((item: MovableItemType) => {
93+
res.push(this.buildComponents(item));
94+
});
95+
return res;
96+
}
97+
98+
private buildComponents = (layer: MovableItemType): ReactElement => {
99+
const {type, children} = layer;
100+
if (type === 'group') {
101+
//先生成子元素再包裹groupItem
102+
const childDomArr: ReactElement[] = [];
103+
children?.forEach((item: MovableItemType) => {
104+
childDomArr.push(this.buildComponents(item));
105+
});
106+
return <div key={layer.id} className={'component-group'}
107+
style={{position: 'absolute'}}>{childDomArr}</div>;
108+
} else {
109+
return <ComponentContainer layout={layer} key={layer.id}/>;
110+
}
25111
}
26112

113+
}
27114

28-
}
115+
const layerBuilder = new LayerBuilder();
116+
export default layerBuilder;

‎src/designer/float-configs/layer-list/LayerComponent.ts

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/designer/float-configs/layer-list/LayerContainer.tsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/designer/float-configs/layer-list/LayerList.tsx

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@ import {Component} from 'react';
22
import './LayerList.less';
33
import layerListStore from "./LayerListStore";
44
import designerStore from "../../store/DesignerStore";
5-
import {LayerItemDataProps} from "./item/LayerItem";
65
import {observer} from "mobx-react";
76
import FloatPanel from "../common/FloatPanel";
87
import eventOperateStore from "../../operate-provider/EventOperateStore";
9-
import LayerContainer from "./LayerContainer";
10-
import {MovableItemType} from "../../operate-provider/movable/types";
118
import Input from "../../../ui/input/Input";
9+
import layerBuilder from "./LayerBuilder";
10+
import {MovableItemType} from "../../operate-provider/movable/types";
11+
import LayerUtil from "./util/LayerUtil";
1212

1313
class LayerList extends Component {
1414

1515
floatPanelRef: FloatPanel | null = null;
1616

17+
layerItemsContainerRef: HTMLDivElement | null = null;
18+
1719
componentDidMount() {
1820
this.floatPanelRef?.panelRef?.addEventListener("click", this.cancelSelected);
1921
}
@@ -26,9 +28,11 @@ class LayerList extends Component {
2628
if (!this.floatPanelRef) return;
2729
const {panelRef} = this.floatPanelRef;
2830
if (!panelRef) return;
29-
if (panelRef.contains(e.target as Node) && !(e.target as HTMLElement).classList.contains("layer-item")) {
30-
const {setTargets} = eventOperateStore;
31-
setTargets([]);
31+
if (panelRef.contains(e.target as Node)
32+
&& !this.layerItemsContainerRef?.contains(e.target as Node)) {
33+
const {setTargetIds, targetIds} = eventOperateStore;
34+
if (targetIds.length > 0)
35+
setTargetIds([]);
3236
}
3337
}
3438

@@ -44,37 +48,34 @@ class LayerList extends Component {
4448

4549
buildLayerList = () => {
4650
const {layoutConfigs} = designerStore;
47-
const {targetIds} = eventOperateStore;
48-
let {searchContent} = layerListStore;
49-
//判断是否是命令模式
50-
const commandMode = searchContent.startsWith(":");
51-
if (commandMode) searchContent = searchContent.substring(1);
52-
console.time('图层加载')
53-
const res = Object.values(layoutConfigs)
54-
.filter((item: MovableItemType) => {
55-
if (commandMode) {
56-
//使用命令模式过滤
57-
if (searchContent.trim() === "hide")
58-
return item.hide;
59-
else if (searchContent.trim() === "lock")
60-
return item.lock;
61-
} else
62-
return item.name?.includes(searchContent);
63-
return false;
64-
})
65-
.sort((a: MovableItemType, b: MovableItemType) => b.order! - a.order!)
66-
.map((item: MovableItemType) => {
67-
let _props: LayerItemDataProps = {
68-
name: item.name,
69-
lock: item.lock,
70-
hide: item.hide,
71-
compId: item.id,
72-
selected: targetIds.includes(item.id!)
73-
}
74-
return <LayerContainer key={item.id} item={_props}/>
51+
const {searchContent} = layerListStore;
52+
if (!searchContent || searchContent === '')
53+
return layerBuilder.buildLayerList(layoutConfigs);
54+
let filterLayer: Record<string, any> = {};
55+
if (searchContent === ':hide') {
56+
//仅过展示隐藏的图层
57+
Object.values(layoutConfigs).forEach((item: MovableItemType) => {
58+
if (item.hide && item.type !== 'group')
59+
filterLayer[item.id!] = item;
7560
});
76-
console.timeEnd('图层加载')
77-
return res;
61+
} else if (searchContent === ':lock') {
62+
//仅过展示锁定的图层
63+
Object.values(layoutConfigs).forEach((item: MovableItemType) => {
64+
if (item.lock && item.type !== 'group')
65+
filterLayer[item.id!] = item;
66+
});
67+
} else {
68+
Object.values(layoutConfigs).forEach((item: MovableItemType) => {
69+
if (item.name?.includes(searchContent) && item.type !== 'group')
70+
filterLayer[item.id!] = item;
71+
});
72+
}
73+
//补充分组图层
74+
const groupLayerId = LayerUtil.findPathGroupLayer(Object.keys(filterLayer));
75+
groupLayerId.forEach((id: string) => {
76+
filterLayer[id] = layoutConfigs[id];
77+
});
78+
return layerBuilder.buildLayerList(filterLayer);
7879
}
7980

8081
render() {
@@ -86,7 +87,9 @@ class LayerList extends Component {
8687
<Input placeholder="搜索图层" onChange={this.searchLayer}/>
8788
</div>
8889
<div className={'layer-items'}>
89-
{this.buildLayerList()}
90+
<div ref={ref => this.layerItemsContainerRef = ref}>
91+
{this.buildLayerList()}
92+
</div>
9093
</div>
9194
</FloatPanel>
9295
);

0 commit comments

Comments
 (0)