Merge branch 'develop'

src/App.tsx

@@ -2,11 +2,9 @@ import {Component, lazy, Suspense} from 'react';
 import 'antd/dist/antd.min.css';
 import './App.less';
 import {Route, Switch} from "react-router-dom";
-import JsonSchemaDemo from "./test/JsonSchemaDemo";
 import Loading from "./ui/loading/Loading";
 import {Login} from "./pages/login/Login";
-import {LayerDemo} from "./test/canvas-demo/LayerDemo";
-import {LayerGroupItem} from "./designer/float-configs/layer-list/group/LayerGroupItem";
+import LayerGroupItem from "./designer/float-configs/layer-list/group/LayerGroupItem";
 import DemoMain from "./test/DemoMain";
 
 const LightChaserList = lazy(() => import('./list/LightChaserList'));

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

@@ -60,9 +60,9 @@ class BaseInfo extends Component<ConfigType> {
         const id = controller.getConfig().info.id;
         updateLayout && updateLayout([{id, name: value}]);
         //如果显示图层,则更新图层名称
-        const {layerInstanceMap} = layerListStore;
-        let layerInstance = layerInstanceMap[id];
-        layerInstance && layerInstance.update({name: value});
+        const {layerInstances} = layerListStore;
+        let layerInstance = layerInstances[id];
+        layerInstance && (layerInstance as Component).setState({name: value});
     }
 
     changeDesc = (value: string) => {

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

@@ -43,9 +43,7 @@ export const BaseTextStyleConfig: React.FC<ConfigType<BaseTextController>> = ({c
                         value: style?.fontSize,
                         config: {
                             type: 'number',
-                            min: 100,
-                            max: 900,
-                            step: 100
+                            min: 1,
                         }
                     },
                     {

src/designer/canvas/DesignerCanvas.tsx

@@ -13,6 +13,7 @@ import {hotkeyConfigs} from "../operate-provider/hot-key/HotKeyConfig";
 import ComponentContainer from "../../framework/core/ComponentContainer";
 import {isEqual} from "lodash";
 import {DesignerDragScaleContainer} from "./DesignerDragScaleContainer";
+import layerBuilder from "../float-configs/layer-list/LayerBuilder";
 
 /**
  * 设计器画布
@@ -41,19 +42,21 @@ class DesignerCanvas extends PureComponent<DesignerStore | any> {
         let {layoutConfigs} = designerStore!;
         const sortLayout = Object.values(layoutConfigs).sort((a: MovableItemType, b: MovableItemType) => a.order! - b.order!);
         return sortLayout.map((item: MovableItemType) => {
+            if (item.type === 'group') return null;
             return <ComponentContainer layout={item} key={item.id}/>
         });
     }
 
     render() {
+        const {layoutConfigs} = designerStore!;
         return (
             <>
                 <DesignerContainer>
                     <GroupSelectable>
                         <DesignerRuler>
                             <DesignerDragScaleContainer onDoubleClick={this.updateActive}>
                                 <GroupMovable>
-                                    {this.generateElement()}
+                                    {layerBuilder.buildCanvasComponents(layoutConfigs)}
                                 </GroupMovable>
                             </DesignerDragScaleContainer>
                         </DesignerRuler>

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

@@ -1,28 +1,116 @@
 import {MovableItemType} from "../../operate-provider/movable/types";
+import {ReactElement} from "react";
+import LayerItem from "./item/LayerItem";
+import LayerGroupItem from "./group/LayerGroupItem";
+import eventOperateStore from "../../operate-provider/EventOperateStore";
+import {cloneDeep} from "lodash";
+import layerListStore from "./LayerListStore";
+import ComponentContainer from "../../../framework/core/ComponentContainer";
 
-export default class LayerBuilder {
-    /**
-     * 原始图层信息，取自于设计器store
-     */
-    private sourceLayer: MovableItemType | null = null;
+export enum RenderOrder {
+    ASC,
+    DESC,
+}
 
-    /**
-     * 将原始图层信息解析为树结构
-     */
-    private layerTree: any | null = null;
+class LayerBuilder {
 
     /**
      * 解析函数
      */
-    public parser: (layer: MovableItemType) => {};
+    public parser = (layerMap: Record<string, MovableItemType>, order: RenderOrder = RenderOrder.DESC): MovableItemType[] => {
+        layerMap = cloneDeep(layerMap);
+        let sourceLayerArr;
+        if (order === RenderOrder.DESC)
+            sourceLayerArr = Object.values(layerMap).sort((a, b) => b.order! - a.order!);
+        else
+            sourceLayerArr = Object.values(layerMap).sort((a, b) => a.order! - b.order!);
+        // 构建树结构
+        const resData: MovableItemType[] = [];
+        for (const layerItem of sourceLayerArr) {
+            if (!layerItem?.pid) {
+                // 根节点
+                resData.push(layerItem);
+            } else {
+                // 非根节点，将其加入父节点的 children 中
+                const parent = layerMap[layerItem.pid];
+                if (parent) {
+                    parent.children = parent.children || [];
+                    parent.children.push(layerItem);
+                }
+            }
+        }
+        return resData;
+    };
 
 
     /**
      * 构建图层组件
      */
-    public build = (layer: MovableItemType) => {
-
+    public buildLayerList = (layerMap: Record<string, MovableItemType>): ReactElement[] => {
+        const res: ReactElement[] = [];
+        this.parser(layerMap, RenderOrder.DESC).forEach((item: MovableItemType) => {
+            res.push(this.buildLayer(item));
+        });
+        return res;
+    }
+
+
+    private buildLayer = (layer: MovableItemType): ReactElement => {
+        const {type, children} = layer;
+        const {targetIds} = eventOperateStore;
+        const {layerInstances} = layerListStore;
+        let _props = {
+            key: layer.id,
+            name: layer.name,
+            lock: layer.lock,
+            hide: layer.hide,
+            compId: layer.id,
+            type: layer.type,
+            selected: targetIds.includes(layer.id!)
+        }
+        if (type === 'group') {
+            //先生成子元素再包裹groupItem
+            const childDomArr: ReactElement[] = [];
+            children?.forEach((item: MovableItemType) => {
+                childDomArr.push(this.buildLayer(item));
+            });
+            return <LayerGroupItem {..._props} ref={ref => layerInstances[layer.id!] = ref!}>
+                {childDomArr}
+            </LayerGroupItem>;
+        } else {
+            //直接生成layerItem
+            return <LayerItem {..._props} ref={ref => layerInstances[layer.id!] = ref!}/>;
+        }
+    }
+
+    /**
+     * 构建设计器主画布组件
+     * @param layerMap
+     */
+    public buildCanvasComponents = (layerMap: Record<string, MovableItemType>): ReactElement[] => {
+        const res: ReactElement[] = [];
+        this.parser(layerMap, RenderOrder.ASC).forEach((item: MovableItemType) => {
+            res.push(this.buildComponents(item));
+        });
+        return res;
+    }
+
+    private buildComponents = (layer: MovableItemType): ReactElement => {
+        const {type, children} = layer;
+        if (type === 'group') {
+            //先生成子元素再包裹groupItem
+            const childDomArr: ReactElement[] = [];
+            children?.forEach((item: MovableItemType) => {
+                childDomArr.push(this.buildComponents(item));
+            });
+            return <div key={layer.id} className={'component-group'}
+                        style={{position: 'absolute'}}>{childDomArr}</div>;
+        } else {
+            return <ComponentContainer layout={layer} key={layer.id}/>;
+        }
     }
 
+}
 
-}
+const layerBuilder = new LayerBuilder();
+export default layerBuilder;

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

@@ -2,18 +2,20 @@ import {Component} from 'react';
 import './LayerList.less';
 import layerListStore from "./LayerListStore";
 import designerStore from "../../store/DesignerStore";
-import {LayerItemDataProps} from "./item/LayerItem";
 import {observer} from "mobx-react";
 import FloatPanel from "../common/FloatPanel";
 import eventOperateStore from "../../operate-provider/EventOperateStore";
-import LayerContainer from "./LayerContainer";
-import {MovableItemType} from "../../operate-provider/movable/types";
 import Input from "../../../ui/input/Input";
+import layerBuilder from "./LayerBuilder";
+import {MovableItemType} from "../../operate-provider/movable/types";
+import LayerUtil from "./util/LayerUtil";
 
 class LayerList extends Component {
 
     floatPanelRef: FloatPanel | null = null;
 
+    layerItemsContainerRef: HTMLDivElement | null = null;
+
     componentDidMount() {
         this.floatPanelRef?.panelRef?.addEventListener("click", this.cancelSelected);
     }
@@ -26,9 +28,11 @@ class LayerList extends Component {
         if (!this.floatPanelRef) return;
         const {panelRef} = this.floatPanelRef;
         if (!panelRef) return;
-        if (panelRef.contains(e.target as Node) && !(e.target as HTMLElement).classList.contains("layer-item")) {
-            const {setTargets} = eventOperateStore;
-            setTargets([]);
+        if (panelRef.contains(e.target as Node)
+            && !this.layerItemsContainerRef?.contains(e.target as Node)) {
+            const {setTargetIds, targetIds} = eventOperateStore;
+            if (targetIds.length > 0)
+                setTargetIds([]);
         }
     }
 
@@ -44,37 +48,34 @@ class LayerList extends Component {
 
     buildLayerList = () => {
         const {layoutConfigs} = designerStore;
-        const {targetIds} = eventOperateStore;
-        let {searchContent} = layerListStore;
-        //判断是否是命令模式
-        const commandMode = searchContent.startsWith(":");
-        if (commandMode) searchContent = searchContent.substring(1);
-        console.time('图层加载')
-        const res = Object.values(layoutConfigs)
-            .filter((item: MovableItemType) => {
-                if (commandMode) {
-                    //使用命令模式过滤
-                    if (searchContent.trim() === "hide")
-                        return item.hide;
-                    else if (searchContent.trim() === "lock")
-                        return item.lock;
-                } else
-                    return item.name?.includes(searchContent);
-                return false;
-            })
-            .sort((a: MovableItemType, b: MovableItemType) => b.order! - a.order!)
-            .map((item: MovableItemType) => {
-                let _props: LayerItemDataProps = {
-                    name: item.name,
-                    lock: item.lock,
-                    hide: item.hide,
-                    compId: item.id,
-                    selected: targetIds.includes(item.id!)
-                }
-                return <LayerContainer key={item.id} item={_props}/>
+        const {searchContent} = layerListStore;
+        if (!searchContent || searchContent === '')
+            return layerBuilder.buildLayerList(layoutConfigs);
+        let filterLayer: Record<string, any> = {};
+        if (searchContent === ':hide') {
+            //仅过展示隐藏的图层
+            Object.values(layoutConfigs).forEach((item: MovableItemType) => {
+                if (item.hide && item.type !== 'group')
+                    filterLayer[item.id!] = item;
             });
-        console.timeEnd('图层加载')
-        return res;
+        } else if (searchContent === ':lock') {
+            //仅过展示锁定的图层
+            Object.values(layoutConfigs).forEach((item: MovableItemType) => {
+                if (item.lock && item.type !== 'group')
+                    filterLayer[item.id!] = item;
+            });
+        } else {
+            Object.values(layoutConfigs).forEach((item: MovableItemType) => {
+                if (item.name?.includes(searchContent) && item.type !== 'group')
+                    filterLayer[item.id!] = item;
+            });
+        }
+        //补充分组图层
+        const groupLayerId = LayerUtil.findPathGroupLayer(Object.keys(filterLayer));
+        groupLayerId.forEach((id: string) => {
+            filterLayer[id] = layoutConfigs[id];
+        });
+        return layerBuilder.buildLayerList(filterLayer);
     }
 
     render() {
@@ -86,7 +87,9 @@ class LayerList extends Component {
                     <Input placeholder="搜索图层" onChange={this.searchLayer}/>
                 </div>
                 <div className={'layer-items'}>
-                    {this.buildLayerList()}
+                    <div ref={ref => this.layerItemsContainerRef = ref}>
+                        {this.buildLayerList()}
+                    </div>
                 </div>
             </FloatPanel>
         );