aldehyde 0.2.503 → 0.2.504

package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts

@@ -1,54 +1,54 @@
-import {
-    AbstractDefinition,
-    ActionInfo,
-    BaseInfoType
-} from "../abstract-definition";
-import GroupLayerController, { GroupLayerProps } from "./controller";
-import AbstractController from "../abstract-controller";
-
-export default class GroupLayerDefinition extends AbstractDefinition<GroupLayerController, GroupLayerProps> {
-    getBaseInfo(): BaseInfoType {
-        return {
-            compName: "",
-            compKey: "group",
-        };
-    }
-
-    getChartImg(): string | null {
-        return null;
-    }
-
-    getController() {
-        return null;
-    }
-
-    getInitConfig(): GroupLayerProps {
-        return {
-            base: {
-                id: "",
-                name: '分组图层',
-                type: 'group',
-            }
-        };
-    }
-
-    getActionList(): ActionInfo[] {
-        return [
-            {
-                name: "显示",
-                id: "show",
-                handler: (controller: AbstractController) => {
-                    (controller as GroupLayerController).show();
-                }
-            },
-            {
-                name: "隐藏",
-                id: "hide",
-                handler: (controller: AbstractController) => {
-                    (controller as GroupLayerController).hide();
-                }
-            }
-        ];
-    }
-
+import {
+    AbstractDefinition,
+    ActionInfo,
+    BaseInfoType
+} from "../abstract-definition";
+import GroupLayerController, { GroupLayerProps } from "./controller";
+import AbstractController from "../abstract-controller";
+
+export default class GroupLayerDefinition extends AbstractDefinition<GroupLayerController, GroupLayerProps> {
+    getBaseInfo(): BaseInfoType {
+        return {
+            compName: "",
+            compKey: "group",
+        };
+    }
+
+    getChartImg(): string | null {
+        return null;
+    }
+
+    getController() {
+        return null;
+    }
+
+    getInitConfig(): GroupLayerProps {
+        return {
+            base: {
+                id: "",
+                name: '分组图层',
+                type: 'group',
+            }
+        };
+    }
+
+    getActionList(): ActionInfo[] {
+        return [
+            {
+                name: "显示",
+                id: "show",
+                handler: (controller: AbstractController) => {
+                    (controller as GroupLayerController).show();
+                }
+            },
+            {
+                name: "隐藏",
+                id: "hide",
+                handler: (controller: AbstractController) => {
+                    (controller as GroupLayerController).hide();
+                }
+            }
+        ];
+    }
+
 }

package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx

@@ -1,16 +1,16 @@
-import React from "react";
-
-export interface GroupLayerStyleProps {
-    children?: React.ReactNode;
-}
-
-export default class GroupLayer extends React.PureComponent<GroupLayerStyleProps> {
-    state = {
-        load: true
-    }
-
-    render() {
-        const { load } = this.state;
-        return load ? <div style={{ position: 'absolute' }}>{this.props.children}</div> : "";
-    }
+import React from "react";
+
+export interface GroupLayerStyleProps {
+    children?: React.ReactNode;
+}
+
+export default class GroupLayer extends React.PureComponent<GroupLayerStyleProps> {
+    state = {
+        load: true
+    }
+
+    render() {
+        const { load } = this.state;
+        return load ? <div style={{ position: 'absolute' }}>{this.props.children}</div> : "";
+    }
 }

package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx

@@ -1,99 +1,99 @@
-import { createElement, ReactElement } from "react";
-import cloneDeep from "lodash/cloneDeep";
-import ComponentContainer from "./component-container";
-import { ILayerItem, LayerManagerDataType, } from "../interface";
-import GroupLayer from "./group-layer";
-
-export enum LayerOrder {
-    ASC,
-    DESC,
-}
-
-class LayerBuilder {
-
-    /**
-     * 解析函数
-     */
-    public parser = (layerManager: LayerManagerDataType, order: LayerOrder = LayerOrder.DESC): ILayerItem[] => {
-        const { layerHeader, layerConfigs } = layerManager;
-        const layerMap = cloneDeep(layerConfigs);
-        let sourceLayerArr: ILayerItem[] = [];
-
-        const iterateLayers = (currentLayer: ILayerItem, res: ILayerItem[]): void => {
-            if (currentLayer) {
-                res.push(currentLayer);
-                if (currentLayer.childHeader) {
-                    let childLayer = layerMap[currentLayer.childHeader];
-                    iterateLayers(childLayer, res);
-                }
-                let next = currentLayer.next;
-                while (next) {
-                    const nextLayer = layerMap[next!];
-                    if (nextLayer?.childHeader)
-                        iterateLayers(layerMap[nextLayer.childHeader], res);
-                    nextLayer && res.push(nextLayer);
-                    next = nextLayer?.next;
-                }
-            }
-        }
-
-        iterateLayers(layerMap[layerHeader!], sourceLayerArr);
-
-        if (order === LayerOrder.ASC)
-            sourceLayerArr = sourceLayerArr.reverse();
-
-        // 构建树结构
-        const resData: ILayerItem[] = [];
-        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;
-    };
-
-    private order: number = 1;
-
-    /**
-     * 构建设计器主画布组件
-     * @param layerMap
-     */
-    public buildCanvasComponents = (layerManager: LayerManagerDataType): ReactElement[] => {
-        const res: ReactElement[] = [];
-        //渲染顺序，先渲染顶层容器，再逐步渲染底层的子容器
-        this.parser(layerManager, LayerOrder.ASC).forEach((item: ILayerItem) => {
-            res.push(this.buildComponents(layerManager, item));
-        });
-        //重置排序编号
-        this.order = 1;
-        return res;
-    }
-
-    private buildComponents = (layerManager: LayerManagerDataType, layer: ILayerItem): ReactElement => {
-        const { type, children } = layer;
-        const { layerConfigs } = layerManager;
-        const targetLayer = layerConfigs[layer.id!];
-        //给每个图层重新设置排序编号,用于在图层移动的过程中提供更好的体验
-        if (targetLayer)
-            targetLayer.order = this.order++;
-        if (type === 'group') {
-            //先生成子元素再包裹groupItem
-            const childDomArr: ReactElement[] = children?.map((item: ILayerItem) => this.buildComponents(layerManager, item));
-            return createElement(GroupLayer, { key: layer.id }, ...childDomArr);
-        } else {
-            return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
-        }
-    }
-
-}
-
-const layerBuilder = new LayerBuilder();
+import { createElement, ReactElement } from "react";
+import cloneDeep from "lodash/cloneDeep";
+import ComponentContainer from "./component-container";
+import { ILayerItem, LayerManagerDataType, } from "../interface";
+import GroupLayer from "./group-layer";
+
+export enum LayerOrder {
+    ASC,
+    DESC,
+}
+
+class LayerBuilder {
+
+    /**
+     * 解析函数
+     */
+    public parser = (layerManager: LayerManagerDataType, order: LayerOrder = LayerOrder.DESC): ILayerItem[] => {
+        const { layerHeader, layerConfigs } = layerManager;
+        const layerMap = cloneDeep(layerConfigs);
+        let sourceLayerArr: ILayerItem[] = [];
+
+        const iterateLayers = (currentLayer: ILayerItem, res: ILayerItem[]): void => {
+            if (currentLayer) {
+                res.push(currentLayer);
+                if (currentLayer.childHeader) {
+                    let childLayer = layerMap[currentLayer.childHeader];
+                    iterateLayers(childLayer, res);
+                }
+                let next = currentLayer.next;
+                while (next) {
+                    const nextLayer = layerMap[next!];
+                    if (nextLayer?.childHeader)
+                        iterateLayers(layerMap[nextLayer.childHeader], res);
+                    nextLayer && res.push(nextLayer);
+                    next = nextLayer?.next;
+                }
+            }
+        }
+
+        iterateLayers(layerMap[layerHeader!], sourceLayerArr);
+
+        if (order === LayerOrder.ASC)
+            sourceLayerArr = sourceLayerArr.reverse();
+
+        // 构建树结构
+        const resData: ILayerItem[] = [];
+        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;
+    };
+
+    private order: number = 1;
+
+    /**
+     * 构建设计器主画布组件
+     * @param layerMap
+     */
+    public buildCanvasComponents = (layerManager: LayerManagerDataType): ReactElement[] => {
+        const res: ReactElement[] = [];
+        //渲染顺序，先渲染顶层容器，再逐步渲染底层的子容器
+        this.parser(layerManager, LayerOrder.ASC).forEach((item: ILayerItem) => {
+            res.push(this.buildComponents(layerManager, item));
+        });
+        //重置排序编号
+        this.order = 1;
+        return res;
+    }
+
+    private buildComponents = (layerManager: LayerManagerDataType, layer: ILayerItem): ReactElement => {
+        const { type, children } = layer;
+        const { layerConfigs } = layerManager;
+        const targetLayer = layerConfigs[layer.id!];
+        //给每个图层重新设置排序编号,用于在图层移动的过程中提供更好的体验
+        if (targetLayer)
+            targetLayer.order = this.order++;
+        if (type === 'group') {
+            //先生成子元素再包裹groupItem
+            const childDomArr: ReactElement[] = children?.map((item: ILayerItem) => this.buildComponents(layerManager, item));
+            return createElement(GroupLayer, { key: layer.id }, ...childDomArr);
+        } else {
+            return createElement(ComponentContainer, { layer, key: layer.id, layerManager });
+        }
+    }
+
+}
+
+const layerBuilder = new LayerBuilder();
 export default layerBuilder;

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less

@@ -1,14 +1,14 @@
-.react-screen-box {
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .screen-wrapper {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    position: relative;
-    transform-origin: left top;
-  }
+.react-screen-box {
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .screen-wrapper {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    position: relative;
+    transform-origin: left top;
+  }
 }

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx

@@ -1,122 +1,122 @@
-/* eslint-disable no-unused-expressions */
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import debounce from "lodash/debounce";
-import './index.less';
-import { AdaptationType } from "../../interface";
-
-interface ScreenFitProps {
-    children?: ReactNode,
-    width: number | string,
-    height: number | string,
-    bodyOverflowHidden?: boolean,
-    delay?: number,
-    mode?: AdaptationType,
-    scaleChange?: (xScale: number, yScale: number) => void,
-}
-
-
-export default function ScreenFit(props: ScreenFitProps) {
-    const { width, height, bodyOverflowHidden = true, delay = 200, scaleChange } = props
-    let bodyOverflow: string
-    const elRef = useRef<HTMLDivElement>(null);
-    const canvasRef = useRef(null);
-    const [size, setSize] = useState({ width, height, originalHeight: 0, originalWidth: 0 })
-
-    let observer: ResizeObserver;
-
-    function updateSize() {
-        if (size.width && size.height) {
-            elRef.current.style.width = `${size.width}px`
-            elRef.current.style.height = `${size.height}px`
-        } else {
-            elRef.current.style.width = `${size.originalWidth}px`
-            elRef.current.style.height = `${size.originalHeight}px`
-        }
-    }
-
-    function updateScale() {
-        // 获取真实视口尺寸
-        const currentWidth = canvasRef.current?.clientWidth || 0;
-        const currentHeight = canvasRef.current?.clientHeight || 0;
-        // 获取大屏最终的宽高
-        const realWidth = size.width || size.originalWidth;
-        const realHeight = size.height || size.originalHeight;
-        // 计算缩放比例
-        const widthScale = currentWidth / +realWidth;
-        const heightScale = currentHeight / +realHeight;
-        switch (props.mode) {
-            case 'full-screen':
-                // 若要铺满全屏，则按照各自比例缩放
-                elRef.current.style.transform = `scale(${widthScale},${heightScale})`;
-                scaleChange?.(widthScale, heightScale);
-                break;
-            case 'full-x':
-                elRef.current.style.transform = `scale(${widthScale})`;
-                canvasRef.current.style.height = `${Number(realHeight) * widthScale}px`;
-                scaleChange?.(widthScale, widthScale);
-                break;
-            case 'full-y':
-                elRef.current.style.transform = `scale(${heightScale})`;
-                canvasRef.current.style.width = `${Number(realWidth) * heightScale}px`;
-                scaleChange?.(heightScale, heightScale);
-                if (currentWidth > (+realWidth * heightScale)) {
-                    elRef.current.style.margin = `0px ${(currentWidth - +realWidth * heightScale) / 2}px`;
-                } else {
-                    elRef.current.style.margin = "0px";
-                }
-                break;
-            default:
-                // 按照宽高最小比例进行缩放
-                const scale = Math.min(widthScale, heightScale);
-                elRef.current.style.transform = `scale(${scale},${scale})`;
-                const domWidth = elRef.current.clientWidth;
-                const domHeight = elRef.current.clientHeight;
-                const mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
-                const my = Math.max((currentHeight - domHeight * scale) / 2, 0);
-                elRef.current.style.margin = `${my}px ${mx}px`;
-                scaleChange?.(scale, scale);
-                break;
-        }
-    }
-
-    const onResize = debounce(() => {
-        if (!elRef.current && !canvasRef.current) return;
-        updateSize();
-        updateScale();
-    }, delay)
-
-    function initState() {
-        if (bodyOverflowHidden) {
-            bodyOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
-        }
-        observer = new ResizeObserver(() => onResize());
-        observer.observe(canvasRef.current);
-        setSize({
-            ...size,
-            originalWidth: window.screen.width,
-            originalHeight: window.screen.height
-        })
-        updateSize();
-        updateScale();
-        window.addEventListener('resize', onResize);
-    }
-
-    useEffect(() => {
-        initState();
-        return () => {
-            observer.disconnect();
-            window.removeEventListener('resize', onResize);
-            if (bodyOverflowHidden)
-                document.body.style.overflow = bodyOverflow;
-        }
-    }, [])
-
-    return (
-        <div ref={canvasRef} className={'react-screen-box'} >
-            <div className={'screen-wrapper'} ref={elRef}>
-                {props.children}
-            </div>
-        </div>
-    )
+/* eslint-disable no-unused-expressions */
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import debounce from "lodash/debounce";
+import './index.less';
+import { AdaptationType } from "../../interface";
+
+interface ScreenFitProps {
+    children?: ReactNode,
+    width: number | string,
+    height: number | string,
+    bodyOverflowHidden?: boolean,
+    delay?: number,
+    mode?: AdaptationType,
+    scaleChange?: (xScale: number, yScale: number) => void,
+}
+
+
+export default function ScreenFit(props: ScreenFitProps) {
+    const { width, height, bodyOverflowHidden = true, delay = 200, scaleChange } = props
+    let bodyOverflow: string
+    const elRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef(null);
+    const [size, setSize] = useState({ width, height, originalHeight: 0, originalWidth: 0 })
+
+    let observer: ResizeObserver;
+
+    function updateSize() {
+        if (size.width && size.height) {
+            elRef.current.style.width = `${size.width}px`
+            elRef.current.style.height = `${size.height}px`
+        } else {
+            elRef.current.style.width = `${size.originalWidth}px`
+            elRef.current.style.height = `${size.originalHeight}px`
+        }
+    }
+
+    function updateScale() {
+        // 获取真实视口尺寸
+        const currentWidth = canvasRef.current?.clientWidth || 0;
+        const currentHeight = canvasRef.current?.clientHeight || 0;
+        // 获取大屏最终的宽高
+        const realWidth = size.width || size.originalWidth;
+        const realHeight = size.height || size.originalHeight;
+        // 计算缩放比例
+        const widthScale = currentWidth / +realWidth;
+        const heightScale = currentHeight / +realHeight;
+        switch (props.mode) {
+            case 'full-screen':
+                // 若要铺满全屏，则按照各自比例缩放
+                elRef.current.style.transform = `scale(${widthScale},${heightScale})`;
+                scaleChange?.(widthScale, heightScale);
+                break;
+            case 'full-x':
+                elRef.current.style.transform = `scale(${widthScale})`;
+                canvasRef.current.style.height = `${Number(realHeight) * widthScale}px`;
+                scaleChange?.(widthScale, widthScale);
+                break;
+            case 'full-y':
+                elRef.current.style.transform = `scale(${heightScale})`;
+                canvasRef.current.style.width = `${Number(realWidth) * heightScale}px`;
+                scaleChange?.(heightScale, heightScale);
+                if (currentWidth > (+realWidth * heightScale)) {
+                    elRef.current.style.margin = `0px ${(currentWidth - +realWidth * heightScale) / 2}px`;
+                } else {
+                    elRef.current.style.margin = "0px";
+                }
+                break;
+            default:
+                // 按照宽高最小比例进行缩放
+                const scale = Math.min(widthScale, heightScale);
+                elRef.current.style.transform = `scale(${scale},${scale})`;
+                const domWidth = elRef.current.clientWidth;
+                const domHeight = elRef.current.clientHeight;
+                const mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
+                const my = Math.max((currentHeight - domHeight * scale) / 2, 0);
+                elRef.current.style.margin = `${my}px ${mx}px`;
+                scaleChange?.(scale, scale);
+                break;
+        }
+    }
+
+    const onResize = debounce(() => {
+        if (!elRef.current && !canvasRef.current) return;
+        updateSize();
+        updateScale();
+    }, delay)
+
+    function initState() {
+        if (bodyOverflowHidden) {
+            bodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        observer = new ResizeObserver(() => onResize());
+        observer.observe(canvasRef.current);
+        setSize({
+            ...size,
+            originalWidth: window.screen.width,
+            originalHeight: window.screen.height
+        })
+        updateSize();
+        updateScale();
+        window.addEventListener('resize', onResize);
+    }
+
+    useEffect(() => {
+        initState();
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', onResize);
+            if (bodyOverflowHidden)
+                document.body.style.overflow = bodyOverflow;
+        }
+    }, [])
+
+    return (
+        <div ref={canvasRef} className={'react-screen-box'} >
+            <div className={'screen-wrapper'} ref={elRef}>
+                {props.children}
+            </div>
+        </div>
+    )
 }

package/src/aldehyde/lowcode-components/lowcode-view/index.tsx

@@ -13,6 +13,7 @@ import abstractDesignerLoader from "./component/abstract-designer-loader";
 import { merge } from "./component/util";
 import ProgramConfig from ".././../units";
 import { useLocale } from "../../index";
+import * as echarts from "echarts";
 import "./index.less";
 
 export const ControllerContext = createContext(null);
@@ -87,6 +88,13 @@ const LowcodeView = (props: Props) => {
 
     const backgroundImage = useMemo(() => handleImgUrl(canvasConfig?.backgroundImage), [canvasConfig]);
 
+    // 设置echarts图表联动
+    const handleEchartsConnect = (configs: { [key: string]: any }) => {
+        const groupTypes = Object.values(configs || {}).map(r => r.style?.groupType).filter(Boolean);
+        const groups = [...new Set(groupTypes)];
+        groups.forEach(r => echarts.connect(r));
+    }
+
     useEffect(() => {
         //加载
         abstractDesignerLoader.load();
@@ -101,6 +109,7 @@ const LowcodeView = (props: Props) => {
         const { entity } = await HcserviceV3.requestDDpageData(ddpageId);
         const data = entity?.fieldMap || {};
         const { layerManager, canvasManager } = data["内容"] ? JSON.parse(fromBase64(data["内容"]) || '{}') : {};
+        handleEchartsConnect(layerManager?.elemConfigs || {});
         setLayerManager(layerManager);
         setCanvasConfig(canvasManager);
         setLoading(false);